Create your own theme

---
version: alpha
name: <Theme Name>
description: >-
  <One-sentence thesis, e.g. "Guideline-based neumorphism: one material, convex keys, concave
  wells.">
colors:
  # ILLUSTRATIVE SUBSET, NOT A COMPLETE EXPORT. Keys are the NetScript CSS suffix of a core role
  # (surface/bg -> --ns-bg -> `bg`); the Dark value uses the same key with `-dark`. Replace every
  # value with the resolved Figma value, and list every core role the theme changes. The token export
  # (#2414) remains the complete role map.
  # The defaults below are safe, Utility-compatible values: a designed graphite dark, never white
  # primaries, borders or rings in dark. `muted` is a surface; `muted-fg` is its text.
  bg: '#ffffff'
  bg-dark: '#18181a'
  card: '#ffffff'
  card-dark: '#1e1e21'
  muted: '#f0f0f0'
  muted-dark: '#26262a'
  fg: '#202020'
  fg-dark: '#eeeeee'
  muted-fg: '#646464'
  muted-fg-dark: '#b4b4b4'
  border: '#e0e0e0'
  border-dark: '#383838'
  input-border: '#838383'
  input-border-dark: '#7b7b7b'
  ring: '#202020'
  ring-dark: '#7b7b7b'
  primary: '#202020'
  primary-dark: '#313131'
  primary-border: '#202020'
  primary-border-dark: '#7b7b7b'
  primary-fg: '#fcfcfc'
  primary-fg-dark: '#eeeeee'
  success-text: '#2a7e3b'
  success-text-dark: '#71d083'
  warning-text: '#4f3422'
  warning-text-dark: '#ffca16'
  destructive: '#e5484d'
  destructive-text: '#641723'
  destructive-text-dark: '#ff9592'
  info-text: '#113264'
  info-text-dark: '#70b8ff'
typography:
  display:
    fontFamily: <family>
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.02em
  title: { fontFamily: <family>, fontSize: 28px, fontWeight: 600, lineHeight: 1.2 }
  heading: { fontFamily: <family>, fontSize: 20px, fontWeight: 600, lineHeight: 1.3 }
  body: { fontFamily: <family>, fontSize: 14px, fontWeight: 400, lineHeight: 1.45 }
  label: { fontFamily: <family>, fontSize: 12px, fontWeight: 500, lineHeight: 1.3 }
  data: { fontFamily: <family>, fontSize: 14px, fontWeight: 400, fontFeature: '"tnum" 1' }
rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 12px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.primary-fg}'
    rounded: '{rounded.md}'
    height: 36px
  button-primary-dark:
    backgroundColor: '{colors.primary-dark}'
    textColor: '{colors.primary-fg-dark}'
    rounded: '{rounded.md}'
    height: 36px
  input:
    backgroundColor: '{colors.card}'
    textColor: '{colors.fg}'
    typography: '{typography.body}'
    rounded: '{rounded.sm}'
    height: 36px
  input-dark:
    backgroundColor: '{colors.card-dark}'
    textColor: '{colors.fg-dark}'
    rounded: '{rounded.sm}'
    height: 36px
---

# <Theme Name>

<!--
Format: Google Labs DESIGN.md (alpha, Apache-2.0), github.com/google-labs-code/design.md.
- The eight spec sections come first, in spec order.
- The NetScript extension sections follow them. Spec consumers preserve unknown sections.
- Replace every <placeholder>.
- Token values must be the resolved values from the NetScript Figma library. The front-matter
  colour keys are an illustrative subset. Keep them as CSS suffixes of real core roles
  (`muted` = surface, `muted-fg` = text, `input-border`, `primary-fg`), and never invent a key.
- The rules in docs/design-system/GUIDELINES.md apply.
-->

## Overview

- **Thesis:** one sentence.
- **Signature moves:** three things nobody would mistake for another theme.
- **Anchor:** the documented reference system, what is taken from it, and what must not be copied.
- **Family:** System, Platform, Expressive, Editorial or Developer.
- **Best for / avoid for:** where the style works, and where its own guidelines say it fails.
- **Feel:** three adjectives, and the user's first impression in one line.

## Colors

