App surface

The full word, both leading S's in the accent, and an accent asterisk floating above each i (drawn over a dotless ı) — the one deliberate glyph-level brand mark (founder logo 2026-07-21). Flat accent colour, no gradient, no drop shadow. The compact mark is the eight-spoke asterisk from the favicon, for the collapsed left nav; it draws in currentColor so a parent can retint it.

One typeface — Inter — carries every word AND every number. Numerals get Inter's tabular figures via font-num, so prices and countdowns align in a column without a second webfont. A real monospace survives only for literal code (font-code) — raw wire frames and the token names on this page. font-mono still works and resolves to the same stack; it is a legacy alias and no longer means monospace.

Round 12 removed the Swiss-grid overlay that used to sit on the page tone — a bordered card on a flat page reads as a discrete object, and the grid was competing with its edge. --grid-line is kept for components that draw their own rules. The scrollbar thumb is its own pair so the light theme can lighten it: --scrollbar-thumb —, --scrollbar-thumb-hover —.

A day cell's numeral weight is driven entirely by whether it HAS events — not by weekday, column or row. Event days render strong; empty days recede to faint; past days dim further regardless of events; today is a solid YELLOW block (founder 2026-08-16 round 2 — accent stays reserved for interactive / selection state) with near-black text and a pulsing dot.

The class-order trap: a day cell's background must resolve to exactly ONE mutually exclusive class — never two conditional utilities layered side by side. Tailwind orders rules by declaration order, not by how cn() concatenates class names, so whichever rule the stylesheet emits LAST silently wins.

Rule: up / down is reserved for MARKET DIRECTION only — PnL sign, 24h change, candle colour, In-Zone status. Never repurposed as a generic success / error pair.

--up aliases the brand's sage, but --down is a separate muted red rather than the brand's oxblood — chosen so the breaking-news alarm can be louder than price direction. Both values on the overview's drift list.

Rule: accent marks INTERACTIVE state and selection — the segmented control's thumb, a selected row, a selected date. Never market direction or category. The calendar's TODAY block moved off the accent to the yellow below (founder 2026-08-16 round 2, item 9), so accent now means exactly one thing.

The demo declares the same yellow three separate times with no shared variable, even though /design calls them one "signal-yellow family"; the foundation's --signal-yellow — is that family, and today and spot alias it.

lib/mood.ts maps each portfolio mood to a representative action score (0 / 15 / 45 / 65 / 95) and resolves it through the ACTIVE action palette rather than inventing a second colour system. Those scores are number tokens, not CSS; the chips read the active palette's buckets.

A palette readout, not a component: /design sets each label in the mood's own colour over a 13% wash of it, which measures about 2:1 for the yellow and orange buckets on the light theme; here the label is strong text and the dot carries the colour. The shipped MoodPanel uses the colour only for its bar.

Crypto reuses --blue-400 and equities reuses --up exactly; political reuses --amber-500. Macro is a near-duplicate of the foundation's teal-400 that is not the same value (foundation › teal).

/design's UNDERLYING_NOTES still describes the SpaceX glyph as inverted to a fixed off-white literal for dark surfaces, while data/underlyings.ts has since switched it to the --text-strong token (its own comment: the literal dark-surface recolour "was invisible on the light theme"). The reference page's note is stale; the token follows the data file.

Tailwind reads the same scale as text-3xs … text-7xl through dist/css/app.tailwind.css, with line-heights that loosen as size drops (1.4 at the small end, 1 at the top) and the snug / tight tracking from 16px up.

Two of the demo's own drawings sit off this scale: the event pill rounds at 3px, below --radius-xs, and the /design modal mock rounds at 8px where the brief puts "cards, panels, modals" at --radius-lg. The recipes follow the brief for the modal and keep the pill as EventPill.tsx has it.

The global reduced-motion rule turns every animation and transition in the app off at once, leaving each instant but intact; the segmented control's thumb and the rail's width change are covered by it.

