DESIGN.md git:20260924.e21e5b1A

Immutable. This exact content never changes and is served at /api/v1/blob/b0e49aeede65e0d7.

---
name: skillsgist
description: A private registry for Agent Skills in a borrowed Cloudflare style. One lit orange panel hands over the install command, and hairline-framed registry, forms and admin pages sit on warm paper around it.
colors:
  cf-orange: "#ff5e1f"
  cf-orange-glow: "#ffc76b"
  cf-orange-ink: "#c73a02"
  cf-action: "#d63c01"
  cf-action-hover: "#b93300"
  cf-ember: "#3c0c00"
  cf-ink: "#171717"
  cf-ink-2: "#404040"
  cf-body: "#525252"
  cf-muted: "#6b6560"
  cf-paper: "#fdfdfc"
  cf-paper-2: "#f9f7f6"
  cf-tint: "#fff7f2"
  cf-line: "#efe6e1"
  cf-line-strong: "#dfd2cb"
  cf-line-hover: "#c9b8ae"
  cf-notice-line: "#f6d3c1"
  cf-danger: "#b42318"
  cf-danger-tint: "#fef3f2"
  cf-danger-line: "#f4c7c3"
  white: "#ffffff"
  selection: "#ffd6c2"
typography:
  display:
    fontFamily: "Schibsted Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: "clamp(36px, 5.4vw, 56px)"
    fontWeight: 500
    lineHeight: 1.02
    letterSpacing: "-0.035em"
  display-skill:
    fontFamily: "Schibsted Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: "clamp(32px, 4.4vw, 48px)"
    fontWeight: 500
    lineHeight: 1.02
    letterSpacing: "-0.035em"
  page-title:
    fontFamily: "Schibsted Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: "40px"
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: "-0.03em"
  page-title-sm:
    fontFamily: "Schibsted Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: "30px"
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: "-0.03em"
  headline:
    fontFamily: "Schibsted Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: "32px"
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: "-0.03em"
  headline-sm:
    fontFamily: "Schibsted Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: "26px"
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: "-0.03em"
  doc-h1:
    fontFamily: "Schibsted Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: "30px"
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: "-0.03em"
  auth-title:
    fontFamily: "Schibsted Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: "28px"
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: "-0.025em"
  doc-h2:
    fontFamily: "Schibsted Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: "23px"
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: "-0.02em"
  title-lg:
    fontFamily: "Schibsted Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: "22px"
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  title:
    fontFamily: "Schibsted Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: "19px"
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: "-0.02em"
  wordmark:
    fontFamily: "Schibsted Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: "20px"
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: "-0.035em"
  doc-h3:
    fontFamily: "Schibsted Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: "18px"
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: "-0.02em"
  lede:
    fontFamily: "Schibsted Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: 1.5
  panel-title:
    fontFamily: "Schibsted Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: "17px"
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  doc-h4:
    fontFamily: "Schibsted Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: "16px"
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: "-0.02em"
  page-lede:
    fontFamily: "Schibsted Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.6
  doc-body:
    fontFamily: "Schibsted Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: "15.5px"
    fontWeight: 400
    lineHeight: 1.7
  body:
    fontFamily: "Schibsted Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: "15px"
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: "Schibsted Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: "14.5px"
    fontWeight: 400
    lineHeight: 1.55
  label:
    fontFamily: "Schibsted Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: 1
  caption:
    fontFamily: "Schibsted Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: "13px"
    fontWeight: 400
    lineHeight: 1.5
  mono-command:
    fontFamily: "Red Hat Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "26px"
  mono-command-sm:
    fontFamily: "Red Hat Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "22px"
  mono-editor:
    fontFamily: "Red Hat Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: "13.5px"
    fontWeight: 400
    lineHeight: 1.65
  mono-meta-lg:
    fontFamily: "Red Hat Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: "13px"
    fontWeight: 400
    lineHeight: 1.5
    fontFeature: "\"tnum\" 1"
  mono-path:
    fontFamily: "Red Hat Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: "12.5px"
    fontWeight: 400
    lineHeight: 1.5
  mono-meta:
    fontFamily: "Red Hat Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: 1.5
    fontFeature: "\"tnum\" 1"
  mono-label:
    fontFamily: "Red Hat Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: "11px"
    fontWeight: 500
    lineHeight: "16px"
    letterSpacing: "0.1em"
  mono-tag:
    fontFamily: "Red Hat Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: "10.5px"
    fontWeight: 500
    lineHeight: "20px"
    letterSpacing: "0.1em"
rounded:
  none: "0px"
  tag: "5px"
  icon: "6px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  pill: "999px"
spacing:
  xs: "6px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  block: "32px"
  2xl: "36px"
  3xl: "56px"
  4xl: "72px"
  5xl: "112px"
