@litfamily/litopencode 1.0.31 → 1.0.33

package/skills/frontend-ui-ux/kit/components.css

@@ -0,0 +1,414 @@
+/* frontend-ui-ux kit: components.
+   Reads only the custom properties that tokens.css defines (written by scripts/design-lock.mjs).
+   Never edit a colour, size, radius or font here; change the locked style instead. Classes are
+   prefixed `ui-` so they do not collide with an existing project's names. */
+
+/* ---------- Base ---------- */
+*, *::before, *::after { box-sizing: border-box; }
+html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: light dark; }
+body {
+  margin: 0;
+  background-color: var(--c-canvas);
+  background-image: var(--canvas-pattern);
+  background-size: var(--canvas-pattern-size);
+  color: var(--c-ink);
+  font-family: var(--font-text);
+  font-size: var(--fs-base);
+  line-height: var(--lh-body);
+  font-weight: var(--fw-text);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+img, svg, video, canvas { display: block; max-width: 100%; }
+img, video { height: auto; }
+button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
+h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote { margin: 0; }
+ul[class], ol[class] { list-style: none; padding: 0; }
+a { color: var(--on-head, var(--c-accent-ink)); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
+a:hover { text-decoration-thickness: 2px; }
+[hidden] { display: none !important; }
+::selection { background: var(--c-accent-wash); color: var(--c-ink); }
+:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
+:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }
+/* A monospaced text face has no Hangul, so Korean body and meta text take the display stack instead
+   of mono-width spaces between Pretendard glyphs (--font-text-ko equals --font-text otherwise). */
+body:lang(ko) { font-family: var(--font-text-ko); --font-meta: var(--font-text-ko); --font-heading: var(--font-heading-ko); }
+.ui-visually-hidden {
+  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}
+.ui-skip { position: absolute; left: var(--sp-16); top: -100px; z-index: 50; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-16); background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-control); border-radius: var(--radius-sm); }
+.ui-skip:focus { top: var(--sp-8); }
+
+/* ---------- Type ---------- */
+.ui-display {
+  font-family: var(--font-display);
+  font-weight: var(--fw-display);
+  font-size: var(--fs-display);
+  line-height: var(--lh-display);
+  letter-spacing: var(--track-display);
+  text-transform: var(--display-case);
+  text-wrap: balance;
+}
+:lang(ko) .ui-display, .ui-display:lang(ko) { line-height: var(--lh-display-ko); letter-spacing: calc(var(--track-display) / 2); }
+.ui-h1 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-4xl); line-height: 1.12; letter-spacing: calc(var(--track-display) * 0.7); text-transform: var(--display-case); text-wrap: balance; }
+.ui-h2 { font-family: var(--font-heading); font-weight: var(--fw-display); font-size: var(--fs-3xl); line-height: 1.2; letter-spacing: calc(var(--track-display) * 0.5); text-transform: var(--display-case); text-wrap: balance; }
+.ui-h3 { font-weight: var(--fw-strong); font-size: var(--fs-xl); line-height: 1.3; text-wrap: balance; }
+.ui-h4 { font-weight: var(--fw-strong); font-size: var(--fs-base); line-height: 1.35; }
+.ui-lead { font-size: var(--fs-lg); line-height: var(--lh-body); color: var(--c-ink-2); max-width: 60ch; text-wrap: pretty; }
+.ui-body { max-width: 68ch; text-wrap: pretty; }
+.ui-muted { color: var(--on-head, var(--c-ink-2)); }
+.ui-small { font-size: var(--fs-md); line-height: 1.5; }
+.ui-meta { font-family: var(--font-meta); font-size: var(--fs-sm); line-height: 1.5; color: var(--on-head, var(--c-ink-3)); }
+.ui-label { font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.4; color: var(--on-head, var(--c-accent-ink)); letter-spacing: var(--track-label); text-transform: var(--meta-case); }
+.ui-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
+.ui-code { font-family: var(--font-mono); font-size: 0.92em; background: var(--c-sunken); border-radius: var(--radius-xs); padding: 0.1em 0.35em; }
+@media (max-width: 640px) {
+  .ui-h1 { font-size: var(--fs-3xl); }
+  .ui-h2 { font-size: var(--fs-2xl); }
+}
+
+/* ---------- Layout ---------- */
+.ui-container { width: 100%; max-width: var(--container, 1200px); margin-inline: auto; padding-inline: var(--gutter); }
+.ui-container--narrow { --container: 760px; }
+.ui-container--wide { --container: 1440px; }
+.ui-section { padding-block: var(--section-pad); }
+.ui-section + .ui-section { border-top: var(--bw-rule) solid var(--c-frame); }
+.ui-section--sunken { background: var(--c-sunken); border-top: 0; }
+.ui-section--sunken + .ui-section { border-top: 0; }
+.ui-stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--sp-16)); }
+.ui-stack--tight { --stack-gap: var(--sp-8); }
+.ui-stack--loose { --stack-gap: var(--sp-32); }
+.ui-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--sp-12)); }
+.ui-split { display: grid; gap: var(--sp-48); align-items: center; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
+.ui-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.ui-split--top { align-items: start; }
+.ui-grid { display: grid; gap: var(--grid-gap, var(--sp-24)); grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
+.ui-section-head { display: grid; gap: var(--sp-12); max-width: 60ch; margin-bottom: var(--sp-48); }
+.ui-stack > .ui-section-head { margin-bottom: 0; }
+@media (max-width: 960px) {
+  .ui-split, .ui-split--even { grid-template-columns: minmax(0, 1fr); gap: var(--sp-32); }
+  .ui-grid { grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(0, 1fr)); }
+}
+@media (max-width: 640px) {
+  .ui-grid { grid-template-columns: minmax(0, 1fr); }
+  .ui-section-head { margin-bottom: var(--sp-32); }
+}
+
+/* ---------- Buttons ---------- */
+.ui-btn {
+  --btn-bg: var(--c-surface); --btn-ink: var(--c-ink); --btn-line: var(--c-control);
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8);
+  min-height: 44px; padding: 0 var(--sp-20);
+  border: var(--bw-control) solid var(--control-edge, var(--btn-line)); border-radius: var(--radius-sm);
+  background: var(--btn-bg); color: var(--btn-ink); box-shadow: var(--shadow-control);
+  font-weight: var(--fw-strong); font-size: var(--fs-base); line-height: 1.2; text-decoration: none; white-space: nowrap;
+  cursor: pointer; user-select: none;
+  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
+}
+.ui-btn:hover { --btn-bg: var(--c-sunken); }
+.ui-btn:active { transform: var(--press); box-shadow: var(--shadow-control-pressed); }
+.ui-btn--primary { --btn-bg: var(--c-accent); --btn-ink: var(--c-on-accent); --btn-line: var(--c-accent); }
+.ui-btn--primary:hover { --btn-bg: var(--c-accent-hover); --btn-line: var(--c-accent-hover); }
+.ui-btn--ink { --btn-bg: var(--c-ink); --btn-ink: var(--c-canvas); --btn-line: var(--c-ink); }
+.ui-btn--ink:hover { --btn-bg: var(--c-ink-2); --btn-line: var(--c-ink-2); }
+.ui-btn--quiet { --btn-bg: transparent; --btn-line: transparent; border-color: transparent; box-shadow: none; }
+.ui-btn--quiet:hover { --btn-bg: var(--c-sunken); }
+.ui-btn--danger { --btn-bg: var(--c-negative); --btn-ink: var(--c-surface); --btn-line: var(--c-negative); }
+.ui-btn--sm { min-height: 36px; padding: 0 var(--sp-12); font-size: var(--fs-md); }
+.ui-btn[disabled], .ui-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
+.ui-btn > svg { width: 18px; height: 18px; flex: none; }
+@media (max-width: 768px) { .ui-btn--sm { min-height: 44px; } }
+
+/* ---------- Forms ---------- */
+.ui-field { display: grid; gap: var(--sp-8); }
+.ui-field__label { font-weight: var(--fw-medium); font-size: var(--fs-md); line-height: 1.4; }
+.ui-field__hint { font-size: var(--fs-sm); line-height: 1.5; color: var(--c-ink-3); }
+.ui-field__error { display: flex; gap: var(--sp-8); align-items: flex-start; font-size: var(--fs-sm); line-height: 1.5; color: var(--c-negative); font-weight: var(--fw-medium); }
+.ui-input, .ui-select, .ui-textarea {
+  width: 100%; min-height: 44px; padding: var(--sp-8) var(--sp-12);
+  background: var(--c-surface); color: var(--c-ink);
+  border: var(--bw-control) solid var(--control-edge, var(--c-control)); border-radius: var(--radius-sm);
+  font-size: var(--fs-base); line-height: 1.4;
+  transition: border-color var(--dur-fast) var(--ease);
+}
+.ui-textarea { min-height: 112px; resize: vertical; }
+.ui-select { appearance: none; padding-right: var(--sp-40);
+  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
+.ui-input:hover, .ui-select:hover, .ui-textarea:hover { border-color: var(--control-edge, var(--c-ink-3)); }
+.ui-input:focus-visible, .ui-select:focus-visible, .ui-textarea:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; border-color: var(--c-focus); }
+.ui-input::placeholder, .ui-textarea::placeholder { color: var(--c-ink-3); opacity: 1; }
+.ui-input[aria-invalid="true"], .ui-select[aria-invalid="true"], .ui-textarea[aria-invalid="true"] { border-color: var(--c-negative); }
+.ui-input-group { display: flex; align-items: stretch; }
+.ui-input-group__addon { display: flex; align-items: center; padding: 0 var(--sp-12); background: var(--c-sunken); border: var(--bw-control) solid var(--control-edge, var(--c-control)); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); color: var(--c-ink-2); font-size: var(--fs-md); white-space: nowrap; }
+.ui-input-group .ui-input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; min-width: 0; }
+.ui-check { display: flex; gap: var(--sp-12); align-items: flex-start; min-height: 44px; padding-block: var(--sp-8); cursor: pointer; }
+.ui-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--c-accent); flex: none; }
+.ui-switch { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); min-height: 44px; cursor: pointer; }
+.ui-switch input { appearance: none; flex: none; position: relative; width: 44px; height: 26px; margin: 0; border-radius: var(--radius-pill); background: var(--c-control); cursor: pointer; transition: background-color var(--dur-fast) var(--ease); }
+.ui-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--c-surface); transition: transform var(--dur-fast) var(--ease); }
+.ui-switch input:checked { background: var(--c-accent); }
+.ui-switch input:checked::after { transform: translateX(18px); }
+.ui-segmented { display: inline-flex; flex-wrap: wrap; gap: var(--sp-4); padding: var(--sp-4); background: var(--c-sunken); border-radius: var(--radius-md); }
+.ui-segmented button { min-height: 36px; padding: 0 var(--sp-12); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--c-ink-2); font-weight: var(--fw-medium); font-size: var(--fs-md); cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-8); }
+.ui-segmented button[aria-pressed="true"], .ui-segmented button[aria-selected="true"] { background: var(--c-surface); color: var(--c-ink); box-shadow: 0 0 0 1px var(--c-line); }
+.ui-segmented .ui-count { color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
+.ui-form-actions { display: flex; flex-wrap: wrap; gap: var(--sp-12); align-items: center; }
+@media (max-width: 768px) { .ui-segmented { gap: var(--sp-8); } .ui-segmented button { min-height: 44px; } }
+
+/* ---------- Surfaces ---------- */
+.ui-panel { background: var(--c-surface); border: var(--bw-surface) solid var(--c-frame); border-radius: var(--radius-md); box-shadow: var(--shadow-raised); padding: var(--panel-pad, var(--sp-24)); min-width: 0; }
+.ui-panel--flush { padding: 0; overflow: hidden; }
+/* Panel heads follow the lock: plain, or a bar (inverse ink, or the accent) that bleeds to the panel's
+   edges. --on-head recolours meta, labels, links and status words on a bar; it is unset on plain. */
+.ui-panel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-8) var(--sp-16); margin: calc(var(--panel-pad, var(--sp-24)) * -1 * var(--panel-head-bleed)) calc(var(--panel-pad, var(--sp-24)) * -1 * var(--panel-head-bleed)) var(--sp-16); padding: calc(var(--sp-12) * var(--panel-head-bleed)) calc(var(--panel-pad, var(--sp-24)) * var(--panel-head-bleed)); background: var(--panel-head-bg); color: var(--panel-head-ink); border-radius: calc(var(--radius-sm) * var(--panel-head-bleed)) calc(var(--radius-sm) * var(--panel-head-bleed)) 0 0; --on-head: var(--panel-head-status); }
+.ui-panel--flush > .ui-panel__head { margin: 0 0 var(--sp-16); padding: var(--sp-16) var(--sp-24) calc(var(--sp-16) * var(--panel-head-bleed)); }
+.ui-panel__title { font-weight: var(--fw-strong); font-size: var(--fs-lg); line-height: 1.3; }
+.ui-rule { border: 0; border-top: var(--bw-rule) solid var(--c-frame); margin: 0; }
+.ui-callout { display: grid; gap: var(--sp-4); padding: var(--sp-16); border-radius: var(--radius-md); background: var(--c-sunken); }
+.ui-callout--info { background: var(--c-info-wash); color: var(--c-ink); }
+.ui-callout--positive { background: var(--c-positive-wash); }
+.ui-callout--warning { background: var(--c-warning-wash); }
+.ui-callout--negative { background: var(--c-negative-wash); }
+
+/* ---------- Status ---------- */
+.ui-status { display: inline-flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-md); font-weight: var(--fw-medium); line-height: 1.3; white-space: nowrap; color: var(--on-head, var(--status-ink, var(--c-ink-2))); }
+.ui-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
+.ui-status--positive { --status-ink: var(--c-positive); }
+.ui-status--warning { --status-ink: var(--c-warning); }
+.ui-status--negative { --status-ink: var(--c-negative); }
+.ui-status--info { --status-ink: var(--c-info); }
+.ui-tag { font-family: var(--font-meta); text-transform: var(--meta-case); display: inline-flex; align-items: center; gap: var(--sp-4); padding: 2px var(--sp-8); border-radius: var(--radius-xs); background: var(--c-sunken); color: var(--c-ink-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.5; white-space: nowrap; }
+.ui-tag--positive { background: var(--c-positive-wash); color: var(--c-positive); }
+.ui-tag--warning { background: var(--c-warning-wash); color: var(--c-warning); }
+.ui-tag--negative { background: var(--c-negative-wash); color: var(--c-negative); }
+.ui-tag--info { background: var(--c-info-wash); color: var(--c-info); }
+.ui-tag--accent { background: var(--c-accent-wash); color: var(--c-accent-ink); }
+.ui-tag--accent-2 { background: var(--c-accent-2-wash); color: var(--c-accent-2-ink); }
+
+/* ---------- Figures ---------- */
+.ui-stat { display: grid; gap: var(--sp-4); align-content: start; min-width: 0; }
+.ui-stat__label { font-family: var(--font-meta); text-transform: var(--meta-case); letter-spacing: var(--track-label); font-size: var(--fs-md); color: var(--c-ink-2); line-height: 1.4; }
+.ui-stat__value { font-family: var(--font-heading); font-weight: var(--fw-display); font-size: var(--fs-4xl); line-height: 1.15; letter-spacing: calc(var(--track-display) * 0.5); font-variant-numeric: tabular-nums; }
+.ui-stat__value small { display: inline-block; white-space: nowrap; font-size: var(--fs-lg); font-weight: var(--fw-medium); color: var(--c-ink-3); letter-spacing: 0; }
+.ui-stat__note { font-size: var(--fs-sm); color: var(--c-ink-3); line-height: 1.5; }
+.ui-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--sp-16); }
+@media (max-width: 640px) { .ui-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12); } .ui-stat-row > .ui-stat { padding: var(--sp-16); } .ui-stat-row .ui-stat__value { font-size: var(--fs-3xl); } }
+.ui-stat-row > .ui-stat { background: var(--c-surface); border: var(--bw-surface) solid var(--c-frame); border-radius: var(--radius-md); padding: var(--sp-20) var(--sp-24); box-shadow: var(--shadow-raised); }
+.ui-meter { height: 6px; border-radius: var(--radius-pill); background: var(--c-sunken); overflow: hidden; }
+.ui-meter > span { display: block; height: 100%; background: var(--meter, var(--c-accent)); border-radius: inherit; }
+
+/* ---------- Table ---------- */
+.ui-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: var(--bw-surface) solid var(--c-frame); border-radius: var(--radius-md); background: var(--c-surface); }
+.ui-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); line-height: 1.4; }
+.ui-table th, .ui-table td { padding: var(--cell-y, var(--sp-12)) var(--sp-16); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--c-line); }
+.ui-table thead th { position: sticky; top: 0; z-index: 1; background: var(--c-sunken); color: var(--c-ink-2); font-family: var(--font-meta); text-transform: var(--meta-case); letter-spacing: var(--track-label); font-weight: var(--fw-medium); font-size: var(--fs-sm); white-space: nowrap; }
+.ui-table tbody tr:last-child td { border-bottom: 0; }
+.ui-table tbody tr:hover { background: color-mix(in srgb, var(--c-sunken) 60%, transparent); }
+.ui-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
+.ui-table--compact { --cell-y: var(--sp-8); }
+.ui-sort { display: inline-flex; align-items: center; gap: var(--sp-4); min-height: 32px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
+.ui-sort::after { content: ""; width: 0; height: 0; border-inline: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0; }
+th[aria-sort="ascending"] .ui-sort::after { opacity: 1; transform: rotate(180deg); }
+th[aria-sort="descending"] .ui-sort::after { opacity: 1; }
+th[aria-sort] .ui-sort { color: var(--c-ink); }
+@media (max-width: 768px) { .ui-sort { min-height: 44px; } }
+@media (max-width: 640px) {
+  .ui-table--stack, .ui-table--stack thead, .ui-table--stack tbody, .ui-table--stack tr, .ui-table--stack td { display: block; width: 100%; }
+  .ui-table--stack thead { position: static; }
+  .ui-table--stack thead tr { display: flex; flex-wrap: wrap; gap: var(--sp-8); padding: var(--sp-8) var(--sp-16); background: var(--c-sunken); }
+  .ui-table--stack thead th { position: static; padding: 0; border: 0; background: none; }
+  .ui-table--stack tr { padding: var(--sp-12) var(--sp-16); border-bottom: 1px solid var(--c-line); }
+  .ui-table--stack td { display: grid; grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); gap: var(--sp-12); padding: var(--sp-4) 0; border: 0; text-align: left; }
+  .ui-table--stack td::before { content: attr(data-label); color: var(--c-ink-3); font-size: var(--fs-sm); }
+  .ui-table--stack .is-num { text-align: left; }
+}
+
+/* ---------- Lists ---------- */
+.ui-list { display: grid; }
+.ui-list > li { display: flex; gap: var(--sp-12); align-items: flex-start; justify-content: space-between; padding: var(--sp-12) 0; border-bottom: 1px solid var(--c-line); }
+.ui-list > li:last-child { border-bottom: 0; }
+.ui-steps { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--sp-32); counter-reset: step; }
+.ui-steps > li { counter-increment: step; display: grid; gap: var(--sp-8); align-content: start; padding-top: var(--sp-16); border-top: 2px solid var(--c-ink); }
+.ui-steps > li::before { content: counter(step); font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--c-accent-ink); }
+@media (max-width: 860px) { .ui-steps { grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); } }
+.ui-checklist > li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--sp-12); padding-block: var(--sp-4); }
+.ui-checklist > li::before { content: ""; width: 10px; height: 6px; margin: 0.5em 0 0 3px; border-left: 2px solid var(--c-accent); border-bottom: 2px solid var(--c-accent); transform: rotate(-45deg); }
+
+/* ---------- Disclosure, tabs, dialog ---------- */
+.ui-disclosure { border-bottom: 1px solid var(--c-line); }
+.ui-disclosure:first-of-type { border-top: 1px solid var(--c-line); }
+.ui-disclosure > summary { margin-block: var(--sp-4); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-16); min-height: 56px; padding-block: var(--sp-12); cursor: pointer; list-style: none; font-weight: var(--fw-strong); font-size: var(--fs-lg); line-height: 1.35; }
+.ui-disclosure > summary::-webkit-details-marker { display: none; }
+.ui-disclosure > summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform var(--dur-ui) var(--ease); }
+.ui-disclosure[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
+.ui-disclosure > :not(summary) { padding-bottom: var(--sp-20); color: var(--c-ink-2); max-width: 68ch; }
+.ui-tabs { display: flex; gap: var(--sp-4); border-bottom: 1px solid var(--c-line); overflow-x: auto; }
+.ui-tabs [role="tab"] { min-height: 44px; padding: 0 var(--sp-12); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--c-ink-2); font-weight: var(--fw-medium); cursor: pointer; white-space: nowrap; }
+.ui-tabs [role="tab"][aria-selected="true"] { color: var(--c-ink); border-bottom-color: var(--c-accent); }
+.ui-dialog { width: min(480px, calc(100vw - 32px)); padding: 0; border: var(--bw-surface) solid var(--c-frame); border-radius: var(--radius-lg); background: var(--c-surface); color: var(--c-ink); box-shadow: var(--shadow-overlay); }
+.ui-dialog::backdrop { background: var(--c-ink); opacity: 0.45; }
+.ui-dialog__body { display: grid; gap: var(--sp-16); padding: var(--sp-24); }
+.ui-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-12); padding: var(--sp-16) var(--sp-24); border-top: 1px solid var(--c-line); background: var(--c-sunken); }
+.ui-toast-region { position: fixed; z-index: 40; right: var(--sp-16); bottom: var(--sp-16); display: grid; gap: var(--sp-8); max-width: min(400px, calc(100vw - 32px)); }
+.ui-toast { display: flex; gap: var(--sp-12); align-items: flex-start; padding: var(--sp-12) var(--sp-16); border-radius: var(--radius-md); background: var(--c-ink); color: var(--c-canvas); box-shadow: var(--shadow-overlay); font-size: var(--fs-md); }
+
+/* ---------- Site chrome (read-once pages) ---------- */
+.ui-sitebar { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--c-canvas) 94%, transparent); border-bottom: var(--bw-rule) solid var(--c-frame); }
+.ui-sitebar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-24); min-height: 64px; }
+.ui-brand { white-space: nowrap; display: inline-flex; align-items: center; gap: var(--sp-8); color: var(--c-ink); font-weight: var(--fw-display); font-size: var(--fs-lg); letter-spacing: calc(var(--track-display) * 0.4); text-decoration: none; min-height: 44px; }
+.ui-brand svg { width: 20px; height: 20px; }
+.ui-sitenav { display: flex; align-items: center; gap: var(--sp-8); }
+.ui-sitenav a:not(.ui-btn) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-12); color: var(--c-ink-2); font-weight: var(--fw-medium); text-decoration: none; border-radius: var(--radius-sm); }
+.ui-sitenav a:not(.ui-btn):hover { color: var(--c-ink); background: var(--c-sunken); }
+.ui-menu { display: none; }
+@media (max-width: 860px) {
+  .ui-sitenav { display: none; }
+  .ui-menu { display: block; position: relative; }
+  .ui-menu > summary { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--sp-12); border: var(--bw-control) solid var(--control-edge, var(--c-control)); border-radius: var(--radius-sm); cursor: pointer; list-style: none; font-weight: var(--fw-medium); }
+  .ui-menu > summary::-webkit-details-marker { display: none; }
+  .ui-menu__panel { position: absolute; right: 0; top: calc(100% + var(--sp-8)); display: grid; min-width: 220px; padding: var(--sp-8); background: var(--c-surface); border: var(--bw-surface) solid var(--c-frame); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); }
+  .ui-menu__panel a:not(.ui-btn) { display: flex; align-items: center; min-height: 44px; padding: 0 var(--sp-12); color: var(--c-ink); text-decoration: none; border-radius: var(--radius-sm); }
+  .ui-menu__panel .ui-btn { margin-top: var(--sp-8); }
+}
+.ui-hero { padding-block: var(--hero-pad); }
+.ui-hero__copy { display: grid; gap: var(--sp-24); align-content: start; min-width: 0; }
+.ui-hero__art { display: grid; place-items: center; min-width: 0; }
+/* The stage hero gives the signature moment the larger column and the height to be bold in. */
+.ui-hero--stage .ui-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
+.ui-hero--stage .ui-hero__art { min-height: min(560px, 64vh); align-items: center; justify-items: stretch; }
+@media (max-width: 960px) { .ui-hero--stage .ui-split { grid-template-columns: minmax(0, 1fr); } .ui-hero--stage .ui-hero__art { min-height: 0; } }
+.ui-quote { display: grid; gap: var(--sp-24); max-width: 52ch; }
+.ui-quote blockquote { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-2xl); line-height: 1.4; letter-spacing: -0.01em; text-wrap: pretty; }
+.ui-quote figcaption { display: grid; gap: 2px; font-size: var(--fs-md); color: var(--c-ink-2); }
+.ui-quote figcaption strong { color: var(--c-ink); font-weight: var(--fw-strong); }
+.ui-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-16); align-items: stretch; }
+.ui-plan { display: flex; flex-direction: column; gap: var(--sp-20); padding: var(--sp-32) var(--sp-24); background: var(--c-surface); border: var(--bw-surface) solid var(--c-frame); border-radius: var(--radius-md); box-shadow: var(--shadow-raised); }
+.ui-plan--featured { border-color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink); }
+.ui-plan__price { font-family: var(--font-heading); font-weight: var(--fw-display); font-size: var(--fs-4xl); line-height: 1.15; letter-spacing: calc(var(--track-display) * 0.5); font-variant-numeric: tabular-nums; }
+.ui-plan__price small { font-family: var(--font-text); font-size: var(--fs-md); font-weight: var(--fw-text); color: var(--c-ink-3); letter-spacing: 0; }
+.ui-plan .ui-btn { margin-top: auto; }
+@media (max-width: 960px) { .ui-plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; } }
+.ui-cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-24); }
+.ui-footer { padding-block: var(--sp-48); background: var(--c-ink); color: var(--c-canvas); }
+.ui-footer a { color: inherit; }
+.ui-footer .ui-meta { color: var(--c-canvas); opacity: 0.75; }
+.ui-pixel { image-rendering: pixelated; shape-rendering: crispEdges; max-width: 100%; height: auto; }
+
+/* ---------- App chrome (work surfaces) ---------- */
+.ui-app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
+.ui-app__nav { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-24); padding: var(--sp-20) var(--sp-16); border-right: var(--bw-rule) solid var(--c-frame); background: var(--c-surface); }
+.ui-app__main { min-width: 0; display: flex; flex-direction: column; }
+.ui-navlist { display: grid; gap: var(--sp-4); }
+.ui-navlist a, .ui-navlist button { display: flex; align-items: center; gap: var(--sp-12); min-height: 40px; padding: 0 var(--sp-12); border: 0; border-radius: var(--radius-sm); background: none; color: var(--c-ink-2); font-weight: var(--fw-medium); font-size: var(--fs-md); text-decoration: none; text-align: left; cursor: pointer; }
+.ui-navlist a:hover, .ui-navlist button:hover { background: var(--c-sunken); color: var(--c-ink); }
+.ui-navlist [aria-current="page"], .ui-navlist [aria-current="true"] { background: var(--c-sunken); color: var(--c-ink); box-shadow: inset 2px 0 0 var(--c-accent); }
+.ui-navlist svg { width: 18px; height: 18px; flex: none; }
+.ui-navgroup { display: grid; gap: var(--sp-8); }
+.ui-navgroup__label { padding: 0 var(--sp-12); font-family: var(--font-meta); text-transform: var(--meta-case); letter-spacing: var(--track-label); font-size: var(--fs-xs); color: var(--c-ink-3); font-weight: var(--fw-medium); }
+.ui-topbar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-12) var(--sp-24); min-height: 64px; padding: var(--sp-12) var(--work-gutter); background: color-mix(in srgb, var(--c-canvas) 94%, transparent); border-bottom: var(--bw-rule) solid var(--c-frame); }
+.ui-page { display: grid; gap: var(--sp-24); padding: var(--sp-24) var(--work-gutter) var(--sp-48); }
+.ui-container > .ui-page { padding-inline: 0; }
+.ui-page__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-16); }
+.ui-page__title { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-2xl); line-height: 1.2; letter-spacing: calc(var(--track-display) * 0.4); text-transform: var(--display-case); }
+.ui-workgrid { display: grid; gap: var(--sp-16); grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
+.ui-span-12 { grid-column: span 12; } .ui-span-8 { grid-column: span 8; } .ui-span-7 { grid-column: span 7; }
+.ui-span-6 { grid-column: span 6; } .ui-span-5 { grid-column: span 5; } .ui-span-4 { grid-column: span 4; } .ui-span-3 { grid-column: span 3; }
+.ui-scroll { max-height: var(--scroll-max, 420px); overflow-y: auto; overscroll-behavior: contain; }
+.ui-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-12); }
+.ui-panel__head > .ui-toolbar { flex: 1 1 360px; justify-content: flex-end; }
+.ui-search { position: relative; flex: 1 1 220px; max-width: 320px; }
+.ui-empty { display: grid; justify-items: center; gap: var(--sp-8); padding: var(--sp-48) var(--sp-24); text-align: center; color: var(--c-ink-2); }
+@media (max-width: 1100px) {
+  .ui-span-8, .ui-span-7, .ui-span-6, .ui-span-5, .ui-span-4 { grid-column: span 12; }
+  .ui-span-3 { grid-column: span 6; }
+}
+@media (max-width: 860px) {
+  .ui-app { grid-template-columns: minmax(0, 1fr); }
+  .ui-app__nav { position: static; height: auto; flex-direction: row; align-items: center; gap: var(--sp-12); padding: var(--sp-8) var(--work-gutter); border-right: 0; border-bottom: var(--bw-rule) solid var(--c-frame); overflow-x: auto; }
+  .ui-app__nav .ui-navgroup__label { display: none; }
+  .ui-navlist { display: flex; gap: var(--sp-8); }
+  .ui-navlist a, .ui-navlist button { min-height: 44px; white-space: nowrap; }
+  .ui-navlist [aria-current="page"], .ui-navlist [aria-current="true"] { box-shadow: inset 0 -2px 0 var(--c-accent); }
+  .ui-topbar { position: static; }
+  .ui-search { max-width: none; }
+}
+@media (max-width: 640px) { .ui-span-3 { grid-column: span 12; } }
+
+/* ---------- Settings (guided forms) ---------- */
+.ui-settings { display: grid; grid-template-columns: 220px minmax(0, 720px); gap: var(--sp-48); align-items: start; }
+.ui-settings__nav { position: sticky; top: 88px; }
+.ui-settings__body { display: grid; gap: var(--sp-32); min-width: 0; }
+.ui-setting-section { display: grid; gap: var(--sp-20); scroll-margin-top: 88px; }
+.ui-setting-section__head { display: grid; gap: var(--sp-4); }
+.ui-setting-section--danger { border-color: var(--c-negative); }
+.ui-savebar { position: static; bottom: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-12); padding: var(--sp-12) var(--sp-16); background: var(--c-surface); border: var(--bw-surface) solid var(--c-frame); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); }
+@media (min-width: 1024px) and (min-height: 700px) { .ui-savebar { position: sticky; } }
+@media (max-width: 860px) {
+  .ui-settings { grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); }
+  .ui-settings__nav { position: static; }
+  .ui-settings__nav .ui-navlist { display: flex; overflow-x: auto; }
+}
+
+/* ---------- Signature parts ----------
+   Token-only like everything else, so they render in any style; house-styles.md section 5 says which
+   style leans on which (instrument parts for computational-brutalism, blocks and the sticker for
+   neo-brutalism). Brackets and crosses are decoration: their alt text is empty. */
+.ui-coord { font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-head, var(--c-ink-3)); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+.ui-coord::before { content: "[ " / ""; }
+.ui-coord::after { content: " ]" / ""; }
+.ui-prompt::before { content: "> " / ""; font-family: var(--font-mono); color: var(--c-accent-ink); }
+.ui-prompt--cursor::after { content: "" / ""; display: inline-block; width: 0.6em; height: 1.1em; margin-left: 0.2em; vertical-align: text-bottom; background: var(--c-accent); }
+.ui-ruler { height: 12px; border-bottom: 1px solid var(--c-line-strong); background-image: linear-gradient(90deg, var(--c-ink-3) 1px, transparent 1px), linear-gradient(90deg, var(--c-line-strong) 1px, transparent 1px); background-size: 40px 12px, 8px 6px; background-position: left top, left bottom; background-repeat: repeat-x; }
+.ui-frame { position: relative; padding: var(--panel-pad, var(--sp-24)); background: var(--c-surface); border: var(--bw-surface) solid var(--c-frame); min-width: 0; }
+.ui-frame::before, .ui-frame::after { content: "+" / ""; position: absolute; font-family: var(--font-mono); font-size: var(--fs-lg); line-height: 1; color: var(--c-accent-ink); }
+.ui-frame::before { top: -0.6em; left: -0.32em; }
+.ui-frame::after { bottom: -0.6em; right: -0.32em; }
+.ui-scan { background-image: repeating-linear-gradient(0deg, transparent 0 2px, var(--c-line) 2px 3px); }
+.ui-readout { min-width: 0; display: grid; gap: var(--sp-4); padding: var(--sp-12) var(--sp-16); background-color: var(--c-sunken); color: var(--c-ink); border: var(--bw-control) solid var(--c-frame); border-radius: var(--radius-xs); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+.ui-panel--accent { background: var(--c-accent-wash); }
+.ui-panel--support { background: var(--c-support); color: var(--c-support-ink); }
+.ui-panel--accent-2 { background: var(--c-accent-2-wash); }
+/* Rich layers: a full-bleed colour band between sections, a two-accent wash and the lock's glow
+   token (none on a calm, flat or offset lock). Text inside a band takes the band's own ink. */
+.ui-band { background: var(--c-accent); color: var(--c-on-accent); }
+.ui-band--accent-2 { background: var(--c-accent-2); color: var(--c-on-accent-2); }
+.ui-band--support { background: var(--c-support); color: var(--c-support-ink); }
+.ui-band :where(h1, h2, h3, h4, p, li, dt, dd, small, blockquote, figcaption, cite, .ui-meta) { color: inherit; }
+.ui-band .ui-quote figcaption, .ui-band .ui-quote figcaption strong { color: inherit; }
+:is(.ui-section, .ui-band) + .ui-band, .ui-band + .ui-section { border-top: 0; }
+.ui-wash { background-image: linear-gradient(135deg, var(--c-accent-wash), var(--c-accent-2-wash)); }
+.ui-glow { box-shadow: var(--glow); }
+/* Section marks: a data-coord label (sheet, grid reference, revision) sitting on the section rule.
+   Only a lock with section_marks "coord" shows it. */
+:is(.ui-section, .ui-hero)[data-coord] { position: relative; }
+:is(.ui-section, .ui-hero)[data-coord]::before { content: attr(data-coord) / ""; display: var(--section-marks); position: absolute; top: calc(var(--bw-rule) * -1); left: max(var(--gutter), calc((100% - var(--container, 1200px)) / 2 + var(--gutter))); padding: 2px var(--sp-8); background: var(--c-ink); color: var(--c-canvas); font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.4; letter-spacing: var(--track-label); text-transform: uppercase; }
+/* Moment type: the one place a page may go past the display range, up to the lock's moment ceiling
+   (DS-004 accepts it only inside [data-ui-moment]). */
+.ui-setpiece { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-moment); line-height: 0.92; letter-spacing: var(--track-display); text-transform: var(--display-case); text-wrap: balance; overflow-wrap: break-word; }
+:lang(ko) .ui-setpiece, .ui-setpiece:lang(ko) { line-height: var(--lh-display-ko); letter-spacing: calc(var(--track-display) / 2); }
+.ui-bignum { font-family: var(--font-heading); font-weight: var(--fw-display); font-size: var(--fs-moment); line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
+.ui-sticker { display: inline-flex; align-items: center; gap: var(--sp-8); padding: var(--sp-4) var(--sp-12); background: var(--c-accent); color: var(--c-on-accent); border: var(--bw-control) solid var(--control-edge, var(--c-accent)); border-radius: var(--radius-sm); box-shadow: var(--shadow-control); font-weight: var(--fw-strong); font-size: var(--fs-md); line-height: 1.3; transform: rotate(-2deg); }
+
+/* ---------- Charts (kit/ui.js draws them) ---------- */
+.ui-chart { display: grid; gap: var(--sp-12); min-width: 0; }
+.ui-chart svg { width: 100%; height: auto; overflow: visible; }
+.ui-chart .ui-axis text { fill: var(--c-ink-3); font-size: 12px; font-family: var(--font-meta); font-variant-numeric: tabular-nums; }
+.ui-chart .ui-grid-line { stroke: var(--c-line); stroke-width: 1; }
+.ui-chart .ui-baseline { stroke: var(--c-line-strong); stroke-width: 1; }
+.ui-chart .ui-marker { stroke: var(--c-ink-2); stroke-width: 1; stroke-dasharray: 3 3; }
+.ui-chart .ui-marker-label { fill: var(--c-ink-2); font-size: 12px; font-family: var(--font-text); }
+.ui-legend { display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-16); font-family: var(--font-meta); text-transform: var(--meta-case); font-size: var(--fs-sm); color: var(--c-ink-2); }
+.ui-legend span { display: inline-flex; align-items: center; gap: var(--sp-8); }
+.ui-legend i { width: 10px; height: 10px; border-radius: var(--radius-xs); background: var(--swatch); }
+.ui-chart table { font-size: var(--fs-sm); }
+.ui-chart details > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; }
+
+/* ---------- Motion ---------- */
+.ui-reveal { animation: ui-enter var(--dur-enter) var(--ease) both; }
+@keyframes ui-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
+  .ui-btn:active { transform: none; }
+}