The recipe is three classes and no look of its own: .sx-flip holds the perspective — on the OUTER element, so every card in a grid shares one vanishing point — .sx-flip-inner keeps the 3D context and turns 180° over 0.5s on --ease-out when data-flipped="true", and the two .sx-flip-faces are stacked absolutely with their backs hidden, the back pre-turned, so the card keeps one height whichever side is up. What is on the faces is the caller's: here StrategyCard's — a panel-tone front that is ONE button (the venue symbol, the side as a chip, the row's Λ beside its payoff, the asset and the structure), and a row-tone back of ordinary text under a title bar with a small Back, its list scrolling and its Buy pinned below. The face turned away is aria-hidden and inert, and focus follows the turn to the arriving face's button. The second card is pinned to its back.

Under reduced motion the global kill switch drops the transition, which leaves the flip instant — still a flip, no motion. The card's 16rem is STRATEGY_CARD_HEIGHT, arithmetic rather than taste: the back's title bar, padding and pinned footer cost 86px and the list keeps 170.

Heights are grid values — — / — / —. Labels are sentence case at semibold: when every control is uppercase and wide-tracked they all shout at the same volume and nothing reads as primary; weight and fill do that job now. Outline is the only outlined control in the set.

Still a solid block — a category colour fills the whole chip with contrast text when active, lowest-tone dim block when off, no border and no leading colour dot. Round 12 changed only the SHAPE (a full pill) and the LABEL (caps at 0.06em).

"In zone" is drawn as the demo draws it: OpenPositionsTable passes --up with no text colour, so Chip falls back to white — 3.46:1 on the sage, under AA at 11px — while the equities category, the same sage, declares the dark ink (5.58:1). The specimen follows the source; the pair belongs in the demo.

The active option is a SOLID cobalt thumb on the sunken track; round 12 rounds both to full pills — a segmented control is the same shape family as a chip, not a miniature set of buttons. Today is an ACTION, never a selectable option — it never renders as active inside the control. The browser owns the exclusive choice and the arrow keys; the thumb slides with :has() and falls back to a solid label without it.

Two native <input type="range"> stacked on one track, as BandSlider.tsx composes them: the recipe hides each input's own track and gives only the THUMB pointer events, so both ends stay grabbable when the band is narrow and the control stays keyboard-steppable, labelled and touch-sized. The track (row tone, 4px), the halo (--surface-hover-light, 8px — what the chain offers, drawn TALLER than the selection so a band cutting into empty space reads at a glance) and the cobalt selection are the component's own elements under the inputs. The thumb is a 16px square at --radius-xs in --accent-bright, deepening to --accent while dragged, with the system's ring on the thumb and none on the input. Drag either end: the band follows, clamped so the two can never cross — "a crossed band is not a state the backend will accept".

The thumb on the halo it usually sits inside measures 2.20:1 on the dark theme (3.19:1 light), under the 3:1 non-text line; it is a 16px square and the cobalt selection beside it is what keeps it findable. The thumb reads --slider-thumb-size; the flip's 1200px perspective is the recipe's one untokenised literal.

Drawn as /design's specimen and the calendar's FiltersBar draw it, by this page's chrome: components/app/ has no .sx-checkbox yet, because the 14px box and its 2px corner would need two tokens first. Each toggle is a <button aria-pressed> holding a box and its word. Off, the box is a --border-strong outline on nothing and the word is --text-faint — neutral, no hint of the category; on, the box fills with categoryColor() and its CheckIcon — the one glyph at stroke 2, 9px — takes categoryTextOn()'s ink, white on breaking and crypto, near-black on the other four, and the word goes --text-strong. The fill and ink arrive as --chip-fill / --chip-ink, the two properties the chip recipe already reads, and are painted only while pressed: the fill IS the state. The All box is the accent's — solid with a white check when every category is on, an accent outline with an --accent-bright minus when some are.

The off outline measures 1.59:1 on the dark panel and 1.56:1 on white, under 3:1 for a component's boundary in both themes; the word's tone is what tells an off box from an on one. The 14px box and its 2px corner sit off the grid and under --radius-xs, and the word is set at --tracking-label where the demo writes tracking-wide.

Panel tone, overflow hidden, the popover shadow, — wide at most, a row-tone header under a hairline. The real modals are animated portals with the same anatomy.

— at rest, — open — pump.fun proportions. An unpinned rail keeps its collapsed width in LAYOUT and the open panel overlays the page (widening the layout on hover would reflow a chart and a grid of live cards); a pinned rail takes its width, because that is a deliberate, persistent choice. Rows are sentence case at semibold; the active row is row tone with a 2px cobalt bar on its left edge. Hover the collapsed Trade icon for its flyout, and the others for their tooltips.

The /design specimen (GalleryStat) sets the figure in the code face and tracks its label with Tailwind's tracking-wide; the brief says "numbers use font-num" and puts labels at --tracking-label, which is what the recipe does.

A — square at --radius-md, the numeral at --fs-2xl in 800. Today's dot pulses on the shared todayPulse keyframes.

Body tone once 7+ days out; strong once inside a week; dim once settled. Lowercase bold. Inside a topic row it is one step smaller.

A full solid category-coloured block with contrast text — no outline, no dot-as-colour. Purely decorative since 2026-07-23: no hover, no click; the pointer falls through to the day cell.

An icon beside a label is aria-hidden; an icon-only control carries the label. At 16–18px the stroke holds up at 200% zoom, and the inherited tone is the control's: an idle row's glyph sits at --text-faint and steps to --text-body on hover with its label.

Each page glyph says what the page sells or is — a dated page, two candlesticks, a document, a bulb, a globe, two links, a case — never a generic pictogram twice. The pair of double chevrons is the rail's pin: collapse («) and expand (»). The three bars are the phone top bar's drawer toggle.

Each Trade sub-page is named for the exposure it sells, so the rail draws the letter itself: Δ direction (the first derivative on price), ν volatility (a curved descender into a pointed foot, then a straight riser — a symmetrical curve reads as a plain "u" at rail size), θ yield (the time decay a yield seller collects).

CheckIcon is the one glyph at stroke 2: it renders at 9px inside a 14px checkbox (the filter checkbox, below) and would vanish at 1.6. The sun shows while in dark mode (click switches to light), the moon while in light. The gear is a rim and then the teeth — the hub-and-spokes it replaced was pixel for pixel the sun.

The trends carry --up / --down where they mean direction (the Direction toggle). The star is outlined until watched, then filled in --star; the wallet's dot is the set's one filled detail inside a stroked glyph.

Reset selection, reset the time range, zones panel visible / hidden (the icon carries the current state; the struck eye's top arc sits at opacity 0.55), and the six-dot grab handle — the one glyph with no stroke at all.

1. 01
   Mono for numerals only.IBM Plex Mono renders prices, scores, countdowns, timestamps — never a heading, label, or button.Stale since round 12: BRAND.md replaced IBM Plex Mono with Inter's tabular figures (font-num); "a real monospace survives only for literal code". The law's intent — numerals in a fixed-width figure, never as chrome — still holds.
2. 02
   No gradients, no emoji.Flat fills everywhere, including the gold-ingot glyph's two-tone bevel standing in for a gradient.
3. 03
   14px is the content floor.--fs-sm (14px) is the minimum size for real content; only micro chip/tag/eyebrow chrome goes under it.Stale: on the round-12 scale --fs-sm is — and --fs-base is the 14px body default; globals.css now puts the content floor at "13–14px".
4. 04
   Hierarchy by tone, not borders.The page → panel → row → hover tone scale is the only separator mechanism for cells, rows, and panels.Softened by round 12: a card now also carries a hairline border — "tone for hierarchy, border for edges" (BRAND.md Rule 3, Card.tsx).
5. 05
   Color = data semantics, not decoration.up/down is market direction only; accent is interactive/today/selection only; category colors are assigned once and never invented ad hoc."today" no longer belongs in the accent's list: the TODAY block moved to the signal yellow (founder 2026-08-16 round 2, item 9), as /design's own Semantic section says two sections earlier.
6. 06
   Hover = background only.No hover rings or outlines — a background-tone step is the entire affordance. The only outline in the system is *:focus-visible.
7. 07
   Emphasis follows events, not position.A calendar day's numeral weight is driven by whether it has events — not by weekday, column, or row.
8. 08
   One mutually-exclusive background class per element.Never layer two conditional bg-* utilities — Tailwind's stylesheet order, not cn()'s concatenation order, decides which wins.
9. 09
   The accent is exact.— — never substitute a close-enough periwinkle or blue.
10. 10
    Solid blocks over outlines.Category/status chips are solid fills with computed contrast text — no leading color dot, no outline-only chip.