# Amevia Color and Type System

## Color palette

### Brand colors

| Name | HEX | RGB | HSL | Usage | Contrast notes |
|------|-----|-----|-----|-------|----------------|
| Amevia Violet | `#7C3AED` | 124, 58, 237 | 262°, 83%, 58% | Primary brand, gradient start | Use with white text for large elements only |
| Amevia Indigo | `#4F46E5` | 79, 70, 229 | 243°, 75%, 59% | Secondary, links on dark | 4.6:1 on white for large text |
| Amevia Blue | `#3B82F6` | 59, 130, 246 | 217°, 91%, 60% | Gradient mid-point, accents | Decorative; pair with dark text on light |
| Amevia Cyan | `#06B6D4` | 6, 182, 212 | 188°, 94%, 43% | Accent, gradient end | Use sparingly; verify contrast |
| Amevia Navy | `#071126` | 7, 17, 38 | 222°, 69%, 9% | Dark surfaces, wordmark | 16:1 with white text |
| Amevia Night | `#0A1430` | 10, 20, 48 | 224°, 66%, 11% | Dark mode base | 14:1 with white text |

### Gradients

| Name | Value | Usage |
|------|-------|-------|
| Brand gradient | `#7C3AED → #3B82F6 → #06B6D4` | Symbol, hero accents, CTAs |
| Brand soft | 12% opacity brand gradient | Background washes, cards |
| Dark gradient | `#071126 → #0A1430` | Dark sections, hero backgrounds |

### Neutral grayscale

| Name | HEX | RGB | HSL | Usage |
|------|-----|-----|-----|-------|
| Neutral 50 | `#F8FAFC` | 248, 250, 252 | 210°, 40%, 98% | Page backgrounds |
| Neutral 100 | `#F1F5F9` | 241, 245, 249 | 210°, 40%, 96% | Secondary surfaces |
| Neutral 200 | `#E2E8F0` | 226, 232, 240 | 214°, 32%, 91% | Borders |
| Neutral 300 | `#CBD5E1` | 203, 213, 225 | 213°, 27%, 84% | Disabled borders |
| Neutral 400 | `#94A3B8` | 148, 163, 184 | 215°, 20%, 65% | Placeholder text |
| Neutral 500 | `#64748B` | 100, 116, 139 | 215°, 16%, 47% | Secondary text |
| Neutral 600 | `#475569` | 71, 85, 105 | 215°, 19%, 35% | Muted text (light mode) |
| Neutral 700 | `#334155` | 51, 65, 85 | 215°, 25%, 27% | Strong muted text |
| Neutral 800 | `#1E293B` | 30, 41, 59 | 217°, 33%, 17% | Dark surfaces |
| Neutral 900 | `#0F172A` | 15, 23, 42 | 222°, 47%, 11% | Primary text (light mode) |

### Semantic colors

| Name | HEX | RGB | HSL | Usage | Contrast notes |
|------|-----|-----|-----|-------|----------------|
| Success | `#059669` | 5, 150, 105 | 160°, 94%, 30% | Confirmations, online status | 4.5:1 on white |
| Success BG | `#ECFDF5` | 236, 253, 245 | 152°, 81%, 96% | Success alert backgrounds | — |
| Warning | `#D97706` | 217, 119, 6 | 32°, 95%, 44% | Cautions | 4.5:1 on white |
| Warning BG | `#FFFBEB` | 255, 251, 235 | 48°, 100%, 96% | Warning alert backgrounds | — |
| Error | `#DC2626` | 220, 38, 38 | 0°, 72%, 51% | Errors, destructive actions | 4.5:1 on white |
| Error BG | `#FEF2F2` | 254, 242, 242 | 0°, 86%, 97% | Error alert backgrounds | — |
| Info | `#0284C7` | 2, 132, 199 | 199°, 98%, 39% | Informational messages | 4.5:1 on white |
| Info BG | `#EFF6FF` | 239, 246, 255 | 214°, 100%, 97% | Info alert backgrounds | — |