package/skills/frontend-ui-ux/kit/fonts.json

@@ -0,0 +1,22 @@
+{
+  "schema_id": "litopencode.frontend-kit-fonts/v1",
+  "note": "The kit reuses font files that sibling skills in this package already ship (both install side by side under one skills directory). design-lock.mjs copies them into the project only after their sha256 matches the value recorded here, so a build never fetches a font. Pretendard is the unmodified official file, never subset.",
+  "fonts": [
+    {
+      "family": "Pretendard",
+      "file": "PretendardVariable.woff2",
+      "source": "../../lit-diagram-drawer/assets/fonts/PretendardVariable.woff2",
+      "sha256": "9599f12fd42fc0bce1cd50b47a0c022e108d7aa64dd0d1bb0ed44f3282d900b4",
+      "weight": "45 920",
+      "licence": { "file": "Pretendard-OFL.txt", "source": "../../lit-diagram-drawer/assets/fonts/OFL.txt", "sha256": "85fce85e25260b03777bf10373d3bd9363b9da96d9e0ca86a280dd37ed7667a0" }
+    },
+    {
+      "family": "JetBrains Mono",
+      "file": "JetBrainsMono-wght-latin.woff2",
+      "source": "../../lit-typographic-motion/fonts/JetBrainsMono-wght-latin.woff2",
+      "sha256": "18be452724bfdc236c074ca94a249a7f41a86752c7d04ab258ce9ed5651f6a7e",
+      "weight": "100 800",
+      "licence": { "file": "JetBrainsMono-OFL.txt", "source": "../../lit-typographic-motion/fonts/JetBrainsMono-OFL.txt", "sha256": "403581b69dac5cff4079205e01c6b467e56af449ecbd7247693ddb1baafa005b" }
+    }
+  ]
+}

