# Lycato design system

The complete visual authority is `Lycato Design.zip`. `BRAND.md` contains the repository canon; this file is the implementation checklist.

## Two shells

- App: dark aubergine rail and a light working interior. Under 900px the rail collapses.
- Marketing: aubergine bloom hero and light body. Under 760px it becomes one column.

After hours follows the operating system. There is no appearance switch in the product.

## Type

| Role | Typeface | Value |
|---|---|---|
| Display XL | Newsreader | 200 76px/.96, -0.032em |
| Display L | Newsreader | 200 46px/1.05, -0.026em |
| Display M | Newsreader | 300 26px/1.2 |
| Body | Schibsted Grotesk | 400 16px/1.65 |
| UI | Schibsted Grotesk | 500 14px/1.4 |
| Label | Schibsted Grotesk | 600 10.5px/1, 0.1em uppercase |

JetBrains Mono is reserved for IDs, domains, email addresses, times, and tabular figures.

## Geometry

Every container has one tightened corner. Rotate that corner across siblings with `nth-child`; never hand-write four unrelated radii. Cards use auto-fit grids: `repeat(auto-fit, minmax(270px, 1fr))`.

Component spacing follows the Open Design foundation scale: 4, 8, 12, 16, 24, and 32px. Nested controls and ordinary surfaces use the 8, 12, 16, and 24px radius ladder. Signature Lycato containers retain the asymmetric `--r-*` geometry from `BRAND.md`; the two ladders are deliberately separate so interoperability does not flatten the brand.

Minimum target size is 44px. Every text-bearing flex child receives `min-width: 0`. Money, counts, dates, and percentages use tabular numerals.

## Components

- Primary button: citron, aubergine text, one per view, verb label.
- Secondary: aubergine, quiet interior, or dark glass.
- Card: white working surface or dark raised surface; only linked cards lift.
- Input: sunken background, explicit label, rust sentence on invalid state.
- Status: colour plus a word. Mint means confirmed; rust means founder attention.
- Rail item: citron tint and icon when active.
- Banner: one fact and at most one action.
- Empty state: heading, reason, and one verb. Never a dash or blank space.
- Sheet: focus trapped, Escape and overlay close, no spring or overshoot.

## Motion

Use only 120ms quick, 260ms settle, 420ms arrive, and 1600ms Founding ceremony. Curves are `cubic-bezier(.32,.72,0,1)` and `cubic-bezier(.22,1,.36,1)`. Reduced motion removes no information.

## Accessibility and quality

- WCAG 2.2 AA.
- Citron is 1.6:1 on white and never carries text there.
- Text on dark uses only 1, .70, and .66 opacity tiers.
- Focus ring: 2px with 3px offset; label purple on light, citron on dark.
- Status never relies on colour alone.
- Skeletons occupy the final answer shape; no spinner alone.
- Every screen has empty, loading, error, offline, and success treatment.
- No third-party script in the app shell.
- No JavaScript animation loop for ambient effects.

## Content

Use sentence case. Currency is GBP with two decimals in-product and whole pounds in marketing. Dates are `3 Oct 2026`; times are 24-hour; relative time stops after 24 hours. Never truncate money, dates, IDs, domains, or email addresses in the middle.

Every user-visible sentence follows the vocabulary and voice in `BRAND.md`: fact, consequence, one way out.

## Perceptual grammar

Gestalt principles are structural rules, not decoration:

- Proximity is the first grouping cue. Labels sit with their controls; headings sit with their section; unrelated tasks get space before they get a box.
- Common region is reserved for genuinely independent units such as a draft preview, a warning, or a destructive zone. Do not wrap every paragraph in a card.
- Similarity means repeated objects share one grammar. Readiness rows, activity rows, status pills, and navigation items do not invent local variants.
- Continuity follows task order: source order, visual order, keyboard order, and focus order stay aligned.
- Figure–ground creates hierarchy. Dark aubergine frames navigation and orientation; the light interior carries sustained work; citron identifies the primary next action.
- Common fate is used only for real state change. Ambient decoration, static cards, and status indicators do not move continuously.
- Closure may simplify familiar marks and illustrations, but never removes a label required to understand a control or status.

Responsive layouts recompose around purpose. The desktop app rail becomes a compact top frame and horizontally readable section navigation; two-column work areas become a single task sequence; controls stack without changing source order. At 320px, 200% text, and 400% reflow, no essential text, status, or action may require horizontal page scrolling.

Before release, each surface is checked at desktop, tablet, and mobile widths; with keyboard-only navigation and visible focus; with reduced motion; and with zero, loading, error, success, and unavailable states distinguished in words. Visual prototypes must visibly say that they are prototypes, label sample data, and disable actions that have no backing behavior.