### Light-mode surfaces

| Token | Value | Usage |
|-------|-------|-------|
| `--surface-page` | `#F6F8FC` | Page background |
| `--surface-primary` | `#FFFFFF` | Cards, modals |
| `--surface-secondary` | `#F8FAFC` | Nested surfaces |
| `--surface-elevated` | `#FFFFFF` | Dropdowns, popovers |

### Dark-mode surfaces

| Token | Value | Usage |
|-------|-------|-------|
| `--surface-page` | `#071126` | Page background |
| `--surface-primary` | `#0A1430` | Cards, modals |
| `--surface-secondary` | `#0F1A3A` | Nested surfaces |
| `--surface-elevated` | `#111D42` | Dropdowns, popovers |

### Text colors

| Token | Light mode | Dark mode | Usage |
|-------|-----------|-----------|-------|
| `--text-primary` | `#0F172A` | `#F1F5F9` | Headings, body |
| `--text-secondary` | `#64748B` | `#94A3B8` | Supporting text |
| `--text-muted` | `#94A3B8` | `#64748B` | Captions, placeholders |
| `--text-link` | `#2563EB` | `#60A5FA` | Links |

### Border colors

| Token | Light mode | Dark mode |
|-------|-----------|-----------|
| `--border-default` | `#E2E8F0` | `#1E293B` |
| `--border-subtle` | `#F1F5F9` | `#0F1A3A` |
| `--border-strong` | `#CBD5E1` | `#334155` |

## Design tokens

All colors are defined as CSS custom properties in [`styles/tokens.css`](../styles/tokens.css). Use tokens in components — do not hard-code hex values.

```css
.my-element {
  background: var(--surface-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
}
```

Toggle dark mode with `data-theme="dark"` on the root element.

## Typography

### Font families

| Role | Font | Weights | Usage |
|------|------|---------|-------|
| Display | Plus Jakarta Sans | 600, 700 | Headlines, hero text, brand book editorial |
| UI / Body | Inter | 400, 500, 600 | Interface, body copy, wordmark |
| Monospace | IBM Plex Mono | 500 | Code, technical values, token display |

All fonts are loaded via Google Fonts through `next/font/google`.

### Type scale

| Role | Size | Line height | Weight | Letter spacing |
|------|------|-------------|--------|----------------|
| Display | clamp(2.5rem, 5vw, 4rem) | 1.1 | 700 | -0.02em |
| H1 | clamp(2rem, 4vw, 3rem) | 1.15 | 700 | -0.02em |
| H2 | clamp(1.75rem, 3vw, 2.25rem) | 1.2 | 600 | -0.01em |
| H3 | clamp(1.375rem, 2.5vw, 1.75rem) | 1.25 | 600 | 0 |
| H4 | 1.25rem | 1.3 | 600 | 0 |
| H5 | 1.125rem | 1.4 | 600 | 0 |
| H6 | 1rem | 1.4 | 600 | 0 |
| Body | 1rem | 1.5 | 400 | 0 |
| Body small | 0.875rem | 1.5 | 400 | 0 |
| Label | 0.8125rem | 1.4 | 500 | 0.04em |
| Button | 0.875rem | 1 | 600 | 0 |
| Caption | 0.75rem | 1.4 | 400 | 0.02em |
| Tagline | 0.75rem | 1.4 | 600 | 0.12em |

### Responsive typography

- Display and heading sizes use `clamp()` for fluid scaling
- Body text remains 16px (1rem) minimum for readability
- Line lengths should not exceed 65–75 characters for body copy

### Light and dark mode

- Light mode: `--text-primary` on `--surface-page`
- Dark mode: `--text-primary` (#F1F5F9) on `--surface-page` (#071126)
- Links shift from `#2563EB` to `#60A5FA` in dark mode
- Muted text lightens slightly in dark mode for legibility

### Wordmark typography

The "Amevia" wordmark uses **Inter SemiBold (600)**, title case, with -0.02em letter-spacing.

---

*Amevia is a product by Dioartis.*