| name | steno-brand-style |
| description | Apply the canonical Steno brand style system to any Steno web page or React/TSX component using shared CSS variables and Tailwind utility mappings. |
| category | executing |
| model | claude-sonnet-4-6 |
Steno Brand Style — Apply to Page or Component
Use this skill when you need to align an existing page/component with Steno’s canonical brand system quickly.
Invocation: /steno-brand-style <relative-path-to-file>
Step 0: Read sources
Read both of these files first:
packages/web/src/styles/style-guide.mdpackages/web/src/index.css
The style guide is canonical for tokens and component intent; index.css is canonical for runtime variables.
Step 1: Audit the target
Read the target file with:
- Current className usage and visual roles (heading, eyebrow, card, button, link, table, surface, background, status chip, alert/error block)
- Any existing style overrides (
style={{...}}) and hardcoded hex values
- Whether the target is a full page or reusable component
Step 2: Remap into brand roles
For each visual role, map to Steno tokens from the style guide:
| Role | Preferred classes/tokens |
|---|
| Page background | bg-bg |
| Surface / card / container | bg-surface, optional rounded-md, border, border-border, shadow-sm/shadow-md |
| Body typography | font-sans + text-base / text-sm + leading-[1.618] + tracking-[0.25px] |
| Heading typography | font-serif plus size/line-height values from the guide (text-[55px]…text-[28px], etc.) |
| Eyebrow / label | text-[12px] font-normal uppercase tracking-[1px] text-primary-gold |
| Primary CTA | bg-primary-gold text-white rounded-lg px-5 py-2 text-[12px] uppercase tracking-[0.25px] |
| Borders and separators | border-border with radius from role (rounded-sm, rounded-md, rounded-lg, rounded-circle) |
| Error / danger | text-error / border-error as appropriate |
| Hero gradient | bg-[linear-gradient(80deg,#CE11A4_0%,#B5006A_30%,#493087_76%,#2F317C_93%)] |
| Status token (pill) | st-status |
| Status token (muted) | st-status-muted |
| Status banner (inline or full width) | st-status-banner |
| Success banner variant | st-status-banner-success |
Step 3: Rewrite carefully
Use Serena editing for the target file:
- Replace generic colors and non-brand utility classes (e.g.
bg-white, text-black, text-blue-600, rounded, generic grays) with brand equivalents.
- Replace hardcoded hex values in
style props with equivalent CSS variables from :root where possible.
- Keep component logic unchanged; only update className and style expression tokens that affect presentation.
- Preserve existing layout structure unless the existing structure conflicts with design intent.
- Add
font-serif to heading elements and font-sans to supporting text when missing.
- For any
role="status" message, badge, or chip, prefer these reusable tokens before introducing ad-hoc colors:
st-status (neutral label) for compact inline chipsst-status-muted for neutral secondary pillsst-status-banner for status banners/inline messagesst-status-banner-success for success confirmations
Step 4: Verify
If the target is a React/TSX file:
pnpm --filter web typecheck
If the target is a static markdown page or docs artifact, run a short visual/manual pass:
- Color usage uses only Steno tokens/variables
- Type scale and spacing feel match the style guide
- CTA and labels follow primary CTA / eyebrow patterns
- Borders, surfaces, and shadows are consistent across sections
Reusable style utility map (from live Steno module CSS)
role=status / small status chips: st-status, st-status-muted, st-status-banner- Primary CTA:
btn-primary and btn-outline map to the live #a18050 / uppercase / pill / pill-shadow pattern.
- Headings:
st-section-headingtext-[55px], text-[48px], text-[38px], text-[28px] (mapped by context)
- Labels / eyebrow:
- Card surfaces:
Step 5: Report what changed
Summarize:
- Which brand roles were touched (e.g., buttons, cards, headings, alerts)
- Any unsupported old values intentionally preserved and why
- Any follow-up cleanup needed (if a non-class style override blocks full token mapping)
