AIFor.ms uses a dark theme with a deep midnight blue background, bright cyan primary, and soft coral accent.
Core Tokens
| Token | Hex | Role |
|---|
primary | #00B4D8 | Main action color — buttons, links, active states |
primaryDark | #0096B7 | Pressed/hover state for primary |
accent | #FF6B6B | Emphasis, attention, secondary CTA |
background | #0A1628 | App background (deep midnight blue) |
surface | #132240 | Card/surface background |
surfaceLight | #1A2D50 | Elevated surface |
surfaceHighlight | #223A60 | Highlighted/hovered surface |
text | #F0F4F8 | Primary text |
textSecondary | #8BA4C4 | Secondary/supporting text |
textMuted | #5A7399 | Disabled/muted text |
border | #1E3355 | Border lines |
Semantic Tokens
| Token | Hex | Role |
|---|
success | #4ADE80 | Success feedback |
warning | #FBBF24 | Warning feedback |
error | #F87171 | Error feedback |
recording | #FF4757 | Active recording indicator |
recordingGlow | rgba(255, 71, 87, 0.3) | Recording glow effect |
OKLCH Color Ramps
Each core color has a perceptually uniform shade scale (50–950) generated in the OKLCH color space. OKLCH ensures that the same lightness value produces the same perceived brightness across all hues.
Primary Ramp
| Shade | Hex | OKLCH |
|---|
| 50 | #B2FFFF | oklch(97.0% 0.085 219.0) |
| 100 | #A1F7FF | oklch(93.0% 0.090 219.0) |
| 200 | #7FDDF9 | oklch(85.0% 0.098 219.0) |
| 300 | #50BEDC | oklch(75.0% 0.108 219.0) |
| 400 | #009FC0 | oklch(65.0% 0.118 219.0) |
| 500 | #0081A4 | oklch(55.0% 0.129 219.0) |
| 600 | #006381 | oklch(45.0% 0.118 219.0) |
| 700 | #004560 | oklch(35.0% 0.108 219.0) |
| 800 | #002A41 | oklch(25.0% 0.098 219.0) |
| 900 | #00172C | oklch(18.0% 0.091 219.0) |
| 950 | #00081B | oklch(12.0% 0.084 219.0) |
Ramp Usage Guide
- 50–200: Tinted backgrounds, subtle fills, hover states in a light theme
- 300–400: Secondary elements, borders, disabled states
- 500: Base shade — closest to the original brand color
- 600–700: Darkened variants for pressed states, active elements
- 800–950: Deep backgrounds, dark theme surfaces
Dark Theme Mapping
| App Token | Recommended Ramp Shade |
|---|
background | neutral-950 or neutral-900 |
surface | neutral-800 |
surfaceLight | neutral-700 |
primary | primary-500 |
accent | accent-400 |
Source Files
- CSS custom properties and OKLCH equivalents are available for use outside React Native.