Kosmik

# Kosmik — Style Reference
> Warm orange accent on bright canvas
Theme: light

Kosmik's design system uses a bright, inviting canvas with a single vibrant orange as its brand accent. Typography is a key element, with a mix of custom fonts offering both robust headlines and nuanced body text. Components are light, favoring subtle shadows and rounded edges, creating an approachable and focused interface. The overall impression is one of clarity and warmth, with functional elements highlighted rather than aggressively asserted.

## Colors
| Name | Value | Role |
|------|-------|------|
| Canvas White | `#ffffff` | Page backgrounds, clean element surfaces, default button fills |
| Buttermilk | `#fff8f5` | Subtle background for cards and secondary page sections, providing slight visual separation from the main canvas |
| Midnight Graphite | `#000000` | Primary text color for maximum contrast, strong borders, and most icons |
| Charcoal | `#3c3c3c` | Secondary text for headings and body content, offering a slightly softer contrast than Midnight Graphite |
| Soft Gray | `#6a6a6a` | Muted text, helper text, and subtle borders, for less prominent information |
| Marigold Burst | `#f57127` | Primary action backgrounds, prominent headlines, and brand accents — signals interaction and importance |

## Typography
| Family | Role |
|--------|------|
| Americane | Prominent headlines, display text. The tight letter-spacing at smaller sizes keeps it compact, while larger sizes command attention without being overbearing. |
| Kosmik SF Compact Display | Body text and secondary titles. The slightly increased letter-spacing aids readability in informational blocks. |
| SuperBlue | Versatile for body copy and subtle headings. The light weight (300) offers an airy feel, balanced by regular and bold for emphasis. |
| system-ui, sans-serif | Default UI elements like navigation links, captions, and utility text for efficiency. |