This repository contains resources for the CODECAVE brand such as logos, logos, color palettes, fonts and other media.
| 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 |
|---|---|---|
| Primary Purple | #5F20FE | |
| Accent Purple | #9D26FF | |
| Deep Dark Gray | #212121 | |
| Medium Gray | #ABB4BD | |
| Light Gray | #CFD4DA | |
| Accent Gray | #F3F6F9 |
| Use Case | Link | Weights |
|---|---|---|
| Website | Satoshi | 400 (normal), 700 (bold) |
| Logo | Satoshi | 700 (bold) |
Only one real cut ships. The site self-hosts a single
Satoshi-Regular.ttf, declared with nofont-weightdescriptor — so the 300 and 700 weights it renders are synthesized by the browser, not real cuts. Shipping the genuine Light and Bold files (and declaringfont-weighton each@font-face) would fix that without changing the design.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. Re-setting the wordmark in Satoshi Bold and re-running build.sh would bring them in line.
Everything below is observed from the production implementation at https://codecave.gay (Astro v6.4.8 + Tailwind), read from computed styles rather than from source. It documents what the site does today — where it disagrees with the brand definitions above, the sections above are the intent and the site is the thing that needs to change.
The implementation exposes a single brand ramp as CSS custom properties on :root. Numbering runs
light to dark, with the accents parked mid-ramp.
| Token | HEX | Role observed |
|---|---|---|
--color-brand-0 | #e8e6f0 | Heading / primary text |
--color-brand-25 | #dfdde4 | — |
--color-brand-50 | #c6c4cc | Secondary body text |
--color-brand-100 | #645f70 | Muted / caption text |
--color-brand-105 | #585461 | — |
--color-brand-110 | #2e2c33 | — |
--color-brand-130 | #2a2637 | — |
--color-brand-200 | #b19afe | Gradient stop |
--color-brand-210 | #9980ff | Primary button fill |
--color-brand-300 | #8252fc | Gradient stop |
--color-brand-400 | #20effe | Cyan accent |
--color-brand-450 | #077689 | Deep cyan |
--color-brand-500 | #5f20fe | Primary purple — actions, borders, links |
--color-brand-580 | #5206e3 | — |
--color-brand-600 | #4004af | — |
--color-brand-650 | #33196e | — |
--color-brand-660 | #281470 | — |
--color-brand-670 | #1b0d4e | Text on light-purple fills |
--color-brand-700 | #1a0452 | — |
--color-brand-800 | #1e113b | — |
--color-brand-900 | #070312 | — |
--color-brand-910 | #0d0d0f | Card / panel surface |
--color-brand-920 | #141319 | Raised surface |
--color-brand-950 | #050505 | Page background |
| Error token | HEX |
|---|---|
--color-error-100 | #fe9a9a |
--color-error-200 | #fe2020 |
--color-error-300 | #b42318 |
--color-error-400 | #ca1400 |
Tailwind utilities map onto the ramp, so components reference intent rather than raw hex:
| Utility | Resolves to |
|---|---|
text-heading | --color-brand-0#e8e6f0 |
text-action, border-action | --color-brand-500#5f20fe |
text-error | --color-error-300#b42318 |
linear-gradient(to right,#5f20fe 0%,#8252fc 60%,#b19afe 75%,#e8e6f0 100%);Purple-to-white sweep used for emphasis rules and accents. A separate radial white-to-transparent
glow (#ffffff → rgba(223,212,249,.765) → rgba(153,128,255,0)) backs the orb motifs.
Dark-theme defaults; sizes in px with observed line-height.
| Size / LH | Weight | Usage |
|---|---|---|
| 56 / 72.8 | 700 | Hero headline |
| 44 / 50.6 | 700 | Section heading (h2) |
| 36 / 40 | 700 | Stat figures |
| 32 / 35.2 | 700 · 300 | Lead paragraph — 700 in #5f20fe as an eyebrow, 300 in #e8e6f0 as prose |
| 24 / 32 | 700 | Subsection heading (h3) |
| 20 / 28 | 700 · 400 | Emphasis / intro copy |
| 18 / 28 | 400 · 700 | Names, labels |
| 16 / 24 | 400 · 700 | Base body, button text |
| 14 / 20 | 400 | Captions, attributions (#645f70) |
Both variants are fully rounded pills at padding: 4px 24px, font-size: 16px.
| Variant | Fill | Text | Border |
|---|---|---|---|
| Primary | #9980ff (brand-210) | #000000 | none |
| Secondary | transparent | #e8e6f0, weight 700 | 1px solid #5f20fe |
Disabled state is the secondary treatment at opacity: .2 with cursor: not-allowed.
Cards sit on #0d0d0f (brand-910) against the #050505 page. Corner radii are unusually large
and vary by component family:
| Radius | Applied to |
|---|---|
24px | Default card — the dominant radius sitewide |
36px | Article / insight cards (padding: 24px) |
44px | Feature cards (padding: 24px 44px) |
12px, 8px, 3px | Inline chips, inputs, small elements |
| full | Buttons, pills, avatars |
Card padding is typically 32px 32px 48px — heavier at the bottom to seat a footer action.
| Property | Value |
|---|---|
| Container max-width | 1280px |
| Content column | 1265px |
| Section horizontal padding | 120px (desktop) |
| Section vertical rhythm | 200px top / 120px bottom |
Coming soon...
Put 3 types of the logo: squate, horizontal and vertical into the source folder. Edit the list of desired sizes for logos and icons in the build script file.