components:
  button-primary:
    backgroundColor: "{colors.cf-action}"
    textColor: "{colors.white}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: "0 16px"
    height: "36px"
  button-primary-hover:
    backgroundColor: "{colors.cf-action-hover}"
  button-outline:
    backgroundColor: "{colors.white}"
    textColor: "{colors.cf-ink}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: "0 16px"
    height: "36px"
  button-danger:
    backgroundColor: "{colors.white}"
    textColor: "{colors.cf-danger}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: "0 16px"
    height: "36px"
  button-danger-hover:
    backgroundColor: "{colors.cf-danger-tint}"
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.cf-ink}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: "0 12px"
    height: "36px"
  button-ghost-hover:
    backgroundColor: "{colors.cf-paper-2}"
  button-ghost-danger:
    backgroundColor: "transparent"
    textColor: "{colors.cf-danger}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: "0 12px"
    height: "36px"
  button-ghost-danger-hover:
    backgroundColor: "{colors.cf-danger-tint}"
  button-sm:
    rounded: "{rounded.pill}"
    padding: "0 12px"
    height: "32px"
  button-wide:
    rounded: "{rounded.pill}"
    width: "100%"
    height: "42px"
  nav:
    backgroundColor: "{colors.white}"
    textColor: "{colors.cf-ink}"
    padding: "0 24px"
    height: "64px"
  count-pill:
    backgroundColor: "{colors.white}"
    textColor: "{colors.cf-ink-2}"
    typography: "{typography.mono-meta}"
    rounded: "{rounded.pill}"
    padding: "0 9px"
    height: "24px"
  chip:
    backgroundColor: "{colors.cf-paper}"
    textColor: "{colors.cf-ink-2}"
    typography: "{typography.mono-meta}"
    rounded: "{rounded.tag}"
    padding: "2px 8px"
  status-value:
    backgroundColor: "{colors.white}"
    textColor: "{colors.cf-muted}"
    typography: "{typography.mono-meta}"
    rounded: "{rounded.pill}"
    padding: "0 9px"
    height: "24px"
  status-value-on:
    textColor: "{colors.cf-ink}"
  command-panel:
    backgroundColor: "{colors.cf-orange}"
    textColor: "{colors.white}"
    rounded: "{rounded.lg}"
    padding: "72px 24px 104px"
  command-panel-compact:
    backgroundColor: "{colors.cf-orange}"
    textColor: "{colors.white}"
    rounded: "{rounded.lg}"
    padding: "56px 24px 72px"
  skill-panel-title:
    textColor: "{colors.white}"
    typography: "{typography.display-skill}"
  skill-panel-meta:
    textColor: "{colors.cf-ember}"
    typography: "{typography.mono-meta-lg}"
  command-box:
    backgroundColor: "{colors.white}"
    textColor: "{colors.cf-ink}"
    typography: "{typography.mono-command}"
    rounded: "{rounded.md}"
    padding: "18px 16px 18px 22px"
  command-box-flat:
    backgroundColor: "{colors.white}"
    textColor: "{colors.cf-ink}"
    typography: "{typography.mono-command-sm}"
    rounded: "{rounded.sm}"
    padding: "18px 16px 18px 22px"
  command-prompt:
    textColor: "{colors.cf-orange-ink}"
    typography: "{typography.mono-command}"
  search-field:
    backgroundColor: "rgba(60, 12, 0, 0.3)"
    textColor: "{colors.white}"
    rounded: "{rounded.pill}"
    padding: "6px 6px 6px 20px"
    height: "52px"
  search-field-focus:
    backgroundColor: "rgba(60, 12, 0, 0.38)"
  search-submit:
    backgroundColor: "{colors.white}"
    textColor: "{colors.cf-ink}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: "0 20px"
  search-submit-hover:
    backgroundColor: "{colors.cf-paper-2}"
  registry-frame:
    backgroundColor: "{colors.white}"
    rounded: "{rounded.none}"
  skill-cell:
    backgroundColor: "{colors.white}"
    textColor: "{colors.cf-ink}"
    rounded: "{rounded.none}"
    padding: "24px 24px 20px"
  skill-cell-hover:
    backgroundColor: "{colors.cf-tint}"
  skill-cell-title:
    textColor: "{colors.cf-ink}"
    typography: "{typography.title}"
  skill-cell-title-hover:
    textColor: "{colors.cf-orange-ink}"
  skill-cell-description:
    textColor: "{colors.cf-body}"
    typography: "{typography.body-sm}"
  skill-cell-meta:
    textColor: "{colors.cf-muted}"
    typography: "{typography.mono-meta}"
  visibility-public:
    textColor: "{colors.cf-orange-ink}"
    typography: "{typography.mono-label}"
  visibility-private:
    textColor: "{colors.cf-muted}"
    typography: "{typography.mono-label}"
  role-admin:
    textColor: "{colors.cf-orange-ink}"
    typography: "{typography.mono-label}"
  role-member:
    textColor: "{colors.cf-muted}"
    typography: "{typography.mono-label}"
  link:
    textColor: "{colors.cf-orange-ink}"
  menu-panel:
    backgroundColor: "{colors.white}"
    rounded: "{rounded.md}"
    padding: "6px"
  menu-item:
    textColor: "{colors.cf-ink}"
    rounded: "{rounded.sm}"
    padding: "8px 10px"
  menu-item-hover:
    backgroundColor: "{colors.cf-paper-2}"
  empty-state:
    backgroundColor: "{colors.white}"
    textColor: "{colors.cf-ink}"
    padding: "72px 24px"
  page-title:
    textColor: "{colors.cf-ink}"
    typography: "{typography.page-title}"
  page-title-compact:
    textColor: "{colors.cf-ink}"
    typography: "{typography.headline}"
  page-lede:
    textColor: "{colors.cf-body}"
    typography: "{typography.page-lede}"
  panel:
    backgroundColor: "{colors.white}"
    rounded: "{rounded.none}"
  panel-head:
    backgroundColor: "{colors.cf-paper-2}"
    textColor: "{colors.cf-ink}"
    typography: "{typography.panel-title}"
    padding: "12px 20px"
    height: "52px"
  panel-body:
    backgroundColor: "{colors.white}"
    padding: "20px"
  form-section:
    backgroundColor: "{colors.white}"
    padding: "24px"
  form-foot:
    backgroundColor: "{colors.cf-paper-2}"
    padding: "16px 24px"
  field-hint:
    textColor: "{colors.cf-muted}"
    typography: "{typography.caption}"
  input:
    backgroundColor: "{colors.white}"
    textColor: "{colors.cf-ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: "0 12px"
    height: "40px"
  input-sm:
    backgroundColor: "{colors.white}"
    textColor: "{colors.cf-ink}"
    rounded: "{rounded.sm}"
    padding: "0 12px"
    height: "32px"
    width: "min(100%, 300px)"
  textarea:
    backgroundColor: "{colors.white}"
    textColor: "{colors.cf-ink}"
    typography: "{typography.mono-editor}"
    rounded: "{rounded.sm}"
    padding: "12px"
  select:
    backgroundColor: "{colors.white}"
    textColor: "{colors.cf-ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: "0 36px 0 12px"
    height: "40px"
  file-picker:
    backgroundColor: "{colors.cf-paper}"
    textColor: "{colors.cf-body}"
    rounded: "{rounded.sm}"
    padding: "10px"
  file-button:
    backgroundColor: "{colors.white}"
    textColor: "{colors.cf-ink}"
    rounded: "{rounded.pill}"
    padding: "0 14px"
    height: "32px"
  choice:
    backgroundColor: "{colors.white}"
    textColor: "{colors.cf-ink}"
    rounded: "{rounded.sm}"
    padding: "14px 16px 14px 44px"
  choice-checked:
    backgroundColor: "{colors.cf-tint}"
  editor:
    backgroundColor: "{colors.white}"
    textColor: "{colors.cf-ink}"
    typography: "{typography.mono-editor}"
    rounded: "{rounded.none}"
    padding: "20px 24px"
  alert:
    backgroundColor: "{colors.cf-danger-tint}"
    textColor: "{colors.cf-danger}"
    rounded: "{rounded.sm}"
    padding: "12px 14px"
  notice:
    backgroundColor: "{colors.cf-tint}"
    textColor: "{colors.cf-orange-ink}"
    rounded: "{rounded.sm}"
    padding: "12px 14px"
  done:
    backgroundColor: "{colors.white}"
    textColor: "{colors.cf-ink}"
    rounded: "{rounded.sm}"
    padding: "12px 14px"
  row:
    textColor: "{colors.cf-ink}"
    padding: "10px 20px"
  row-current:
    backgroundColor: "{colors.cf-tint}"
  row-path:
    textColor: "{colors.cf-ink}"
    typography: "{typography.mono-path}"
  row-meta:
    textColor: "{colors.cf-muted}"
    typography: "{typography.mono-meta}"
  row-version:
    textColor: "{colors.cf-ink}"
    typography: "{typography.mono-meta-lg}"
  row-version-current:
    textColor: "{colors.cf-orange-ink}"
  icon-link:
    textColor: "{colors.cf-ink-2}"
    rounded: "{rounded.icon}"
    padding: "4px"
  icon-link-hover:
    backgroundColor: "{colors.cf-paper-2}"
    textColor: "{colors.cf-orange-ink}"
  doc-frame:
    backgroundColor: "{colors.white}"
    rounded: "{rounded.none}"
  doc-body:
    backgroundColor: "{colors.white}"
    textColor: "{colors.cf-body}"
    typography: "{typography.doc-body}"
    padding: "28px 40px 40px"
  doc-inline-code:
    backgroundColor: "{colors.cf-paper-2}"
    textColor: "{colors.cf-ink}"
    rounded: "{rounded.tag}"
    padding: "1px 5px"
  doc-pre:
    backgroundColor: "{colors.cf-paper-2}"
    textColor: "{colors.cf-ink}"
    rounded: "{rounded.none}"
    padding: "16px 18px"
  table-head:
    backgroundColor: "{colors.cf-paper-2}"
    textColor: "{colors.cf-muted}"
    typography: "{typography.mono-label}"
    padding: "12px 20px"
  table-cell:
    backgroundColor: "{colors.white}"
    textColor: "{colors.cf-ink}"
    padding: "18px 20px"
  table-date:
    textColor: "{colors.cf-body}"
    typography: "{typography.mono-path}"
  auth-frame:
    backgroundColor: "{colors.white}"
    rounded: "{rounded.none}"
    padding: "32px"
    width: "420px"
  auth-title:
    textColor: "{colors.cf-ink}"
    typography: "{typography.auth-title}"
  footer:
    backgroundColor: "{colors.cf-paper-2}"
    textColor: "{colors.cf-muted}"
    typography: "{typography.caption}"
    padding: "28px 24px"
