Voltage

Voltage is a flat black stage where violet fills the big panels, white pills sell and magenta marks the spark. Greys are pure and untinted, surfaces step from black to charcoal, and a white hairline at 10% does the rest. Headings are heavy Plus Jakarta Sans with no letter spacing, over quiet DM Sans.

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	Dark native on a pure #0e0e0e ground. Light keeps the violet, the pills and the flat steps on pure light greys (#f2f2f2 page, white cards).
Type	Plus Jakarta Sans 700 and 800 for headings with zero letter spacing, DM Sans for everything else, DM Mono for code, keys and ids only.
Colour	Untinted greys, electric violet (#612ad5) for the product button and panels, light violet (#b491ff) for links and chips, hot magenta (#ff4ce2) for the spark.
Shape	A hard split: 6 to 10px on controls, 20px on cards, 32px on violet panels, and pills for marketing buttons, badges and chips.
Depth	Flat. Surfaces step from #0e0e0e to #1a1919 to #242323; only menus, selects, popovers, dialogs, sheets and toasts cast a shadow.
Signature	A magenta announcement pill over an 800 headline with a magenta brush stroke, white ink pills, and the product window on a violet gradient tile.

Principles

1. Violet fills big things: panels with 32px corners and one product button per view.
2. Magenta is the spark, never the base: a pill, a brush stroke, sparkles and big numbers.
3. Surfaces step, they do not float. Shadows belong to menus and dialogs only.
4. Controls stay tight at 10px, big things go very round. The split is the look.
5. Heavy headings, zero letter spacing, sentence case everywhere.

Colour

Palette

Token	Light	Dark	Role
canvas (--background)	#f2f2f2	#0e0e0e	The page floor
surface-soft	#f9f9f9	#141313	Section bands, sidebars, table heads
surface-card (--muted)	#ffffff	#1a1919	Tinted fills: inactive tabs, hover rows, code
surface-strong	#ebebeb	#242323	Pressed fills, progress tracks
surface-solid (--popover)	#ffffff	#1a1919	Menus, selects, toasts: always opaque
card	#ffffff	#1a1919	The card fill
surface-dark	#0e0e0e	#070707	The inverted panel
hairline (--border)	rgb(0 0 0 / 0.1)	rgb(255 255 255 / 0.1)	Every border and divider
ink (--foreground)	#0e0e0e	#ffffff	Headings and primary text
body-strong	#262626	#ececec	Emphasised body text
body	#4f4f4f	#d1d1d1	Running text
muted (--muted-foreground)	#646464	#9a9a9a	Secondary text, captions
muted-soft	#858585	#696969	Placeholders, disabled text, icons at rest
primary	#612ad5	#612ad5	The action colour
accent (--accent-fill)	#682ee1	#b491ff	The saturated accent: links, the accent badge
accent-soft	#efe9fd	#24173f	The tint an accent label sits on
danger (--destructive)	#ac3131	#f06f68	Destructive actions and errors

success, warning and error each come with a -soft tint for the back of a badge or an alert: #006e3d, #7a5a00 and #ac3131 in light, #0ead65, #bf9000 and #f06f68 in dark.

Voltage's own variables, read by the landing hooks and the kit: --magenta (#ff4ce2 light, #ff4ce2 dark), --on-magenta (#0e0e0e light, #0e0e0e dark), --magenta-ink (#b611b0 light, #fc69ff dark), --panel-from (#682ee1 light, #682ee1 dark), --panel-to (#2a0772 light, #2a0772 dark), --panel-2-from (#b611b0 light, #b611b0 dark), --panel-2-to (#4a0047 light, #4a0047 dark), --panel-3-from (#164cd9 light, #164cd9 dark), --panel-3-to (#002584 light, #002584 dark), --on-panel-soft (rgb(255 255 255 / 0.82) light, rgb(255 255 255 / 0.82) dark), --panel-line (rgb(255 255 255 / 0.35) light, rgb(255 255 255 / 0.35) dark), --chip-line (rgb(104 46 225 / 0.35) light, rgb(180 145 255 / 0.4) dark), --pill (#0e0e0e light, #ffffff dark), --on-pill (#ffffff light, #0e0e0e dark), --pill-hover (#262626 light, #e2e2e2 dark).

How colour is used

• Neutrals are pure greys with zero chroma: page #0e0e0e, card #1a1919, pressed #242323, frame and sidebar #141313, hairline white at 10% (black at 10% in light).
• Violet bg-primary (#612ad5) is the product button, checked controls and the switch track. text-accent (#b491ff in dark, #682ee1 in light) is links, chips, checks and the progress fill.
• The violet panel gradient (#682ee1 to #2a0772) fills the hero picture tile, the lead feature card, the highlighted plan, the CTA panel, the step markers and the brand mark. Text on it is white or white at 82%.
• Magenta (#ff4ce2) is a fill with a dark label on the announcement pill and the plan badge, and --magenta-ink sets the stat numbers. It never appears in the app.
• Green, amber and red mark status only, as near-grey tints with a coloured label or icon.

Charts

accent-1 to accent-6 (also chart-1 to chart-6) are six series colours ordered so neighbours stay distinguishable. Six series in order: violet, orange, magenta, lime, blue, teal. Cool and warm hues alternate so neighbours stay apart for colour blind readers, and every series clears 3:1 on page, card and sidebar in both modes. 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: dark here, because Voltage is drawn in dark first. The theme menu in the header offers light, dark and system and remembers the choice.

Type

Faces

• Plus Jakarta Sans (font-display): headings and display type.
• DM Sans (font-body): running text and interface copy.
• DM Mono (font-mono): code, ids and tabular labels (weights 400, 500).

Plus Jakarta Sans is wide and geometric, and it holds 800 at 72px without clotting, so headlines hit hard. DM Sans is low contrast and open at 14px, its optical size axis gives small text the text cut, and DM Mono is its own sibling, so code reads as part of the same family.

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	72px	1.1	0	800	The hero headline, desktop
text-display-lg	60px	1.1	0	800	The hero headline, tablet
text-display-md	48px	1.1	0	700	Section headlines, the hero on phones
text-display-sm	36px	1.1	0	700	Section headlines on phones, big numbers
text-title-lg	24px	1.2	0	700	Page titles in the app
text-title-md	20px	1.25	0	700	Card titles
text-title-sm	16px	1.3	0	700	Small headings, table titles
text-body-lg	20px	1.4	0	400	Lead paragraphs
text-body-md	16px	1.55	0	400	Running text
text-body-sm	14px	1.5	0	400	Interface copy, table cells
text-caption	13px	1.4	0	500	Metadata, helper text
text-caption-uppercase	12px	1.3	0.04em	600	Eyebrows above headings
text-button	15px	1	0	600	Buttons
text-nav-link	15px	1.4	0	500	Header and footer links

Rules: one h1 per page. Display sizes are for marketing pages; the app tops out at text-title-lg. Headings are Plus Jakarta Sans with zero letter spacing: 800 for the 72px and 60px display steps (the hero is always 800), 700 from 48px down to 16px titles. Body is DM Sans 14 to 20px at 400, buttons 15px/600 and nav links 15px/500. Sentence case everywhere; the only caps are the badge's uppercase mode.

Space and layout

• Spacing tokens: xxs 4px, xs 8px, sm 12px, md 16px, lg 24px, xl 32px, xxl 56px, section 96px (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).
• Spacing steps are 4, 8, 12, 16, 24, 32 and 56px, with 96px between landing sections.
• The landing page is roomy: 24px inside cards, 40px inside violet panels, 12px between FAQ cards and between stat tiles.
• The app is standard: 40px controls, 16px gaps, and card padding of 16, 24 or 40px.

Shape and depth

Token	Value	Where
rounded-xs	6px	Breadcrumb, Checkbox, DropdownMenu, Kbd
rounded-sm	8px	Accordion, Tabs, Tooltip, the landing page
rounded-md	10px	Button, DropdownMenu, Input, Select, Skeleton, Tabs, Toaster, the landing page
rounded-lg	20px	Accordion, Card, the landing page
rounded-xl	32px	The landing page
rounded-pill	9999px	Badge, Progress, Switch, the landing page
rounded-full	9999px	Accordion, Avatar, Dialog, RadioGroup, Sheet, Switch

Radii split hard: 6px on checkboxes and keys, 8px on tab segments and tooltips, 10px on buttons, inputs and menu items, 16px on menus, toasts and alerts, 20px on cards, 24px on dialogs, 32px on violet panels, and pills for badges, chips, switches and avatars. Borders are 1px solid: a white 10% hairline on cards, menus and rows, the #3e3e3e input grey on fields, never dashed. No card, tile, button or panel has a shadow; menus, selects, popovers, dialogs, sheets and toasts do.

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 Voltage
Button	10px corners, DM Sans 15px/600, sentence case and no shadow in any state: hover and press only swap fills or edges. Primary is violet that presses darker; secondary is the #242323 grey step; outline is transparent with a 1px input-grey edge; ghost takes a 6% ink fill on hover; danger is a soft red tint, never a solid block; link is light violet. Sizes are 32, 40 and 48px tall, plus a 40px square icon button. Focus is a 2px violet outline 2px off the edge.
Badge	A 24px pill with no visible line and a 13px/500 label. Every variant is a soft fill with its own colour: grey, violet, green, amber and red. The uppercase mode is 12px/600 with 0.04em tracking.
Card	20px corners, a 10% hairline on the #1a1919 fill (white on light grey in light), and no shadow in any tone. Soft drops the line, strong steps up to #242323, outline is transparent and dark re-points its text to white. Titles are Plus Jakarta Sans 20px/700; padding is 16, 24 or 40px.
Input, Textarea, Select	40px fields with 10px corners on the card fill and a 1px #3e3e3e edge that greys up on hover. Focus turns the edge violet with a 3px violet halo; invalid turns it red with a red halo. Disabled fields drop to the soft fill at 60%. Select content is the menu surface: 16px corners, a hairline, the overlay shadow, 36px items and a violet check.
Checkbox, RadioGroup, Switch	Checkboxes are 16px with 6px corners, a grey edge and a 32px hit area, and turn violet with a bold white check. Radios are 16px circles with a grey edge that take an 8px violet dot. Switches are pill tracks, grey when off and violet when on, with a flat white thumb that slides in 150ms.
Tabs	The default is a segmented toggle: a 40px track on the card fill with a hairline, 8px segments and an ink segment for the active tab (white with black text in dark, black in light). Line tabs drop the track and mark the active tab with a 2px violet underline.
Accordion	Each item is its own 20px card with a hairline, 12px apart. Triggers are Plus Jakarta Sans 16px/700 and turn violet on hover, with the chevron in a 28px round grey button that turns when open.
Dialog, AlertDialog, Sheet	A 70% black scrim. Panels sit on #1a1919 with a hairline, 24px corners and the overlay shadow; titles are Plus Jakarta Sans 24px/700 and the close is a 32px round ghost button. Alert dialogs pair an outline cancel with a primary or danger action. Sheets sit flush to their edge with 24px corners on the inner side only.
DropdownMenu, Popover, Select content, Tooltip	The menu surface: #1a1919, a hairline, 16px corners and the overlay shadow, with 6px of inner padding on menus and 16px on popovers. Items are 36px with 10px corners and a 6% ink highlight, checks are violet, and shortcuts sit in small DM Mono key chips; danger items are red on a red tint. Tooltips are an ink chip with no border: white with black text in dark, black with light text in light.
Table	Bare, with no header fill. Head cells are 40px in 13px/500 grey, sentence case. Rows split by hairlines, take a 4% ink hover and a violet tint when selected. Numbers are tabular; set ids in font-mono (DM Mono).
Alert	A soft tint with 16px corners and no border or shadow. Info sits on the violet tint, success, warning and danger on their own tints, each with its icon in the status colour, a Plus Jakarta Sans 16px title and body text under it.
Avatar, Progress, Skeleton, Spinner, Separator, Kbd, Breadcrumb, Pagination, Field, Label, Toaster	Avatars are round with a grey fallback; give stacked faces a ring-2 ring-canvas. Progress is a 6px pill track on #242323 with a light violet fill. Skeletons pulse as a 10% ink step (about #242323 on black) with no shimmer, and spinners are a grey spinning loader that takes the label colour inside a button. Separators are 1px hairlines. Kbd is flat DM Mono 12px on #242323 with 6px corners. Breadcrumbs are grey with chevrons and an ink current page, and the current page in pagination is the ink segment. Labels are 14px/500 in ink, 6px above the control, help text 13px grey, errors red. Toasts sit on the menu surface with 16px corners, the status shown in the icon and a violet action.

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. Voltage styles these:

• hero-backdrop: drops the default wash for a flat black stage. On screens 80rem and wider it draws a white ink loop and squiggle and three magenta sparkles in the side margins, clear of every letter.
• hero-eyebrow: a solid magenta pill with a dark 600 label and no edge; the arrow takes the label colour and a linked pill underlines on hover.
• hero-title: always 800 with zero letter spacing, closed by one rising magenta brush stroke under the last line.
• hero-subtitle and section-description: the #d1d1d1 body grey instead of the muted one.
• hero-actions: the ink pill (white on dark, black on light) beside an outline pill, both 56px tall.
• hero-visual: a violet gradient tile with 32px corners, up to 76rem wide, with violet on every side of the product-preview, which goes flat with 20px corners.
• site-header: its buttons turn into pills (the ink pill, an outline pill, a round theme toggle); site-nav links hover as pills.
• brand and brand-mark: an 800 name beside a small violet gradient square with an 800 letter.
• section: no top or bottom rules and no soft band, so sections sit 96px apart on flat black.
• section-eyebrow: a violet pill chip in sentence case with a violet edge, above every h2 and every showcase title.
• logo: Plus Jakarta Sans 800 wordmarks, images at 60%, under a 15px sentence case title in DM Sans.
• feature-card: the first card is a violet panel with white text and a deep violet icon tile; on the rest, hover only turns the hairline grey.
• showcase-visual: a 32px gradient stage that cycles violet, magenta and blue down the page; the picture keeps its own surface and a screenshot drops its line.
• steps and step-marker: one #1a1919 panel with 32px corners holds every step, numbered by violet gradient circles with white 800 digits.
• stat-grid, stat and stat-value: separate 20px tiles on the card fill with magenta 800 numbers up to 48px, tabular.
• faq: each question is its own 20px card, 12px apart, with its chevron in a round grey button; the open one gets a violet edge and a violet chevron.
• cta-panel: the biggest violet panel, 32px corners, no border or shadow, a white title, a soft white lead, a white pill with deep violet text, an outline pill and a magenta sparkle in the top right.
• Highlighted plan (card with data-highlighted): the violet panel with white text, a magenta badge and a white button with deep violet text.
• site-footer: back on the ground colour with its hairline, white Plus Jakarta Sans 15px/700 column titles in sentence case, and 36px round grey social buttons.

Everything else is type, space and the kit.

Signed-in screens

The dashboard keeps the frame flat: a #141313 sidebar with a hairline edge, the page on #0e0e0e, #1a1919 cards at 20px corners with no shadow, 24px/700 page titles and a violet tint with violet text on the active nav item.

Sign-in is one #1a1919 card with 40px padding centred on #141313, with 40px fields and a full-width violet submit; no magenta, and no gradient except the small brand mark.

Do and don't

Do

• Put the one big idea on a violet panel with 32px corners: the hero picture, the lead feature, the CTA, the highlighted plan.
• Make every marketing call to action an ink pill: white on dark, black on light, 56px tall in the hero.
• Keep product actions violet with 10px corners. One violet button per view.
• Separate surfaces with a fill step (#0e0e0e page, #1a1919 card, #242323 pressed) and at most one 10% hairline.
• Set every heading in Plus Jakarta Sans 700 or 800 with zero letter spacing, and the hero at 800.
• Keep magenta to the announcement pill, the brush stroke under the headline, the sparkles, the big numbers and the highlighted plan's badge.
• Write eyebrows as violet pill chips in sentence case.
• Use tabular-nums for stats, prices and table numbers.

Don't

• Don't give a card, tile, button or panel a shadow. Only menus, selects, popovers, dialogs, sheets and toasts float.
• Don't tint the greys. No blue black and no warm grey: every neutral stays pure.
• Don't put text on magenta except the dark labels on the announcement pill and the plan badge, and never put text on the magenta or blue stages.
• Don't put the violet button on a violet panel. Inside a panel the tokens turn it white.
• Don't use uppercase tracked micro labels or mono labels.
• Don't add a glow, a grid, dots or noise behind the hero. The stage is flat black with line art.
• Don't round controls past 10px or big panels under 20px. The split is the look.
• Don't use dashed lines or double rules anywhere.

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.