Kite

Kite is a storybook sky over lavender paper. Headlines are a sturdy serif in deep violet ink, reading text is a light open grotesque, and everything you click is a violet pill. A pastel dawn of sky, periwinkle and pink washes the top of the hero, a few sketched stars drift at its edges, and the page ends at night in midnight plum.

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 native: lavender paper (#f1f2f9) and deep violet ink (#281950). Dark is the same sky at dusk: a midnight plum canvas (#191034) with lavender white ink.
Type	Gelasio 500 for headings, card titles, prices, stats and quotes, tracked tight. Bricolage Grotesque, light (325 to 450), for text, buttons and labels. Spline Sans Mono for code and keys only.
Colour	One violet (#7c3aed) for actions, links, focus and eyebrows. Violet greys for text, lavender for every line. A pastel dawn (sky, periwinkle, pink) for decoration only.
Shape	Pills for everything you click: buttons, badges, tabs, switches, the nav. 10px fields, 16px cards and menus, 24px dialogs, product window and CTA panel.
Depth	Six real shadows, tinted slate or violet in light, never black. White on lavender holds most cards; menus and dialogs get the overlay drop.
Signature	A pastel dawn with sketched stars over the hero, a swash drawn under the headline, a kite for a brand mark, and a night sky that closes the page.

Principles

1. Lavender paper underneath, white on top. Content lifts by tone before it gets a line or a shadow.
2. The serif speaks, the grotesque works. Headings, prices, stats and quotes in Gelasio; buttons, labels and inputs in Bricolage.
3. Nothing you click is square. Every button, badge, tab and switch is a pill.
4. One violet for action. The dawn colours decorate and never carry meaning.
5. The page opens on a dawn and ends at night.

Colour

Palette

Token	Light	Dark	Role
canvas (--background)	#f1f2f9	#191034	The page floor
surface-soft	#f7f7fc	#1d1440	Section bands, sidebars, table heads
surface-card (--muted)	#ebeaf6	#2a2052	Tinted fills: inactive tabs, hover rows, code
surface-strong	#e2e0f2	#342a60	Pressed fills, progress tracks
surface-solid (--popover)	#ffffff	#261c4c	Menus, selects, toasts: always opaque
card	#ffffff	#211843	The card fill
surface-dark	#191034	#0e0922	The inverted panel
hairline (--border)	#e0def1	rgb(196 181 253 / 0.14)	Every border and divider
ink (--foreground)	#281950	#f4f2ff	Headings and primary text
body-strong	#3f3466	#e2ddf7	Emphasised body text
body	#5e537c	#c8c1e6	Running text
muted (--muted-foreground)	#62668a	#a39ac1	Secondary text, captions
muted-soft	#867ca8	#7f76a6	Placeholders, disabled text, icons at rest
primary	#7c3aed	#7c3aed	The action colour
accent (--accent-fill)	#7c3aed	#a78bfa	The saturated accent: links, the accent badge
accent-soft	#ede9fe	#2e2163	The tint an accent label sits on
danger (--destructive)	#be123c	#fb7185	Destructive actions and errors

success, warning and error each come with a -soft tint for the back of a badge or an alert: #047857, #a3520d and #be123c in light, #34d399, #fbbf24 and #fb7185 in dark.

Kite's own variables, read by the landing hooks and the kit: --dawn-1 (#7dd3fc light, #2e9bd6 dark), --dawn-2 (#a5b4fc light, #7178e6 dark), --dawn-3 (#f9a8d4 light, #d65a9f dark), --doodle (#a78bfa light, #c4b5fd dark), --cta-from (#a02be4 light, #a02be4 dark), --cta-to (#4f46e5 light, #4f46e5 dark), --night-muted (#a39ac1 light, #a39ac1 dark), --night-line (rgb(163 154 193 / 0.2) light, rgb(163 154 193 / 0.2) dark), --night-accent (#c4b5fd light, #c4b5fd dark).

How colour is used

• Violet (bg-primary) fills the primary button and checked controls. text-accent marks links, eyebrows, focus rings and checks.
• Text steps from deep violet ink (#281950) for headings to violet greys: body strong #3f3466, body #5e537c, muted #62668a. Never black, never grey.
• Every line is lavender: hairlines #e0def1, field rings #d0cdf2. No grey borders anywhere.
• The dawn (--dawn-1 to --dawn-3: sky, periwinkle, pink) lives only in the hooks: the hero sky, the product glow, showcase bands, the how it works wash, feature icon discs and the CTA horizon.
• The plum, violet, indigo gradient (--cta-from, --primary, --cta-to) shows in five places only: the hero and CTA primary buttons, the kite mark, the highlighted plan's outline and progress fills.

Charts

accent-1 to accent-6 (also chart-1 to chart-6) are six series colours ordered so neighbours stay distinguishable. Six series lead with violet, then sky, orange, emerald, pink and amber, with lighter tints of the same six in dark. Violet always comes first, so the brand colour carries the main 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 Kite is drawn in light first. The theme menu in the header offers light, dark and system and remembers the choice.

Type

Faces

• Gelasio (font-display): headings and display type (with italics).
• Bricolage Grotesque (font-body): running text and interface copy.
• Spline Sans Mono (font-mono): code, ids and tabular labels.

Gelasio is a sturdy book serif with wide round bowls and a flowing italic, so headlines, stats and quotes read like a picture book. Bricolage Grotesque is a light, open grotesque for text and controls, and Spline Sans Mono is its soft sibling for code and keys.

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	64px	1.15	-0.04em	500	The hero headline, desktop
text-display-lg	52px	1.15	-0.035em	500	The hero headline, tablet
text-display-md	36px	1.25	-0.025em	500	Section headlines, the hero on phones
text-display-sm	30px	1.27	-0.022em	500	Section headlines on phones, big numbers
text-title-lg	22px	1.33	-0.018em	500	Page titles in the app
text-title-md	19px	1.37	-0.012em	500	Card titles
text-title-sm	16px	1.45	-0.006em	500	Small headings, table titles
text-body-lg	18px	1.67	0	325	Lead paragraphs
text-body-md	16px	1.6	0.005em	350	Running text
text-body-sm	15px	1.6	0.01em	400	Interface copy, table cells
text-caption	13px	1.45	0.01em	450	Metadata, helper text
text-caption-uppercase	12px	1.5	0.05em	575	Eyebrows above headings
text-button	15px	1	0.01em	450	Buttons
text-nav-link	15px	1.4	0	450	Header and footer links

Rules: one h1 per page. Display sizes are for marketing pages; the app tops out at text-title-lg. Headlines are Gelasio 500, tracked tight: 64px at -0.04em in the hero, 36px at -0.025em for section titles, with lining figures everywhere. Reading text is Bricolage at 325 to 350 and never below 15px; interface text steps up to 400 and 450. Caps live at one size (12px, 575, 0.05em) in the body face, never in the serif.

Space and layout

• Spacing tokens: xxs 4px, xs 8px, sm 12px, md 16px, lg 24px, xl 32px, xxl 48px, section 112px (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 48px, with 112px between sections.
• Density is airy: app cards pad 24px, landing cards 32px, and gaps inside components are 12 to 16px.
• Sections are split by space, not lines or bands. The how it works wash is the one tinted band.

Shape and depth

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

Radii are 4px on checkboxes and keys, 8px on tooltips and menu items, 10px on fields, 16px on cards, menus and alerts, and 24px on dialogs, the product window, showcase stages and the CTA panel. Everything you click is a pill. Borders are 1px lavender, the outline button is a 1.5px violet line, and nothing is dashed. Shadows are tinted slate or violet in light (xs on fields, the violet soft drop on primary buttons, lift on the nav pill and product window, overlay on menus and dialogs); dark mode uses deep plum drops and turns soft into a violet glow.

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 Kite
Button	Always a pill in Bricolage at 450, sentence case. Primary is violet with the violet drop; secondary is a white pill with the lavender ring; outline is a 1.5px violet line with violet text; ghost tints on hover; danger is rose. Sizes are 32, 40 and 48px tall with 14, 15 and 16px labels, and the icon button is a 40px circle. Focus is a violet ring with a 2px gap, and a press nudges the pill down 1px.
Badge	A 22px pill with a 13px label. Neutral is lavender with muted text, accent is the lavender tint with violet text, and status badges use their soft tint with the status colour. The uppercase variant uses the 12px caps.
Card	16px corners, white on lavender with a lavender hairline and no shadow. Soft, strong, outline and dark (the plum night) variants step the tone. Padding is 16, 24 or 32px, and titles are the 19px serif.
Input, Textarea, Select	White 40px fields with 10px corners, a lavender ring and the xs shadow, so they lift off the canvas. Focus turns the line violet with a 3px violet halo; invalid turns it rose. Textareas start at 96px. Select content is a white menu with 16px corners and the overlay shadow, caps group labels, a lavender highlight and a violet check.
Checkbox, RadioGroup, Switch	Both start white with a 1.5px violet grey line, and focus is the violet ring with a 2px gap. The 18px checkbox has 4px corners and fills violet with a white check. The radio stays white with a violet ring and an 8px violet dot, so the two never look alike. Switches are 44 by 24 pills: heather off, violet on, with a white thumb.
Tabs	Default tabs are pills in a lavender pill track; the active tab is white with an inset violet ring. Line tabs drop the track and mark the active tab with a 2px violet bar.
Accordion	Rows split by lavender hairlines, 16px serif questions that turn violet on hover, and a chevron in a 28px lavender disc that turns when the row opens.
Dialog, AlertDialog, Sheet	White panels with 24px corners, a hairline and the overlay shadow, over a plum night scrim with a 2px blur. Titles are the 22px serif and the close is a 32px round ghost. Alert dialogs pair a white secondary pill with a primary or danger action; sheets round only their inner edge.
DropdownMenu, Popover, Select content, Tooltip	White with 16px corners, a hairline and the overlay shadow. Items highlight to the lavender tint with violet icons and checks, labels are caps and shortcuts are Spline Sans Mono. Tooltips invert: deep violet ink with lavender text by day, lavender white with plum text by night.
Table	A mist head row in 12px caps, lavender hairlines between rows, mist on hover and the lavender tint when selected. Numbers are tabular; right align them and set ids and hashes in Spline Sans Mono.
Alert	16px corners and no border. Info sits on the lavender tint with a violet icon; success, warning and danger use their soft tints with the icon in the status colour.
Avatar, Progress, Skeleton, Spinner, Separator, Kbd, Breadcrumb, Pagination, Field, Label, Toaster	Avatars are circles with initials on the lavender tint. Progress is an 8px heather pill with a violet fill that the hooks turn into the plum to indigo gradient. Skeletons pulse in heather and spinners take the current colour. Separators are lavender hairlines. Kbd is white Spline Sans Mono at 12px with a 2px bottom edge. Breadcrumbs split with a small chevron, and the current page in pagination is the violet outline pill. Labels are 15px 500 in ink, with 6px to the field and its help. Toasts are white with the overlay shadow, show status in the icon and act with pills.

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

• site-header: glass over the sky with no bottom line; it fills in with lavender once the page scrolls, so it stays readable over the night panels.
• site-nav: a floating white pill on the lift shadow; the current page is a lavender pill with violet text.
• brand-mark: a kite, a tall diamond in the plum, violet, indigo gradient with the white serif initial.
• hero: reaches up under the header, so the dawn starts at the very top of the page.
• hero-backdrop: a pastel dawn (pink top left, periwinkle top centre, sky top right) that fades out before the product window, with four sketched lilac stars placed clear of the text on wide screens.
• hero-eyebrow: a white pill with a lavender ring and the violet drop; a linked eyebrow turns its ring violet on hover.
• hero-title: balanced lines with a hand drawn swash under the last line, lilac into violet, sized in em.
• hero-subtitle: a light lead held to 36rem with even line breaks.
• hero-actions: the primary button becomes the plum, violet, indigo gradient pill, which slides towards indigo on hover.
• hero-visual and product-preview: the window floats in a white frame with a lavender ring on a blurred watercolour glow; product-preview-bar dots go pink, periwinkle and sky, and its address field is a pill.
• section-eyebrow: violet caps after a small hand drawn sparkle, the same on every section and showcase row.
• section-title and section-description: balanced titles and evenly broken leads.
• section logos: the title moves to violet caps in the body face; each logo is a serif wordmark in ink at 72%.
• feature-card: white cards with no line, 16px corners and 32px padding that lift 2px with the violet drop on hover; each feature-icon sits in a 44px disc washed sky to pink.
• showcase-visual: each picture floats on a sky to pink band with 24px corners that flips direction row by row.
• section how-it-works and soft sections: a faint dawn wash, the page's one tinted band.
• step-marker and step: serif italic numerals on violet discs with a lavender halo, joined by a dotted kite string.
• stat-grid, stat and stat-value: one white panel with 16px corners and serif italic numbers with lining figures.
• testimonial: white cards with no line, the quote in the 19px serif italic.
• faq: serif questions, the chevron in a lavender disc.
• section pricing: the highlighted plan wears the gradient as a 1.5px outline on the lift shadow.
• cta-panel: the night sky with no drop shadow, the dawn rising from its bottom edge, two stars and two sparkles on wide screens, and the gradient pill.
• site-footer: the night, full width, by re-pointing the palette on the element; column titles are caps in the body face.

Everything else is type, space and the kit.

Signed-in screens

The dashboard sits on lavender with a mist sidebar edged by a lavender line, white cards with hairlines, 22px serif page titles, serif stat numbers and charts that lead with violet.

Sign-in is one white card with a hairline and the lift shadow on the mist ground, the kite mark and serif name top left, white fields and a full width violet pill, with no dawn and no stars.

Do and don't

Do

• Put every page on lavender paper (bg-canvas) and lift content onto white (bg-card). White on white always gets a lavender hairline.
• Set every heading, card title, price and stat in Gelasio 500, tracked tight: -0.04em at 64px, -0.025em at 36px.
• Keep reading text light and violet grey: Bricolage 325 to 350 in text-body or text-muted.
• Make every button a pill: primary violet with the violet drop, secondary white with the lavender ring, outline a 1.5px violet line.
• Keep the plum, violet, indigo gradient to its five places: the hero and CTA primary buttons, the kite mark, the highlighted plan's outline and progress fills.
• Keep the dawn (sky, periwinkle, pink) to the hero sky, the product glow, showcase bands, the how it works wash, feature icon discs and the CTA horizon.
• Open each section with the violet sparkle eyebrow, then the serif title, then a light lead paragraph.
• End the page at night: the CTA panel and the footer in plum, with lavender white and mist violet text.

Don't

• Don't set headlines in a sans, and don't set buttons, labels or caps in the serif.
• Don't add a second saturated action colour. Status colours mark status, chart colours mark data, nothing else.
• Don't use square or small corners on buttons, nav, badges or tabs. Pills only.
• Don't use black text or grey lines. Ink is deep violet (#281950), lines are lavender.
• Don't put black or heavy shadows on the lavender canvas. Nothing above 10% alpha in light mode, except menus and dialogs.
• Don't paint the dawn at full strength across a whole section, or behind running text.
• Don't tighten body, button or caps tracking. Only display and title steps go negative.
• Don't add photos, 3D renders or stock illustration. The drawn product pictures, the stars and the swash carry the mood.

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.