Ink, paper, rule, figure.

Two palettes, one set of names. Each swatch shows the light value on the left and the dark value on the right. Greys carry the interface. Green, amber and red are reserved for state.

Semantics

Identity inks

Plans and tiers get a personal ink via a local --ink and --ink-rgb. It colours a 2px cap rule, the name, the checkmarks and a tag. It never colours the background beyond a 4.5% tint on the featured plan.

Three families, one job each. Loaded in a single Google Fonts request from theme.css. Weights are limited to the ones listed; do not request more.

Scale

A rule is always 1px solid unless it is one of three named exceptions: the 2px ink cap on dropdown panels and active tabs, the 3px ink bar on notices and accent cap on the overview card, and the 3px folio rule that opens the footer.

.rule          { border: 0; border-top: 1px solid var(--border-color); }
.rule--faint   { border-top-color: var(--border-lighter); }
.rule--dashed  { border-top-style: dashed; }
.rule--strong  { border-top-color: var(--text-primary); }

/* footer opening: 3px ink then 1px hairline 3px below */
.folio { border-top: 3px solid var(--text-primary); position: relative; }
.folio::before { content: ''; position: absolute; left: 0; right: 0; top: 3px; height: 1px; background: var(--border-color); }

1px-gap grids

A grid of cells that must share rules is drawn with gap: 1px on a --border-color backdrop. No cell has its own border, so rules never double.

.plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--border-color);
  background: var(--border-color);
}
.plan { background: var(--card-bg); }

See the summary on the overview. In practice:

• Write border-radius: 0 on every button, input, panel, sheet, dialog, table, card and chip you create. Do not rely on omission.
• Image containers may use 4px (cards, hero) or 2 to 3px (thumbnails).
• Form fields inside the login popup use 3px. Form fields elsewhere use 0.
• Only an element whose width equals its height and which reads as a dot or avatar may use 50%.
• A 100px pill is a metadata tag only (sector, benchmark, result count). It is never a button and never appears in the masthead, footer or a table header.
• The scrollbar thumb keeps its 99px radius. It is browser chrome, not ours.

Spacing rhythm

No spacing tokens exist. The app uses rem for note surfaces and px for chrome. The values that recur:

Control heights

Desktop-first with max-width queries. 768px is the mobile line and matches useDeviceType. 960px is the masthead line. Post cards use container queries instead.

Rules for mobile

• Tables scroll inside their own container. They do not collapse into cards. Add JS-toggled 32px edge fades to signal overflow.
• Text inputs are 16px on mobile so iOS does not zoom.
• Ink buttons become full width inside sheets and notices. Dialog actions reverse to a column so the primary action sits at the bottom.
• Hover tooltips are removed with display: none !important; dotted underlines go with them.
• The right sheet stays a right sheet at full width. It is not a bottom sheet.
• Tap highlight is transparent on every control. Touch targets stay at least 44px.

.post-grid-wrap { container-type: inline-size; }   /* query container = ancestor */
.post-grid { display: grid; grid-template-columns: 1fr; }
@container (min-width: 560px) { .post-grid { grid-template-columns: 1fr 1fr; } }
@container (min-width: 820px) { .post-grid { grid-template-columns: 1fr 1fr 1fr; } }
/* cells own their top and left dashed rule; first row and column drop theirs */

@media (prefers-reduced-motion: reduce) {
  .live-dot, .progress-sheen, .mark { animation: none; }
  .sheet, .sheet-scrim, .dialog, .progress-fill { transition: none; }
}

Every file that animates ends with this block. The masthead uses a blanket kill on all descendants. A banner may keep a 0.15s opacity fade.

Focus

Content and controls: outline: 2px solid var(--accent-color); outline-offset: 2px. Masthead links use an inset ink ring, outline: 2px solid var(--text-primary); outline-offset: -2px. Never remove the outline without replacing it.

Shadows exist only on floating layers and are long, soft and mostly negative-spread, so they read as a cast shadow at the edge, not a glow.

Dark theme shadows are deeper: 0 28px 56px -28px rgba(0,0,0,.8) for panels. Nothing on the page plane casts a shadow.

Light is the default. The choice lives in a theme cookie (light | dark | system) and is resolved to a data-theme attribute on <html> by an inline script in <head>, before first paint. CSS never reads prefers-color-scheme directly.

<script>
(function () {
  try {
    var m = document.cookie.match(/(?:^|; )theme=([^;]*)/);
    var pref = m ? decodeURIComponent(m[1]) : 'light';
    var theme = 'light';
    if (pref === 'dark') theme = 'dark';
    else if (pref === 'system') theme = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    document.documentElement.setAttribute('data-theme', theme);

    /* status bar colour must follow the attribute, not the media query */
    var meta = document.createElement('meta');
    meta.name = 'theme-color';
    meta.content = theme === 'dark' ? '#0e0d0c' : '#ffffff';
    document.head.insertBefore(meta, document.head.firstChild);
  } catch (e) {
    document.documentElement.setAttribute('data-theme', 'light');
  }
})();
</script>

• Style with tokens only. A component needs a dark override only when it uses a literal, such as a plan ink or a shadow. Write it as [data-theme="dark"] .plan-plus { --ink: #34d399 }.
• The logo is a dark PNG. In dark theme it is inverted with filter: invert(1).
• Body colour and background transition over 0.3s so a toggle does not flash.
• The store at app/stores/theme.js owns the cookie and the meta tag. Do not set data-theme from a component.