Styleguide.

The living reference for the Adelt website. Tokens are generated from design/tokens/*.json (W3C DTCG) by Style Dictionary into src/styles/tokens.css. Components live in src/components/ui/. Rules and rationale are in design/README.md.

Mark and wordmark.

The mark is the search pattern the aircraft flies: lanes joined at the ends, with the aircraft as a point in the accent at the end of the last lane. It is the one place the accent appears in the brand. The earlier delta mark is retained at /brand/adelt-mark-delta.svg. The wordmark is Archivo at 125% width, weight 800, capitals. Minimum size for the lockup is 20 px high; below that use the mark alone.

Thirteen colours, one accent.

Components never use a raw colour. They use role variables (--bg --surface --ink --muted --line --line-2 --accent) which the .slate and .cover contexts remap. Beacon is for links, focus and markers, never for backgrounds.

Dark mode follows the system by default. One small contrast glyph in the header flips it; picking what the system already prefers returns the site to automatic. The choice is remembered in this browser only. It is a second set of role values, not a second stylesheet: the ground becomes slate, text becomes slate-ink, the accent becomes beacon-soft, and the sections that were dark step one tone lighter than the ground so the page keeps its rhythm. Photographs are untouched. Every component already works in both because it only ever used the roles.

Four voices, strict roles.

Archivo (display, 105% width) for h1 and h2 and the wordmark. Familjen Grotesk (Stockholm) for body, navigation and h3 down. JetBrains Mono for data only: coordinates, timestamps, values that line up in columns. Labels and captions are sentence-case Familjen. Newsreader italic for quotes and the opening statement only. All self-hosted. Sizes are fluid between 360 px and 1440 px viewports. Labels are sentence case; nothing on the site is set in tracked capitals except the wordmark.

A twelve-column grid and a fluid space scale.

Place children with style="--c: start / span n". Below 880 px everything stacks. The left three columns are the rail for markers and metadata; content starts at column four. Rules replace boxes: .ruled for columns, .rows for lists. .bleed-right lets an image run to the viewport edge; .cover is a full-bleed photograph with a gradient for text.

What exists, and when to use it.

A bar that stays, compacts, and gets out of the way on a phone.

The announcement strip scrolls away; the header is sticky. Its layout height never changes: a 16 px strip above a 56 px bar. It sticks at −16 px, so after the first scroll only the bar remains and nothing below it shifts. The lockup eases from 21 to 18 px and a hairline shadow appears; the scrolled state engages past 24 px and releases under 4 px, so it never flickers. The ground is translucent paper with a backdrop blur, so photographs read through it. On desktop it never hides: the way back to the rest of the site should not move. Under 960 px the links collapse into a full-height sheet with large links and one call to action; the header hides on scroll down and returns on scroll up. The header's measured height is written to --header-h, which anchors and sticky sidebars use.

Seven behaviours, each with a reason.

All of them stop under prefers-reduced-motion. Nothing counts up, nothing bounces, no section fades in because it is a section. The page never scrolls on its own and never snaps to sections: usability studies on scrolljacking find most people disoriented and some reading it as a bug. Smooth scrolling applies to anchor links only, and anchors land below the sticky header.

Fluid first, one breakpoint, containers for the rest.

Type and space scale with the viewport between 360 and 1440 px. The grid stacks at 880 px; the header collapses at 960 px. Everything else adapts by container query. Covers use svh. Images ship as WebP and JPEG at 640, 960 and 1400 with a sizes hint. The page never scrolls sideways; a probe checks every route at 1280 and 390.