# Gazette Intel design system

Version 0.2. This file is the copyable source of truth for the Gazette Intel brand and interface. It is served at `/DESIGN.md` on gazetteintel.com and mirrored visually at `/design`.

## Brand

- Product name: Gazette Intel (always two words in user-facing text).
- Monogram: GI. The open G stands for search and discovery, the blue I for the verified source.
- Owner: GattyWorks.
- Voice: calm, evidence-first, specific. No hype vocabulary, no em or en dashes, no curly quotes. Claims stay tied to the official record.

## Wordmark

Set the wordmark in General Sans Semibold with tight tracking.

| Variant | Use |
| --- | --- |
| Primary | Record ink `#171816` on Archive paper `#F2F0E9` |
| Inverse | Archive paper `#F2F0E9` on Record ink `#171816` |
| Accent | Verified blue `#0A66C2` on Archive paper, for editorial moments only |
| Monogram only | `gi.svg` for app icons, favicons, and compact product surfaces |
| Display | Oversized, center-aligned, cropped by the container edge (footer treatment), letter-spacing -0.06em, line-height 0.72 |

Rules:

- Pair the monogram with the name at first touchpoints; the mark may stand alone in product chrome.
- Do not stretch, recolor outside the palette, or add effects to the mark.
- Icon variants: `gi.svg` (ink), `gi-light.svg` (paper), `gi-blue.svg` (blue), `gi-muted.svg` (muted).

## Color tokens

Light theme:

| Token | Value | Role |
| --- | --- | --- |
| `--ink` | `#171816` | Text, primary surfaces |
| `--paper` | `#F2F0E9` | Page background |
| `--surface` | `#FBFAF5` | Cards, panels |
| `--line` | `#D7D5CE` | Borders, dividers |
| `--signal` | `#8DC2FF` | Selected and search states, highlights |
| `--green` | `#0A66C2` | Primary interaction color (Verified blue) |
| `--muted` | `#676963` | Secondary text |

Dark theme:

| Token | Value |
| --- | --- |
| `--ink` | `#F1F0E9` |
| `--paper` | `#111210` |
| `--surface` | `#191A17` |
| `--line` | `#343530` |
| `--signal` | `#8DC2FF` |
| `--green` | `#75B5F7` |
| `--muted` | `#A7A9A1` |

The footer is a deliberate single-look block in both themes: Signal blue `#8DC2FF` background with near-black `#14181C` text.

## Typography

Fonts load from Fontshare: General Sans 400 and 600, Gambetta 400 and 500. Nothing heavier than 600 is loaded; bold elements are clamped to 600.

| Style | Face | Notes |
| --- | --- | --- |
| Display and headlines | General Sans 600 | Tracking -0.05em to -0.075em, line-height 0.9 |
| Editorial emphasis | Gambetta 500 | Used inside headlines via `em`, colored `--green` |
| Interface | General Sans 400/600 | 11px to 14px in product chrome |
| Long-form body | Gambetta 400 | 13px to 20px, line-height 1.5 |
| Code and data | ui-monospace stack | API and MCP samples |

## Shape and depth

- Radius: 8 to 13px for controls and cards, 16px for large shells, 999px for pills and buttons.
- Borders: 1px `--line`. Prefer borders over shadows; shadows stay soft and rare.
- The product demo shell is an application window: chrome header, tab strip, sidebar, stage, footer.

## Motion

- Library: motion.dev. Ease `[0.22, 0.61, 0.36, 1]`.
- Reveals: fade-rise 16 to 34px, staggered 0.09 to 0.16s.
- Typing: composer-style with inline caret and a send press.
- AI states: thinking dots before results, filters built chip by chip, explicit confirmation before a watch is created.
- Theme switch: View Transitions circular reveal from the toggle center, 700ms ease-in-out, with a sun and moon crossfade.
- Every animation respects `prefers-reduced-motion`; final content always exists in HTML.

## Interface principles

1. Evidence first: every answer, alert, and API record cites the official Gazette PDF with a page number.
2. One continuous surface: modes change inside a persistent shell, never as separate cards.
3. Restraint: off-white paper, charcoal text, one interaction blue. No gradients-as-decoration, no glassmorphism, no AI sparkle cliches.
4. The visitor should understand discover, watch, and integrate within ten seconds of seeing the demo.