Foundations
Color
Two colors do the work. A deep teal ink carries authority and a single electric cyan marks momentum. Everything else stays out of the way. Click any value to copy it.
Core palette
Three official brand colors anchor everything.
Upryt Ink
Primary brand dark. Headings, primary buttons, footer, dark surfaces.
Upryt Cyan
Accent. The Uptick, highlights, focus states, dark mode links.
Paper
Light backgrounds, text on dark surfaces.
Ink ramp
A teal-cast neutral scale derived from Upryt Ink at hue 180. It replaces generic gray across the entire system, which keeps every surface subtly on-brand.
ink-950
Dark mode page background
ink-900
Brand core. Light mode headings, dark mode cards
ink-800
Dark mode raised surfaces, hover states
ink-700
Light mode body text
ink-600
Secondary text
ink-500
Muted text, captions (AA on white)
ink-400
Placeholders, disabled text
ink-300
Borders, dividers (strong)
ink-200
Borders, dividers (default)
ink-100
Subtle fills, table stripes
ink-50
Mist. Light mode alt-section background
Cyan ramp
Raw brand cyan fails contrast for text on light backgrounds at 1.29:1 on white. On light, interactive text uses cyan-800. On dark, raw cyan is fully accessible at 13.4:1 and becomes the link color.
cyan-950
Deep accent, dark text on cyan tints
cyan-900
Light mode link hover, pressed
cyan-800
Light mode links and interactive text (AA)
cyan-700
Icons and large decorative accents on light
cyan-600
Decorative only on light. Borders, underlines
cyan-500
Brand cyan. Uptick, accent buttons, dark mode links
cyan-400
Dark mode hover states
cyan-300
Dark mode secondary accent
cyan-200
Soft fills
cyan-100
Highlight backgrounds, selected states
cyan-50
Tinted section backgrounds
Semantic colors
All semantic text colors pass WCAG AA on white.
Success
Confirmation, positive deltas
Warning
Caution, pending states
Error
Errors, destructive actions
Info
Informational notices
Mode tokens
Every surface role resolves to one value in light and one in dark. Build against roles, never raw hex.
| Role | Light | Dark |
|---|---|---|
| Page background | #FDFFFF | #121C1C |
| Section background (alt) | #F1F4F4 | #1D2C2C |
| Card surface | #FFFFFF | #1D2C2C |
| Raised / hover surface | #F1F4F4 | #2B4040 |
| Heading text | #1D2C2C | #FDFFFF |
| Body text | #3C5353 | #B9C6C6 |
| Muted text | #627A7A | #8FA3A3 |
| Border | #C2CBCB | #324444 |
| Link | #008285 | #00FBFF |
| Link hover | #036263 | #75FDFF |
| Focus ring | #00FBFF | #00FBFF |
Contrast
Every pairing below was verified against WCAG 2.1. Body combinations meet AA, most meet AAA.
Paper on ink-950
Default dark surface pairing.
Ink on Upryt Cyan
The only approved cyan fill pairing.
Cyan-800 on white
Links and interactive text on light.
Rules
Do
- Let ink and paper do 95% of the work. Cyan is the punctuation.
- Use cyan-800 for links and interactive text on light backgrounds.
- Use the teal-cast neutrals everywhere a gray would go.
- Rely on surface steps in dark mode instead of shadows.
Don't
- Set text in raw cyan #00FBFF on light backgrounds.
- Introduce additional accent colors.
- Use pure gray or pure black anywhere in the system.
- Rely on color alone to signal an error state.