name: "codeandcore",
domain: "codeandcore.dev",
mark: "2×2 dot separator",
ref: "CAC-BRAND-2025-001"
}
The four-dot separator is borrowed directly from the languages we live in. It reads as :: — a symbol that already carries deep meaning across two disciplines every developer touches daily.
The double colon is used in CSS to select pseudo-elements — things that exist between or around other elements, bridging them. Exactly what the mark does between code and core.
In C++, :: is the scope resolution operator — it connects a namespace to its member. code is the namespace; core is what lives inside it.
Four dots arranged as a 2×2 matrix — a pixel grid, a circuit node, four cardinal points, the smallest structured dataset. Blue top = logic/code. Gold bottom = craft/core.
Twelve wordmark treatments. Click any tile to copy its SVG code. All use the 2×2 dot separator as the defining element.
Four dots alone — the favicon, app icon, avatar, embossed mark, and stamp. Eight shape treatments. Click to copy SVG.
Navy · Blue/Gold
Gold
CSS animations for digital interfaces. The dots pulse, blink, breathe, and scan. Never static. Choose one animation and use it consistently within a product.
Six curated palettes for every context. Palette 01 (Navy + Ivory) is the signature. All others extend the system for specific use cases. Hover swatches to reveal hex values.
Cormorant Garamond carries editorial authority in headlines. Jost provides clean geometric legibility in body copy. JetBrains Mono anchors the brand in its technical roots — and is the exclusive typeface for the wordmark and domain.
at scale.
export default brand;
Base-4 spacing scale. Inner padding uses space-3 to space-5; margins and section gaps use space-6 to space-9. Radius tokens keep corners consistent across components.
4px
8px
12px
16px
24px
32px
48px
64px
96px
| Token | Value | Use Case |
|---|---|---|
| --r-sm | 4px | Buttons, inputs, small chips |
| --r-md | 8px | Cards, modals, panels |
| --r-lg | 12px | Large containers, hero cards |
| --r-xl | 20px | Full-bleed featured cards |
| --r-pill | 100px | Badges, tags, pill buttons |
Production build succeeded. 6 files changed, 1 new route, 0 errors. CDN cache purged across 3 regions.
Full identity system: 6 colour palettes, 3 typefaces, complete component library, and usage guidelines.
:root {
/* Signature Palette */
--navy: #0D2340;
--blue-700: #1E4D8C;
--blue-300: #7AAAD6;
--ivory: #F9F6EF;
--gold: #B8922A;
/* Typography */
--ff-display: 'Cormorant Garamond', Georgia, serif;
--ff-body: 'Jost', sans-serif;
--ff-mono: 'JetBrains Mono', monospace;
}
| Palette | Primary | Surface | Accent | Context |
|---|---|---|---|---|
| Navy + Ivory | #0D2340 | #F9F6EF | #B8922A | Signature · All touchpoints |
| Slate + Warm White | #1E2832 | #F8F7F4 | #C0853A | Editorial · Reports |
| Forest + Cream | #1A3D2B | #FAF8F0 | #B87A2A | Community · Open Source |
| Charcoal + Gold | #1A1814 | #F7F4EC | #B8922A | Premium · Client-facing |
| Terracotta + Linen | #5C2318 | #FAF5EE | #2A6B43 | Marketing · Social |
| Midnight + Electric | #0A0D12 | #131820 | #4A9EFF | Dark mode · Dev tools |
Standard 90×54 mm. Front in navy with the dot-mark wordmark; back in ivory with oversized mark watermark. The gold rule on the front top edge and the dot-mark grid on the reverse create a striking contrast.
Kampala, Uganda · +256 xxx xxx xxx
Copy this block into your project's tokens.css to begin building with the codeandcore design system.
:root {
/* ── Signature Palette: Navy + Ivory ── */
--navy: #0D2340; --blue-800: #14305A; --blue-700: #1E4D8C;
--blue-500: #3970B8; --blue-300: #7AAAD6; --blue-100: #C8D9F0; --blue-50: #EAF0FA;
--ivory: #F9F6EF; --ivory-deep: #F0EBE0; --ivory-card: #FDFAF5;
--parch: #EDE8DC; --rule: #D5CFC3;
--ink: #1C1A16; --ink-mid: #3D3A32; --ink-soft: #6B6760;
--gold: #B8922A; --gold-lt: #D4B060; --gold-pale: #F5EDD8;
/* ── Semantic ── */
--green: #2A6B43; --green-bg: #E8F4ED;
--amber: #9A5B0A; --amber-bg: #FDF3E3;
--red: #8C2020; --red-bg: #FAEAEA;
/* ── Typography ── */
--ff-display: 'Cormorant Garamond', Georgia, serif;
--ff-body: 'Jost', sans-serif;
--ff-mono: 'JetBrains Mono', monospace;
/* ── Spacing (base-4) ── */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
--sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
/* ── Radius ── */
--r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 20px; --r-pill: 100px;
/* ── Shadows ── */
--sh-sm: 0 1px 4px rgba(28,26,22,.06);
--sh-md: 0 4px 16px rgba(28,26,22,.09);
--sh-lg: 0 12px 40px rgba(28,26,22,.12);
}
/* ── Alternate Palette Scopes ── */
.pal-slate { --p:#1E2832; --s:#F8F7F4; --a:#C0853A; }
.pal-forest { --p:#1A3D2B; --s:#FAF8F0; --a:#B87A2A; }
.pal-charcoal { --p:#1A1814; --s:#F7F4EC; --a:#B8922A; }
.pal-terra { --p:#5C2318; --s:#FAF5EE; --a:#2A6B43; }
.pal-midnight { --p:#0A0D12; --s:#131820; --a:#4A9EFF; }