---

# Design System: skillsgist

## Overview

**Creative North Star: "The Lit Command"**

skillsgist borrows the look of cloudflare.com and developers.cloudflare.com, but none of the brand. The ground is warm white paper, the text is true-gray ink, and the hairlines lean slightly toward terracotta. At the top of the index page sits one drenched orange panel with a dot-matrix texture and a slow glow at its foot. The system exists to hand over one line of shell, the install command, and then get out of the way. Below the panel the registry is a square, hairline-framed grid with corner registration marks, dashed column gutters and monospace metadata. It reads more like a technical drawing than a gallery of cards. No Cloudflare logo, cloud mark or trademarked asset appears anywhere. Schibsted Grotesk and Red Hat Mono are self-hosted under the OFL as open stand-ins for Cloudflare's proprietary FT Kunst Grotesk and Apercu Mono.

The density is moderate. The panel padding is generous, body text is 15px, and each cell is at least 216px tall so a three-line description has room. Pages are server-rendered, and every interaction the system defines is native: a `<details>` account menu and delete confirmation, GET and POST forms, radio cards and a file input. There are two exceptions. A small script copies the command block to the clipboard on one click, and without JavaScript the same click selects the whole command. A second script folds a long SKILL.md to 720px, and a long Files or Versions list to 400px, behind a Show more button, and without JavaScript everything shows. Motion is sparse and ambient. The glow at the panel foot breathes on a 7-second cycle, a caret block blinks after the command, and hover tints last 200ms. The glow, the caret and every transition switch off under reduced motion.

Every page lives in this world. The skill page keeps its own orange panel, compact and left-aligned, because it also hands over an install command. The working pages (publish, edit, upload, account, users, add a user, sign-in and setup) have no orange field. They sit on the paper ground between the dashed gutters and are built from the same parts: a page head, square frames with registration marks, a Paper Shade header strip on every titled frame, 8px fields and pill buttons. Sign-in and setup center one frame on a softly masked dot field.

**Key Characteristics:**
- At most one drenched orange panel per page, with a dot-matrix texture and a warm glow at its foot, and only where an install command is handed over.
- A warm white paper ground, true-gray ink and terracotta-leaning hairlines.
- Square, hairline-framed containers with 7px corner registration marks, and dashed column gutters that run down to the footer.
- Titled frames open with a Paper Shade header strip, and forms close with a Paper Shade footer bar.
- Pill-shaped buttons, 8px fields, and 12–16px corners only for the panel and the things that float.
- Schibsted Grotesk at weight 500 for headings, and Red Hat Mono for commands and data.
- Ember-tinted shadows, used in exactly three places: the raised command box, the account menu and the skill page's delete confirmation.
- Danger is a line and a text color, never a fill.
- Client JavaScript only as enhancement: native `<details>` menus and delete confirmations and forms, plus two scripts: one copies a command on click and falls back to select-all, one folds a long SKILL.md, Files list or Versions list and falls back to showing all of it.

## Colors

The palette has one hot orange, three deeper oranges that do the work, an ember brown for text on the orange, warm paper neutrals and one quiet danger red.

