Themes / 06
Cipher
A sharp, technical theme for developer tools. Monospace headings, cool paper, electric violet and one acid-lime signal.
npx shadcn@latest add https://strictthemes.com/r/cipher.json- DESIGN.md The spec
- tailwind.css Tailwind CSS v4
- shadcn.css shadcn variables
- nuxt-ui.css Nuxt UI
- app.config.ts Nuxt UI config
- tokens.json W3C design tokens
01 / Preview
Stock shadcn components, this theme.
Ship the page, keep the system.
Every color, corner and typeface in this box comes from the theme's tokens. The components are stock shadcn.
96%88%100%02 / Page prompts
Paste one into your agent. Get that page.
Each prompt is a full brief for one page in this theme: its sections, layout, behavior, and a checklist the agent goes through before it says it is done. The rules in every prompt are generated from the theme's strict block. Each preview is the page a coding agent built from the prompt, shown as it came out.
Landing page
The website of a command-line deploy tool, with the install command, a terminal session, its features, a config example and a closing call to action.
34.5k characters · Run 3 times in Claude Code
Strict Check 100%
Docs page
One reference page of a command-line tool's docs, with a sidebar of pages, code blocks that copy, a table of flags, a note, an "on this page" list and links to the previous and next page.
35.5k characters · Run 3 times in Claude Code
Strict Check 100%
Changelog
A command-line tool's changelog, with its releases newest first, the changes of each grouped by kind, a filter by kind and a badge on the latest release.
32.5k characters · Run 3 times in Claude Code
Strict Check 100%
Deploys
The deploy console's list of deployments, with filters, a table of commits, branches, environments, states, durations and times, and the log of the selected deployment.
34.5k characters · Run 3 times in Claude Code
Strict Check 100%
API tokens
The deploy console's settings page for API tokens, with a table of tokens, a form that creates one and shows it once, and a way to revoke a token by typing its name.
35.6k characters · Run 3 times in Claude Code
Strict Check 100%
03 / Colors
Every color the theme allows.
primary
#5B32E6 / #A893FF
on-primary
#FFFFFF / #120A33
secondary
#0E1116 / #E6E9EE
on-secondary
#FFFFFF / #0E1116
tertiary
#C6F135
on-tertiary
#0E1116
neutral
#565E6E / #8E97A6
background
#F1F3F1 / #0B0D10
surface
#FFFFFF / #13161B
foreground
#0E1116 / #E6E9EE
border
#D3D8DA / #262B34
error
#C4281C / #FF7B72
success
#177A45 / #56D38A
Left: light mode. Right: dark mode.
04 / Typography
Five sizes. Nothing in between.
display
JetBrains Mono · 44px · weight 800 · line 1.1
The quick brown fox
h1
JetBrains Mono · 30px · weight 700 · line 1.2
The quick brown fox
h2
JetBrains Mono · 20px · weight 700 · line 1.3
The quick brown fox
body
Geist · 15px · weight 400 · line 1.6
The quick brown fox
label
JetBrains Mono · 12px · weight 500 · line 1.3
The quick brown fox
05 / Shape and space
Corners and spacing.
sm
3px
md
6px
lg
10px
xs
4px
sm
8px
md
12px
lg
16px
xl
24px
2xl
48px
06 / Rules
What the strict block enforces.
- Contrast
- WCAG AA
- Colors
- Tokens only, within 0.02 of a token
- Spacing
- Scale only, plus 0, 1px, 2px
- Corners
- Scale only, full rounds up to 12px
- Type
- Scale only, declared fonts only
- purple gradient
- Not allowed
- emoji icons
- Not allowed
- nested cards
- Flagged
- glow shadows
- Not allowed
07 / Guidance
What your agent reads.
Overview
Cipher is for things developers use: a CLI's website, API docs, a deploy dashboard, a changelog. It looks like a well-kept terminal brought into daylight. Headings are set in the same monospace as the code, so prose and commands read as one voice, and the page keeps the even rhythm of a text buffer.
Colors
- Primary (
#5B32E6) is electric violet, for the main action, links and the cursor. - Secondary (
#0E1116) is near-black ink for secondary buttons and headings. - Tertiary (
#C6F135) is acid lime, a highlighter. Use it for one badge or one marked line, with dark text on it. It is never a text color. - Neutral (
#565E6E) sets comments, labels and secondary text. - Background (
#F1F3F1) is cool, faintly green paper. Surface (#FFFFFF) is the white of a panel or a code block. - Success (
#177A45) and Error (#C4281C) are for exit states: passed and failed. Pair them with the word.
Typography
JetBrains Mono sets headings and labels. Monospace runs wide, so headings are smaller than in other themes and tracked in tightly. Geist sets body text at 15px. Code, commands, file names, versions and hashes are always in the mono font. Labels are lowercase or sentence case, the way a prompt would print them.
Layout
A 12-column grid, 1200px at its widest, with 24px gutters. Docs use a narrow reading column and a sidebar; tools use panels. Spacing comes from the scale (4, 8, 12, 16, 24, 48), in the dense half of it: 12px between related lines, 24px inside a panel, 48px between sections. Left-align everything, as a terminal does.
Elevation & Depth
Flat. A panel is white on the page with a 1px border, like a window with no shadow. Only menus, dialogs and tooltips float, on one short, neutral shadow.
Shapes
The corners of a terminal window: 3px for badges and inline code, 6px for buttons and inputs, 10px for panels and code blocks. No pills, and no circles except a status dot.
Components
- Buttons: violet for the one main action, near-black for the rest. Mono labels.
- Cards (panels): white, 10px corners, 24px padding, a 1px border.
- Badges: acid lime with dark text for the one thing that is new or live.
- Code blocks: the panel style, mono at the label or body size, scrolling sideways in their own box.
- Icons: 1.5px stroke line icons. Never emoji.
Do's and Don'ts
- Do set every command, path, flag and version in the mono font.
- Do keep lime to one mark per screen.
- Do left-align, and let lines be long before you center anything.
- Don't use violet as a fill for large areas, and never as a gradient.
- Don't use glows, neon outlines or scanline effects. This is a tool, not a poster of one.
- Don't introduce a color, size or radius that is not a token above.