@iyulab/house-style 0.7.0 → 0.8.1

package/CHANGELOG.md

@@ -1,5 +1,69 @@
 # Changelog
 
+## [0.8.1] - 2026-10-17
+
+### Fixed
+
+- A KPI figure (`u-info-field size="xl"`) is the house hero step (`--hs-text-hero-size`, 28px at the 24px display) —
+  0.8.0 defined the step but nothing read it. Needs `@iyulab/modern-app` 0.56 or later (the optional peer floor moves
+  from 0.54 to 0.56).
+
+### Documentation
+
+- The guide's KPI section shows the tile grid (`appearance="tile"`, `size="xl"`, a toned tile with a status icon, a
+  blank figure with its reason) next to the strip, and when to use which.
+
+## [0.8.0] - 2026-10-17
+
+The palette moves to the application and the house gains presets; controls, rows and the type ladder grow a step.
+The default look changes — see *Migrating*.
+
+### Added
+
+- **Seed colours.** An application sets `--hs-accent` (the main action, the current item, links, focus) and
+  `--hs-secondary` (a second emphasis) on `:root`. Every step the components need is derived from the seed, in light
+  and dark: `--hs-accent-fill` (the seed, darkened only as far as white text needs), `--hs-accent-contrast`,
+  `--hs-accent-soft`, `--hs-accent-ink`, and the same for `--hs-secondary`. Each derived step is its own token, so an
+  application overrides only the step its seed defeats. The derivations use relative colour syntax and `color-mix()`.
+- **Presets** — `<html hs-palette="…">`, each with a light and a dark side:
+  - `cool` (no attribute, the new default): cool-grey neutrals, the accent as the filled main action, a light sidebar
+    whose current item is the accent tint, the current tab in the accent.
+  - `warm`: the look before this release — warm-grey neutrals, an ink main action, a neutral current item, an ink tab.
+  - `contrast`: the `cool` screen with a dark sidebar; the sidebar re-scopes the neutral roles, so its links, groups,
+    section titles and any menu it opens read as one dark surface.
+- `--u-secondary-*` role tokens (for `color="secondary"` — requires an `@iyulab/components` release with the
+  `secondary` role) and chart series slot two following the secondary seed.
+- Tailwind entry: `accent` · `accent-soft` · `accent-ink` · `on-accent` (and `secondary-*`) colours, `rounded-pill`.
+
+### Changed
+
+- Controls are 32 / 36 / 40 (were 28 / 32 / 40) — buttons and fields alike, still a function of `--u-density`; buttons
+  are semibold, md at the density size. Labelled fields stay 40.
+- Control, field and menu-item corners are 8px (were 6px); cards stay 10px. Tags are pills.
+- Table rows are 44px, compact 36px (were 40 / 32). Cells are at the body size (14px) with a 13px semibold header;
+  `.hs-table` keeps a 20px edge on its first and last cells.
+- Type: display 24px (was 22px) with a 32px line, overline tracking 0.04em; the hero figure stays 28px (display + 4).
+- Tabs (`u-tab-nav`, `u-tab-panel`): the current tab takes the preset's tab colour, 14px, 10px × 12px.
+- Shell: a 240px sidebar of 38px rows (8px × 10px, 18px icons, 10px gap, 8px corners); main padding 20px 32px 48px;
+  20px between page sections (`.hs-page`, `.hs-detail__cols`, `.hs-grid-cards`).
+- Cool neutrals: canvas `#F5F6F8`, lines `#E0E0E0`, body text `#333232`, secondary text `#666666`; field edges stay
+  at 3:1 (`#858C96`).
+
+### Removed
+
+- `--hs-brand`, `--hs-brand-soft`, `--hs-brand-ink` and the Tailwind `brand*` colours — use the seeds.
+
+### Migrating
+
+- Brand tokens: `--hs-brand` → `--hs-accent` (one seed; drop `-soft`/`-ink` unless the derived step does not suit you,
+  then set `--hs-accent-soft` / `--hs-accent-ink`). Tailwind `bg-brand` → `bg-accent`, `bg-brand-soft` →
+  `bg-accent-soft`, `text-brand-ink` → `text-accent-ink`.
+- To keep the previous colours: `<html hs-palette="warm">`. The size changes are not part of a preset; to keep the
+  previous sizes, set the tokens (`--u-radius-lg: 6px`, `--hs-row: 40px`, `--u-text-display-size: 22px`, …) and the
+  control padding on your own `:root` / `u-button`.
+- Requires `@iyulab/components` 2.29.0 or later (peer range `^2.29.0`, was `^2.26.0`) — the house sets the
+  `secondary` role tokens, which components reads from 2.29.0.
+
 ## [0.7.0] - 2026-10-16
 
 ### Removed

package/README.md

@@ -36,7 +36,7 @@ so its preflight would beat the theme; `tailwind.css` imports the theme into Tai
 |---|---|
 | `styles/index.css` (package root) | everything below plus Pretendard — for apps without Tailwind |
 | `styles/theme.css` | the theme without fonts (bring your own face) |
