Design System
Style guide
Salt-worn and credible. Weathered navy for structure, brass for the accent, warm sand underfoot. Every text pairing here is verified WCAG AA.
Logo
The mark is a hook whose bend traces the Cape Hatteras elbow — the point where the barrier islands stop running north–south and turn west. It reads as a hook at 16px and as geography at full size.
Primary lockup
Light grounds. Header, documents.
Reverse lockup
Navy bands. Footer, share cards.
Monochrome
Single-colour print, embroidery, fax.
Mark only
Favicon, avatar, tight spaces.
Do
- Keep clear space equal to the height of the hook's eye on all sides.
- Use the mark alone below 120px of available width.
- Put the reverse lockup on hull-800 or darker.
Don't
- Recolour the mark outside brass, white, or currentColor.
- Stretch, rotate, outline, or add a drop shadow.
- Place the light lockup on a photograph without a scrim.
Colour
Six ramps. Reach for a semantic token first — the raw ramps exist so the semantic tokens have somewhere to point, not so components can use them directly.
hull
Structure, headings, dark bands, primary action.
brass
The accent. Mark, active state, emphasis, advisory.
sand
Warm ground. Page background and section banding.
ink
Warm neutral. All text and hairlines.
marsh
Good — biting, open season, in stock.
buoy
Alert — closed season, advisory, sold out.
Semantic tokens
| Token | Use | Swatch |
|---|---|---|
--color-bg | Page ground | |
--color-surface | Cards, panels | |
--color-surface-sunken | Wells, table stripes | |
--color-border | Hairlines | |
--color-border-strong | Inputs, dividers that must read | |
--color-text | Body copy | |
--color-text-secondary | Supporting copy | |
--color-text-muted | Meta, captions | |
--color-text-faint | Least emphasis (still AA) | |
--color-action | Primary button fill | |
--color-accent | Brand accent, focus ring | |
--color-accent-text | Links on light | |
--color-good | Positive state | |
--color-warn | Advisory | |
--color-bad | Negative state | |
--color-info | Neutral information |
Typography
Archivo carries headings, UI, labels and data — an American grotesque that reads like harbour signage. Source Serif 4 is reserved for long-form prose, where it gives articles the weight of a printed field guide. Both are self-hosted variable fonts; there is no third-party font request.
Display
text-display · Hero headlines only. One per page.Heading 1
text-h1 · Page title. Set by the <h1> element.Heading 2
text-h2 · Section title.Heading 3
text-h3 · Card and subsection title.Heading 4
text-h4 · Dense subheads, list group labels.Lead paragraph
text-lead · Standfirst under a headline.Body
text-base · Default UI copy.Small
text-sm · Secondary UI, table cells, form help.Caption
text-caption · Metadata, timestamps, image credits.OVERLINE
text-overline · Eyebrows and column headers. Always uppercase.Prose specimen
Cobia show up on the nearshore wrecks once the water pushes past 68°F, usually the second week of May. Sight-cast a bucktail ahead of a cruising fish and hold on.
The serif is doing a job here: it slows the eye down for reading, and it signals that this is reference material rather than interface chrome.
Components
Buttons
Primary is navy, not brass — that keeps brass meaningful. Use accent for at most one action per page.
Badges
Status badges carry a dot or icon as well as colour, so they survive greyscale and colour-blindness.
Cards
Default
Hairline border, no shadow at rest.
Featured
Brass rule on top. No glow, no coloured box.
Clickable
Lifts 2px and gains a shadow on hover.
Flat
Sunken well for secondary content.
Form controls
Enter a valid email address.
Data table
| Pier | Water temp | Wind | Status |
|---|---|---|---|
| Jennette's | 72.4°F | SW 12 kt | Biting |
| Avalon | 71.8°F | SW 14 kt | Advisory |
| Rodanthe | 70.1°F | NE 22 kt | Closed |
Radius, elevation, motion
Radius
Four steps, one rule each.
rounded-smBadges, tags, chipsrounded-mdButtons, inputsrounded-lgCards, panels, dropdownsrounded-fullPills, avatars, dotsElevation
Borders do the work. Shadow means lift.
shadow-smResting chromeshadow-mdHover, dropdownsshadow-lgModals, drawersMotion
Entrance only, and only once. Nothing loops except the live dot, because it means "now".
120ms — colour and state change
200ms — hover, dropdown, card lift
340ms — drawer, accordion
All of it collapses to near-zero under prefers-reduced-motion.
Live indicator