- **Ground and surface ladder:** canvas → panel → raised → overlay, in Light and Dark.
- **Accent policy:** where the accent may appear and where it must not.
- **Status colours:** values and contrast against their surfaces.
- **Dark design notes:** tinted ground, how elevation is shown, and the dark primary treatment. Dark
  is designed, never inverted: no white primaries, borders, rings or headers. The template defaults
  (graphite #18181a ground, #313131 primary with a #7b7b7b keyline and ring) are only a safe
  starting point.

## Typography

Families with licence and fallback stack, pairing logic, the scale, weights, tracking, numerals and
label case.

## Layout

Grid, density mode, row and field heights, spacing rhythm, page structure, and how the Orders
fixture is composed in this theme.

## Elevation & Depth

State the depth model as a rule anyone can apply. For each level, give:

- the shadow, bevel or glass recipe (CSS-implementable);
- which elements get it, and why.

## Shapes

The radius scale and concentricity, notches, steps, pills, borders and stroke widths.

## Components

For each component: the variant used in this theme, its anatomy differences, and its states (rest,
hover, pressed, focus, disabled, selected, error). Cover at least:

- button tiers;
- input and select;
- checkbox, switch and radio;
- tabs and segmented controls;
- table or list row;
- badge and tag;
- KPI card;
- notice;
- nav item;
- top bar and toolbar;
- dialog or sheet;
- the theme's signature objects.

## Do's and Don'ts

Ten to fifteen bullets, each phrased as a rule. Write every design correction the theme needed as
the rule it established, with its reason.

## Iconography & Imagery

The icon set and its licence, sizes, stroke or fill, colour icons, avatars, and the illustration or
backdrop policy.

## Motion & States

Hover, press and selection physics, durations and easing, and the reduced-motion equivalent.

## Accessibility

Measured contrast for text, non-text boundaries and focus; hit sizes; RTL notes; known exceptions,
with their tracking issue.

## NetScript Mapping

| Layer              | Value                                                                                                                         |
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------- |
| Figma Theme mode   | `<mode>`                                                                                                                      |
| Base gray × accent | `<gray> × <accent>`                                                                                                           |
| Density            | `<mode>`                                                                                                                      |
| Flavor             | `<mode or n/a>`                                                                                                               |
| `data-theme`       | `<id>`                                                                                                                        |
| Language roles     | Token-only preset: `none`. Style: the role manifest, every `<theme>/<path>` → `--ns-<theme>-<path>` it adds (GUIDELINES §2.4) |

- **Pending roles:** any value that has no semantic role yet (a primitive or raw value bound
  directly in Figma). For each one, give the role that will replace it and the reason, marked "role
  pending in #2414". These values never ship in L2 component CSS (GUIDELINES §2.1).
- **Implementation status:** one or two sentences, with an issue for everything not yet proven in
  code. For example: "Values come from the NetScript Figma library. Token and font export is tracked
  in #2414, component states in #2416, and runtime checks such as motion, RTL and glass rendering in
  #2419."

## Sources

External references only. For each source, give its link and licence, what this theme takes from it,
and what must not be copied. Separate values verified upstream from parameters adopted locally.

---
name: fresh-ui-theme-<id>
description: Build, extend or review NetScript Fresh UI screens in the <Theme Name> theme (<one-line thesis>). Use when a project sets data-theme="<id>", asks for a <style keywords> look, or adds new screens or components to a <Theme Name> app.
---

# <Theme Name> theme

Read `DESIGN.md` in this folder first. It holds the tokens and the full specification. This file is
the working procedure. The cross-theme rules are in `docs/design-system/GUIDELINES.md`, shipped as
the `netscript-design` skill.

## Use it when / don't use it when

- **Use for:** <products and screens where the style works>.
- **Don't use for:** <where the style's own guidelines say it fails>. Suggest <alternative theme>
  instead.

## Thesis

<Thesis.> Signature moves:

1. <move>
2. <move>
3. <move>

## Hard rules

- MUST <rule the theme depends on, from `DESIGN.md` → _Do's and Don'ts_>.
- NEVER <anti-pattern this theme is prone to>.
- MUST keep dark mode designed: <theme-specific dark rule>.
- MUST only read semantic roles (`--ns-*`) and `--ns-<id>-*` language roles. Never use primitives.

## Building a screen

1. **Enable the theme:** `data-theme="<id>"`, `data-scheme`, `data-density="<default>"` (provisional
   until #2414).
2. **Compose:** <how this theme lays out a page; which regions get which depth or material>.
3. **Pick variants:** <component → variant table for this theme>.
4. **Use the signature objects** where they carry meaning, never as decoration: <list>.
5. **Handle states:** <the theme's state physics>.

## New components or screens

- Start from the closest existing component's variant. Keep the theme's depth and shape rules.
- If a new visual role is needed, add it as `<id>/<path>`, list it in the style's role manifest
  (`DESIGN.md` → _NetScript Mapping_; GUIDELINES §2.4) and register it in code (#2414). Don't reuse
  an unrelated role.
- Add the new component to the state sheet, in Light and Dark.

## Self-check before handing off

- [ ] Recognisable as <Theme Name> at a 480px thumbnail.
- [ ] Dark audit: no white headers, pale gray slabs, white outlines or white or pale primary
      buttons. Saturated accent fills only where the accent policy in `DESIGN.md` allows them.
- [ ] Text ≥ 4.5:1; input, checkbox and switch boundaries and focus ≥ 3:1. Measured on pixels.
- [ ] Every depth or effect follows the model in `DESIGN.md` → _Elevation & Depth_.
- [ ] Whole-pixel edges; bound paints seeded with their resolved colour (Figma).
- [ ] <Theme-specific check>.

## References

`DESIGN.md` → Sources.