### Primary
- **Signal Orange** (#ff5e1f): the field color. It fills the orange panel on the index and skill pages, the blinking caret block after a command, the 2px focus ring, the native radio and checkbox accent, and the 6px dot on an active status pill. Only display-size white type (the panel headline or skill slug) and Ember running copy sit on it; it never sets text itself.
- **Action Orange** (#d63c01): the fill behind every primary pill button (Publish, Sign in, Save, Create, Save as a new version, Publish the first skill), with white labels.
- **Action Orange Pressed** (#b93300): the hover fill for primary buttons.
- **Orange Ink** (#c73a02): orange as text or line on white or paper. Uses include the `$` prompt, the Public and admin labels, the hovered cell title and arrow, inline text links, the notice text, the border of a checked choice card, the current version link and the hovered download icon.

### Secondary
- **Ember** (#3c0c00): the deep brown-orange for running copy on the orange panel: the lede and its links, the skill-page meta line with its Visibility label, and the note under the skill-page command. At alpha it is also the base of every shadow and of the translucent search field.
- **Glow Amber** (#ffc76b): the middle stop of the warm glow at the panel foot. It never appears as a flat fill.

### Danger
- **Danger** (#b42318, `--color-cf-danger`): the text and icon of an error alert, and the label of a danger button, whose border turns Danger on hover. It measures 6.57:1 on white and 6.05:1 on Danger Tint.
- **Danger Tint** (#fef3f2): the fill of an error alert and the hover fill of a danger button.
- **Danger Line** (#f4c7c3): the border of an error alert and the resting border of a danger button.

### Neutral
- **Ink** (#171717): headings, cell titles, button, field and menu labels, input text, file paths, the wordmark, and bold text inside a rendered SKILL.md.
- **Graphite** (#404040): secondary ink for the tags, count pill, chips, footer links, the resting cell arrow and download icon, and quoted text in a SKILL.md.
- **Body Gray** (#525252): descriptions, page ledes, empty-state copy, rendered SKILL.md text, the status line, the file-picker text and the dates in the users table.
- **Warm Muted** (#6b6560): metadata, hints and placeholders, panel meta, table column headers and stacked table labels, the Private and member labels, the select chevron, list markers, the idle status value, the sort note, the idle "Copy" button label, the resting icon of a ghost button and footer text. It is also the hover border of the file picker and the choice cards. It measures 5.74:1 on white.
- **Paper** (#fdfdfc): the page ground behind everything, the fill inside the registration marks, the file picker and the chips.
- **Paper Shade** (#f9f7f6): the footer band, every header strip and form footer bar, the table header row, code and quote blocks in a SKILL.md, and the hover fill on menu items, ghost buttons, the search button and the download icon.
- **Peach Tint** (#fff7f2): the hover wash on a skill cell, the fill of a checked choice card, the current row in the Versions list, and the notice fill.
- **Hairline** (#efe6e1): internal dividers: between cells, between the skill toolbar's groups, under the nav and every header strip, between form sections, rows and table rows, above the footer, and around the menu panel and SKILL.md code, quotes and tables.
- **Hairline Strong** (#dfd2cb): the outer frame of every container, the registration marks, dashed gutters and dashed rules, the resting border of outline buttons, fields, choice cards, the file picker and its button, the tag, chip and pill outlines, the fill-cell and sign-in dot fields, the version-link underline and the scrollbar thumb.
- **Hairline Hover** (#c9b8ae): the border of a text field or select under the pointer.
- **Notice Line** (#f6d3c1): the border of the orange notice.
- **White** (#ffffff): raised surfaces. The nav bar, the inside of every frame, the command box, fields, choice cards, the editor, outline and danger buttons, the search button, the status pill and the menu panel all use it.
- **Selection Peach** (#ffd6c2): the `::selection` background under ink text.

### Named Rules
**The Two Oranges Rule.** Signal Orange is a field. White on it measures only 3.06:1, so the only white type it carries is the display-size panel headline; running copy on it is Ember. Anything orange that a user reads or presses uses a deeper orange instead: Action Orange behind white button labels (4.66:1), and Orange Ink for orange text on white (5.21:1) or on Peach Tint (4.92:1).

**The Ember Text Rule.** Running copy on the orange panel is set in Ember (5.52:1), never in white and never in gray. That includes the skill-page meta line, where the Visibility label turns Ember whatever its value. White on the panel is reserved for the display headline, the white command box and the white search button.

**The One Drench Rule.** A page carries at most one full field of orange, and it sits behind that page's install command. `/` and `/s/:slug` each carry one; the form, account, admin and sign-in pages carry none, and an install command there sits in a flat code block on white. Everywhere else orange is a small signal: a button fill, the prompt, the caret, the focus ring, a status dot, the Public label, a checked choice, a hovered cell title.

**The Warm Neutral Rule.** Grounds, hairlines and muted text lean warm, at an OKLCH hue near 50. Text inks are true neutral gray. Cool slate and blue-gray never appear in this system.

**The Quiet Danger Rule.** Danger is a line and a text color, never a fill. A danger control is set in Danger text, either as a white pill with a Danger Line border or, inside the skill toolbar, as a danger ghost, and it only gains the Danger Tint on hover. A destructive action stands apart from its neighbors: at the far end of the toolbar, or below a dashed rule. Nothing is deleted on the first click: the danger button opens a delete confirmation that says what deleting does, and only its second danger button, which names what it deletes, submits.

## Typography

**Display Font:** Schibsted Grotesk (with ui-sans-serif, system-ui fallbacks)
**Body Font:** Schibsted Grotesk
**Label/Mono Font:** Red Hat Mono (with ui-monospace, SFMono-Regular, Menlo fallbacks)

**Character:** A plain, slightly condensed grotesk at weight 500 with tight tracking, paired with a round, friendly mono. Both are self-hosted woff2 files in `public/fonts/`, split into Latin and Latin Extended subsets and loaded with `font-display: swap`. The Latin grotesk file is preloaded.

### Hierarchy
- **Display** (500, clamp(36px, 5.4vw, 56px), 1.02, -0.035em): the one headline inside the index panel. It is white, centered, capped at 19ch and uses `text-wrap: balance`.
- **Display Skill** (500, clamp(32px, 4.4vw, 48px), 1.02, -0.035em): the skill slug on the compact skill panel. It is white and left-aligned, has no measure cap and breaks anywhere.
- **Page Title** (500, 40px, 1.1, -0.03em; 30px below 640px): the title of a page head on Publish, Edit, Upload, Account and Add a user. It uses `text-wrap: balance` and breaks anywhere.
- **Headline** (500, 32px, 1.15, -0.03em; 26px below 640px): the section heading above a framed grid, such as "Skills" or "Results for …", and the compact page title on Users.
- **Auth Title** (500, 28px, 1.15, -0.025em): the title inside the sign-in and setup frame, 24px above the form.
- **Title Large** (500, 22px, -0.02em): the title of an empty state inside a frame.
- **Title** (500, 19px, 1.3, -0.02em): the slug of a skill cell, which acts as the link.
- **Wordmark** (600, 20px, -0.035em): the lowercase `skillsgist` in the nav. The footer mark uses the same form at 15px.
- **Panel Title** (500, 17px, -0.02em): the title in a header strip, such as Files, Versions or Install every skill.
- **Lede** (400, 18px, 1.5; 16px below 640px): the supporting line on the panel. It is set in Ember and uses `text-wrap: pretty`. It is capped at 54ch on the index and 64ch on the skill page.
- **Page Lede** (400, 16px, 1.6): the explanation under a page title, in Body Gray, capped at 68ch, with inline Orange Ink links.
- **SKILL.md type** (500 headings at 1.25 and -0.02em in Ink, balanced): H1 30px at -0.03em, H2 23px, H3 18px, H4 16px. The body is 400 at 15.5px and 1.7 in Body Gray. Paragraphs, lists, quotes and headings keep a 72ch measure; tables and code blocks take the full frame width. Code blocks are Red Hat Mono at 13px and 1.6, and inline code is 0.86em.
- **Body** (400, 15px, 1.5): the base size on the page, empty-state copy (52ch) and text in a field. Choice titles use it at weight 500.
- **Body Small** (400, 14.5px, 1.55): cell descriptions, capped at 60ch and clamped to three lines.
- **Label** (500, 14px, line-height 1): button labels, the search button and field labels. Menu items, text links, alerts, notices, the status line and table text use the same 14px at weight 400. Small buttons and the "Copy" button label drop to 13px, and the small field and row text to 13.5px.
- **Caption** (400, 13px): footer text, field hints, panel meta, choice details and the sort note.
- **Mono Command** (400, 16px/26px; 14px/22px below 640px): the install command and its prompt on the orange panel.
- **Mono Command Small** (400, 14px/22px): the flat code block at every width.
- **Mono Editor** (400, 13.5px, 1.65): SKILL.md source in the full editor. The paste textarea on Publish uses the same size at 1.6.
- **Mono Meta Large** (400, 13px, tabular numerals): the skill-page meta line and the version links in the Versions list.
- **Mono Path** (400, 12.5px): file paths in the Files list and dates in the users table.
- **Mono Meta** (400, 12px, tabular numerals): the author handle in a cell, row sizes and timestamps, the count pill, chips and the status pill.
- **Mono Label** (500, 11px, 0.1em, uppercase): the Public, Private, admin and member labels and the users table column headers.
- **Mono Tag** (500, 10.5px, 0.1em, uppercase): the You tag. The stacked table labels below 768px use the same size and tracking at weight 400.

### Named Rules
**The Medium Voice Rule.** Headings are set at weight 500. They get their presence from size and tight tracking, between -0.02em and -0.035em, never from bold. Weight 600 belongs only to the wordmark and to bold text inside a rendered SKILL.md.

**The Typed Data Rule.** Red Hat Mono is only for things a user would type or read as data: commands, tokens, SKILL.md source, file paths and filenames, versions, dates, sizes, author handles, counts, and the short uppercase tag, visibility, role and column labels. Sentences are never set in mono.

## Layout

Everything uses one 1280px column: the nav, the registry, every page body and the footer align to the same max width with 24px gutters, and the gutters drop to 16px below 640px. The nav bar is 64px tall. The main area is a flex column that grows to push the footer to the bottom of the viewport. The orange panel breaks out of the column: it sits 8px in from the viewport on every side (6px below 640px). On the index its content is a centered 920px column (1008px at 1280px and up). Inside that column, the command box and search field share one width, 820px (960px at 1280px and up). The index panel is padded 72px on top and 104px at the bottom (56px and 96px on mobile), and the extra bottom space is where the glow sits. At 1440px wide, the first row of skill cells lands above a 900px fold.

The registry section is padded 56px above and 112px below (48px and 72px on mobile). The heading row has the headline, the count pill, an optional "Clear search" link and a right-aligned sort note. It is inset 24px (18px on mobile) so it lines up with the cell padding. The sort note is hidden below 640px. The grid has one column below 640px, two from 640px to 1023px, and three from 1024px up. Cells are at least 216px tall with padding of 24px 24px 20px. On mobile the height becomes automatic and the padding drops to 20px 18px 18px. Metadata sits at the bottom of each cell, whatever the length of the description.

The skill page uses a compact panel padded 56px 24px 72px (40px 16px 56px on mobile). Its content is left-aligned on the full 1280px column, so the slug lines up with the toolbar and frames below. The command box shrinks to fit its command, up to the full width. Below the panel the body is padded 32px above and 112px below. The skill toolbar, a square frame of ghost buttons (see Toolbar), sits 32px above the content. The content is one column, and from 1024px up it splits into the SKILL.md frame and a 340px aside, 32px apart. The aside stacks the Files and Versions panels 32px apart.

The working pages share one body: padded 56px above and 112px below (36px and 72px on mobile), between the dashed gutters. Publish, Upload, Account and Add a user center a 760px column; Edit widens it to 960px for the editor. The Users page uses the full column for its table. A page head sits 32px above its content (24px for the compact head, which is inset 20px, or 18px on mobile, to line up with the table's cell padding). On the 760px and 960px columns the standard head and any Alert or Done line take the same inset once the column meets the gutters. Panels on Account stack 32px apart. Inside a panel the body is padded 20px with a 14px gap. Stacked forms use 18px between fields and cap their width at 420px. Form sections are padded 24px (18px on mobile), and the footer bar 16px 24px (14px 18px on mobile). Sign-in and setup center a 420px frame, with 40px of extra space above it and 24px below it.

The spacing rhythm is set by the scale in the frontmatter. Groups are tight (6–12px), and the space between a group and what follows it is generous (24–36px). The block step (32px) separates stacked blocks on the working pages: page head to content, panel to panel, toolbar to grid. Space between sections is large (56–112px). Some components use 10, 14, 18, 20 and 22px as optical half-steps. Those are fine inside a component but do not become section spacing.

### Named Rules
**The Dashed Gutter Rule.** The edges of the content column are drawn as 1px dashed rules (5px on, 5px off, Hairline Strong). They line up with the frames' outer edges. On every page the guided section grows to fill the main column, so the gutters run from under the nav or panel down to the footer. Only square frames sit on a gutter. Wherever a column meets the gutters (always on Users, below 808px for the 760px column and below 1008px for the 960px column), everything above its first frame, the page head and any Alert or Done line, is inset 20px on both sides (18px below 640px), the compact head's inset, so the title, the message and the text inside the frames share one edge.

**The Complete Row Rule.** A framed grid never ends on a ragged row. Dot-filled cells span the leftover columns at each breakpoint: `(3 − n mod 3) mod 3` columns at the three-column width, and `n mod 2` at the two-column width.

## Elevation & Depth

The system is flat by default, and depth comes from line and light. Frames, panels, cells, forms, tables, the nav and the footer have no shadow. They separate from the ground with hairlines and from each other with the paper, white and paper-shade steps. Only three things lift, and each is handed to the user or floats over the page: the raised command box on an orange panel, the open account menu and the open delete confirmation on the skill page. The flat code block on white does not lift. The warm glow at the panel foot is a light source, not a shadow. It is an ellipse 180px tall, filled with a radial gradient that fades from pale cream (#fff6d6) through Glow Amber to a translucent orange, blurred 6px, and set 55% below the panel edge so only its crown shows. The cream and translucent-orange stops exist only in this glow and are not palette colors.

### Shadow Vocabulary
- **Command Lift** (`box-shadow: 0 1px 2px rgb(60 12 0 / 0.12), 0 18px 40px -16px rgb(60 12 0 / 0.5)`): only under the raised command box on an orange panel. A tight contact shadow plus a deep ember drop.
- **Popover** (`box-shadow: 0 12px 32px -12px rgb(60 12 0 / 0.22)`): the open account menu panel and the open delete confirmation on the skill page.

### Named Rules
**The Warm Shadow Rule.** Every shadow and scrim is Ember at some alpha (`rgb(60 12 0 / a)`), with a real offset and blur. Never use neutral black or a zero-offset halo.

**The Flat Frame Rule.** Frames, panels, cells, bars, forms and empty states stay flat. Lift is reserved for things that are handed over or float, and no bordered frame ever gets a shadow.

## Shapes

The shape language has two halves. Containers that hold data are square: the registry frame, its cells, the empty state, panels, form frames, the skill toolbar, the SKILL.md frame, the users table, the sign-in frame and the code and quote blocks inside a SKILL.md all have 0 corners. Each frame carries a registration mark at every corner, a 7px Hairline Strong square with a 5px Paper center, which reads like a crop mark on a plate. Pressable actions are full pills (999px): buttons, the file-picker button, the search field and its button, the count pill, the status pill and the skip link. Things you fill in or choose between take 8px corners: text fields, selects, the paste textarea, the file picker, choice cards, alerts, notices, the flat code block and menu items. The orange panel takes 16px corners (12px below 640px), and the things that float take 12px: the raised command box and the menu panel. The small end of the scale is 6px for the hover plate behind a download icon and 5px for tags, chips and inline code. The only true circle is the 6px status dot.

Icons are drawn inline as 16px SVG on a 16-unit grid with a 1.5 stroke and round caps and joins, in `currentColor`. The system includes a chevron, a globe, a padlock, a magnifier, an arrow, a download arrow, an alert circle and a check circle. Visibility labels shrink their icon to 13px.

Textures and dashes also belong to shape. The panel carries a white dot matrix (0.8px dots on a 6px pitch at 20% opacity) that fades out toward the bottom. Fill cells carry Hairline Strong dots and empty states carry Hairline dots, both on a 10px pitch. The sign-in and setup pages carry the same Hairline Strong dots behind their frame, faded by a radial mask to nothing at the edges. The masks are alpha ramps (`#000` to transparent), not colors. Dashed Hairline Strong lines mark the column gutters, the file picker's border, the rule above a danger zone, and a horizontal rule in a SKILL.md.

### Named Rules
**The Square Data, Round Control Rule.** Data sits in square frames with registration marks. Anything you press to act is a pill. Anything you fill in or choose between is 8px. Only the orange panel and the surfaces floating on it or over it get 12–16px corners.

## Components

### Buttons
Quiet, compact pills. They sit beside the content rather than competing with it.
- **Shape:** full pill (999px), 36px tall, 16px horizontal padding, and a 6px gap when the button holds an icon.
- **Primary:** Action Orange fill with white Label text. This is the one primary action in a context: Publish or Sign in in the nav, the submit of a form, or the main call to action in an empty state.
- **Hover / Focus:** the fill darkens to Action Orange Pressed over 200ms on the house curve (`cubic-bezier(0.16, 1, 0.3, 1)`). Focus shows the global 2px Signal Orange ring at a 2px offset.
- **Outline:** a white fill with a 1px Hairline Strong border and Ink text. On hover the border turns Ink. Use it for secondary actions such as Cancel, Clear search, Reset install key, Sign in inside an empty state, and the account menu trigger.
- **Danger:** a white fill with a Danger Line border and Danger text. On hover the border turns Danger and the fill turns Danger Tint. Use it for Revoke, Delete account and the second, submitting pill of every delete confirmation, and see The Quiet Danger Rule.
- **Ghost:** no fill and no border at rest, 12px horizontal padding, an Ink label and a 16px icon in Warm Muted. On hover the pill fills with Paper Shade and the icon turns Ink. The danger ghost has a Danger label and icon and fills with Danger Tint on hover. Ghost buttons live only inside the skill toolbar, where the frame and its dividers already mark the controls, so a border on each would double the lines.
- **Delete confirmation:** a `<details>` whose summary is the danger ghost, Delete with a trash icon in the skill toolbar, or a small Delete account danger pill in the users table. While it is open the summary border turns Danger, and the danger ghost also fills with Danger Tint. It reveals a Caption hint (60ch) that says what deleting does and, 10px below it, a danger pill of the same size that names what it deletes, such as "Delete demo-skill" or "Delete carol". That second pill is the only control that submits, and clicking the summary again closes the confirmation. In the users table it opens in place, 10px under the summary, and its hint wraps to the Actions column instead of widening it. Opening one row's confirmation closes any other. On the skill page it floats: a white panel 340px wide (never wider than the toolbar), padded 14px, with 12px corners, a 1px Hairline outline and the Popover shadow, 8px below the toolbar and right-aligned to it. It works the same without JavaScript.
- **Small:** 32px tall, 12px horizontal padding and 13px text, in any variant. It is used for the row actions in the users table.
- **Wide:** the full width of its form and 42px tall. It is used only for the single submit on sign-in and setup.

### Chips
- **Tag:** a 20px-tall, 5px-radius outline in Hairline Strong holding Mono Tag text in Graphite. The You tag sits beside your own username in the users table. A tag always sits beside the thing it names, never above a heading.
- **Data chip:** a Paper fill with a 1px Hairline Strong outline, 5px corners and 2px 8px padding, holding Mono Meta text in Graphite. It is for data labels that keep their case, such as filenames: the SKILL.md label in a header strip, and the files carried over on Edit. Chips wrap in a row with 6px gaps.
- **Count pill:** 24px tall, a white fill with a Hairline Strong outline, holding Mono Meta numerals in Graphite. It sits right after a section headline, a compact page title or a panel title. The number it shows is always the real length of the list.
- **Status pill:** the same 24px white pill after a 14px Body Gray "Status:" line, holding Mono Meta text. When idle it reads in Warm Muted ("not generated"). When on it reads in Ink and leads with a 6px Signal Orange dot ("active").
- **Visibility label:** Mono Label text in uppercase with a 13px icon, placed at the top-right of a cell. Public uses a globe in Orange Ink. Private uses a padlock in Warm Muted. It has no fill and no border. On the skill panel it sits in the meta line in Ember.
- **Role label:** the same Mono Label without an icon. admin is Orange Ink and member is Warm Muted.

### Cards / Containers
There are no cards. Every container is a square hairline frame.
- **Corner Style:** square (0), with 7px registration marks at the four frame corners.
- **Background:** White inside the frame, which sits on the Paper ground.
- **Shadow Strategy:** none (see The Flat Frame Rule).
- **Border:** a 1px Hairline Strong outer frame. Internal dividers are 1px Hairline.
- **Registry grid:** cells share Hairline dividers on the right and bottom, and the grid is pulled 1px under the frame so the dividers never double up. Cells are padded 24px 24px 20px, with a vertical gap of 10px between title, description and metadata.
- **Cell hover:** the whole cell washes to Peach Tint, its title turns Orange Ink, and its arrow turns Orange Ink and nudges 4px to the right over 250ms. The whole cell is clickable through the title link's `::after` overlay. Keyboard focus draws a 2px Signal Orange ring inset on the cell.
- **Empty state:** a centered stack on the 10px dot grid inside the same frame. It has a Title Large line, a Body line in Body Gray (52ch) and one pill button. Its copy says what happened and how to recover: for example, "No skills match …" followed by Clear search.
- **Panel:** a frame with an optional header strip and a body padded 20px with a 14px gap. The strip is Paper Shade, at least 52px tall, padded 12px 20px, with a Hairline bottom border. It holds a Panel Title on the left and a count pill or other aside on the right. When the body holds a row list it drops its padding so the rows run edge to edge.
- **Row list:** rows padded 10px 20px with 12px gaps and Hairline dividers, in 13.5px text. In Files, each row shows the path in Mono Path Ink and the size in Mono Meta Warm Muted. In Versions, each row shows the version as a Mono Meta Large Ink link with a Hairline Strong underline, a UTC timestamp and a download icon. The version link turns Orange Ink on hover. The current version's row is tinted Peach Tint, and its link is Orange Ink at weight 500 with `aria-current`. The download icon is Graphite on a 6px-radius plate padded 4px (pulled back by a -4px margin so it does not shift the row), and on hover the plate fills with Paper Shade and the icon turns Orange Ink. A long Files or Versions list folds like the SKILL.md body (see Fold below), clipped to 400px, about ten rows, and fading out over its last 80px. Versions stays whole when the fold would hide the current version's row.
- **Toolbar:** the skill page's actions sit in one full-width square frame with registration marks and a White inside, so the toolbar lines up with the frames below it. From 1024px up it is a single 54px row split into groups by 1px Hairline dividers that run its full height, and each group pads its ghost buttons 8px with 2px gaps: Download zip; Edit SKILL.md and Upload an archive; Make public or Make private; then Delete, pushed to the far end. Each button leads with a 16px icon: a down arrow, a pencil, an up arrow, a globe for Make public, a padlock for Make private and a trash can. The first icon lines up with the SKILL.md chip below. Below 1024px the dividers drop, the buttons wrap inside the frame's 8px padding, and Delete moves under a dashed Hairline Strong rule that spans the frame. Below 640px the buttons settle into two left-aligned columns, and below 360px into one. A visitor who cannot manage the skill sees the same frame holding Download zip alone.
- **Form frame:** the form itself is the frame. It is split into sections padded 24px with Hairline dividers, and it closes with a Paper Shade footer bar padded 16px 24px, holding the primary button and an outline Cancel 10px apart. The edit form opens with a header strip holding the SKILL.md chip, followed by the full-width editor.

### Page Head
The top of every working page.
- **Standard:** a Page Title with an optional aside on the same wrapping row (10px 14px gaps). An optional Page Lede follows 12px below. It sits 32px above the content. Wherever its column meets the dashed gutters, it takes the compact head's inset (see The Dashed Gutter Rule).
- **Compact:** a Headline-sized title (32px, 26px on mobile) with a count pill beside it and an optional outline pill pushed to the far end of the row, 24px above a full-width table and inset 20px (18px on mobile) to line up with the table's cells. It is used on Users, where the pill is Add a user.
- **Flash:** when the previous action redirected here with a confirmation, a Done line follows either head, before any Alert. Only pages with a page head show one. The hero pages and the sign-in frame still clear a pending flash without showing it, so no action redirects there with one.

### Inputs / Fields
- **Field:** a 14px weight-500 Ink label, the control 6px below it, and an optional Caption hint in Warm Muted 6px below that.
- **Text field:** 40px tall with 12px horizontal padding, a white fill, a 1px Hairline Strong border and 8px corners. Text is 15px Ink and the placeholder is Warm Muted. On hover the border turns Hairline Hover (#c9b8ae), over 200ms.
- **Focus:** the border turns Ink and the global 2px Signal Orange ring sits 1px outside it. Inside the orange panel, every focus ring is white instead of orange. The copy button inside the white command box is the exception: its ring stays Signal Orange so it shows against the white.
- **Small text field:** 32px tall, 13.5px text, up to 300px wide (full width in the stacked table). It is used for the reset-password field in the users table.
- **Textarea:** the text-field frame grown to at least 280px, padded 12px, in Red Hat Mono at 13.5px and 1.6, resizable vertically. It is used to paste SKILL.md on Publish.
- **Editor:** a borderless mono textarea (13.5px, 1.65) that fills the edit frame, at least 480px tall, padded 20px 24px (16px 18px on mobile), with a Hairline bottom border. Its focus ring is drawn inside the frame.
- **Select:** a native select with `appearance: none`, styled as a text field with 36px of right padding, and a 16px Warm Muted chevron drawn 12px from the right edge.
- **File picker:** a full-width box with a 1px dashed Hairline Strong border, 8px corners, a Paper fill and 10px padding, in 14px Body Gray. Its `::file-selector-button` is a 32px white pill with a Hairline Strong border and a weight-500 Ink label. On hover the dashed border turns Warm Muted and the pill's border turns Ink.
- **Choice cards:** radio cards in a two-column grid with 12px gaps (one column below 640px). Each card is a white box with a 1px Hairline Strong border and 8px corners, padded 14px 16px 14px 44px. The 16px native radio sits 16px from the left, and a weight-500 title sits over a Caption detail in Warm Muted. On hover the border turns Warm Muted. When checked, the border turns Orange Ink and the card fills with Peach Tint.
- **Search field:** a 52px pill on the orange panel (48px below 640px). The fill is Ember at 30%, with a 1px border of white at 28% opacity. It holds a 16px magnifier, a transparent 16px input with white text, white placeholder text and a white caret, and a white pill Search button inside, 6px from the edges. White placeholder text on the composited fill measures 4.99:1. On `:focus-within` the border turns solid white and the fill deepens to Ember at 38%.
- **Errors:** validation happens on the server. The page re-renders with an Alert above the form or inside the sign-in frame. Every text input and textarea carries a Signal Orange caret and accent color.
- **Confirmations:** an action whose result the page cannot show (a password change, a password reset, an install key rotation) sets a one-time flash before it redirects. The flash is a cookie signed with the session secret, bound to the session that set it, and it lives 60 seconds. The next rendered page clears it and shows it only if the page has a page head. A flash that is unsigned, tampered or set by another session shows nothing.

### Alerts, Notices and Done
- **Alert:** an 8px-radius box padded 12px 14px with a Danger Line border and a Danger Tint fill, holding a 16px alert-circle icon and 14px Danger text 10px apart. It sits 24px above the form it belongs to, keeps off the dashed gutters (see The Dashed Gutter Rule) and is announced with `role="alert"`.
- **Notice:** the same shape in orange, with a Notice Line border, a Peach Tint fill and Orange Ink text. It is for information the user must act on now, such as "This token is shown once. Save it now."
- **Done:** the same shape in Ink on white with a Hairline Strong border, and a 16px check-circle icon in Orange Ink. It confirms a change the page cannot show, such as "Your password has been changed." It sits under the page head, 24px above the content, keeps off the dashed gutters like the Alert, and is announced with `role="status"`.

### Navigation
- **Bar:** a white, 64px bar with a 1px Hairline bottom border. From left to right it holds the lowercase wordmark, a flexible spacer and the actions. The nav has no link group.
- **Signed in:** a primary Publish pill, then the account menu. The menu is a `<details>` whose summary is an outline pill showing the username (truncated at 14ch) and a Warm Muted chevron. The chevron rotates 180° when the menu is open, and the summary border turns Ink.
- **Menu panel:** white, 12px radius, 6px padding and at least 180px wide. It opens 8px below the trigger, right-aligned, with a 1px Hairline outline and the Popover shadow. Items are 14px Ink text in 8px-radius rows that fill with Paper Shade on hover. The items are Account, Users (admins only) and Sign out, which is a form button.
- **Signed out:** a single primary Sign in pill. The sign-in and setup pages hide it, so their nav carries only the wordmark.
- **Skip link:** an Ink pill with white text that slides in from above the viewport when it receives focus.
- **Footer:** a Paper Shade band with a 1px Hairline top border and 28px vertical padding. It holds the 15px wordmark, a one-line Caption description in Warm Muted, and Graphite links that underline on hover with a 3px offset.
- **Mobile:** gutters drop to 16px. The actions keep their full size.

### Command Panel (signature)
The hero of the system: an orange field that hands over one line of shell.
- **Field:** Signal Orange with 16px corners, inset 8px from the viewport. It carries the dot-matrix texture and the breathing glow at its foot (opacity 0.85 to 1, scale from 1 × 0.92 to 1.06 × 1.08, 7s ease-in-out, alternating).
- **Index stack:** centered. A white Display headline, then the Lede in Ember, then the command box 36px below it (28px on mobile), then the search field 14px below that.
- **Skill stack:** compact and left-aligned. A white Display Skill slug, the Lede 14px below (64ch), a Mono Meta Large meta line 16px below in Ember (author and Visibility label, with 4px 18px gaps), the command box 28px below, and a 14px Ember note 12px below it that says what the command carries.
- **Command box:** a white box with 12px corners, lifted by the Command Lift shadow. It holds an Orange Ink `$` prompt that cannot be selected, and the command in Mono Command text. The command wraps anywhere. One click anywhere in the box copies it, and without JavaScript the same click selects it entirely (`user-select: all`). A Signal Orange caret block, 0.55em × 1.15em, blinks after it (1.1s, steps(1)). A copy button sits at the right end at every width.
- **Flat code block:** the same command box off the orange panel. It is white with a 1px Hairline Strong border, 8px corners and no shadow, full width, in Mono Command Small, and it carries the same copy button. It carries the install command on Account. For a secret such as a new API token it drops the `$` prompt and keeps the caret, select-all and copy button.
- **Copy button:** a 30px white pill at the right end of every command box and flat code block, with a 1px Hairline Strong border and a 16px copy icon beside a 13px weight-500 label. The label reads "Copy" in Warm Muted and turns Ink on hover. After a successful copy it reads "Copied" in Orange Ink for two seconds. If the browser refuses the copy, it reads "Press ⌘C" or "Press Ctrl+C" in Ink, and the command is left selected. It is hidden until the script runs, so a page without JavaScript shows none.

### SKILL.md Document
- **Frame:** a square frame with registration marks. Its header strip holds the SKILL.md chip on the left and Caption panel meta on the right: "v3, the latest version", or "Viewing v2." with an Orange Ink link to the latest version.
- **Body:** padded 28px 40px 40px (20px 18px 28px on mobile), set in the SKILL.md type from Typography. Links are Orange Ink with a 1px underline at a 3px offset that thickens to 2px on hover. List markers are Warm Muted. Inline code is Ink mono on Paper Shade with a Hairline border, 5px corners and 1px 5px padding. Code blocks are square Paper Shade boxes with a Hairline border, padded 16px 18px, that scroll sideways. Quotes are Paper Shade blocks padded 12px 18px in Graphite, with no side stripe. Tables scroll sideways, with Hairline cell borders, 8px 12px cell padding and a Paper Shade header row. Horizontal rules are dashed Hairline Strong. Task-list checkboxes use the Signal Orange accent.
- **Fold:** when the body would hide at least 200px, it is clipped to 720px and fades out over its last 120px, and the frame closes with a Paper Shade footer bar padded 16px 24px (14px 18px on mobile) holding a small centered outline pill, "Show more". Opened, the pill reads "Show less", and folding again scrolls the frame back into view. The folded body clips rather than scrolls, and tabbing into its hidden part opens it. The bar is hidden until the script runs, so a page without JavaScript shows the whole document.

### Users Table
- **Desktop:** a full-width frame holding a table. The header row is Paper Shade with Mono Label column headers in Warm Muted, padded 12px 20px. Rows are padded 18px 20px, top-aligned, with Hairline dividers. The username is weight 500, with the You tag beside your own. The role is a role label, and the last sign-in date is Mono Path in Body Gray.
- **Actions:** a column of small outline pills (8px gaps), then an inline reset-password form (a small text field and a small outline pill), then, for other users, a danger zone: a dashed Hairline Strong rule, 12px of space and a small Delete account delete confirmation (see Buttons).
- **Below 768px:** the header row is visually hidden and each row stacks into label/value pairs, padded 16px 18px with Hairline dividers. Each cell is a two-column grid (96px label, then the value, 12px apart), and the label is drawn from the cell's `data-label` in 10.5px uppercase mono at 0.1em in Warm Muted. The Actions cell stacks its label above the value and stretches the password field to full width.

### Sign-in Frame
- **Stage:** a centered frame on a field of Hairline Strong dots (0.9px on a 10px pitch). The field extends past the page body's padding toward the nav and the footer, and a radial mask fades it out from 30% of the way to its edges.
- **Frame:** a square frame with registration marks, 420px wide, padded 32px (24px 20px on mobile). It holds the Auth Title, an optional Alert, and a form of fields 18px apart that ends in a wide primary button.

### Named Rules
**The One-Click Copy Rule.** A command or token the user is meant to copy copies to the clipboard with one click and ends in a blinking orange caret block. Without JavaScript the same click selects it entirely, so it can still be copied by hand.

**The Header Strip Rule.** Every titled frame opens with a Paper Shade strip, at least 52px tall with a Hairline bottom border, holding its title or a filename chip on the left and its meta, count or link on the right. A form frame closes with the same Paper Shade as its footer bar, so Paper Shade marks the top and bottom of a frame and White marks its content.

## Do's and Don'ts

### Do:
- **Do** put white text on Signal Orange (#ff5e1f) only at display size. Set running copy, meta and links on the orange panel in Ember (#3c0c00, 5.52:1).
- **Do** fill primary buttons with Action Orange (#d63c01) and hover to #b93300. Set orange text on white in Orange Ink (#c73a02).
- **Do** frame lists of records as a square hairline grid: a 1px Hairline Strong frame, 1px Hairline dividers, 7px registration marks and dot-filled cells that complete the last row.
- **Do** build every other container as the same square frame with registration marks, opened by a Paper Shade header strip when it has a title, and closed by a Paper Shade footer bar when it is a form.
- **Do** give text fields and selects 40px of height, 8px corners and a Hairline Strong border that turns #c9b8ae on hover and Ink on focus.
- **Do** set destructive actions in #b42318 text, as danger pills (white, with a #f4c7c3 border) or, in the skill toolbar, as a danger ghost. Place them at the end of a toolbar or below a dashed rule, behind a delete confirmation that says what deleting does.
- **Do** put errors in an Alert above the form, one-time information the user must act on in an orange Notice, and the confirmation of a change the page cannot show in a Done line.
- **Do** use a data chip for filenames that keep their case, and an uppercase mono label only for short fixed labels.
- **Do** keep Red Hat Mono for commands, tokens, SKILL.md source, paths, versions, dates, handles, counts and short uppercase labels tracked at 0.1em.
- **Do** stack tables into label/value rows below 768px instead of scrolling them sideways.
- **Do** tint every shadow and scrim with Ember (`rgb(60 12 0 / a)`), with a real offset and blur.
- **Do** theme the browser surfaces from the palette: Selection Peach (#ffd6c2) for selections, a 2px Signal Orange focus ring at a 2px offset (white inside the orange panel), an orange caret and accent color, and a Hairline Strong scrollbar on Paper.
- **Do** limit motion to the breathing glow, the caret blink and 200–250ms state tints on `cubic-bezier(0.16, 1, 0.3, 1)`, and turn off the glow, the caret and anything that moves under `prefers-reduced-motion`.
- **Do** build every interaction from native HTML: `<details>` for menus and delete confirmations, GET and POST forms, radio cards, file inputs, links and `user-select: all`. The two scripts, `public/copy.js` and `public/fold.js`, only enhance: every page works without them.
- **Do** draw icons as inline 16px SVG with a 1.5 stroke, round caps and joins, and `currentColor`.
- **Do** self-host every face under `default-src 'self'`, as woff2 split by unicode-range with the display face preloaded.

### Don't:
- **Don't** use a Cloudflare logo, cloud mark or any trademarked Cloudflare asset. The style is borrowed, not the brand.
- **Don't** set body text, links or button labels in white on Signal Orange (3.06:1).
- **Don't** put an orange panel on a form, account, admin or sign-in page. An install command there goes in the flat code block.
- **Don't** fill a button or a banner with Danger red. Danger is a line and a text color.
- **Don't** bring Tailwind's slate, gray or blue utilities into any surface. Every page is on these tokens.
- **Don't** turn registry items, panels or forms into rounded, shadowed cards floating on the ground. Containers are square hairline frames.
- **Don't** put a shadow under a bordered frame, cell or bar.
- **Don't** place a kicker or eyebrow label above a heading. A tag or chip sits beside the thing it names, or inside a header strip.
- **Don't** make headings bold. Weight 500 plus tracking between -0.02em and -0.035em carries them, and tracking never goes tighter than -0.035em.
- **Don't** fall back to a system face for display. If Schibsted Grotesk is not loaded, fix the font loading instead of substituting a face.
- **Don't** invent counts, uptime or usage figures to fill a count pill or a headline. Show only the real length of the list.