-| `styles/tokens.css` | house values for the `--u-*` token axes, light and dark; brand tokens `--hs-brand*` |
+| `styles/tokens.css` | the presets (`cool` · `warm` · `contrast`, light and dark) for the `--u-*` token axes, the seeds `--hs-accent` · `--hs-secondary` and their derived steps, and the house scale |
 | `styles/components.css` | the document flow (body text, `h1`–`h6`, block gaps, code spans, native control and scrollbar colours) and sizes and finish for `u-button`, `u-card`, `u-drawer`, `flex-table`, the app shell |
 | `styles/patterns.css` | `hs-*` layout patterns — page head, saved views, filter bar, stat strip, table card, callout, form sections, side-sheet footer |
 | `styles/tailwind.css` | the Tailwind v4 entry: fonts + theme (in Tailwind's `components` layer) + role utilities — `bg-canvas`, `text-ink-weak`, `border-line`, `bg-warning-soft`, `rounded-card` … |
@@ -56,30 +56,46 @@ Requires `@iyulab/components` 2.0 or later (the release that put its defaults in
 Because the application is unlayered, a plain `:root { … }` rule overrides the theme — no
 specificity tricks, no load-order rules. Scope a mode-specific value with `:root[theme="dark"]`.
 
-### Brand it
+### Palette — seeds from the app, balance from a preset
 
-The house is neutral on purpose. An application sets its identity colour with three tokens and
-keeps it out of buttons and warnings (a red brand next to a red "danger" reads as one colour):
+The application decides its colours; the house decides how the screen is balanced around them.
+
+**Seeds.** Two colours on `:root`. Every step the components need is derived from them — a fill that white text
+can sit on, a soft tint (the current navigation item, a selected row), a readable ink (links, the current tab),
+and the dark-mode steps:
 
 ```css
 :root {
-  --hs-brand: #c8161d;        /* logo mark */
-  --hs-brand-soft: #fcebec;   /* current navigation item */
-  --hs-brand-ink: #a3121a;    /* its text */
-}
-:root[theme="dark"] {
-  --hs-brand-soft: #3a1a1c;
-  --hs-brand-ink: #ff9a9e;
+  --hs-accent: #c8161d;      /* identity: the main action, the current item, links, focus */
+  --hs-secondary: #0f766e;   /* a second emphasis: color="secondary", the second chart series */
 }
 ```
 
-Everything else — warm-grey neutrals, the ink primary action, blue for links and focus, status
-tints, the 22/18/15/14/13/12/11 type ladder, 28/32/40 controls, 40px table rows — comes from the
-theme and can be overridden token by token.
+A derivation cannot promise contrast for every seed (a pale yellow cannot carry white text). Each derived step is
+its own token — `--hs-accent-fill` · `--hs-accent-contrast` · `--hs-accent-soft` · `--hs-accent-ink` (and the same
+for `--hs-secondary`) — so an application overrides only the step its seed defeats. Set seeds on `:root`: a step
+derived there does not follow a seed set further down the tree. Status colours (info · success · warning · danger)
+never follow the seeds, so a red brand and «danger» stay two colours.
+
+**Presets.** The balance of the whole screen — the temperature of the neutrals, the distance between canvas,
+surface, lines and text, whether the main action is the accent or ink, and how dark the shell is. Each has a light
+and a dark side (`theme="dark"`):
+
+| `<html hs-palette="…">` | Neutrals | Main action | Sidebar | Current tab |
+|---|---|---|---|---|
+| *(none)* `cool` | cool grey | accent fill | light | accent |
+| `warm` | warm grey | ink | light, neutral current item | ink |
+| `contrast` | cool grey | accent fill | dark | accent |
+
+One filled button per view under every preset — the rest are outlined, plain or in a menu.
+
+**Fixed by the house** (token by token overridable): the 24/18/15/14/13/12/11 type ladder in Pretendard,
+32/36/40 controls, 8px controls and menu items, 10px cards, pill status tags, 44px table rows (36px compact),
+a 240px sidebar of 38px rows.
 
 The type ladder is the `--u-text-*-size` steps plus two house steps derived from them —
 `--hs-text-dense-size` (between body and label: table cells, definition lists, callouts) and
-`--hs-text-hero-size` (display + 6px: a headline figure). Every pattern reads a step, so rescaling the
+`--hs-text-hero-size` (display + 4px: a headline figure). Every pattern reads a step, so rescaling the
 ladder (a larger mode, a product system) carries the patterns along.
 
 ### Text outside components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/house-style",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "description": "The iyulab house theme: a CSS-only theme for @iyulab components — tokens, component recipes, line-of-business layout patterns and a Tailwind CSS v4 preset — plus the guide site that documents it.",
   "license": "MIT",
   "repository": {
@@ -58,9 +58,9 @@
     "pretendard": "^1.3.9"
   },
   "peerDependencies": {
-    "@iyulab/components": "^2.26.0",
+    "@iyulab/components": "^2.29.0",
     "@iyulab/flex-table": ">=0.41.0",
-    "@iyulab/modern-app": ">=0.54.0"
+    "@iyulab/modern-app": ">=0.56.0"
   },
   "peerDependenciesMeta": {
     "@iyulab/flex-table": {
@@ -71,13 +71,13 @@
     }
   },
   "devDependencies": {
-    "@iyulab/components": "^2.26.0",
+    "@iyulab/components": "^2.29.0",
     "@iyulab/data-components": "^0.51.0",
-    "@iyulab/enterprise": "^0.34.1",
-    "@iyulab/flex-table": "^0.67.0",
-    "@iyulab/modern-app": "^0.54.0",
+    "@iyulab/enterprise": "^0.35.0",
+    "@iyulab/flex-table": "^0.68.0",
+    "@iyulab/modern-app": "^0.56.0",
     "@iyulab/router": "^0.24.0",
-    "@iyulab/u-widgets": "^0.34.0",
+    "@iyulab/u-widgets": "^0.35.0",
     "@lit/react": "^1.0.8",
     "@types/node": "^26.1.1",
     "@types/react": "^19.3.0",

package/styles/components.css

@@ -93,25 +93,28 @@
   color: var(--u-link-txt-color);
 }
 
-/* ── Button — 28 / 32 / 40, medium weight ─────────────────────────────── *
+/* ── Button — 32 / 36 / 40, semibold ──────────────────────────────────── *
  * Height follows the components' own formula (1.5em line + 2 × padding + 2px border), so
  * these are padding values, not fixed heights: text and icon-only buttons stay equal.
- * The font sizes are terms of that height formula (the control ladder 28/32/40), not steps of
+ * The font sizes are terms of that height formula (the control ladder 32/36/40), not steps of
  * the text ladder — tying them to `--u-text-*` would change control heights whenever the text
  * ladder is rescaled. They are steps of the control density instead (`--u-density`, the
- * components' size axis): at the default 14px they are 12 / 13 / 14 and the heights 28/32/40;
+ * components' size axis): at the default 14px they are 12 / 14 / 14 and the heights 32/36/40;
  * a host that raises the density (a field or touch mode) grows all three together and in order.
- * Padding is in em for the same reason — the n/13, n/12, n/14 factors give the px values at the
+ * Padding is in em for the same reason — the n/12 and n/14 factors give the px values at the
  * default density exactly. (sm takes the components' own size: density × 6/7.)            */
+u-button {
+  font-weight: 600;
+}
 u-button:not([size]),
 u-button[size='md'] {
-  font-size: calc(var(--u-density, 14px) * 13 / 14);
-  --btn-padding-block: calc(5.25em / 13);   /* 13px: 19.5 + 10.5 + 2 = 32 */
-  --btn-padding-inline: calc(12em / 13);
+  font-size: var(--u-density, 14px);
+  --btn-padding-block: calc(6.5em / 14);    /* 14px: 21 + 13 + 2 = 36 */
+  --btn-padding-inline: calc(14em / 14);
 }
 u-button[size='sm'] {
-  --btn-padding-block: calc(4em / 12);      /* 12px: 18 + 8 + 2 = 28 */
-  --btn-padding-inline: calc(8em / 12);
+  --btn-padding-block: calc(6em / 12);      /* 12px: 18 + 12 + 2 = 32 */
+  --btn-padding-inline: calc(10em / 12);
 }
 u-button[size='lg'] {
   font-size: var(--u-density, 14px);
@@ -122,20 +125,21 @@ u-button[appearance='link'] {
   --btn-padding-inline: 0;
 }
 
-/* ── Text fields — the same three heights as buttons: 28 / 32 / 40.
+/* ── Text fields — the same three heights as buttons: 32 / 36 / 40.
  *    (Components 2.0 renders fields at 14px by default, so a field no longer grows with the
  *    surrounding text; the house sets the box padding per size.) ── */
 :is(u-input, u-select, u-textarea, u-date-picker, u-date-range-picker)[size='sm'] {
-  --u-field-padding-block: calc(4em / 12);     /* 12px: 18 + 8 + 2 = 28 */
+  --u-field-padding-block: calc(6em / 12);     /* 12px: 18 + 12 + 2 = 32 */
 }
 :is(u-input, u-select, u-textarea, u-date-picker, u-date-range-picker)[size='lg'] {
   font-size: var(--u-density, 14px);           /* with the density, like md — the step is the padding */
   --u-field-padding-block: calc(8.5em / 14);   /* 14px: 21 + 17 + 2 = 40 */
 }
 
-/* ── Tag — 22px labels (12px text · 1px block padding · hairline) to sit inside 40px rows.
+/* ── Tag — 22px pills (12px text · 1px block padding · hairline) to sit inside 44px rows.
  *    A status label is the default `soft` appearance (tint, no outline) with `dot`. ── */
 u-tag {
+  border-radius: var(--u-radius-pill, 9999px);
   --tag-padding-block: 1px;
   --tag-padding-inline: 8px;
   --tag-gap: 5px;
@@ -147,7 +151,7 @@ u-tag[size='sm'] {
   --tag-gap: 4px;
 }
 
-/* ── Field — a labelled field is a form row: 40px controls (the side-sheet and edit-form size; toolbars keep 32px
+/* ── Field — a labelled field is a form row: 40px controls (the side-sheet and edit-form size; toolbars keep 36px
  *    with unlabelled controls), the label at the label step in the weak colour, the help line in the weaker colour.
  *    A control's own size wins (`size="sm"` / `"lg"` set the padding on the control itself). ── */
 u-field {
@@ -224,13 +228,21 @@ u-rich-table::part(selection-info) {
   color: var(--u-txt-color);
 }
 
-/* ── Tab strip of links (saved views) — ink, not blue: the current view is ink text with an ink underline,
- *    at the dense text step. ── */
+/* ── Tabs — the current tab is the preset's tab colour (the accent ink; ink under `warm`) with a 2px bar, at the
+ *    body step, 10px × 12px; the others stay in the weak ink. The same for a strip of links (saved views) and a tab
+ *    panel. ── */
 u-tab-nav {
-  --tab-nav-color: var(--u-txt-color);
-  font-size: var(--hs-text-dense-size, 13px);
+  --tab-nav-color: var(--hs-tab-current-color);
+}
+u-tab-panel {
+  --tab-panel-color: var(--hs-tab-current-color);
 }
-u-tab-nav u-tab[active] {
+:is(u-tab-nav, u-tab-panel) u-tab {
+  font-size: var(--u-text-body-size, 14px);
+  --tab-padding-block: 10px;
+  --tab-padding-inline: 12px;
+}
+:is(u-tab-nav, u-tab-panel) u-tab[active] {
   font-weight: 600;
 }
 
@@ -282,15 +294,15 @@ u-drawer::part(body) {
   scrollbar-color: var(--u-border-color-strong) transparent;
 }
 
-/* ── Data table (`@iyulab/flex-table`) — 40px rows, 13px cells, quiet header,
+/* ── Data table (`@iyulab/flex-table`) — 44px rows, body-size cells, a quiet 13px semibold header,
  *    no zebra (hover and selection carry the row), tabular figures. ──────── */
 flex-table {
   --ft-font-family: var(--u-font-base);
-  --ft-font-size: var(--hs-text-dense-size, 13px);
+  --ft-font-size: var(--u-text-body-size, 14px);
   --ft-row-height: var(--hs-row);
   --ft-cell-padding-inline: 12px;
-  --ft-header-font-size: var(--u-text-label-size, 12px);
-  --ft-header-font-weight: 500;
+  --ft-header-font-size: var(--hs-text-dense-size, 13px);
+  --ft-header-font-weight: 600;
   --ft-header-text-color: var(--u-txt-color-weak);
   --ft-header-bg: var(--u-bg-color-raised);
   --ft-row-odd-bg: var(--u-bg-color);
@@ -313,11 +325,39 @@ u-page-header::part(subtitle) {
   color: var(--u-txt-color-weak);
 }
 
+/* ── Info field (`@iyulab/modern-app`) — a KPI figure (`size="xl"`) is the house hero step, 28 at the 24 display.
+ *    A tile (`appearance="tile"`) is already a card surface — border, card corner, surface — from the shared tokens. ── */
+u-info-field {
+  --info-field-xl-size: var(--hs-text-hero-size);
+}
+
 /* ── Sidebar layout — the sidebar is a surface separated from the canvas by a hairline.
  *    (The page already sits on `--u-canvas-bg-color`; padding is `--app-main-padding`.) ── */
 u-sidebar-layout::part(sidebar) {
   border-inline-end: 1px solid var(--u-border-color);
 }
+/* The `contrast` preset's dark shell — the sidebar re-scopes the neutral roles to the shell values, so its links,
+ * groups, section titles and any menu it opens read as one dark surface (custom properties inherit through the
+ * shadow tree). The light presets leave the sidebar on the page's own roles. */
+:root[hs-palette='contrast'] u-sidebar-layout::part(sidebar) {
+  --u-bg-color: var(--hs-shell-bg);
+  --u-panel-bg-color: var(--hs-shell-raised);
+  --u-input-bg-color: var(--hs-shell-raised);
+  --u-bg-color-raised: var(--hs-shell-raised);
+  --u-bg-color-hover: var(--hs-shell-hover);
+  --u-bg-color-active: var(--hs-shell-active);
+  --u-border-color: var(--hs-shell-line);
+  --u-border-color-weak: var(--hs-shell-line);
+  --u-txt-color: var(--hs-shell-ink);
+  --u-txt-color-hover: var(--hs-shell-ink);
+  --u-txt-color-active: var(--hs-shell-ink);
+  --u-txt-color-weak: var(--hs-shell-ink-weak);
+  --u-txt-color-weaker: var(--hs-shell-ink-weaker);
+  --u-icon-color: var(--hs-shell-ink-weak);
+  --u-icon-color-hover: var(--hs-shell-ink);
+  --u-icon-color-active: var(--hs-shell-ink);
+  border-inline-end-color: var(--hs-shell-line);
+}
 @media print {
   u-sidebar-layout::part(main) {
     background: none;

package/styles/patterns.css

@@ -15,7 +15,7 @@
  *   edit   = side sheet with .hs-fieldset sections and a pinned u-action-bar (summary slot)
  *
  * Rules the patterns encode:
- *   · one ink (primary) button per view — the rest are outlined, plain or in a menu
+ *   · one filled (main-action) button per view — the rest are outlined, plain or in a menu
  *   · conditions fold, results open — the table starts in the top third of the screen
  *   · numbers right-aligned in tabular figures; an empty value is an em dash
  *   · row actions appear on hover or selection, never as a red trash can on every row
@@ -30,16 +30,17 @@
 .hs-page {
   display: flex;
   flex-direction: column;
-  gap: var(--u-space-lg, 16px);
+  gap: var(--hs-section-gap, 20px);
   min-width: 0;
 }
 
 
-/* ── Plain table — for small server-rendered tables that do not need a grid ── */
+/* ── Plain table — for small server-rendered tables that do not need a grid ──
+ *    44px body-size rows, a 13px semibold header; the first and last cells keep the card's 20px edge. */
 .hs-table {
   width: 100%;
   border-collapse: collapse;
-  font-size: var(--hs-text-dense-size, 13px);
+  font-size: var(--u-text-body-size, 14px);
   line-height: 20px;
   color: var(--u-txt-color);
 }
@@ -47,31 +48,33 @@
   padding: var(--u-space-sm, 8px) var(--u-space-md, 12px);
   text-align: start;
   white-space: nowrap;
-  font-size: var(--u-text-label-size, 12px);
-  line-height: 16px;
-  font-weight: 500;
+  font-size: var(--hs-text-dense-size, 13px);
+  line-height: 18px;
+  font-weight: 600;
   color: var(--u-txt-color-weak);
   background: var(--u-bg-color-raised);
   border-bottom: 1px solid var(--u-border-color);
 }
 .hs-table td {
-  height: var(--hs-row, 40px);
+  height: var(--hs-row, 44px);
   padding: 0 var(--u-space-md, 12px);
   border-bottom: 1px solid var(--u-border-color);
   vertical-align: middle;
 }
+.hs-table :is(th, td):first-child { padding-inline-start: var(--u-space-xl, 20px); }
+.hs-table :is(th, td):last-child { padding-inline-end: var(--u-space-xl, 20px); }
 .hs-table tbody tr:last-child td { border-bottom: 0; }
 .hs-table tbody tr:hover td { background: var(--u-bg-color-hover); }
 .hs-table tr[aria-selected='true'] td { background: var(--u-primary-bg-color); }
 .hs-table tfoot td {
-  height: var(--hs-row, 40px);
+  height: var(--hs-row, 44px);
   font-weight: 600;
 }
 /* One line separates the totals from the body — not one per totals row (subtotal · tax · total). */
 .hs-table tfoot tr:first-child td { border-top: 1px solid var(--u-border-color); }
 /* Totals rows follow the compact height too (`tfoot td` would otherwise win on specificity). */
 .hs-table--compact td,
-.hs-table--compact tfoot td { height: var(--hs-row-compact, 32px); }
+.hs-table--compact tfoot td { height: var(--hs-row-compact, 36px); }
 .hs-table--top td { vertical-align: top; padding-block: var(--u-space-sm, 8px); height: auto; }
 /* Cells (`th` too — header text aligns with its values) */
 .hs-num,
@@ -97,7 +100,7 @@ a.hs-id:hover,
 .hs-table .hs-continued td.hs-keep { color: var(--u-txt-color); }
 /* A group header row with its subtotal. */
 .hs-table .hs-group td {
-  height: 32px;
+  height: var(--hs-row-compact, 36px);
   background: var(--u-bg-color-raised);
   font-size: var(--u-text-label-size, 12px);
   font-weight: 600;
@@ -139,7 +142,7 @@ tr[aria-selected='true'] .hs-row-actions {
 .hs-detail__cols {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--u-space-lg, 16px);
+  gap: var(--hs-section-gap, 20px);
   align-items: flex-start;
 }
 .hs-detail__cols > * {
@@ -153,7 +156,7 @@ tr[aria-selected='true'] .hs-row-actions {
 .hs-grid-cards {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: var(--u-space-lg, 16px);
+  gap: var(--hs-section-gap, 20px);
   align-items: start;
 }
 

package/styles/tailwind.css

@@ -14,12 +14,13 @@
  * utilities (a utility on an element still wins), and still below your unlayered CSS.
  *
  * Also maps the house roles onto utilities that read the live `--u-*` tokens (`@theme inline`),
- * so dark mode and brand overrides reach Tailwind classes with no rebuild:
+ * so dark mode, the preset (`hs-palette`) and the seed colours reach Tailwind classes with no rebuild:
  *
  *   bg-canvas · bg-surface · bg-raised · bg-selected · border-line · border-line-strong
  *   text-ink · text-ink-weak · text-ink-weaker · text-link · ring-focus
  *   {text,bg,border}-{info,success,warning,danger} (text = readable step) · bg-{role}-soft
- *   rounded-control (6) · rounded-card (10) · shadow-raise · shadow-overlay · font-sans
+ *   {bg,text}-accent · bg-accent-soft · text-accent-ink · text-on-accent (and the same for secondary)
+ *   rounded-control (8) · rounded-card (10) · rounded-pill · shadow-raise · shadow-overlay · font-sans
  *
  * Existing markup full of `text-gray-*` / `bg-slate-*`: add `tailwind-neutrals.css` too.
  * ========================================================================== */
@@ -42,9 +43,14 @@
   --color-focus: var(--u-focus-ring-color);
   --color-action: var(--u-primary-color);
   --color-on-action: var(--u-primary-txt-color);
-  --color-brand: var(--hs-brand);
-  --color-brand-soft: var(--hs-brand-soft);
-  --color-brand-ink: var(--hs-brand-ink);
+  --color-accent: var(--hs-accent-fill);
+  --color-accent-soft: var(--hs-accent-soft);
+  --color-accent-ink: var(--hs-accent-ink);
+  --color-on-accent: var(--hs-accent-contrast);
+  --color-secondary: var(--hs-secondary-fill);
+  --color-secondary-soft: var(--hs-secondary-soft);
+  --color-secondary-ink: var(--hs-secondary-ink);
+  --color-on-secondary: var(--hs-secondary-contrast);
 
   --color-info: var(--u-info-color-strong);
   --color-info-soft: var(--u-info-bg-color);
@@ -58,6 +64,7 @@
   --radius-control: var(--u-radius-lg);
   --radius-card: var(--u-radius-xl);
   --radius-badge: var(--u-radius-md);
+  --radius-pill: var(--u-radius-pill, 9999px);
 
   --shadow-raise: var(--u-shadow-sm);
   --shadow-overlay: var(--u-shadow-lg);

package/styles/tokens.css

@@ -6,28 +6,303 @@
  *
  *   built-in defaults (iyu.base)  <  this theme (iyu.house)  <  your application (unlayered)
  *
- * An application brands the house by overriding a handful of tokens with plain `:root` rules —
- * see "Brand" below. No specificity tricks are needed.
+ * Three layers of decision:
  *
- * Character — a quiet, dense line-of-business look:
- *   · neutral first: warm greys carry ~90% of the screen; colour is for status and brand only
- *   · one ink action per view (`--u-primary-*` is ink, not blue)
- *   · blue is reserved for interaction: links, focus, selection
- *   · depth by surface and a hairline, shadows only on things that float
- *   · numbers first: tabular figures everywhere
+ *   the application   two seed colours — `--hs-accent` (identity, the main action, the current item, links,
+ *                     focus) and `--hs-secondary` (a second emphasis: the second chart series, a
+ *                     `color="secondary"` tag or button). Every step the components need (a fill, a soft tint,
+ *                     a readable ink, the dark-mode steps) is derived from the seed here.
+ *   a preset          the balance of the whole screen — the temperature of the neutrals, how far apart canvas,
+ *                     surface, lines and text sit, whether the main action is the accent or ink, and how dark
+ *                     the shell is. `<html hs-palette="…">`: `cool` (no attribute — the default) · `warm` ·
+ *                     `contrast`. Each preset has a light and a dark side (`theme="dark"`).
+ *   the house         shape, size and type (the scale block at the end) — the same under every preset.
  *
- * Contrast (light, against the surface #FFFFFF unless noted): body ink 17.4 · secondary 6.5 ·
- * tertiary 5.6 · link 6.2 · status text on its own tint ≥ 5.5 · input border 3.2 (WCAG 1.4.11).
- * The numbers are re-measured by `tests/contrast.test.mjs`.
+ * Status colours (info · success · warning · danger) belong to the preset, never to the seeds: a red brand
+ * must not make «danger» and «brand» one colour.
+ *
+ * The derivations use CSS relative colour syntax and `color-mix()` (Chromium 119 · Safari 16.4 · Firefox 128).
+ * They cannot promise contrast for every seed (a pale yellow cannot carry white text), so each derived step is
+ * its own token an application can set: `--hs-accent-fill` · `-contrast` · `-soft` · `-ink`. Set seeds on
+ * `:root` — a token derived on `:root` does not follow a seed set further down the tree.
+ *
+ * Contrast and perception floors for every preset × mode are re-measured by `tests/tokens.test.mjs`.
  * ========================================================================== */
 
 @layer iyu.base, iyu.house;
 
 @layer iyu.house {
 
-/* ── light (and no theme attribute) ─────────────────────────────────────── */
+/* ── cool · light — the default (no `hs-palette`) ───────────────────────── */
 :root {
-  /* Neutral ramp — warm grey. Most role tokens derive from it. */
+  /* Seeds — an application sets these (and, only if a seed defeats a derivation, the derived steps). */
+  --hs-accent:    #1F5FBF;
+  --hs-secondary: #B55F40;
+
+  /* Derived steps, light */
+  --hs-accent-fill:        oklch(from var(--hs-accent) min(l, 0.55) c h);   /* the seed, darkened only as far as white text needs */
+  --hs-accent-contrast:    #FFFFFF;
+  --hs-accent-soft:        color-mix(in oklab, var(--hs-accent) 11%, var(--u-bg-color));
+  --hs-accent-ink:         oklch(from var(--hs-accent) min(l, 0.5) c h);
+  --hs-secondary-fill:     oklch(from var(--hs-secondary) min(l, 0.55) c h);
+  --hs-secondary-contrast: #FFFFFF;
+  --hs-secondary-soft:     color-mix(in oklab, var(--hs-secondary) 12%, var(--u-bg-color));
+  --hs-secondary-ink:      oklch(from var(--hs-secondary) min(l, 0.48) c h);
+
+  /* Neutral ramp — cool grey. Most role tokens derive from it. */
+  --u-neutral-0:    #FFFFFF;
+  --u-neutral-50:   #F5F6F8;
+  --u-neutral-100:  #EEF0F3;
+  --u-neutral-200:  #E6E8EC;
+  --u-neutral-300:  #E0E0E0;
+  --u-neutral-400:  #C9CDD3;
+  --u-neutral-500:  #858C96;
+  --u-neutral-600:  #6B6F75;
+  --u-neutral-700:  #666666;
+  --u-neutral-800:  #333232;
+  --u-neutral-900:  #1F2023;
+  --u-neutral-1000: #111214;
+
+  /* Depth — canvas (page) < surface (cards, tables, controls) < floating (shadow) */
+  --u-canvas-bg-color:       #F5F6F8;
+  --u-bg-color:              #FFFFFF;
+  --u-panel-bg-color:        #FFFFFF;
+  --u-input-bg-color:        #FFFFFF;
+  --u-bg-color-raised:       #F5F6F8;   /* table header, toolbar strip, read-only field */
+  --u-bg-color-raised-hover: #E9EBEF;
+  --u-bg-color-hover:        #EEF0F3;
+  --u-bg-color-active:       #E6E8EC;
+  --u-bg-color-disabled:     #F5F6F8;
+  --u-overlay-bg-color:      rgba(17, 20, 24, 0.36);
+
+  /* Lines — a hairline for surfaces, a firmer line for the edge of a field (≥ 3:1, WCAG 1.4.11) */
+  --u-border-color:              #E0E0E0;
+  --u-border-color-weak:         #EAEBED;
+  --u-border-color-strong:       #858C96;
+  --u-border-color-hover:        #858C96;
+  --u-input-border-color:        #858C96;
+  --u-input-border-color-hover:  #5C6168;
+  --u-input-border-color-focus:  var(--hs-accent-fill);
+
+  /* Ink */
+  --u-txt-color:           #333232;
+  --u-txt-color-strong:    #1F2023;
+  --u-txt-color-weak:      #666666;
+  --u-txt-color-weaker:    #6B6F75;
+  --u-txt-color-hover:     #333232;
+  --u-txt-color-active:    #333232;
+  --u-txt-color-disabled:  #A6ABB2;
+  --u-icon-color:          #666666;
+  --u-icon-color-hover:    #333232;
+  --u-icon-color-active:   #333232;
+
+  /* Action — the accent. One filled action per view; the rest are outlined. */
+  --u-primary-color-weakest: color-mix(in oklab, var(--hs-accent-fill) 16%, var(--u-bg-color));
+  --u-primary-color-weaker:  color-mix(in oklab, var(--hs-accent-fill) 30%, var(--u-bg-color));
+  --u-primary-color-weak:    color-mix(in oklab, var(--hs-accent-fill) 55%, var(--u-bg-color));
+  --u-primary-color:         var(--hs-accent-fill);
+  --u-primary-color-strong:  var(--hs-accent-ink);
+  --u-primary-txt-color:     var(--hs-accent-contrast);
+  --u-primary-bg-color:      var(--hs-accent-soft);   /* selected rows, current item */
+
+  /* Second emphasis — the secondary seed (`color="secondary"`) */
+  --u-secondary-color-weakest: color-mix(in oklab, var(--hs-secondary-fill) 16%, var(--u-bg-color));
+  --u-secondary-color-weaker:  color-mix(in oklab, var(--hs-secondary-fill) 30%, var(--u-bg-color));
+  --u-secondary-color-weak:    color-mix(in oklab, var(--hs-secondary-fill) 55%, var(--u-bg-color));
+  --u-secondary-color:         var(--hs-secondary-fill);
+  --u-secondary-color-strong:  var(--hs-secondary-ink);
+  --u-secondary-txt-color:     var(--hs-secondary-contrast);
+  --u-secondary-bg-color:      var(--hs-secondary-soft);
+
+  /* Interaction — links, focus and the mark of a chosen option (a checked box or radio) follow the accent */
+  --u-link-txt-color:      var(--hs-accent-ink);
+  --u-focus-ring-color:    var(--hs-accent-fill);
+  --u-selection-color:     var(--hs-accent-fill);
+  --u-selection-txt-color: var(--hs-accent-contrast);   /* the check drawn on that fill */
+
+  /* Chart series — eight, in order (slot one first, never cycled). Slot one is the accent and slot two the
+     secondary, each held to the series lightness band; the other six are muted, warm-leaning hues chosen as a
+     set: OKLCH L 0.50–0.68, chroma ≥ 0.10, neighbours ΔE ≥ 15 for full colour vision and ≥ 8 under red–green
+     deficiency (Machado 2009), every slot at least ΔE 10 from a status colour — measured with the default seeds.
+     Slot six (light olive) is 2.8:1 on white — six or more series need a legend or labels. */
+  --u-chart-color-1: oklch(from var(--hs-accent) clamp(0.5, l, 0.66) c h);
+  --u-chart-color-2: oklch(from var(--hs-secondary) clamp(0.5, l, 0.66) c h);
+  --u-chart-color-3: #14938D;
+  --u-chart-color-4: #AF8020;
+  --u-chart-color-5: #7D4B92;
+  --u-chart-color-6: #86A645;
+  --u-chart-color-7: #C46E83;
+  --u-chart-color-8: #834B14;
+
+  /* Status — `-color-strong` is the text step (on surface and on its own tint), `-bg-color`
+     the tint, `-color` the solid fill (with `-txt-color` on top). */
+  --u-info-color-weakest:    #D6E3FB;
+  --u-info-color-weaker:     #A9C4F6;
+  --u-info-color-weak:       #5B8DE8;
+  --u-info-color:            #1F5FCC;
+  --u-info-color-strong:     #1A55B8;
+  --u-info-bg-color:         #E8F0FD;
+  --u-info-txt-color:        #FFFFFF;
+
+  --u-success-color-weakest: #CDEBD6;
+  --u-success-color-weaker:  #A3D8B4;
+  --u-success-color-weak:    #4AA26A;
+  --u-success-color:         #1A7F37;
+  --u-success-color-strong:  #176F31;
+  --u-success-bg-color:      #E6F4EA;
+  --u-success-txt-color:     #FFFFFF;
+
+  --u-warning-color-weakest: #FBEBCF;
+  --u-warning-color-weaker:  #F0D9B5;
+  --u-warning-color-weak:    #E8B25A;
+  --u-warning-color:         #E59A24;
+  --u-warning-color-strong:  #A15C00;
+  --u-warning-bg-color:      #FEF5E6;
+  --u-warning-txt-color:     #1F2023;
+
+  --u-danger-color-weakest:  #F9D4D0;
+  --u-danger-color-weaker:   #F2AAA2;
+  --u-danger-color-weak:     #DE6A5D;
+  --u-danger-color:          #B42318;
+  --u-danger-color-strong:   #B42318;
+  --u-danger-bg-color:       #FDECEA;
+  --u-danger-txt-color:      #FFFFFF;
+
+  /* Elevation — surfaces are flat (a hairline); one real shadow for things that float */
+  --u-shadow-color-weaker:   rgba(16, 19, 24, 0.04);
+  --u-shadow-color-weak:     rgba(16, 19, 24, 0.06);
+  --u-shadow-color-normal:   rgba(16, 19, 24, 0.10);
+  --u-shadow-color-strong:   rgba(16, 19, 24, 0.14);
+  --u-shadow-color-stronger: rgba(16, 19, 24, 0.18);
+  --u-shadow-sm: 0 1px 2px rgba(16, 19, 24, 0.06);
+  --u-shadow-md: 0 1px 2px rgba(16, 19, 24, 0.06);
+  --u-shadow-lg: 0 12px 32px rgba(16, 19, 24, 0.14), 0 2px 6px rgba(16, 19, 24, 0.06);
+  --u-shadow-xl: 0 16px 40px rgba(16, 19, 24, 0.18), 0 2px 8px rgba(16, 19, 24, 0.08);
+
+  /* Shell (`@iyulab/modern-app`) — a light sidebar on the surface; the current item is the accent tint */
+  --app-sidebar-bg:              var(--u-bg-color);
+  --app-sidebar-fg:              var(--u-txt-color);
+  --app-header-bg:               var(--u-bg-color);
+  --app-header-fg:               var(--u-txt-color);
+  --app-sidebar-active-bg:       var(--hs-accent-soft);
+  --app-sidebar-active-fg:       var(--hs-accent-ink);
+  --app-sidebar-group-active-fg: var(--hs-accent-ink);
+
+  /* The current tab — its text and its 2px bar */
+  --hs-tab-current-color: var(--hs-accent-ink);
+}
+
+/* ── cool · dark ─────────────────────────────────────────────────────────── */
+:root[theme="dark"] {
+  --hs-accent-fill:        oklch(from var(--hs-accent) max(l, 0.7) c h);
+  --hs-accent-contrast:    #0E1013;
+  --hs-accent-soft:        color-mix(in oklab, var(--hs-accent) 22%, var(--u-bg-color));
+  --hs-accent-ink:         oklch(from var(--hs-accent) max(l, 0.8) c h);
+  --hs-secondary-fill:     oklch(from var(--hs-secondary) max(l, 0.7) c h);
+  --hs-secondary-contrast: #0E1013;
+  --hs-secondary-soft:     color-mix(in oklab, var(--hs-secondary) 24%, var(--u-bg-color));
+  --hs-secondary-ink:      oklch(from var(--hs-secondary) max(l, 0.8) c h);
+
+  --u-neutral-0:    #0E1013;
+  --u-neutral-50:   #111418;
+  --u-neutral-100:  #181B20;
+  --u-neutral-200:  #1F2329;
+  --u-neutral-300:  #2A2F36;
+  --u-neutral-400:  #3D434C;
+  --u-neutral-500:  #646B76;
+  --u-neutral-600:  #8D939B;
+  --u-neutral-700:  #A2A8B0;
+  --u-neutral-800:  #C6CBD1;
+  --u-neutral-900:  #E4E6E9;
+  --u-neutral-1000: #FFFFFF;
+
+  --u-canvas-bg-color:       #111418;
+  --u-bg-color:              #181B20;
+  --u-panel-bg-color:        #181B20;
+  --u-input-bg-color:        #181B20;
+  --u-bg-color-raised:       #1F2329;
+  --u-bg-color-raised-hover: #282D34;
+  --u-bg-color-hover:        #22262D;
+  --u-bg-color-active:       #2A2F37;
+  --u-bg-color-disabled:     #1C1F24;
+  --u-overlay-bg-color:      rgba(0, 0, 0, 0.56);
+
+  --u-border-color:              #2A2F36;
+  --u-border-color-weak:         #23272D;
+  --u-border-color-strong:       #646B76;
+  --u-border-color-hover:        #646B76;
+  --u-input-border-color:        #6B727D;
+  --u-input-border-color-hover:  #A2A8B0;
+
+  --u-txt-color:           #E4E6E9;
+  --u-txt-color-strong:    #FFFFFF;
+  --u-txt-color-weak:      #A2A8B0;
+  --u-txt-color-weaker:    #8D939B;
+  --u-txt-color-hover:     #E4E6E9;
+  --u-txt-color-active:    #E4E6E9;
+  --u-txt-color-disabled:  #575D66;
+  --u-icon-color:          #A2A8B0;
+  --u-icon-color-hover:    #E4E6E9;
+  --u-icon-color-active:   #E4E6E9;
+
+  /* Chart series, dark — the same hues stepped into the dark band (L 0.52–0.66), every slot ≥ 3:1 on the
+     surface and the raised surface. */
+  --u-chart-color-1: oklch(from var(--hs-accent) clamp(0.6, l, 0.66) c h);
+  --u-chart-color-2: oklch(from var(--hs-secondary) clamp(0.6, l, 0.66) c h);
+  --u-chart-color-3: #04A19B;
+  --u-chart-color-4: #B8892D;
+  --u-chart-color-5: #9760AF;
+  --u-chart-color-6: #57833D;
+  --u-chart-color-7: #CF7188;
+  --u-chart-color-8: #9A5F1A;
+
+  --u-info-color-weakest:    #1F3152;
+  --u-info-color-weaker:     #2C4A7E;
+  --u-info-color-weak:       #5E8BE0;
+  --u-info-color:            #8DB3F7;
+  --u-info-color-strong:     #8DB3F7;
+  --u-info-bg-color:         #1B2A44;
+  --u-info-txt-color:        #0E1013;
+
+  --u-success-color-weakest: #1A3826;
+  --u-success-color-weaker:  #2B5A3E;
+  --u-success-color-weak:    #4FB07D;
+  --u-success-color:         #7DD8A5;
+  --u-success-color-strong:  #7DD8A5;
+  --u-success-bg-color:      #16301F;
+  --u-success-txt-color:     #0E1013;
+
+  --u-warning-color-weakest: #3F2E12;
+  --u-warning-color-weaker:  #5E451A;
+  --u-warning-color-weak:    #C99140;
+  --u-warning-color:         #F2B65A;
+  --u-warning-color-strong:  #F2B65A;
+  --u-warning-bg-color:      #3A2A10;
+  --u-warning-txt-color:     #0E1013;
+
+  --u-danger-color-weakest:  #4A1F1B;
+  --u-danger-color-weaker:   #6E2C26;
+  --u-danger-color-weak:     #E0675C;
+  --u-danger-color:          #FF8A80;
+  --u-danger-color-strong:   #FF8A80;
+  --u-danger-bg-color:       #3D1A17;
+  --u-danger-txt-color:      #1A0D0B;
+
+  --u-shadow-color-weaker:   rgba(0, 0, 0, 0.24);
+  --u-shadow-color-weak:     rgba(0, 0, 0, 0.32);
+  --u-shadow-color-normal:   rgba(0, 0, 0, 0.40);
+  --u-shadow-color-strong:   rgba(0, 0, 0, 0.50);
+  --u-shadow-color-stronger: rgba(0, 0, 0, 0.60);
+  --u-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
+  --u-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.40);
+  --u-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.40);
+  --u-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.60), 0 2px 8px rgba(0, 0, 0, 0.45);
+}
+
+/* ── warm · light — the house before 0.8: warm grey, an ink main action, the accent for interaction only ── */
+:root[hs-palette="warm"] {
+  --hs-accent: #2F6FEB;
+
   --u-neutral-0:    #FFFFFF;
   --u-neutral-50:   #F6F6F4;
   --u-neutral-100:  #F1F1EF;
@@ -41,28 +316,24 @@
   --u-neutral-900:  #18191B;
   --u-neutral-1000: #0E0F10;
 
-  /* Depth — canvas (page) < surface (cards, tables, controls) < floating (shadow) */
   --u-canvas-bg-color:       #F6F6F4;
   --u-bg-color:              #FFFFFF;
   --u-panel-bg-color:        #FFFFFF;
   --u-input-bg-color:        #FFFFFF;
-  --u-bg-color-raised:       #F1F1EF;   /* table header, toolbar strip, read-only field */
+  --u-bg-color-raised:       #F1F1EF;
   --u-bg-color-raised-hover: #E5E5E2;
   --u-bg-color-hover:        #F1F1EF;
   --u-bg-color-active:       #EAEAE7;
   --u-bg-color-disabled:     #F1F1EF;
   --u-overlay-bg-color:      rgba(24, 25, 27, 0.32);
 
-  /* Lines */
   --u-border-color:              #E3E3DF;
   --u-border-color-weak:         #ECECE9;
   --u-border-color-strong:       #8F9296;
   --u-border-color-hover:        #8F9296;
   --u-input-border-color:        #8F9296;
   --u-input-border-color-hover:  #5B5E63;
-  --u-input-border-color-focus:  #2F6FEB;
 
-  /* Ink */
   --u-txt-color:           #18191B;
   --u-txt-color-strong:    #0E0F10;
   --u-txt-color-weak:      #5B5E63;
@@ -74,44 +345,13 @@
   --u-icon-color-hover:    #18191B;
   --u-icon-color-active:   #18191B;
 
-  /* Action — ink. The primary button is near-black; selection stays blue. */
+  /* Action — ink. The primary button is near-black; selection stays the accent. */
   --u-primary-color-weakest: #E3E3DF;
   --u-primary-color-weaker:  #C8C9C5;
   --u-primary-color-weak:    #5B5E63;
   --u-primary-color:         #18191B;
   --u-primary-color-strong:  #18191B;
   --u-primary-txt-color:     #FFFFFF;
-  --u-primary-bg-color:      #EEF3FD;   /* selected rows, current item */
-
-  /* Interaction — blue, for links, focus and the mark of a chosen option (a checked box or radio) */
-  --u-link-txt-color:   #1F5FCC;
-  --u-focus-ring-color: #2F6FEB;
-  --u-selection-color:     #2F6FEB;
-  --u-selection-txt-color: #FFFFFF;   /* the check drawn on that fill */
-
-  /* Chart series — eight, in order (slot one first, never cycled). Slot one is the interaction blue, so a
-     one-series chart draws in the colour the rest of the screen uses for "this is the thing"; the other seven
-     are muted, warm-leaning hues chosen as a set: OKLCH L 0.50–0.68, chroma ≥ 0.10, neighbours ΔE ≥ 15 for
-     full colour vision and ≥ 8 under red–green deficiency (Machado 2009), every slot at least ΔE 10 from a
-     status colour. Slot six (light olive) is 2.8:1 on white — six or more series need a legend or labels. */
-  --u-chart-color-1: #2F6FEB;
-  --u-chart-color-2: #B55F40;
-  --u-chart-color-3: #14938D;
-  --u-chart-color-4: #AF8020;
-  --u-chart-color-5: #7D4B92;
-  --u-chart-color-6: #86A645;
-  --u-chart-color-7: #C46E83;
-  --u-chart-color-8: #834B14;
-
-  /* Status — `-color-strong` is the text step (on surface and on its own tint), `-bg-color`
-     the tint, `-color` the solid fill (with `-txt-color` on top). */
-  --u-info-color-weakest:    #D6E3FB;
-  --u-info-color-weaker:     #A9C4F6;
-  --u-info-color-weak:       #5B8DE8;
-  --u-info-color:            #1F5FCC;
-  --u-info-color-strong:     #1A55B8;
-  --u-info-bg-color:         #E8F0FD;
-  --u-info-txt-color:        #FFFFFF;
 
   --u-success-color-weakest: #CDEBD9;
   --u-success-color-weaker:  #A3D8BA;
@@ -119,54 +359,28 @@
   --u-success-color:         #1B7A44;
   --u-success-color-strong:  #1B6E3E;
   --u-success-bg-color:      #E6F4EC;
-  --u-success-txt-color:     #FFFFFF;
 
-  --u-warning-color-weakest: #FBEBCF;
   --u-warning-color-weaker:  #F5D9A3;
-  --u-warning-color-weak:    #E8B25A;
-  --u-warning-color:         #E59A24;
   --u-warning-color-strong:  #8A5100;
   --u-warning-bg-color:      #FDF3E1;
   --u-warning-txt-color:     #18191B;
 
-  --u-danger-color-weakest:  #F9D4D0;
-  --u-danger-color-weaker:   #F2AAA2;
-  --u-danger-color-weak:     #DE6A5D;
-  --u-danger-color:          #B42318;
-  --u-danger-color-strong:   #B42318;
-  --u-danger-bg-color:       #FDECEA;
-  --u-danger-txt-color:      #FFFFFF;
-
-  /* Elevation — a hairline lift for surfaces, one real shadow for things that float */
   --u-shadow-color-weaker:   rgba(16, 17, 19, 0.04);
   --u-shadow-color-weak:     rgba(16, 17, 19, 0.06);
   --u-shadow-color-normal:   rgba(16, 17, 19, 0.10);
   --u-shadow-color-strong:   rgba(16, 17, 19, 0.14);
   --u-shadow-color-stronger: rgba(16, 17, 19, 0.18);
-  --u-shadow-sm: 0 1px 2px rgba(16, 17, 19, 0.06);
-  --u-shadow-md: 0 1px 2px rgba(16, 17, 19, 0.06);
-  --u-shadow-lg: 0 12px 32px rgba(16, 17, 19, 0.14), 0 2px 6px rgba(16, 17, 19, 0.06);
-  --u-shadow-xl: 0 16px 40px rgba(16, 17, 19, 0.18), 0 2px 8px rgba(16, 17, 19, 0.08);
-
-  /* Shell (`@iyulab/modern-app`) */
-  --app-sidebar-bg:          var(--u-bg-color);
-  --app-sidebar-fg:          var(--u-txt-color-weak);
-  --app-header-bg:           var(--u-bg-color);
-  --app-header-fg:           var(--u-txt-color);
-  --app-sidebar-width:       232px;
-  --app-sidebar-active-bg:   var(--hs-brand-soft);
-  --app-sidebar-active-fg:   var(--hs-brand-ink);
-  --app-sidebar-group-active-fg: var(--hs-brand-ink);
-
-  /* Brand — the application's identity colour. The house default is neutral, so an
-     unbranded app looks finished; an application sets these three and nothing else. */
-  --hs-brand:      #18191B;
-  --hs-brand-soft: #EAEAE7;
-  --hs-brand-ink:  #18191B;
+
+  /* The shell keeps the neutral current item; the current tab is ink */
+  --app-sidebar-fg:              var(--u-txt-color-weak);
+  --app-sidebar-active-bg:       var(--u-bg-color-active);
+  --app-sidebar-active-fg:       var(--u-txt-color);
+  --app-sidebar-group-active-fg: var(--u-txt-color);
+  --hs-tab-current-color: var(--u-txt-color);
 }
 
-/* ── dark ───────────────────────────────────────────────────────────────── */
-:root[theme="dark"] {
+/* ── warm · dark ─────────────────────────────────────────────────────────── */
+:root[hs-palette="warm"][theme="dark"] {
   --u-neutral-0:    #0E0F10;
   --u-neutral-50:   #121314;
   --u-neutral-100:  #1A1B1D;
@@ -197,7 +411,6 @@
   --u-border-color-hover:        #6A6D72;
   --u-input-border-color:        #6A6D72;
   --u-input-border-color-hover:  #A3A6AB;
-  --u-input-border-color-focus:  #6E9CF7;
 
   --u-txt-color:           #EDEDEC;
   --u-txt-color-strong:    #FFFFFF;
@@ -216,32 +429,6 @@
   --u-primary-color:         #EDEDEC;
   --u-primary-color-strong:  #EDEDEC;
   --u-primary-txt-color:     #18191B;
-  --u-primary-bg-color:      #1C2638;
-
-  --u-link-txt-color:   #8DB3F7;
-  --u-focus-ring-color: #6E9CF7;
-  --u-selection-color:     #6E9CF7;
-  --u-selection-txt-color: #0E0F10;
-
-  /* Chart series, dark — the same hues stepped into the dark band (L 0.52–0.66), every slot ≥ 3:1 on the
-     surface and the raised surface. Slot one is the dark interaction blue taken to the band's top (#6E9CF7
-     itself is lighter than a filled mark should be on this surface). */
-  --u-chart-color-1: #628FEA;
-  --u-chart-color-2: #C97152;
-  --u-chart-color-3: #04A19B;
-  --u-chart-color-4: #B8892D;
-  --u-chart-color-5: #9760AF;
-  --u-chart-color-6: #57833D;
-  --u-chart-color-7: #CF7188;
-  --u-chart-color-8: #9A5F1A;
-
-  --u-info-color-weakest:    #1F3152;
-  --u-info-color-weaker:     #2C4A7E;
-  --u-info-color-weak:       #5E8BE0;
-  --u-info-color:            #8DB3F7;
-  --u-info-color-strong:     #8DB3F7;
-  --u-info-bg-color:         #1B2A44;
-  --u-info-txt-color:        #0E0F10;
 
   --u-success-color-weakest: #1A3826;
   --u-success-color-weaker:  #2B5A3E;
@@ -249,58 +436,74 @@
   --u-success-color:         #7DD8A5;
   --u-success-color-strong:  #7DD8A5;
   --u-success-bg-color:      #16301F;
-  --u-success-txt-color:     #0E0F10;
 
-  --u-warning-color-weakest: #3F2E12;
   --u-warning-color-weaker:  #5E451A;
-  --u-warning-color-weak:    #C99140;
-  --u-warning-color:         #F2B65A;
   --u-warning-color-strong:  #F2B65A;
   --u-warning-bg-color:      #3A2A10;
   --u-warning-txt-color:     #0E0F10;
 
-  --u-danger-color-weakest:  #4A1F1B;
-  --u-danger-color-weaker:   #6E2C26;
-  --u-danger-color-weak:     #E0675C;
-  --u-danger-color:          #FF8A80;
-  --u-danger-color-strong:   #FF8A80;
-  --u-danger-bg-color:       #3D1A17;
-  --u-danger-txt-color:      #1A0D0B;
-
   --u-shadow-color-weaker:   rgba(0, 0, 0, 0.24);
   --u-shadow-color-weak:     rgba(0, 0, 0, 0.32);
   --u-shadow-color-normal:   rgba(0, 0, 0, 0.40);
   --u-shadow-color-strong:   rgba(0, 0, 0, 0.50);
   --u-shadow-color-stronger: rgba(0, 0, 0, 0.60);
-  --u-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
-  --u-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.40);
-  --u-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.40);
-  --u-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.60), 0 2px 8px rgba(0, 0, 0, 0.45);
+}
+
+/* ── contrast · light — the cool screen with a dark shell ───────────────── *
+ * The sidebar re-scopes the neutral roles to these shell values (components.css), so everything drawn inside
+ * it — links, groups, a menu it opens — reads as one dark surface. */
+:root[hs-palette="contrast"] {
+  --hs-shell-bg:          #1F2937;
+  --hs-shell-raised:      #273244;
+  --hs-shell-hover:       #2B3647;
+  --hs-shell-active:      #334155;
+  --hs-shell-line:        #334155;
+  --hs-shell-ink:         #E5E7EB;
+  --hs-shell-ink-weak:    #A9B1BD;
+  --hs-shell-ink-weaker:  #9AA3AF;
+  --hs-shell-current-bg:  color-mix(in oklab, var(--hs-accent) 42%, var(--hs-shell-bg));
+  --hs-shell-current-ink: #FFFFFF;
+
+  --app-sidebar-bg:              var(--hs-shell-bg);
+  --app-sidebar-fg:              var(--hs-shell-ink);
+  --app-sidebar-active-bg:       var(--hs-shell-current-bg);
+  --app-sidebar-active-fg:       var(--hs-shell-current-ink);
+  --app-sidebar-group-active-fg: var(--hs-shell-current-ink);
+}
 
-  --hs-brand:      #EDEDEC;
-  --hs-brand-soft: #2A2B2E;
-  --hs-brand-ink:  #EDEDEC;
+/* ── contrast · dark ─────────────────────────────────────────────────────── */
+:root[hs-palette="contrast"][theme="dark"] {
+  --hs-shell-bg:          #0B0F14;
+  --hs-shell-raised:      #131A22;
+  --hs-shell-hover:       #18202A;
+  --hs-shell-active:      #212B37;
+  --hs-shell-line:        #1E2630;
+  --hs-shell-ink:         #E4E6E9;
+  --hs-shell-ink-weak:    #A2A8B0;
+  --hs-shell-ink-weaker:  #8D939B;
+  --hs-shell-current-ink: #FFFFFF;
 }
 
-/* ── mode-independent scale: shape, type, spacing ───────────────────────── */
+/* ── mode-independent scale: shape, size, type ──────────────────────────── */
 :root {
-  /* Shape — badge 4 · control 6 · card and table 10 */
+  /* Shape — mark 4 · control and menu item 8 · card and table 10 · status pill */
   --u-radius-sm:   3px;
   --u-radius-md:   4px;
-  --u-radius-lg:   6px;
+  --u-radius-lg:   8px;
   --u-radius-xl:  10px;
   --u-radius-2xl: 12px;
   --u-radius-3xl: 16px;
 
-  /* Type — Pretendard; one ladder 22 / 18 / 15 / 14 / 13 / 12 / 11. Korean gets no positive
-     tracking, so only the largest step is tightened and the overline stays near zero. */
+  /* Type — Pretendard; one ladder 24 / 18 / 15 / 14 / 13 / 12 / 11. Korean gets no positive
+     tracking in running text, so only the largest step is tightened; the overline (a group label) is
+     spaced a little. */
   --u-font-base: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
                  'Noto Sans KR', 'Malgun Gothic', 'Segoe UI', system-ui, sans-serif;
   --u-font-mono: 'JetBrains Mono', D2Coding, ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
 
-  --u-text-display-size:      22px;
+  --u-text-display-size:      24px;
   --u-text-display-weight:    700;
-  --u-text-display-leading:   1.364;
+  --u-text-display-leading:   1.333;
   --u-text-display-tracking:  -0.01em;
   --u-text-title-size:        18px;
   --u-text-title-weight:      700;
@@ -320,42 +523,44 @@
   --u-text-label-tracking:    0;
   --u-text-caption-size:      12px;
   --u-text-caption-weight:    400;
-  --u-text-caption-leading:   1.5;
+  --u-text-caption-leading:   1.333;
   --u-text-caption-tracking:  0;
   --u-text-overline-size:     11px;
   --u-text-overline-weight:   600;
-  --u-text-overline-leading:  1.455;
-  --u-text-overline-tracking: 0.02em;
+  --u-text-overline-leading:  1.273;
+  --u-text-overline-tracking: 0.04em;
 
   /* House-only scale — control heights and table rows (read by components.css · patterns.css) */
-  --hs-control-sm: 28px;
-  --hs-control-md: 32px;
+  --hs-control-sm: 32px;
+  --hs-control-md: 36px;
   --hs-control-lg: 40px;
-  --hs-row:         40px;
-  --hs-row-compact: 32px;
-  --hs-page-padding: 24px;
+  --hs-row:         44px;
+  --hs-row-compact: 36px;
+  --hs-page-padding: 20px 32px 48px;
+  --hs-section-gap: 20px;
 
   /* House type steps beyond the shared ladder — derived from it, so a rescaled ladder (density, a product system)
-     carries them along. Dense = the step between body and label (13 at 14/12): table cells, definition lists,
-     callouts. Hero = a headline figure, display + 6 (28 at 22). */
+     carries them along. Dense = the step between body and label (13 at 14/12): secondary lines, table headers,
+     breadcrumbs. Hero = a headline figure, display + 4 (28 at 24). */
   --hs-text-dense-size: calc((var(--u-text-body-size) + var(--u-text-label-size)) / 2);
-  --hs-text-hero-size:  calc(var(--u-text-display-size) + 6px);
+  --hs-text-hero-size:  calc(var(--u-text-display-size) + 4px);
 
   /* Prose measure — a running paragraph stops around 70 characters a line (`.hs-prose`). */
   --hs-measure: 70ch;
 
-  /* Field box (`@iyulab/components`) — 32px fields beside 32px buttons; 40px inside form sections. In em, so the box
-     follows the control density with the buttons (resolved at the field: 4.5px / 12px at the default 14px). */
-  --u-field-padding-block:  calc(4.5em / 14);
+  /* Field box (`@iyulab/components`) — 36px fields beside 36px buttons; 40px inside form sections. In em, so the box
+     follows the control density with the buttons (resolved at the field: 6.5px / 12px at the default 14px). */
+  --u-field-padding-block:  calc(6.5em / 14);
   --u-field-padding-inline: calc(12em / 14);
-  --u-field-radius:         6px;
+  --u-field-radius:         8px;
 
-  /* Shell (`@iyulab/modern-app`) — 32px navigation rows, 16px icons, a flat current item */
+  /* Shell (`@iyulab/modern-app`) — a 240px sidebar of 38px rows with 18px icons, a flat current item */
   --app-main-padding:           var(--hs-page-padding);
-  --app-sidebar-item-radius:    6px;
-  --app-sidebar-item-gap:       8px;
-  --app-sidebar-item-padding:   6px 12px;
-  --app-sidebar-icon-size:      16px;
+  --app-sidebar-width:          240px;
+  --app-sidebar-item-radius:    8px;
+  --app-sidebar-item-gap:       10px;
+  --app-sidebar-item-padding:   8px 10px;
+  --app-sidebar-icon-size:      18px;
   --app-sidebar-active-shadow:  none;
   --app-sidebar-active-shadow-hover: none;
 }