Mint
--color-brand-mint
#56D6B7
Identity, normal action, current data, connection, and gradient start.
Colors
Canonical identity colors stay visible alongside the variants required for readable normal text.
Brand
Stable identity primitives. Readable variants adapt them to normal text.
Violet
--color-brand-violet
#7B61FF
Selection, interpretation, identity endpoint, and gradient end.
Blue
--color-brand-blue
#007AFF
Information, reference, previous period, and explicit third category.
Dark surfaces and ink
Product-native fields, panels, dividers, and text.
Canvas
--color-surface-dark
#000000
Maximum-depth product and illustration field.
Panel
--color-panel-dark
#16161D
Primary card, navigation, table, modal, and diagram panel.
Raised panel
--color-panel-dark-raised
#222227
Hover, nested, or differentiated dark surface.
Divider
--color-divider-dark
#38383A
Navigation, axis, and quiet boundary.
Strong divider
--color-divider-dark-strong
#333333
Stronger table or panel boundary.
Primary ink
--color-text-on-dark
#FFFFFF
Main copy, essential labels, and active icons.
Secondary ink
--color-text-on-dark-muted
#8A8A8E
Metadata, axes, inactive labels, and annotations.
Light surfaces and ink
Editorial fields and semantic grouping surfaces.
Canvas
--color-surface-light
#FFFFFF
Main light field and ordinary light card.
Primary ink
--color-text-on-light
#16161D
Headlines, body copy, icons, and controls.
Secondary ink
--color-text-on-light-muted
#626A78
Supporting copy, captions, axes, and visible boundaries.
Pale mint
--color-surface-context
#E6F9F1
Owned context, coordination, or availability grouping.
Pale violet
--color-surface-agent
#E0D8FE
Agent, loop, memory, or interpretation grouping.
Pale blue
--color-surface-info
#D8EBFE
Permission, system, reference, or comparison grouping.
Decorative divider
--color-divider-light
#D9DCE2
Noninteractive separation only; not a sufficient control boundary.
Readable accents
Normal-text and control variants for accessible foreground/background pairs.
Mint on light
--color-text-mint-light
#287D69
Mint text, link, outline, and focus on white.
Violet on light
--color-text-violet-light
#6F52E5
Violet normal text or a filled control carrying white text.
Violet on dark
--color-text-violet-dark
#9C88FF
Violet normal text on
Blue on light
--color-text-blue-light
#0066CC
Blue normal text and links on white.
Blue on dark
--color-text-blue-dark
#0A84FF
Blue normal text on
Status
Pair every status color with a label, icon, shape, or line style.
Success fill
--color-success
#34C759
Product success fill or non-text mark.
Success text on light
--color-success-text-light
#208637
Normal success text on white.
Error fill
--color-error
#FF3B30
Product error or destructive fill and mark.
Error text on light
--color-error-text-light
#D70015
Normal error text on white.
Warning fill
--color-warning
#FFCC00
Warning fill with dark ink.
Warning text on light
--color-warning-text-light
#765A00
Normal warning text on white.
Light and dark material
The product-native dark system and editorial light system share semantic color while using different depth cues.
Current context
74.11 bpm
Owned context
One layer, scoped access
Gradients
Use gradients for identity, selected context, or transformation—not as an ambient page treatment.
Brand diagonal
--gradient-brand-diagonal
linear-gradient(135deg, #56D6B7 0%, #7B61FF 100%)
Identity, selected context, active transformation, or owned core.
Brand vertical
--gradient-brand-vertical
linear-gradient(180deg, #56D6B7 0%, #7B61FF 100%)
Logo-like mark, icon, or short gradient text.
Brand wash
--gradient-brand-wash
linear-gradient(45deg, rgba(86,214,183,.10), rgba(123,97,255,.10))
Bounded dark card wash, never a page default.
Typography by surface
Hierarchy is shared; families and exact roles remain appropriate to each medium.
Context Mobile
Context should feel exact.
San Francisco / iOS system
Roles: largeTitle, title, title2, title3, headline, subheadline, body, callout, footnote, caption, caption2
Use semantic styles and Dynamic Type. Use monospaced digits for aligned metrics and time.
Context Web
Context should feel exact.
Rubik
Roles: 12px metadata; 14px controls and rows; 16px body; 18px feature title; 20–24px strong title
Regular, medium, and semibold carry routine hierarchy. Use tabular numerals for aligned data.
Fulcra Website
Context should feel exact.
Rubik / DM Sans / Roboto Mono
Roles: Rubik display and UI; DM Sans editorial body; Roboto Mono technical values
Keep display copy short, body copy readable, and monospace content-specific.
Rhythm, shape, and depth
A shared 4-unit rhythm supports platform-specific density and editorial breathing room.
4px
Hairline-adjacent and very dense internal relationship.
8px
Compact controls and repeated dense gaps.
12px
Mobile card internals and compact section padding.
16px
General control and card padding.
24px
Major card padding and product section separation.
32px
Larger group separation.
48px
Website phone section interval.
64px
Website tablet section interval.
96px
Website wide editorial section interval.
Radii
Compact control · 8px
Buttons, inputs, chips, and compact cards.
Standard card · 12px
Mobile cards, contextual web cards, and website cards.
Editorial panel · 16px
Spacious website panels and product frames.
Pill · 9999px
Pills, badges, and circular actions.
Depth
Default card
none
Prefer tonal fill and border separation.
Compact mobile control
0 4px 8px rgba(0,0,0,.24)
Bounded pill or search-action depth.
Website floating
0 12px 32px rgba(22,22,29,.12)
Floating dialog or media only.
Core contrast pairs
Ratios are recorded for the foreground and background values shown in each row.
| Pair | Preview | Foreground | Background | Ratio | Target | Result |
|---|---|---|---|---|---|---|
| Dark primary text | #FFFFFF |
#16161D |
18.00:1 | 4.5:1 | Pass | |
| Dark secondary text | #8A8A8E |
#16161D |
5.23:1 | 4.5:1 | Pass | |
| Dark mint action | #56D6B7 |
#16161D |
10.03:1 | 4.5:1 | Pass | |
| Canonical violet normal text on dark | #7B61FF |
#16161D |
4.28:1 | 4.5:1 | Fail | |
| Readable violet text on dark | #9C88FF |
#16161D |
6.33:1 | 4.5:1 | Pass | |
| Light primary text | #16161D |
#FFFFFF |
18.00:1 | 4.5:1 | Pass | |
| Light secondary text | #626A78 |
#FFFFFF |
5.45:1 | 4.5:1 | Pass | |
| Mint text and focus on light | #287D69 |
#FFFFFF |
4.97:1 | 4.5:1 | Pass | |
| Canonical violet normal text on light | #7B61FF |
#FFFFFF |
4.20:1 | 4.5:1 | Fail | |
| Readable violet text on light | #6F52E5 |
#FFFFFF |
5.23:1 | 4.5:1 | Pass | |
| Canonical blue normal text on light | #007AFF |
#FFFFFF |
4.02:1 | 4.5:1 | Fail | |
| Readable blue text on light | #0066CC |
#FFFFFF |
5.57:1 | 4.5:1 | Pass | |
| Decorative light divider | #D9DCE2 |
#FFFFFF |
1.37:1 | 3.0:1 | Fail | |
| Interactive light boundary | #626A78 |
#FFFFFF |
5.45:1 | 3.0:1 | Pass | |
| Success text on light | #208637 |
#FFFFFF |
4.64:1 | 4.5:1 | Pass | |
| Error text on light | #D70015 |
#FFFFFF |
5.38:1 | 4.5:1 | Pass | |
| Warning text on light | #765A00 |
#FFFFFF |
6.50:1 | 4.5:1 | Pass |
Using the reference
The cross-surface reference is a map, not a command to make every surface identical.
- Preserve meaning.
Mint carries normal action and owned context; violet carries selection and interpretation; blue carries information or comparison. - Keep canonical and readable colors distinct.
Do not silently replace identity primitives when only a text pairing needs adjustment. - Use tonal depth first.
Prefer surface, border, and whitespace hierarchy before adding shadow or glow. - Respect the medium.
Mobile, web application, website, deck, and illustration use related but nonidentical typography and density. - Never rely on color alone.
Pair status, chart, selection, and permission colors with labels, shapes, icons, or line styles. - Check the surface DESIGN.md.
When a local rule differs from this overview, the surface-specific reference wins.