CODECAVE Brand

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://brand.codecave.pro/ from docs/ and documented in docs/DESIGN.md. Implementations — including https://codecave.gay — conform to it, not the reverse.

That is the target state, and we are not there yet. docs/ began highly divergent from the shipped site, so the current phase runs the other way: the design system is converging onto the website, without giving up the brand identity in the process. While that convergence is in progress the site is the reference — where the two disagree docs/ moves, and a genuine site-side flaw is written up in WEBSITE-REVIEW.md for a human designer rather than silently "corrected" here. Once convergence is reached the direction inverts and the paragraph above governs.

Convergence is reached when codecave.pro installs @codecavepro/brand and deletes its own copy of the palette. Not when the two "look the same" — that is a judgement someone has to re-make every time anyone asks, and the answer drifted by nine files in one day the last time it was measured by hand. It is a fact you can check in the site's package.json. Getting there is CCWEB2-318; this criterion is CCWEB2-316.

Design System

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), artifacts/ (deck, email, newsletter, form, poster and landing templates), 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.

Changing any of it: CONTRIBUTING.md. Read it before your first edit. docs/ is the origin and everything else is downstream of it, but two directories under docs/ must never be hand-edited either — and nothing in this repo fails loudly when a derived copy goes stale.

Logos

Wide version

Version	Preview
Inverse
Default
B/W White
B/W Black

Tall version

Version	Preview
Inverse
Default
B/W White
B/W Black

Icons

Version	Preview
256px (png)
128px (png)
64px (png)
32px (png)
16px (png)

View more sizes

Color Palettes

Branding

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, #CFD4DA and #F3F6F9. None of those appear anywhere in the brand — they predate the current dark theme.

Fonts

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.pro still self-hosts a single Satoshi-Regular.ttf declared with no font-weight, so 300 and 700 are synthesized by the browser there rather than being real cuts. Shipping the files from docs/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.

The npm package

The same tokens install as @codecavepro/brand — the CSS and a typed module, no runtime and no components:

@import "@codecavepro/brand/css";

It authors nothing. packages/brand/ copies docs/colors_and_type.css and docs/fonts/fonts.css byte-for-byte and compiles docs/tokens/*.ts, so the file in your node_modules and the file at https://brand.codecave.pro/colors_and_type.css are provably the same bytes. docs/ stays the single origin — fixes go there, never to packages/.

• packages/brand/README.md — installing and consuming it.
• RELEASING.md — how it gets published, and how to get out of a bad publish.

Not yet published. The registry has no @codecavepro/brand as of 2026-08-21. The first publish is CCWEB2-318 phase 5 and has preconditions — see the runbook.

Other Things To Know

Coming soon...

How to Build

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.