# DRIFT — UI guidelines

Use these defaults for DRIFT websites and digital interfaces, alongside the AI brand brief. Keep practical actions clear and accessible; express premium quality through spacing, typography and restraint.

## Colour roles
| Token | Value | Use |
|---|---|---|
| background-dark | #0B0B0B | Main dark canvas |
| surface-dark | #1A1A1A | Cards, panels and fields |
| surface-raised | #2B2B2D | Hovered secondary surfaces |
| brand-forest | #1F3A34 | Supporting sections; primary action on light backgrounds |
| background-light | #E7E1DB | Light sections |
| text-on-dark | #E7E1DB | Main text on dark surfaces |
| text-muted-dark | #B8B5AF | Supporting text on dark surfaces |
| text-on-light | #0B0B0B | Main text on light surfaces |
| text-muted-light | #535D52 | Supporting text on sand |
| brand-copper | #B8734A | Accent, dark-surface links and primary fill on dark surfaces |
| border-dark | #858A80 | Required field and outlined-control boundaries on dark surfaces |
| border-light | #687164 | Required field and outlined-control boundaries on sand |
| divider-dark | #343733 | Decorative dividers only; not essential control boundaries |

Interaction shades below supplement the brand palette; do not use them to recolour the logo.

## Buttons
Use Montserrat Medium, 14–16px, sentence case, 1.2 line height. Minimum height 44px; padding 12px 20px; 2px corner radius; 1px borders where specified. No pill shapes, gradients, bevels or heavy shadows. Keep one visually dominant action per local action group.

| Button | Default | Hover | Pressed |
|---|---|---|---|
| Primary on dark | Fill #B8734A; text #0B0B0B | Fill #C98960; same text | Fill #AA6942; same text |
| Primary on sand | Fill #1F3A34; text #E7E1DB | Fill #294D43; same text | Fill #152D27; same text |
| Secondary on dark | Transparent; text #E7E1DB; border #858A80 | Fill #2B2B2D | Fill #1F3A34 |
| Secondary on sand | Transparent; text and border #1F3A34 | Fill #D8D1C9 | Fill #CAC2B8 |
| Tertiary | Underlined text link in the surface's link colour | As links below | As links below |

For forest sections, use the dark-surface button scheme. Use a solid surface beneath buttons placed near photography. Do not use white or sand text on a copper-filled button: use onyx text.

Disabled on dark: fill #2B2B2D, text #9B9D96, border #687164. Disabled on sand: fill #D8D1C9, text #687164, border #A0A398. Use the native disabled attribute, suppress click actions and explain unavailable actions when useful. Do not use global opacity to create disabled colours.

Loading: retain the button width, display a spinner plus meaningful text such as “Loading…”, set aria-busy and prevent duplicate submissions. Preserve readable contrast.

## Hyperlinks and navigation
- Dark backgrounds: #B8734A; hover #D99B72; pressed #C98960. Underline inline links, with 3px underline offset. Use these on onyx or charcoal. On forest or slate, use #D99B72 for default and pressed links, and #E7E1DB on hover; keep the underline.
- Sand backgrounds: #1F3A34; hover #294D43; pressed #152D27. Keep inline links underlined. Copper is too weak for normal-sized link text on sand.
- Navigation: sand text on dark, forest on sand. Indicate the current page with an underline or border as well as colour; use aria-current="page". Keep navigation labels concise.
- Use anchors for destinations and buttons for actions. A download link should name its file or format. Do not show arrows on every link; reserve them for meaningful direction or downloads.

## Focus, touch and motion
Every interactive control needs a visible keyboard focus state: 2px solid #E7E1DB on dark surfaces or #1F3A34 on sand, offset by 3px. Keep outlines unclipped. On imagery or mixed surfaces, add a contrasting backing so the ring remains visible. Never remove focus styling without a replacement.
Aim for at least 44 × 44px control targets. Use a 120–180ms transition for colour and border changes; respect prefers-reduced-motion. Do not animate essential information or rely on hover for access.

## Forms
Use a persistent visible label above each field, Montserrat Medium 14px. Input text should be 16px, with at least 44px field height and 12px padding. Use 2px corners and a 1px border.
- Dark: fill #1A1A1A; text #E7E1DB; border #858A80; placeholder #B8B5AF.
- Sand: fill #FFFFFF; text #0B0B0B; border #687164; placeholder #535D52.
- Hover: strengthen the border to the primary text colour. Focus: use the focus ring above, without shifting layout.
- Labels must remain visible when users type; placeholders are examples, not labels. Place help text below the field and associate it programmatically.
- Use native accessible checkboxes, radios and selects where practical. Selection must have a check, dot or explicit text as well as colour.
- On validation failure, preserve entered data, state the problem beside the field and explain how to fix it. Use aria-invalid and aria-describedby. Do not rely solely on a red border.

## Messages and status
These functional colours are UI-only, not additional brand identity colours. Use an icon and a plain-language label with every status. Keep body text in the normal surface text colour.
| Status | Accent on dark | Accent on sand |
|---|---|---|
| Success | #A8C5AD | #24523B |
| Warning | #E1BD7A | #6B491A |
| Error | #F0AAA0 | #8A3028 |
| Information | #ADC6D6 | #294F68 |

Use a thin accent border or icon, not a whole page of saturated colour. Announce asynchronous messages appropriately; reserve alerts for urgent errors. Confirm successful actions with specific text, for example “Your details have been saved,” only after success is verified.

## Layout, typography and components
- Playfair Display Regular or Medium for editorial headings. Montserrat Regular/Medium for interface text. Never use Playfair for small field labels or dense tables.
- Body: 16px or larger, line height 1.5–1.7. Labels: 14px. Reserve 12–13px for nonessential metadata.
- Space on a 4px base: 8, 12, 16, 24, 32, 48 and 64px. Prefer 24–32px panel padding on desktop and 16–24px on mobile.
- Cards: flat surfaces, restrained borders, 0–4px corners. Avoid decorative shadows and excessive nesting.
- Icons: simple, consistent 1.5–2px line weight at 20–24px size, with labels for ambiguous actions. Give icon-only controls accessible names.
- Tabs and toggles: distinguish selection with an underline, check or filled indicator; implement keyboard semantics appropriate to the component.
- Modals: clear title, visible close control, keyboard dismissal where safe, contained focus while open, and return focus to the trigger.
- Responsive layouts should reflow without horizontal scrolling. Check zoom, long labels, error messages and touch layouts.

## Before shipping
Check actual foreground/background combinations for WCAG AA contrast: at least 4.5:1 for normal text and 3:1 for large text and essential UI graphics. Check focus visibility, keyboard operation and accessible names. Decorative dividers and disabled controls have different contrast requirements; do not reuse their colours for active controls. These tokens are a starting system, not a claim that every possible composition is accessible.

## Spacious, relaxing rhythm
Use 88px vertical section padding on desktop and 56px on mobile. Leave 32–44px between section headings and content. Use 40px desktop panel padding and 24–28px on mobile. Separate button groups from following links by 28–32px, and leave 32–36px before a form group. Keep 12px between field labels and inputs and 16px between neighbouring buttons. Preserve generous space at responsive sizes; do not compress unrelated controls together to avoid wrapping. Calm pacing is part of the brand.

The brand kit webpage intentionally avoids numbered section labels. Use plain descriptive headings and generous space so the interface feels like a premium, relaxing spa rather than a presentation deck.