Jurassic Interface is a free design system for Claude Code. Beveled control panels, black label plates, status lamps and dense monospace readouts — applied to a dashboard, a landing page, a checkout, or whatever you are building next.
A stylesheet gives you colors. It does not tell you what an empty state looks like, how a modal behaves, or what happens on a phone. That is why most themes fall apart on the second screen. This one ships the decisions too.
tokens.css
Every color, size and gap in one file. Change these, the whole look changes.
jurassic.css
66 components for the parts: panels, plates, lamps, readouts, dials, charts.
SKILL.md
Fourteen rules that tell Claude what to do when the parts do not cover it.
translation-map.md
You want X, in this system that is Y. Modal, toast, avatar, progress bar — all mapped.
Claude reads the rules and the map, and builds it on-theme. Ask for another page next week and it still matches.
Every core primitive rendered — panels, plates, wells, logs, status lamps, meters.
Windows on a mottled desktop, icon tiles, media panes, dials and a live chart.
A featured market with a multi-series probability chart and a working hover layer.
Eight market cards, filter chips, two-sided commit controls, dense tabular data.
A validating multi-step form — segmented progress, gated CTA, terms well.
A content-led marketing site using the editorial density scope.
Everything on this page is built from the kit — the mesh, the dials, the trace, the line study. No images, no icon font, no libraries. Two stylesheets and some SVG.
Written rules mean Claude does not improvise differently every session. Screen three still matches screen one.
Every color pair is contrast-checked in both palettes, every target hits 44px on touch, and the chart ramps passed a color-vision checker.
Claude Code catches breaks in the system by reviewing its own output against the design system guidelines.
Two stylesheets and a folder of markdown
Works offline · no fonts to license