Broadcast

Broadcast is a drafting table in daylight: sage paper, white spec cards, forge-dark screens and one orange capsule that says act. Headlines are wide squared capitals, every label and button speaks mono, and steel rules frame the page. It is flat on purpose, so lines and surface steps make the depth.

Read this before you add a screen, a component or a colour. The tokens live in src/app/globals.css, the faces in src/app/fonts.ts, the kit in src/components/ui/.

At a glance

Theme	Light first, on a warm sage canvas. Dark is the same room after hours: forge charcoal with the same orange and amber lights.
Type	Saira at width 112.5 for h1 and h2, Funnel Sans for reading and bold titles, JetBrains Mono capitals for buttons, eyebrows, badges and table heads.
Colour	Sage canvas, white cards, forge panels. Ember orange for the one main action, amber for stamps and cue marks, deep blue only for links, checks and the current place.
Shape	28px cards and panels, 14px fields and menus, 7px small parts, 2px stamps, pill buttons.
Depth	Flat. Surface steps and 1px steel rules make the depth. Only floating layers cast a shadow.
Signature	Steel rails frame the page, each section opens on a steel rule with an amber cue mark, and product pictures sit in forge bezels on a drafting-paper desk.

Principles

1. One orange capsule per view. Everything else is outline, ghost or secondary.
2. Lines and surfaces make depth. Shadows only on things that float.
3. Labels speak mono capitals. Reading text stays in the body face.
4. Product pictures live on forge, like a screen on a desk.
5. Amber is a fill with black on it, never text on the page.

Colour

Palette

Token	Light	Dark	Role
canvas (--background)	#e2e4dd	#1a1c1e	The page floor
surface-soft	#eceee8	#1f2123	Section bands, sidebars, table heads
surface-card (--muted)	#f4f6f4	#2a2d30	Tinted fills: inactive tabs, hover rows, code
surface-strong	#c5c8bc	#3a3e42	Pressed fills, progress tracks
surface-solid (--popover)	#ffffff	#2b2e31	Menus, selects, toasts: always opaque
card	#ffffff	#242628	The card fill
surface-dark	#242628	#0e0f10	The inverted panel
hairline (--border)	#d0d2c8	#383c40	Every border and divider
ink (--foreground)	#000000	#f3f4f0	Headings and primary text
body-strong	#1b1d1f	#e4e6e1	Emphasised body text
body	#33373c	#c9cdc6	Running text
muted (--muted-foreground)	#565e67	#a0a8b1	Secondary text, captions
muted-soft	#757e89	#7b838c	Placeholders, disabled text, icons at rest
primary	#ff6100	#ff6100	The action colour
accent (--accent-fill)	#005cc0	#4aa8ff	The saturated accent: links, the accent badge
accent-soft	#cde6ff	#13283d	The tint an accent label sits on
danger (--destructive)	#b3261e	#ff6f61	Destructive actions and errors

success, warning and error each come with a -soft tint for the back of a badge or an alert: #006b26, #835200 and #b3261e in light, #3ecf7a, #ffb800 and #ff7b6e in dark.

Broadcast's own variables, read by the landing hooks and the kit: --rail (#828c97 light, #4a5057 dark), --signal (#ffb200 light, #ffb800 dark), --signal-hover (#f0a400 light, #ffc83d dark), --on-signal (#000000 light, #000000 dark), --forge (#242628 light, #242628 dark), --grid-paper (#f4f6f4 light, #1f2123 dark), --grid-line (#e2e4dd light, #2a2d31 dark).

How colour is used

• Sage background is the page floor, white card carries the content, and forge surface-dark holds product pictures, the CTA panel and tooltips.
• Ember primary fills the main action and checked controls, always with black text. Elsewhere it only shows as small lights: the on-air dot, the tally lights and the eyebrow arrow.
• Amber (signal in hooks, accent-3 in the kit) stamps feature icons and badges, marks section rules and paints selected text.
• Deep blue accent means a link, a check or the current place. Nothing else.
• Lines come in three colours: steel rail for frames and section rules, steel input for fields and pills, linen border for card edges and table rows.

