/ Scenr Interview · v0.1

The design system

Tokens and components for a tool interviewers keep open next to a live call. Switch the theme up top and the palette below. Every example on this page updates live.

Glanceable

Anything needed mid-interview reads in under a second.

Quiet by default

One red moment per view. Everything else stays calm.

Keyboard-first

Interviewers type while they listen. Hands stay on keys.

Accessible

Every text color passes WCAG AA in both themes.

/ 01 · Palette lab

Pick a mood

Five candidate palettes. Each changes the accent and background warmth. Structure and contrast stay the same. Your pick lasts until the dev server restarts, then everything returns to Scenr red.

/ 02 · Color

Color tokens

Components only use these semantic names, never raw hex. Chips show live contrast for the current theme and palette.

Surfaces

canvas

App background

surface

Cards, panels, inputs

surface-2

Hover fills, subtle wells

surface-3

Pressed / selected

surface-inverse

Tooltips, inverse chips

Text

fg

Primary text

fg-muted

Secondary text

fg-subtle

Labels, metadata

fg-disabled

Disabled only (exempt)

Lines

border

Hairlines, card edges

border-strong

Input borders, emphasis

border-control

Checkbox / switch edges

Accent

accent

Primary action, live, critical

accent-hover

Hover on accent

accent-tint

Soft red backgrounds

accent-fg

Red text on tint

Status

success

Pass dots, fills

success-fg

Pass text

warning

Warn dots, fills

warning-fg

Warn text

info

Info dots, links

info-fg

Info text

/ 03 · Typography

Type scale

Plus Jakarta Sans for UI, Instrument Serif for rare editorial moments, JetBrains Mono for labels and numbers. 14px base.

font-display text-4xl

48px · Display, editorial moments only

Hire people who can debug

text-3xl / 800

36px · Hero numbers, big headings

Interview ready

text-xl / 700

22px · Page titles

Backend engineer: onsite loop

text-lg / 700

18px · Panel titles

Question plan

text-md / 500

16px · Reading text, live prompts

Walk me through how you'd find the slow query.

text-base / 400

14px · Default UI text

Notes save automatically while you type.

text-sm / 400

13px · Dense UI, table cells

Last edited 2 minutes ago

text-xs / 500

12px · Captions, badges

3 of 8 questions covered

label-mono

11px · Labels, status, IDs

Live session · 00:42

font-mono text-2xl

28px · Glanceable numbers (timers)

24:18

/ 04 · Shape

Radius & elevation

Radius

rounded-xs

4px · Chips

rounded-sm

6px · Tags, kbd

rounded-md

8px · Inputs

rounded-lg

12px · Cards

rounded-xl

16px · Dialogs

rounded-full

∞px · Buttons

Elevation

shadow-xs

Swatches, small lifts

shadow-sm

Cards, resting controls

shadow-md

Hover, popovers

shadow-lg

Dialogs

shadow-accent

Primary button glow

/ 05 · Components

Button

Pill-shaped, sentence case. Red is reserved for the single most important action.

Variants

primary

One per view. The red moment.

neutral

Strong confirm without shouting.

secondary

Default. Most actions.

ghost

Toolbars, low emphasis.

danger

Destructive. Tint until hover.

Sizes · 28 / 32 / 40

With icons

Icon only

States

/ 06 · Components

Forms & navigation

Inputs, choices and tabs. Checked states use ink, not red, so they never read as errors.

Field · input · textarea

Candidate name

As it appears on their resume.

Role

Pick a role before starting the session.

Quick note54/280

Grows as you type.

Disabled

Autosave textarea · saves on pause and blur · 0 saves

Segmented control

Tabs

Underline in ink, not red. Tabs appear everywhere, so they stay quiet.

/ 07 · Components

Status & display

Badges, keyboard hints, avatars, tooltips and the live timer.

Badge · tones

DraftScheduledSubmittedFeedback dueLiveNew

Keyboard hints

⌘K SearchN New noteEsc Close

Avatar · 24 / 32 / 40

PRMLA

JKSODP

Tooltip · hover or focus

Timer · planned 45 min

Readable from across the desk. Turns amber 5 minutes before the end and red once over.

On track--:--
Wrapping up--:--
Over time--:--

/ 08 · Components

Feedback

Alerts explain what happened and what to do next. Skeletons hold the layout while data loads.

Alert · tones

Invite links work once. Ask for a new one if this expired.

Workspace created

Your teammates can join with their work accounts.

Feedback due today

2 scorecards are still in draft.

Use your work account

sam@gmail.com is a personal account.

Skeleton · loading

/ 09 · Components

Overlays

Dialogs confirm, menus hold secondary actions, toasts confirm quietly and go away.

Dialog

Dropdown menu

Toast