Design system · 2026

A quiet foundation for interfaces that get out of the way.

Semantic HTML, compiled Tailwind CSS and vanilla ES modules. Every control on this page is real: menus open with the keyboard, dialogs trap focus, forms validate and announce their errors.

Browse components Auth screens Tailwind v4 · no framework · no CDN

The Phantom palette is provisional

No official Phantom colour value was supplied, so this build ships a clearly labelled, Phantom-inspired violet ramp. Send the authoritative HEX and it becomes a six-line change in src/styles/main.css — every component references the brand-* aliases, never a raw value.

Foundations

Spacing, radii and elevation. Everything derives from a 4 px scale.

Spacing scale

One rhythm for padding, gaps and margins.

4 pxmicro — icon to label

8 pxcompact — button internals

12 pxrelated elements

16 pxstandard spacing

24 pxcomponent spacing

32 pxsection spacing

48 pxmajor section spacing

64 pxspacious layouts

Radii

xs 3

sm 4

md 6

lg 8

xl 12

Elevation

Reserved for things that float above the page.

Colour

Colour carries meaning, never decoration. Click any row to copy its CSS variable.

Brand ramp

Provisional Phantom direction. 700 is the interactive base.

Surfaces & text

canvas#fafaf7

surface#ffffff

sunken#f3f3ee

line#e5e4dc

ink#191917

ink-secondary#55554c

ink-muted#6b6b62

Feedback

success#2c6a4c

warning#87590f

danger#9c2b2b

info#2a5a85

focus ringphantom-500

disabled#a9a99e

Measured on canvas: primary text 16.8:1, secondary 7.2:1, muted meta 5.1:1, white on brand 9.3:1 — all above the 4.5:1 AA threshold at every size used here. Disabled text sits at 2.3:1, which WCAG exempts because the control is inert. Status colours are always paired with an icon or a text label, never colour alone.

Typography

Inter variable, self-hosted. Five roles, no more.

Page title

display · 36/1.1 · 600

One per page.

Section title

title · 24/1.25 · 600

Component heading

heading · 17/1.4 · 600

Body copy carries the argument of the interface. Measure stays between 60 and 75 characters so long passages remain comfortable to read.

body · 15/1.6 · 400

Field label

Meta text — table cells, helper copy.

Caption · uppercase eyebrow style

label 14 · meta 13 · caption 12

Components

Each state below is reachable by keyboard. Buttons and fields share one height, one radius and one focus treatment.

Buttons

One primary action per view. Secondary and ghost actions stay quiet.

Hover, focus and press states are CSS-only.

Form controls

Validation runs on blur and submit, never on every keystroke before the user is done.

Full name

Work email

We only use this for account notices.

Role (optional)

Notes (optional)

Maximum 400 characters.

I agree to the processing of my details.

Demo only — submissions are validated in the browser and nothing is sent to a server.

Filled

With leading icon

Invalid

Enter an email address in the format name@example.com.

Disabled

Selection

Native inputs, restyled — they keep their semantics and keyboard behaviour.

Notifications

Weekly digest Comments Product news (off)

Density

Comfortable Compact

Settings Two-factor Public profile

Feedback

Inline alerts for context, toasts for confirmation of an action.

Invitation sent

Elin will receive an email within a minute.

Storage almost full

9.4 of 10 GB used. Older exports will be paused.

Payment declined

Update the card ending in 4417 to keep the workspace active.

Scheduled maintenance

Read-only mode on Sunday 02:00–03:00 CET.

Badges

Active Pending Failed Draft New

Toasts

Stacked at most three deep, pause on hover, announced through one live region.

Tabs

Arrow keys move between tabs; panels are linked with aria-controls.

Owner: Nordlys Studio
Created: 14 March 2026
Members: 8 people
Status: Active

Data table

Hairline rules instead of card containers. Row actions sit behind a menu.

Team members and their access
Member	Role	Status	Last active
EL Elin Sandberg elin@nordlys.se	Owner	Active	Now
JO Jonas Aalto jonas@nordlys.se	Engineer	Active	12 min ago
IN Ingrid Nyström Pending invitation	Researcher	Invited	—

States

Empty, loading and overlays keep the same quiet tone as the rest of the interface.

No projects yet

Projects hold files, notes and the people working on them.

Loading files…

Overlays

Built on native <dialog> and role="menu".

Handoff

What is verified, and what still needs a backend.

Verified in this build

Tailwind v4 production build compiles; CSS is compiled, not CDN.
Menus, tabs, dialogs, toasts and validation run without a framework.
Keyboard paths: arrows, Home/End, Escape, focus return to trigger.
Reduced-motion preference disables transitions and animations.

Not included

No API, auth or persistence. Sample data is local and static.
No dark theme — the light theme is the single source of truth.
Search and filter in the table example are presentational placeholders.