Charts

accent-1 to accent-6 (also chart-1 to chart-6) are six series colours ordered so neighbours stay distinguishable. Ember, sky blue, amber, green, violet and steel grey, in that order. Ember leads so the first series matches the main action, and steel closes as the quiet series. Assign them in order; never let colour be the only way to tell two series apart.

Dark mode

The palette is declared twice in src/app/globals.css: light on :root, dark under @media (prefers-color-scheme: dark) and again on .dark, where the class wins in both directions. @theme inline points every utility at those variables, so bg-canvas is one class that follows the mode. src/lib/design.ts sets the theme a first visit opens in: light here, because Broadcast is drawn in light first. The theme menu in the header offers light, dark and system and remembers the choice.

Type

Faces

• Saira (font-display): headings and display type.
• Funnel Sans (font-body): running text and interface copy (with italics).
• JetBrains Mono (font-mono): code, ids and tabular labels.

Saira at width 112.5 gives wide, squared capitals with flat sides, like a broadcast title card. Funnel Sans is a compact geometric workhorse with a firm bold for 18 to 24px heads, and JetBrains Mono speaks every button and label.

Every face loads through next/font/google in src/app/fonts.ts: downloaded at build time and served from this app. Change a face there and here, together.

Scale

Token	Size	Line	Tracking	Weight	Use
text-display-xl	66px	1.08	0.02em	500	The hero headline, desktop
text-display-lg	52px	1.12	0.02em	500	The hero headline, tablet
text-display-md	36px	1.16	0.015em	500	Section headlines, the hero on phones
text-display-sm	30px	1.2	0.01em	500	Section headlines on phones, big numbers
text-title-lg	24px	1.25	0	700	Page titles in the app
text-title-md	18px	1.35	0	700	Card titles
text-title-sm	16px	1.4	0	700	Small headings, table titles
text-body-lg	18px	1.5	0.01em	400	Lead paragraphs
text-body-md	16px	1.55	0.01em	400	Running text
text-body-sm	14px	1.5	0.01em	400	Interface copy, table cells
text-caption	13px	1.4	0.01em	400	Metadata, helper text
text-caption-uppercase	12px	1.3	0.05em	500	Eyebrows above headings
text-button	14px	1	0.04em	500	Buttons
text-nav-link	15px	1.4	0.01em	400	Header and footer links

Rules: one h1 per page. Display sizes are for marketing pages; the app tops out at text-title-lg. h1, h2 and .font-display set Saira at width 112.5, weight 500, and only the hero title goes uppercase. h3 to h6 and card titles are Funnel Sans bold. Buttons, eyebrows, badges, table heads, tab triggers, kbd and code are JetBrains Mono, in capitals when they are labels.

Space and layout

• Spacing tokens: xxs 4px, xs 7px, sm 14px, md 21px, lg 28px, xl 42px, xxl 56px, section 84px (the gap between landing sections).
• Content sits in max-w-content (1280px) with px-md on phones and px-lg from sm up. Reading text stops at max-w-measure (672px).
• A 7px drafting grid: 4, 7, 14, 21, 28, 42, 56 and 84px.
• Sections sit on an 84px rhythm. Cards pad 28px by default and buttons pad 28 to 42px.
• Phone gutters are 21px. From 84rem two steel rails run the full page height, 1rem outside the content column.

Shape and depth

Token	Value	Where
rounded-xs	2px	Badge, Breadcrumb, Checkbox, Kbd
rounded-sm	7px	Accordion, DropdownMenu, Select, Skeleton, Tabs, Tooltip, the landing page
rounded-md	14px	Alert, DropdownMenu, Input, Popover, Select, Toaster, the landing page
rounded-lg	28px	AlertDialog, Card, Dialog, the landing page
rounded-xl	28px	The landing page
rounded-pill	9999px	Button, Dialog, Progress, Sheet, Switch, Tabs, Toaster, the landing page
rounded-full	9999px	Accordion, Avatar, RadioGroup, Switch

