Jam

# Jam — Style Reference
> Midnight command center, softly glowing
Theme: dark

Jam's aesthetic is a 'developer's command center' — a dark, subdued interface with cool gray and violet tones providing a focused workspace. Typography is compact and precise, minimizing visual noise. A vibrant green accent color serves as a functional 'on' switch, highlighting critical actions and active states. Surfaces are subtly layered with soft, rounded corners, creating a sense of approachability within the dark theme.

## Colors
| Name | Value | Role |
|------|-------|------|
| Midnight Ink | `#130f18` | Page background, primary text (dark theme), form field borders, subtle card borders |
| Deep Plum | `#21192a` | Card backgrounds, secondary surface elevation, primary navigation background |
| Moonless Slate | `#25292e` | Subtle decorative fills, minor navigation elements |
| Cloud Gray | `#e5e7eb` | Light text on dark backgrounds, primary borders, input field borders |
| Fog Whisper | `#8b94a3` | Secondary text, link text, icon fills |
| Pure White | `#ffffff` | Strong contrasting text on dark backgrounds, section titles, icon fills |
| Electric Green | `#73e5bf` | Green text accent for links, tags, and emphasized short phrases; Subtle background gradient for hero elements or special features; Vibrant secondary gradient for decorative backgrounds or graphical elements |
| Royal Violet | `#744ec2` | Decorative card backgrounds, accent fills |
| Soft Amethyst | `#947fac` | Muted icon details, subtle text accents |
| Lavender Mist | `#b89fd4` | Heading accents on dark backgrounds, specific body text highlights |
| Deep Aubergine | `#252542` | Muted text, subtle decorative borders, code block text |
| Vivid Grape | `#a37af5` | Icon strokes and fills, emphasized body text for key features |
| Glowing Mint | `#c5ffe7` | Green supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |
| Crimson Beam | `#ff4070` | Red wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Use as a supporting accent, not as a status color |
| Purple to Pink Gradient | `#a473f4` | Tertiary decorative gradient, often used for subtle shifts |

## Typography
| Family | Role |
|--------|------|
| SF Pro Text | Primary UI font for body text, navigation, buttons, and form elements. Its compact nature supports the focused, information-dense dark theme. |
| Oldschool Grotesk | Display font used for large, impactful headlines and key branding text. Its heavy weight and large scale create immediate visual presence against the dark background. |
| SF Mono | Monospaced font for code snippets, technical details, and certain data displays, maintaining alignment and readability for developers. |