Plug the system into anything.
The brand is enforceable in code. Drop the tokens into any project — they stay consistent across web, native, and design tools. The CSS file is canon; everything else mirrors it.
00The equation
One ratio governs every artifact in this system. a over b equals φ — the proportion that human eyes have been calling beautiful since Phidias chiseled the Parthenon. Nothing here was designed. Everything was composed.
06Tokens
The complete vocabulary as CSS custom properties or a JSON object. Spacing on the fibonacci ladder (3 → 233). Five durations, five eases — each derived from φ.
Drop 06-tokens/ds-tokens.css into any web project. Reference values via var(--s-3), var(--ease-phi), var(--phi).
For non-web pipelines (Figma plugins, native apps, theming systems), use the JSON.
/* spacing — fibonacci */ --s-0: 3px; --s-3: 21px; --s-6: 89px; --s-1: 8px; --s-4: 34px; --s-7: 144px; --s-2: 13px; --s-5: 55px; --s-8: 233px; /* geometry · φ */ --phi: 61.8%; --phi-inv: 38.2%; /* motion */ --ease-phi: cubic-bezier(0.382, 0, 0.618, 1); --ease-phi-snap: cubic-bezier(0.5, 1.6, 0.5, 1); --ease-phi-glide: cubic-bezier(0.2, 0.8, 0.2, 1); --d-1: 240ms; /* flick */ --d-2: 382ms; /* base */ --d-3: 618ms; /* emph */ --d-5: 1618ms; /* signature reveal */
13Install
Drop the tokens into any project. Web, native, design tool, batch render. The CSS file is the canonical reference; everything else mirrors it.
/* Drop into your stylesheet — every spacing, type, motion, geometry constant */
@import url("https://desingularity.com/06-tokens/ds-tokens.css");
/* Reference anywhere */
.btn {
padding: var(--s-1) var(--s-3);
background: var(--paprika);
color: var(--black);
transition: transform var(--d-1) var(--ease-phi);
}14Bundles
Single-file HTML deliverables. Self-contained — every dependency inlined. Email, share, host anywhere.
Asset kit
The static asset kit, fonts and images inlined. Hand to a vendor, ship in a .zip, host on a static URL — no folder structure needed.
Wordmark in motion
Six paprika reveals — the signature 1618ms entry on the φ ease, plus alternates. Reference for animated lockups.
04Roadmap
The kit ships in layers. Anything tagged shipped is on disk now. Soon means within weeks; planned is on the runway.
- shippedCSS tokensDrop-in
ds-tokens.csswith every spacing, type, motion, geometry constant. - shippedJSON tokensThe same vocabulary as a structured JSON object — for Figma plugins, native apps, theming systems.
- shippedPalette filesCSS, SCSS, JSON, plain text (Pantone/CMYK), SVG swatches.
- shippedApp icon setiOS (1024 + scaled), Android adaptive, PWA maskable, classic favicons, web manifest.
- soonTailwind presetImportable preset bundling the palette, fibonacci spacing, font families, eases. Source ready in the install snippets.
- plannednpm package
@desingularity/tokens— TS-typed exports of palette, spacing, motion. - plannedReact components
@desingularity/react—<Wordmark/>,<EmRule/>,<PhiFoot/>. - plannedFigma libraryPublished team library with components mirroring the React layer.