The repository ships three source marks in src/, each exported to PNG at many sizes.
| Mark | Use |
|---|---|
Square — codecave.svg | Avatars, favicons, app icons |
Wide — codecave-wide.svg | Site headers, letterheads, horizontal lockups |
Tall — codecave-tall.svg | Vertical lockups, portrait layouts |
Wide and tall marks come in four treatments: text-white (default, for dark
backgrounds), text-black (for light backgrounds), and all-white /
all-black single-colour versions for one-ink printing.
Because CODECAVE is dark-first, text-white on the near-black surface is the default pairing. Use text-black only on a genuinely light surface.
The wordmark is outlined vector paths, not live text — it does not depend on an installed
font, and it must never be re-typed by hand to fake a missing size. Export from src/.
--color-surface-primary, #050505); cards step up one
level to --color-surface-secondary (#0D0D0F). The separation is deliberately
narrow — depth comes from radius and glow, not surface contrast.--color-action (#5F20FE) is the brand purple. It carries interaction: links,
borders, eyebrow text, focus. Emphasis, not large fills.--color-brand-210 (#9980FF) with
black text — the primary button, and the only place black text appears.--color-brand-400 (#20EFFE) is a cyan accent for gradients and orb motifs,
not UI chrome.One family: Satoshi. Headings bold, long-form copy regular, lead paragraphs light.
The signature pattern is the eyebrow: short bold text in
--color-action, directly above a larger light lead line. Use it to open a section
rather than inventing a new heading treatment.
Only Satoshi Regular (400) ships as a real font file — light and bold are synthesized by the browser. Don't specify weights the brand can't render.
--radius-card)Small radii (2–4px) read as generic and off-brand. Section panels carry an upward
violet glow (--shadow-section) — the light source sits below the panel edge. This is
unusual; keep it, and don't replace it with a conventional drop shadow.
The production site uses GSAP with scroll-driven pinning and a Lenis smooth-scroll wrapper.
Motion is slow and continuous rather than snappy. All of it collapses under
prefers-reduced-motion: reduce, which styles.css enforces globally.
--color-brand-210; that fill takes black text.