One big radius: 28px on cards, dialogs, the logo and stat bars, the product picture and the CTA panel. 14px on fields, menus, popovers and toasts, 7px on menu items, tooltips and small tiles, 2px on stamps, and pills for buttons, switches and avatars. Every border is 1px solid, and the step connector is the one dashed line. Shadows are off except the overlay on floating layers and the 3px ember focus halo on fields.

Components

Every component lives in src/components/ui/ and is written against the tokens above. Import from there; never restyle a kit component inline to make a one-off.

Component	In Broadcast
Button	Tall pills with mono capital labels and a 1px line on every kind but link. Primary is ember with black text and a steel edge, secondary is linen, outline is white with a steel line that turns ink on hover, and ghost stays bare until a linen hover. Link is blue body text with an underline. Sizes are 36, 44 and 56px tall and icon buttons are round. Focus is a 2px ember outline set 2px off the pill, and a press nudges the button down 1px.
Badge	Stamps, not pills: 2px corners and mono text. Neutral is pale with a linen line, accent is the amber stamp with black text, and success, warning and danger use their soft fill with status text.
Card	28px corners and no shadow in every tone. Default is white with a linen edge, soft is pale sage, strong is deeper sage with no line, outline is a steel drafting line, and dark is forge with light text. Titles use the bold body face, never the display face.
Input, Textarea, Select	White fields on sage with 14px corners, a steel line, 44px height and no shadow. Focus turns the line ember with a 3px halo, and invalid turns it red. Select menus float on white with a steel line and the overlay shadow.
Checkbox, RadioGroup, Switch	Checkboxes are 18px squares with 2px corners and radios are 18px circles, both white with a steel line and a 32px hit area, and both turn ember when checked. The switch is a 44 by 24px pill track, deeper sage when off and ember when on, with a white thumb, no shadow and a 2px ember focus outline.
Tabs	Default tabs are a linen pill track with mono capital triggers, and the active one is a white pill with a steel line. Line tabs sit on a hairline, with an amber bar under the active trigger.
Accordion	Rows split by linen hairlines, with bold body-face triggers. The chevron sits in a 28px round steel outline that goes ink on hover and turns when the row opens.
Dialog, AlertDialog, Sheet	White panels with a steel line, 28px corners and the overlay shadow, over a forge scrim. Dialogs pad 42px from 640px up and close with a round ghost button. Titles are bold body face, and footer buttons sit right and stack full width on phones. Sheets keep square corners, draw a steel line on the open edge and set the header over a hairline.
DropdownMenu, Popover, Select content, Tooltip	White menus with 14px corners, a steel line and the overlay shadow. Items have 7px corners and a pale sage highlight, checks are blue, and group labels and shortcuts are mono. Tooltips are inverted forge chips in mono.
Table	Mono capital heads over a steel rule, linen rules between rows and a pale hover. Cells use 14px body text, and the footer sits on pale sage.
Alert	14px corners, a soft status fill and a 3px left flag in the status colour, with no other border. Info carries a blue flag and warnings carry the amber one.
Avatar, Progress, Skeleton, Spinner, Separator, Kbd, Breadcrumb, Pagination, Field, Label, Toaster	Avatars are round with mono initials on deeper sage. Progress is an ink pencil line on a deeper sage track, skeletons pulse in deeper sage with 7px corners, and spinners take the colour of the text around them. Separators are linen hairlines, and kbd is a white mono keycap with a heavier bottom edge. Breadcrumbs use a mono slash, pagination uses ghost capsules with mono digits, labels are semibold body text, and toasts float on white with a steel line, an ember pill action and a ghost pill cancel.

The landing page

The landing page is the same in every design; the design decides how it looks. Its sections carry data-slot hooks (listed at the top of src/components/marketing/section-heading.tsx) that globals.css may style. Broadcast styles these:

