This repository contains resources for the CODECAVE brand such as logos, icons, color palettes, fonts and other media.
This repository is the source of truth for the CODECAVE brand. The design system is published at https://codecave.pro/brand/ from docs/ and documented in docs/DESIGN.md. Implementations — including https://codecave.gay — conform to it, not the reverse.
Everything published lives under docs/. Start at the front door and read down:
| What | Where | |
|---|---|---|
| 1 | The rules — foundations, the 26-step ramp, components, motion, anti-patterns, known divergences | docs/DESIGN.md |
| 2 | The tokens — every value as a CSS custom property, semantic layer over raw ramp | docs/colors_and_type.css |
| 3 | The brand kit — lockups, clear space, palette, type scale, the glow CTA | docs/brand-kit.html |
| 4 | The specimens — 12 review cards, one concern each | docs/preview/ |
| 5 | The storybook — 13 components with real prop signatures and variant matrices | docs/storybook/ |
Link one stylesheet and the whole system is live on :root — no build step, no provider, no theme
object:
<link rel="stylesheet" href="colors_and_type.css">Also in docs/: tokens/ (the same tokens as typed TS modules, for consumers that
cannot read a stylesheet), fonts/ (six real Satoshi cuts), assets/
and build/ (marks, icons and favicons), imagery/ (the decorative
line-and-glow layer), system/ (deck, email, poster and landing templates),
ui_kits/app/ (the system applied to a working interface), and
source_examples/ (the first-party source the rules were read out of).
docs/README.md is the package guide; docs/SKILL.md is the agent-facing entry point.
| Version | Preview |
|---|---|
| Inverse |  |
| Default |  |
| B/W White |  |
| B/W Black |  |
| Version | Preview |
|---|---|
| Inverse |  |
| Default |  |
| B/W White |  |
| B/W Black |  |
| Version | Preview |
|---|---|
| 256px (png) |  |
| 128px (png) |  |
| 64px (png) |  |
| 32px (png) |  |
| 16px (png) |  |
| Web Colors | Color | HEX value | Token |
|---|---|---|---|
| Brand Purple | #5F20FE |
--color-action |
|
| Purple Fill | #9980FF |
--color-glow-25 |
|
| Cyan Wash | #077689 |
--color-technology-gradient-0 |
|
| Page | #0A0A0B |
--color-surface-primary |
|
| Card | #0F0F15 |
--color-surface-secondary |
|
| Border | #2B2848 |
--color-surface-quaternary |
|
| Text | #F4F4F6 |
--color-body-primary |
|
| Muted | #9595BB |
--color-body-secondary |
The full ramps — 12 violet brand steps and 13 grays, verbatim from the site's 2026 palette
rebuild — are in docs/DESIGN.md → Colors. Two measured art literals
(#391398 and #4C4759) are imagery-only and must never be used for UI or text.
Violet is rationed: #5F20FE edges, links and marks, and never fills a large area. When a purple
field is genuinely needed the system switches to #9980FF with #1B0D4E text — the only
dark-on-light text anywhere in the brand. Bright cyan #20EFFE lives only in the decorative orb
art since the rebuild; the token layer's sole cyan is the deep technology wash above.
Superseded: this table previously listed
#9D26FF,#212121,#ABB4BD,#CFD4DAand#F3F6F9. None of those appear anywhere in the brand — they predate the current dark theme.
| Use Case | Link | Weights |
|---|---|---|
| Website | Satoshi | 300 (light), 400 (normal), 700 (bold) |
| Logo | Satoshi | 700 (bold) |
The design system ships six real cuts — Light, Regular, Italic, Medium, Bold and Black — as
woff2 with woff fallbacks in docs/fonts/, each bound with a proper
font-weight descriptor.
The live site has not caught up.
codecave.prostill self-hosts a singleSatoshi-Regular.ttfdeclared with nofont-weight, so 300 and 700 are synthesized by the browser there rather than being real cuts. Shipping the files fromdocs/fonts/fixes that without changing the design. See docs/DESIGN.md §10.3.The logo artwork predates Satoshi. The wordmarks in src/ are outlined paths drawn in Montserrat Bold, so the PNGs in logos/ are still Montserrat-shaped. This is carried forward deliberately — re-typing the wordmark without a new master would produce a mark that matches nothing in circulation.
Coming soon...
Put 3 types of the logo: square, horizontal and vertical into the source folder. Edit the list of desired sizes for logos and icons in the build script file.