Rounded cards
One subject per panel. Align related edges and keep gutters consistent.
Visual identity
Graphic language
A small set of purposeful devices.
Use familiar shapes to organize information. Let particle flow or precision marks support the message.
Build with familiar shapes
42Illustrative statistic
A statistic
A large, light number with a smaller label. Give it a quiet background.
02
Section numbers
A compact numbered obround that marks a section.
ADVANCED VISUALIZATION
Category chips
Small outlined labels. Keep them secondary to the main content.
Advanced visualization
Descriptor tags
A small rounded rectangle with a clear label or status.
Action buttons
An outlined obround with a clear action and a filled circle arrow.
Choose a particle field
One pill color, one background
Keep the pills flat: no third color, tints or gradients in the pills, and never White pills.
Keep anatomy recognizable
Use high contrast, Cyan on Bone or Cobalt, where a 3D rendering is also present.
Frame the field
Usually use the Cobalt Gradient on screen. Keep flow inside a rounded card; wall bands and apparel are exceptions.
Use supplied or approved particle-flow artwork. Ask Steven for production files. Fade a field with a background-colored overlay, from opaque to transparent, so the pills keep their color.
Use precision marks sparingly
Precision marks
Use these subtle marks along an edge. Keep them separate from particle flow in a composition.
Production detail
Particle geometry
| Property | Value |
|---|---|
| Lattice | Hexagonal: rows 0.866 p apart, alternate rows offset p/2 |
| Size | One value s, 0 to 1, drives every dimension; a field is one grayscale size map |
| Fine pills (most fields) | Width 0.073 + 0.136 s, length 0.306 + 0.908 s: aspect 4.2 to 5.8 |
| Bold pills (stand-alone Cyan-on-light image tiles) | Width 0.190 + 0.137 s, length 0.670 + 0.536 s |
| Longest pill | 1.21 p, so neighbors stay within about 27° of each other |
| Angle (fine) | 108 − 241 s + 96 s² degrees from horizontal: large pills lie flat, small ones vary |
| Angle (bold) | 78 − 55 s degrees |
| Whole field | May be mirrored, or turned by up to about 20° |
Product tags and edge strips
A product tag pairs a Cobalt-to-category outer obround with a solid category chip. Use Charcoal on Aqua, White on Violet and Charcoal on Orchid.
A thin gradient strip may run along the top, bottom or left edge of a panel. Keep it out of the message area.