• site-header: a flat sage bar on a steel rule with no blur. From 84rem it draws the two steel rails that frame every marketing page.
• site-nav: ink links with a 2px amber underline on hover and on the current page. The header's primary button is the amber capsule.
• brand, brand-mark: wide tracked capitals beside an ink tile with a mono letter and an orange on-air dot.
• hero-backdrop: the accent wash is gone, so the hero is bare sage.
• hero-eyebrow: a linen chip with its arrow in an orange-on-white circle.
• hero-title, hero-subtitle: wide Saira capitals in balanced lines, and the subtitle in ink instead of grey.
• hero-actions, hero-note: from 40rem the two capsules touch, and the note below them is mono 12px.
• hero-visual: a drafting-paper desk from rail to rail. Its top 9rem stays sage, then a steel edge with ruler ticks and an amber cue mark, then a 28px grid.
• product-preview, product-preview-bar: the app window in a 7px forge bezel, with a forge title bar and orange and amber tally lights.
• section: each band opens on a full-width steel rule with an amber cue mark at the left rail. The logo strip has neither.
• section-eyebrow, section-title: ink mono capitals stamped with an amber square, over titles that grow to 52px on wide screens.
• logo-cloud, logo: one white bar with 28px corners and a steel line, logos in linen-ruled cells.
• feature-icon: amber stamps with black icons. The dashboard card icon gets the same stamp.
• showcase-visual: a forge stage, so the white app cards stand out like a screen.
• step-marker, step: forge number stamps in mono, joined by a dashed steel line.
• stat-grid, stat, stat-value: a white ruled bar with tabular figures. A highlighted pricing card gets an ink line, not a glow.
• faq: a steel rule on top, and each chevron in a round steel outline.
• cta-panel: the forge panel with a faint 28px grid and an amber tally light on its top edge.
• site-footer: back on the sage canvas under a steel rule.

Everything else is type, space and the kit.

Signed-in screens

The dashboard sits on the sage canvas with a pale sidebar split off by a hairline, white 28px cards with linen edges, amber stamp icons, mono table heads and one orange capsule per page. Settings and sign-in use the same white cards, 44px white fields with an ember focus halo and a full-width orange capsule for the main action.

Do and don't

Do

• Keep the sage canvas as the page floor in light mode, with white cards on it.
• Keep one orange capsule per view. Everything else is outline, ghost or secondary.
• Set every button label, eyebrow and table head in mono capitals, and every badge in mono.
• Use 28px corners on cards and panels, 14px on fields and menus, 7px on small parts and 2px on stamps.
• Separate bands with a 1px steel rule, not a tinted background.
• Put product pictures on forge: a bezel, a stage or the dark card tone.
• Stamp new or featured things with the amber badge.
• Set h1 in wide capitals and keep hero titles to 8 words or fewer.

Don't

• Don't add drop shadows to cards, buttons or sections. Only floating layers get the overlay shadow.
• Don't use orange for text or large fills. Outside buttons and checked controls it only shows as small lights.
• Don't use blue for eyebrows, badges, fills or decoration. Blue means a link, a check or the current place.
• Don't use the display face below 30px in new UI.
• Don't square off a button or round a card past 28px.
• Don't put amber text on the sage or white page. Amber is a fill with black on it.
• Don't write a hex, rgb() or a Tailwind palette class outside globals.css.
• Don't read --color-* variables in hooks or base rules. Use the raw palette variables.

Working in this design

Pasting from shadcn/ui. The token layer carries shadcn's variable names, so most snippets render unmodified. Two utility names mean something else here: bg-muted becomes bg-surface-card, and bg-accent / text-accent-foreground (a hover surface upstream) become bg-surface-card / text-ink. Here muted is a text colour and accent is the saturated accent.

Adding a token. Add it to all three palette blocks in globals.css (light, the dark media query, .dark), map it in @theme inline, and document it in the palette table above. Check contrast in both modes.

Adding a component. Check the kit first: most needs are a variant of Button, Card or Badge, or a composition on the page. A new component gets its own file in src/components/ui/, token classes only, a data-slot, and a row in the Components table here. The designer subagent owns this.