Jurassic Interface
Live site and demos → https://jurassicinterface.dev
A free design system for Claude Code, inspired by early-90s scientific workstation GUIs —
chunky beveled control panels, black label plates, condensed italic display type, LED
status lamps, dense monospace readouts.
It is not a template. It is a set of rules plus a translation table, so Claude can render
any product in the style: a CRM, a booking flow, a settings screen, a landing page.
Two palettes ship with it: a gray daylight console, which is the default in light and dark
mode alike, and a blue night terminal, which you switch on with data-jp-mode="night".
Install
Clone the repo and copy the skill into any project:
git clone https://github.com/talktonick/jurassic-interface.git
cp -R jurassic-interface/skills/jurassic-interface your-project/.claude/skills/
That is all it takes — the skill is a folder of markdown and CSS with no
dependencies and no build step. Restart Claude Code and ask for the theme by name.
Not using Claude Code? The two stylesheets work on their own in any project — see
Use below.
Use
Ask for it by name:
Build the settings page for this app using the Jurassic Interface skill.
Or copy the two stylesheets into your project and add class="jp-body" to <body>:
<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="jurassic.css">
Open skills/jurassic-interface/assets/demo.html for the core primitives, and
demo-desktop.html for the windowed layer — dashboards, portfolios, charts, instruments.
What's in it
| File | Layer | What it does |
|---|
assets/tokens.css | Tokens | Every value. Swap these to reskin the whole system. |
assets/jurassic.css | Primitives | 66 .jp- components (160 selectors with elements and modifiers). |
SKILL.md | Doctrine | Fourteen rules that decide what to do when a primitive doesn't exist. |
references/translation-map.md | Mapping | Generic UI concept → this system's expression. |
references/responsive-audit.js | Gate | Console script returning PASS/FAIL for overflow, clipping, tap targets and rigid widths. Run at 320/375/768 on every page. |
references/voice.md | Copy | Status vocabulary, button labels, tone. |
assets/demo.html | Kit | Kitchen sink of the core primitives. |
assets/demo-market.html + demo-markets.html + demo-signup.html | Demo | A whole product rethemed — prediction-market venue: featured contract, market grid, signup. |
assets/demo-studio.html | Demo | A content-led marketing homepage using the .jp-editorial density scope. |
assets/demo-desktop.html | Kit | The desktop layer applied — windows, portfolio tiles, media panes, a validated multi-series chart with hover, stacked bar meters, dials. |
The doctrine and the map are the important parts. Anyone can copy a palette; the map is
what stops the theme falling apart on the second screen.
Customising
Color: edit tokens.css. Each surface has a matched foreground
(--jp-on-chassis, --jp-on-well, --jp-on-well-2). Never pair text with --jp-ink
directly — wells invert between palettes and ink does not.
Type: the display stack is system-condensed by default, so there are no font files,
no network request, and no licensing question. For a closer period match, swap
--jp-face-display to a licensed condensed grotesque; the film-era look is a
Gill-adjacent humanist italic, and Roboto Condensed Italic or Archivo Narrow both
land close for free.
Calm it down: set --jp-slant: normal to drop the italic, and raise --jp-gap to
loosen the density. Both push it toward something you can ship to a client.
Demo content
Every name, logo, quote, statistic, address, phone number and email in the demo pages is
fictional. The demos were built by rethemeing real products as a stress test, then had
all identifying content replaced. Studios, clubs, clients and people in them do not exist.
Phone numbers use ranges reserved for fiction and emails use the reserved .example
domain. Treat the demos as layout references, not as data.
License and marks
MIT for the code — see LICENSE. The aesthetic here is the shared visual
vocabulary of early-90s Unix
workstation interfaces — beveled Motif widgets, condensed italic labels, LED status
lamps — which no one owns.
This kit deliberately contains no names, logos, characters, place names, or fictional
companies from any film. Don't add them. references/voice.md gives you an invented
in-world vocabulary to use instead.
Two layers
Core — one control surface. Panels, plates, wells, logs, indexes, status. Use for
settings screens, forms, single-purpose tools.
Desktop — a set of things. Windows with title bars on a mottled desktop, icon tiles,
media panes, charts and instruments. Use for portfolios, analytics dashboards, trading
monitors, multi-tool workspaces.
Both ship in the same two stylesheets; the desktop layer is just more classes.
Charts
Series colors (--jp-s1…--jp-s5) are deliberately separate from status colors
(--jp-go/hold/fail), which are reserved for state and must never encode a data series.
Both ramps were validated with a color-vision checker for lightness band, chroma floor,
CVD separation, normal-vision floor and contrast against their surface. The light-surface
ramp passes with one CVD warning in the legal floor band, which is why direct labels and
2px segment gaps are mandatory rather than optional — don't strip them.
If you retune the ramps, re-run a validator. Don't eyeball color-blind safety.
Responsive
Type is fluid (clamp()), grid floors are min()-guarded, and nothing carries a fixed
minimum width — so layouts reach 320px without per-page breakpoints. The system does not
use overflow-x: hidden; that hides overflow rather than fixing it, and it makes audits
report clean while content is clipped.
Verify with the gate, not by eye:
jpAudit() // references/responsive-audit.js — run at 320, 375 and 768
All six demos and the landing page pass at all three widths.
Extending it
A primitive belongs in jurassic.css only if three unrelated products need it —
otherwise it stays in the demo as page-local CSS. Name things for their shape, not the
app you found them in, and never hardcode arity into a layout. SKILL.md has the full
rule. This matters more than it sounds: a kit that grows a class per product ends up
more prescriptive with every addition, not more capable.
Deploying the site
The landing page and all demos live in site/. build-site.sh copies the stylesheets
and demo pages out of the skill folder so site/ is self-contained — only
site/index.html and site/_headers are source; everything else there is generated.
./deploy.sh
Hosted on Cloudflare Pages. _headers sets security headers and cache policy, and
404.html is the not-found page. deploy.sh refuses to publish if any dev-only file
has leaked into site/.
To run the responsive audit matrix locally (all pages x 320/375/768):
./audit.sh # copies tools/audit-matrix.html into site/
./audit.sh clean # removes it again — it must never ship
Roadmap
- HTTPS for the live site (needs CloudFront, or a move to Cloudflare/Netlify Pages)
- React and Tailwind ports of the primitives
- A second theme built on the same four-layer skeleton, to prove the format
- Component screenshots for the gallery
