Ship with STRATA
in five minutes.
Three adoption paths, depending on how invested you want to be. Pick the lightest one that works for your stack — you can always grow into the next path later.
The system, ready
to download.
One bundle gets you everything, or grab the files individually below. Pull from the command line if you prefer. The live site is the canonical source.
Download strata.zip
styles.css · tokens.json · README — everything in one bundle, ready to drop into a project.
styles.css
The whole system — tokens, components, helpers. Drop into any project, link from your HTML.
- All tokens as CSS variables
- Every component class
- Reduced-motion + a11y helpers
tokens.json
Machine-readable tokens. Pipe through Style Dictionary, Tokens Studio, or a custom build.
- W3C DTCG format
- Compile to iOS / Android / Figma
- Single source of truth
Components
Every component lives on the site as working HTML. View source, copy the markup, paste it into your project.
- Buttons, inputs, tables, cards
- A composed dashboard pattern
- Real, copy-paste markup
terminalbash# Whole bundle in one shot curl -O https://strata.philiphe.com/strata.zip && unzip strata.zip # Or grab the files individually curl -O https://strata.philiphe.com/styles.css curl -O https://strata.philiphe.com/tokens.json
Pick the lightest path
that fits your stack.
Drop-in CSS
Copy one stylesheet, link it, use the class names. Works in any framework or no framework at all.
Tailwind config
Extend your tailwind.config.js with STRATA's tokens — get them as utility classes everywhere in your codebase.
Component library
Wrap each component as a typed React module. Ship one update, the whole product moves with it.
Drop-in CSS
For static sites, MPAs, prototypes, or codebases without a build step. The same stylesheet that powers this very page.
Copy the stylesheet
Grab styles.css and drop it into your project — anywhere your HTML can reach.
terminalbash# Place styles.css next to your HTML your-project/ ├── index.html └── styles.css // ← from STRATA
Link it in your HTML
Add the stylesheet link to the <head>. Tailwind is optional — STRATA's components are self-contained.
index.htmlhtml<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="styles.css" /> </head> <body> <!-- your content --> </body> </html>
Use the classes
All STRATA components are class-based — no JavaScript required.
page.htmlhtml<button class="btn btn-accent"> Save changes </button> <div class="card p-6"> <span class="badge badge-success"> <span class="dot"></span>HEALTHY </span> <h3 class="font-display text-3xl">$ 482,318</h3> </div>
Tailwind config
For Tailwind projects. Extends your config so every STRATA token is available as a utility class.
Extend your config
Add STRATA's tokens under theme.extend. Drop into tailwind.config.js at your project root.
tailwind.config.jsjavascript/** @type {import('tailwindcss').Config} */ export default { content: ['./src/**/*.{html,js,ts,jsx,tsx}'], theme: { extend: { colors: { ink: { 25: '#FAFAFC', 50: '#F4F5F8', 100: '#E7E9EF', 200: '#D2D5DE', 300: '#A9AEBC', 400: '#7C8294', 500: '#545A6E', 600: '#353B4C', 700: '#232836', 800: '#161A24', 900: '#0E1118', 950: '#07090F', }, lime: { 100: '#F4FFC2', 300: '#E8FF85', 400: '#DAFF4D', 500: '#CCFF00' }, cobalt: { 100: '#DBE1FF', 400: '#5A72FF', 500: '#2E4BFF' }, coral: { 100: '#FFE0D6', 400: '#FF8E74', 500: '#FF6B4A' }, canvas: '#F6F5F1', paper: '#FFFEFB', }, fontFamily: { display: ['Geist', 'sans-serif'], sans: ['Inter', 'system-ui', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'], }, borderRadius: { 'r-1': '2px', 'r-2': '4px', 'r-3': '6px', 'r-4': '8px', 'r-5': '12px', 'r-6': '16px', 'r-7': '24px', }, boxShadow: { 'elev-1': '0 1px 0 rgba(7,9,15,.04), 0 0 0 1px rgba(7,9,15,.06)', 'elev-2': '0 1px 2px rgba(7,9,15,.06), 0 2px 8px rgba(7,9,15,.04), 0 0 0 1px rgba(7,9,15,.05)', 'elev-3': '0 4px 12px rgba(7,9,15,.08), 0 12px 32px rgba(7,9,15,.06)', 'elev-4': '0 12px 32px rgba(7,9,15,.12), 0 32px 64px rgba(7,9,15,.10)', }, transitionTimingFunction: { standard: 'cubic-bezier(.2,.8,.2,1)', enter: 'cubic-bezier(0,0,.2,1)', exit: 'cubic-bezier(.4,0,1,1)', emphatic: 'cubic-bezier(.86,0,.07,1)', }, transitionDuration: { fast: '120ms', std: '200ms', slow: '320ms', deliberate: '520ms', }, }, }, }
Load the fonts
Add the Google Fonts import to your global stylesheet (or _document.tsx in Next.js).
globals.csscss@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300..900&family=Inter:ital,wght@0,300..800;1,300..800&family=JetBrains+Mono:wght@400..600&display=swap'); @tailwind base; @tailwind components; @tailwind utilities; body { font-family: theme('fontFamily.sans'); background: theme('colors.canvas'); color: theme('colors.ink.900'); }
Use as utilities
Every token becomes a Tailwind utility — bg-ink-950, rounded-r-3, shadow-elev-2.
Button.tsxtsxexport function Button({ children, variant = 'primary' }) { const base = 'inline-flex items-center gap-2 px-4 py-2.5 rounded-r-3 text-sm font-medium transition duration-fast ease-standard'; const variants = { primary: 'bg-ink-950 text-white hover:bg-ink-800', accent: 'bg-lime-500 text-ink-950 font-semibold hover:bg-lime-400', ghost: 'text-ink-800 hover:bg-ink-100', }; return <button className={`${base} ${variants[variant]}`}>{children}</button>; }
Component library
For teams. Wrap each STRATA component as a typed React component and publish to your internal npm registry. One source of truth for the whole org.
@your-org/stratapackage@your-org/strata/ ├── package.json ├── src/ │ ├── tokens.css // CSS variables │ ├── components/ │ │ ├── Button.tsx │ │ ├── Card.tsx │ │ ├── Badge.tsx │ │ ├── DataTable.tsx │ │ └── ... │ └── index.ts └── dist/ // built output
terminalbash# Add as a dependency npm install @your-org/strata # Or with pnpm pnpm add @your-org/strata
app.tsxtsximport { Button, Card, Badge, DataTable } from '@your-org/strata'; import '@your-org/strata/tokens.css'; export default function Page() { return ( <Card> <Badge tone="success" dot>HEALTHY</Badge> <Button variant="accent" size="lg">Continue</Button> </Card> ); }
A component, end to end.
Every STRATA component is composed entirely from tokens. Here's the Button, broken down — so you can see how to extend the system.
1. Tokens (the vocabulary)css:root { --lime-500: #CCFF00; --ink-950: #07090F; --r-4: 8px; --d-fast: 120ms; --ease-standard: cubic-bezier(.2,.8,.2,1); }
2. Component (composed from tokens)css.btn-accent { background: var(--lime-500); color: var(--ink-950); padding: 14px 22px; border-radius: var(--r-4); font-weight: 600; transition: background var(--d-fast) var(--ease-standard); }
3. Markup (use the class)html<button class="btn btn-accent btn-lg"> Continue </button>
Rebrand by changing
one token.
Because every component reads from tokens, you can re-skin the entire product without touching a single component file.
Override --lime-500 at a parent scope. Every button, badge, and signature surface that uses the token follows along.
brand-violet.csscss[data-brand="violet"] { --lime-500: #A78BFA; /* override the accent */ --lime-400: #B89FFA; --lime-100: #EDE4FE; }
app.htmlhtml<body data-brand="violet"> <!-- the whole product is now violet --> </body>
Define semantic aliases for surfaces and content, then swap them at the theme scope. Components reference the aliases — not the raw scale.
themes.csscss:root { --surface-canvas: var(--canvas); --surface-raised: var(--paper); --content-strong: var(--ink-950); --content-muted: var(--ink-500); } [data-theme="dark"] { --surface-canvas: var(--ink-950); --surface-raised: var(--ink-900); --content-strong: #fff; --content-muted: var(--ink-400); }
Production checklist.
Things to do before deploying STRATA into a real product. None are required for development; all matter at scale.