Applications
Web
A consistent system at every size.
Use these specifications for TeraRecon web pages, alongside the logo, color, type and layout guidance.
Build a readable web page
Dark panels
White on Deeper Cobalt
Use #3800AB for flat dark bands and panels.
Keep the frame consistent
Content width: at most 1568 px. Panel corners: 24 px; nested cards: 16 px.
Use the responsive gutters
40 px at 992 px and wider; 24 px at 768–991 px; 16 px below 768 px.
Give the footer its own treatment
One Charcoal panel, the utility bar included, with a thin White line above the copyright. White headings and copyright; Bone text and links.
Use a responsive type scale
| Role | 992 px and wider | 768 to 991 px | Below 768 px | Weight |
|---|---|---|---|---|
| Display | 88 | 72 | 48 | ExtraLight 200 |
| Heading 1 | 64 | 56 | 40 | ExtraLight 200 |
| Heading 2 | 48 | 40 | 32 | ExtraLight 200 |
| Heading 3 | 32 | 28 | 24 | ExtraLight 200 |
| Heading 4 | 24 | 22 | 20 | ExtraLight 200 |
| Lead | 22 | 20 | 18 | Regular 400 |
| Body | 18 | 16 | 16 | Regular 400 |
| Small | 16 | 14 | 14 | Regular 400 |
| Label and button | 14 | 12 | 12 | SemiBold 600 |
| Chip | 14 | 12 | 12 | SemiBold 600 |
| Navigation | 16 | 16 | 16 | Regular 400 |
Headings: Public Sans Extra Light, tracking −0.02 em. Body: Regular, tracking −0.01 em. Labels, chips and buttons: SemiBold. Card titles follow the heading treatment.
Keep spacing consistent
| Space | 992 px and wider | 768 to 991 px | Below 768 px |
|---|---|---|---|
| Panel padding, all four sides | 48 | 32 | 24 |
| Between blocks in a panel | 24 | 24 | 16 |
| After a heading group | 48 | 32 | 32 |
| Between lines of text (paragraphs, list items) | 16 | 16 | 16 |
| Between columns | 32 | 24 | 16 |
| Body text measure | 68 characters | 68 characters | 68 characters |
Left-align text. Centered treatments are reserved for statistic cards, the product explorer, heroes with their own alignment settings and form buttons.
Special treatments
Category cards and product chips
White copy stays on the Cobalt end of a category gradient, within 76% of the card width. Use the text-safe gradient.
Product chips use SemiBold at 14 / 12 / 12 px. Their category pairings are Charcoal on Aqua, White on Violet and Charcoal on Orchid. The Violet and Orchid treatments have limited small-text contrast; reserve them for brand-name chips.
Particle flow on light areas
Deeper Cobalt pills use a Cyan background. Use this pairing when a field sits on a light panel or fades out of a Cobalt panel.
Clinical-area colors
Colors mark the area through outlines, underlines and dots; text remains Charcoal.
#D6333D#AE7F2A#316E6B#BB5A26#851E26#769424