package/skills/frontend-ui-ux/kit/layouts/landing.html

@@ -0,0 +1,164 @@
+<!doctype html>
+<html lang="{{lang: en or ko}}">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>{{Product}} — {{one-line value}}</title>
+  <meta name="description" content="{{one sentence for search results}}">
+  <link rel="stylesheet" href="ui/tokens.css">
+  <link rel="stylesheet" href="ui/components.css">
+  <!-- Page-specific rules go in their own file and use only var(--…) tokens and ui-* classes. -->
+</head>
+<body>
+  <!-- Landing starter (kit/layouts/landing.html). Keep the order unless the brief says otherwise;
+       delete a section the brief does not ask for rather than filling it with filler. Replace every
+       {{slot}}; the interface probe reports any slot left behind (DS-006). -->
+  <a class="ui-skip" href="#main">{{Skip to content}}</a>
+  <header class="ui-sitebar">
+    <div class="ui-container ui-sitebar__inner">
+      <a class="ui-brand" href="#top" aria-label="{{Product}} home">
+        <!-- A 20 px mark drawn on the 4 px grid in var(--c-ink) and var(--c-accent), or text only. -->
+        {{Product}}
+      </a>
+      <nav class="ui-sitenav" aria-label="{{Primary}}">
+        <a href="#how">{{How it works}}</a>
+        <a href="#features">{{Features}}</a>
+        <a href="#pricing">{{Pricing}}</a>
+        <a href="#faq">{{FAQ}}</a>
+        <a class="ui-btn ui-btn--primary ui-btn--sm" href="#pricing">{{Primary action}}</a>
+      </nav>
+      <details class="ui-menu">
+        <summary aria-label="{{Open menu}}">{{Menu}}</summary>
+        <div class="ui-menu__panel">
+          <a href="#how">{{How it works}}</a>
+          <a href="#features">{{Features}}</a>
+          <a href="#pricing">{{Pricing}}</a>
+          <a href="#faq">{{FAQ}}</a>
+          <a class="ui-btn ui-btn--primary" href="#pricing">{{Primary action}}</a>
+        </div>
+      </details>
+    </div>
+  </header>
+
+  <main id="main">
+    <!-- Hero: one focal element. The h1 says what the product does for whom in at most three
+         lines at 1440 px; the art column carries the style's accent art (field-notes: an original
+         pixel motif made with scripts/pixel-art.mjs) or a real product view built from kit parts. -->
+    <section class="ui-hero ui-wash" id="top">
+      <div class="ui-container ui-split">
+        <div class="ui-hero__copy">
+          <p class="ui-label">{{who it is for, lowercase, five words at most}}</p>
+          <h1 class="ui-display">{{What it does, in the reader's words}}</h1>
+          <p class="ui-lead">{{Two sentences: the job it takes off their hands and the result they see.}}</p>
+          <div class="ui-cluster">
+            <a class="ui-btn ui-btn--primary" href="#pricing">{{Primary action}}</a>
+            <a class="ui-btn" href="#how">{{Secondary action}}</a>
+          </div>
+          <p class="ui-meta">{{The one fact that removes the main hesitation (trial length, card policy).}}</p>
+        </div>
+        <!-- The signature moment (house-styles.md section 6): the one bold thing on this page, chosen
+             for its content and recorded in design.lock.json. It sits in the first screen; for a
+             type set piece or a full-width composition move data-ui-moment to that element, or use
+             ui-hero--stage to give the art the larger column. -->
+        <div class="ui-hero__art ui-glow" data-ui-moment="{{moment kind from design.lock.json}}">
+          {{the signature moment: accent art for the locked style (house-styles.md sections 5 and 6) on real content}}
+        </div>
+      </div>
+    </section>
+
+    <section class="ui-section" id="how" aria-labelledby="how-title">
+      <div class="ui-container">
+        <div class="ui-section-head">
+          <h2 class="ui-h2" id="how-title">{{How it works}}</h2>
+          <p class="ui-lead">{{One sentence that frames the steps.}}</p>
+        </div>
+        <ol class="ui-steps">
+          <li><h3 class="ui-h3">{{Step one}}</h3><p class="ui-muted">{{What the user does and what they get.}}</p></li>
+          <li><h3 class="ui-h3">{{Step two}}</h3><p class="ui-muted">{{…}}</p></li>
+          <li><h3 class="ui-h3">{{Step three}}</h3><p class="ui-muted">{{…}}</p></li>
+        </ol>
+      </div>
+    </section>
+
+    <!-- Features: alternate the split side once at most, and show each claim with a real kit
+         component (a ui-table, a ui-panel with figures) instead of an icon-topped card grid. -->
+    <section class="ui-section ui-section--sunken" id="features" aria-labelledby="features-title">
+      <div class="ui-container ui-stack ui-stack--loose">
+        <div class="ui-section-head">
+          <h2 class="ui-h2" id="features-title">{{What it does for them}}</h2>
+        </div>
+        <div class="ui-split ui-split--top">
+          <div class="ui-stack">
+            <h3 class="ui-h3">{{Feature one, as an outcome}}</h3>
+            <p class="ui-body ui-muted">{{How it works, with one concrete detail.}}</p>
+            <ul class="ui-checklist">
+              <li>{{specific capability}}</li>
+              <li>{{specific capability}}</li>
+            </ul>
+          </div>
+          <div class="ui-panel">{{a small real view: ui-table, ui-stat or ui-list with believable data labelled as an example}}</div>
+        </div>
+      </div>
+    </section>
+
+    <!-- A colour band between sections: its text takes the band's own ink (ui-band, house-styles.md section 2). -->
+    <section class="ui-section ui-band ui-band--accent-2" aria-label="{{Customer story}}">
+      <div class="ui-container">
+        <figure class="ui-quote">
+          <blockquote><p>{{A specific quote with a concrete before and after.}}</p></blockquote>
+          <figcaption><strong>{{Name}}</strong><span>{{Role, organisation, place}}</span></figcaption>
+        </figure>
+      </div>
+    </section>
+
+    <section class="ui-section" id="pricing" aria-labelledby="pricing-title">
+      <div class="ui-container">
+        <div class="ui-section-head">
+          <h2 class="ui-h2" id="pricing-title">{{Pricing}}</h2>
+          <p class="ui-lead">{{What every plan includes and how billing works.}}</p>
+        </div>
+        <div class="ui-plans">
+          <article class="ui-plan">
+            <div class="ui-stack ui-stack--tight"><h3 class="ui-h3">{{Plan}}</h3><p class="ui-meta">{{Who it is for}}</p></div>
+            <div class="ui-plan__price">{{price}} <small>{{per period}}</small></div>
+            <ul class="ui-checklist"><li>{{included}}</li><li>{{included}}</li></ul>
+            <a class="ui-btn" href="#top">{{Plan action}}</a>
+          </article>
+          <article class="ui-plan ui-plan--featured">
+            <div class="ui-stack ui-stack--tight"><h3 class="ui-h3">{{Plan}}</h3><p class="ui-meta">{{Who it is for}}</p></div>
+            <div class="ui-plan__price">{{price}} <small>{{per period}}</small></div>
+            <ul class="ui-checklist"><li>{{included}}</li><li>{{included}}</li></ul>
+            <a class="ui-btn ui-btn--primary" href="#top">{{Plan action}}</a>
+          </article>
+          <article class="ui-plan">
+            <div class="ui-stack ui-stack--tight"><h3 class="ui-h3">{{Plan}}</h3><p class="ui-meta">{{Who it is for}}</p></div>
+            <div class="ui-plan__price">{{price}} <small>{{per period}}</small></div>
+            <ul class="ui-checklist"><li>{{included}}</li><li>{{included}}</li></ul>
+            <a class="ui-btn" href="#top">{{Plan action}}</a>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="ui-section" id="faq" aria-labelledby="faq-title">
+      <div class="ui-container ui-split ui-split--top">
+        <div class="ui-stack">
+          <h2 class="ui-h2" id="faq-title">{{Questions}}</h2>
+          <p class="ui-muted">{{Where to ask anything else.}}</p>
+        </div>
+        <div>
+          <details class="ui-disclosure"><summary>{{Question}}</summary><p>{{Answer}}</p></details>
+          <details class="ui-disclosure"><summary>{{Question}}</summary><p>{{Answer}}</p></details>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer class="ui-footer">
+    <div class="ui-container ui-cluster" style="justify-content: space-between">
+      <p><strong>{{Product}}</strong></p>
+      <p class="ui-meta">{{Legal line}}</p>
+    </div>
+  </footer>
+</body>
+</html>