TCPW Design System

01

Point of view

Principles

Rules, not boxes

Separation comes from 1px hairlines, dashed rules between cards, and a heavier ink rule to close a block. Cards have no shadow and usually no background of their own. A box-shadow appears only on layers that float: dropdown panels, the right sheet, the dialog.

Square by default

Every control in the chrome is written with border-radius: 0 explicitly, so inherited styles cannot round it. Imagery and form fields may take 2 to 4px. Only genuinely circular things are circles: avatars, live dots, spinners.

Serif carries the voice, sans carries the data

Playfair Display for titles, big figures and italic asides. Be Vietnam Pro for everything read at speed: body, labels, tables, buttons. The wordmark alone is Andada Pro. Numbers are always tabular.

Colour is state

Ink and paper do the work. Accent green means live or available. Warning amber means low. Negative red means depleted, error, or loss. Tier and plan identities carry their own ink, but never bleed into the chrome around them.

Motion clarifies

One house easing, cubic-bezier(0.16, 1, 0.3, 1), 150 to 350ms. Ink underlines scale in, panels drop 6px, sheets slide from the right. Every animation has a reduced-motion kill switch.

Do

Divide a list with hairlines. Title it with an eyebrow and a serif heading. Close it with an ink rule.

Don't

Wrap each item in a rounded, shadowed card. Use a gradient. Use an emoji as a section icon.

02

Read this first

Two idioms coexist. Build in the first.

The 2026 revamp moved the masthead, footer, pricing, portfolio, screener, and every AI surface to the editorial language. Older data components still carry a rounded card language. New work and any touched file should follow the editorial rules below.

	Editorial (current)	Rounded card (legacy, do not extend)
Where	Navbar, Footer, AISidebar, ai/, TierCard, PricingTiers, portfolio.vue, watchlist/, screener.vue, StockOverview	financial-tables.css, UnifiedFinancialTable, MetricsGrid, MetricGroup, ValueChange, TierBadge, RangeSlider, ToastNotifications
Radius	0 (explicit), 2px stamps, 50% dots	12px to 24px, 6px buttons
Separation	Hairline rules, dashed rules, 1px-gap grids	Card border + box-shadow, hover lift translateY(-1px)
Active tab	2px ink or accent underline	Accent-filled pill with glow shadow
Headers	Uppercase micro-labels, 0.62 to 0.66rem, 0.1 to 0.14em tracking	Sentence case 0.875rem, 600 weight
Gain / loss	--positive-color / --negative-color text, 600 weight	Tinted pill chip at 12px radius

Known drift. The live toast is 12px-rounded with hardcoded gradients. AIOverview still has a 12px container and an Inter literal. Gain and loss colour is defined three ways (tokens, portfolio locals at #10b981 / #ef4444, and literals). Treat these as backlog, not precedent.

03

The one rule people get wrong

Corner radius

Codebase count: 507 declarations of border-radius: 0, all explicit. The rule by element type:

0Anything a user clicks in the chrome: buttons, icon buttons, inputs, selects, tabs, dropdown panels, sheets, dialogs, tables, cards, stamps, the theme toggle track and thumb.

2pxSmall stamps and micro-affordances: free tag, plan CTA, billing thumb, accent dash, tiny thumbnails.

3pxLogin form fields, OTP cells, the segmented control frame, the short-side chip.

4pxImagery: post card images, hero covers, the login card, keyboard hints.

50%Circles only: avatars, live dots, spinner, drawn radio marks.

100pxEditorial metadata pills (sector tag, benchmark chip). Never a control. Never in the masthead or footer.

/* Write it, do not omit it. Scoped and global styles will otherwise leak a radius in. */
.my-button { border-radius: 0; }

04

Quick start

Start here

Tokens. Use assets/tokens.css as-is. It is the app's theme.css with a brand font stack and the house easing added. Never hardcode a hex that has a token.
Reference CSS. assets/ds.css part 1 is the design language as copy-pasteable classes. Lift the rules into a scoped SFC style block, keep the values.
Theme. Set data-theme on <html> before paint. Light is the default. See theme bootstrap.
Components. Copy a demo from Components, or a full SFC from Vue.
Agents. Drop SKILL.md into .claude/skills/tcpw-design/ and the guardrails travel with every prompt. See Agent guide.

05

Contents

Site map

Foundations	Colour tokens in both themes, type scale and specimens, spacing, layout containers, breakpoints, rules, motion, layers, theme implementation.
Components	Live, themeable demos with code: buttons, segmented controls, tabs, forms, chips, notice, dialog, progress, usage ledger, sheet, tables, statement figures, overview card, plan grid, post cards, masthead, dropdown, empty and loading states.
Patterns	The research note anatomy, page shells, data page composition, responsive strategy, and a do/don't gallery.
Vue	Seven SFCs written to the language, with the conventions for scoped styles, tokens, i18n and reduced motion.
Agent guide	SKILL.md: the rules an AI agent must follow to ship UI that belongs in this app.

A broadsheet for the terminal age.