Dala

# Dala — Style Reference > particle constellation in deep space **Theme:** dark · **Source:** https://dala.craftedbygc.com · **Analyzed:** 2026-08-25 Dala is a planetarium show for a knowledge product: a field of tiny wireframe triangles — amber, violet, teal, pink, white — drifts on pure black and, as you scroll, condenses into meaningful constellations (a brain, a lightbulb, the logo) that narrate the story. The interface around the WebGL sky is austere so the particles stay the hero. One typeface does everything: PP Neue Montreal in three strict roles — light (200) for reading paragraphs, regular (400) for display statements up to 112px with -4% tracking, and semibold (600) for small ALL-CAPS labels, nav, and buttons with +5% tracking. Color is rationed by function: violet (#8052ff) is the only action color (pill CTAs, carousel arrows, active states), amber (#ffb829) voices the caps eyebrows, gray (#9a9a9a) mutes inactive nav, and a deep pine green (#15846e) anchors occasional solid blocks. Text alternates sides against the constellation, cards round at 24px, and the page closes the loop by restating the promise centered over the particles with one violet pill. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Space | `#000000` | `--color-space` | Page canvas — the black sky behind the particles | | Paper | `#ffffff` | `--color-paper` | Display type, primary copy | | Gray | `#9a9a9a` | `--color-gray` | Inactive nav, secondary labels | | Silver | `#bdbdbd` | `--color-silver` | Muted captions, footer meta | | Violet | `#8052ff` | `--color-violet` | THE action color — CTA pills, arrows, active nav, mobile toggle | | Amber | `#ffb829` | `--color-amber` | Caps eyebrows, warm particle tone | | Pine | `#15846e` | `--color-pine` | Solid background blocks, cool particle tone | | Ink | `#000000` | `--color-ink` | Text over light/violet moments | Particle spectrum (illustration only, never UI): amber, violet, teal, rose, white wireframe triangles on black. ## Tokens — Typography **Only family:** PP Neue Montreal. Fallback: `Helvetica Neue, system-ui, sans-serif`. Three weights, three jobs — never mixed: - **200 (light):** reading paragraphs (18px) - **400 (regular):** every display and heading size - **600 (semibold):** small caps labels, nav, buttons (12–15px) | Step | Size / Weight / Line | Tracking | Case | |------|---------------------|----------|------| | display-xl | 112px · 400 · 1.1 | -0.04em | sentence | | display | 78px · 400 · 1.1 | -0.02em | sentence | | heading | 48px · 400 · 1.1 | 0 | sentence | | heading-sm | 42px · 400 · 1.2 | 0 | sentence | | subheading | 36px · 400 · 1.2 | 0 | sentence | | body-lg | 24px · 400 · 1.25 | 0 | sentence | | body | 18px · 200 · 1.5 | 0 | sentence | | body-sm | 15px · 400–600 · 1.5 | 0 | sentence | | nav / button | 12–14px · 600 · 1.2 | +0.05em | ALL CAPS | | eyebrow | 12px · 600 · 1.2 | +0.05em | ALL CAPS, amber | ## Tokens — Spacing & Shape | Purpose | Value | |---------|-------| | Density | Theatrical — one narrative beat per viewport, text blocks max ~480px wide | | Base unit | 8px | | Section rhythm | Full-viewport scroll scenes; the constellation is the continuity between them | | Card padding | 24–32px | | Button padding | 14px 16px | | Element | Radius | |---------|--------| | Cards & media | `24px` | | Buttons | pill (height/2 ≈ `22.5px`) | | Icon buttons / arrows | `50%` circle | **Shadows** — none. Depth comes from the particle field's own luminance against black. ## Guidelines - Keep the weight contract: 200 reads, 400 displays, 600 labels — using 400 for body or 600 for headings breaks the voice - Reserve violet (#8052ff) exclusively for interactive elements; if it isn't clickable, it isn't violet - Set eyebrows in amber ALL CAPS 12px semibold with +0.05em tracking above white display statements - Alternate text columns left/right between scroll scenes so the constellation always has room to perform - Cap paragraph measure near 480px — thin light text needs short lines against the busy particle field - Use pure black as the canvas everywhere; solid pine-green blocks are the only permitted color fields - Round cards at 24px and make every button a full pill; arrows live in violet circles - Let the particle system carry all decoration — UI chrome stays monochrome white/gray **Don't** - Do not use bold (700) — 600 exists only at small caps sizes - Do not introduce a second interactive color — violet owns every affordance - Do not put amber in buttons or links; it is an editorial voice, not an action - Do not use borders, dividers, or shadows — separation is space and darkness - Do not place long light-weight (200) paragraphs over dense particle areas without dimming the field - Do not brighten the background: the sky is #000, never dark-gray