handover · v0.2 a / b = φ 2026

desingularity asset kit

Every mark in three forms. Live SVG references the Funnel Display webfont. Outlined SVG is paths only — no font dependency, safe for any external handoff. PNG ships at 2× retina with the type baked into pixels.

live · text + font reference (smallest) outline · vector paths, no font dependency png · 2× raster, font baked into pixels

01 Wordmark

Seven variants. de is always paprika, singularity is cream or graphite. Never separated, never capitalized.

ds-wordmark-on-dark
ds-wordmark-on-dark
default · on black or graphite
ds-wordmark-on-cream
ds-wordmark-on-cream
warm-white / light backgrounds
ds-wordmark-on-paprika
ds-wordmark-on-paprika
inverted · cream de + black
ds-wordmark-transparent-dark
ds-wordmark-transparent-dark
over photos · dark areas
ds-wordmark-transparent-cream
ds-wordmark-transparent-cream
over photos · light areas

02 Favicon

The contracted mark de/. The equation stated, not solved.

03 Symbol

The equation a / b = φ, the standalone φ glyph, and the 38.2 / 61.8 foot rule.

ds-phi-foot-rule
ds-phi-foot-rule
38.2 / 61.8 rule bar · geometry only

04 Palette

Click any swatch to copy its hex. Paprika is the only accent. Everything else is graphite, cream, or steel. On press, paprika-dark (Pantone 1817 C) replaces paprika.

05 Type

Three families, three roles. Funnel for structure. Allura for the ineffable. JetBrains Mono for measure. Never a fourth.

Funnel Display
desingularity
Headlines, body, marks. Weights 300 / 400 / 500. Letter-spacing tightens with size.
300 light400 regular500 medium
Allura
beauty
The em rule. One or two per page on words that resist explanation. Paprika, baseline-aligned, 1.18em.
400 regular
JetBrains Mono
a / b = φ
Labels, code, captions, metadata. Uppercase with 0.16em tracking for chrome.
400 regular500 medium

06 Tokens

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 */

07 App icons

Browser, iOS, Android, PWA. All derived from the de/ mark, paprika on black. Grab the bundle, or copy the <link> snippet for the web set.

favicon.ico
favicon.ico
browser tab · multi-res 16/32/48
ico
favicon-32
favicon · 16/32/48
classic web favicons · png
16 32 48
apple-touch-icon
apple-touch-icon
ios safari · home screen · 180×180
180
ios-icon-1024
ios app icon set
120 · 152 · 167 · 1024 — xcode-ready
maskable-512
maskable icon
pwa · android safe-zone · 512×512
512
android-adaptive
android adaptive
foreground + background · 432×432
fg bg
favicon-192
pwa · 192
android home screen · web manifest
192
favicon-512
pwa · 512
splash · install · web manifest
512
Web install snippet ↧
<link rel="icon" type="image/svg+xml" href="02-favicon/ds-favicon-on-dark.svg">
<link rel="icon" type="image/png" sizes="32x32" href="08-meta/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="08-meta/favicon-16.png">
<link rel="shortcut icon" href="08-meta/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="08-meta/apple-touch-icon.png">
<link rel="mask-icon" href="02-favicon/ds-favicon-on-dark.svg" color="#A85743">
<link rel="manifest" href="08-meta/site.webmanifest">
<meta name="theme-color" content="#0A0A0A">

08 Bundles

Single-file HTML deliverables. Self-contained — every dependency inlined. Email, share, host anywhere.

copied