cfgzero · Brand Guide
Identity System · v3.0 · 2026
01 — Logo
Primary Lockup
The stacked lockup —
[0] mark (ellipse ring with center
dot) on top, wordmark below. Use this as the default logo in all contexts.
Primary · Dark BGlogo.svg
Primary · Surfacelogo-surface.svg
Light Backgroundlogo-light.svg
02 — Logomark
Standalone Mark
The
[0]
mark — ellipse ring with center dot, flanked by square brackets. Transparent background for avatars and inline
use. App icons retain the dark container.
Bare · Darklogomark-dark.svg
Bare · Lightlogomark-light.svg
App Iconicon-192.svg
Faviconfavicon.svg
03 — Social / OG Image
Open Graph Preview
1200 × 630px — used for link previews on Twitter, LinkedIn, Slack, and other platforms.
og-image.svg · 1200×630
04 — Color
Brand Palette
All colors are consistent across every asset. Never introduce off-palette colors in
brand contexts.
Brand Gradient#0096c7 → #023e8aPrimary accent · UI accents
Brand Light Blue#0096c7Main accent · primary CTA
Brand Dark Blue#023e8aSecondary accent · hover / deep bg
Brand Light Gray#ced4daBorders · light surfaces
Brand Dark Gray#6c757dMuted text · secondary labels
Brand Deep Navy#060B1FPrimary background
Navy Surface#0D1333Elevated dark UI cards
Ice White#E8ECF4Main body text (Dark Mode)
05 — Typography
Type System
Two typefaces only. JetBrains Mono for all brand/identity usage. Inter for UI body copy.
[0]
cfgzero
Enterprise
Infrastructure
What we configure.
Full network
architecture for resorts, offices, and government facilities. Structured cabling, switching, and routing
across multi-building sites.
Services
· Why cfgzero · Process
06 — Usage
Do & Don't
Protect the integrity of the mark. These rules apply to all brand touchpoints.
Do
- Use the stacked lockup (
[0]over wordmark) as the primary logo - Use
logomark.svg(bare, no box) for avatars and inline usage - Keep proportions locked — never stretch or skew
- Use app icon variants (with dark box) for app stores and PWA
- Use the dark logo on all dark/navy backgrounds
- Use
logo-dark.svgon light/white backgrounds only - Maintain minimum clear space equal to the [0] mark height on all sides
Don't
- Add brackets around the wordmark in any logo variant
- Use the boxed logomark where a bare transparent mark is specified
- Change gradient colors or bracket fill colors
- Place the logo on busy photographic backgrounds without a clear area
- Rearrange the stacked lockup — [0] mark must always be on top
- Use any typeface other than JetBrains Mono for the wordmark
- Apply drop shadows, outlines, or effects to the mark
07 — Assets
File Inventory
All files live in
static/svg/. Every default asset is
SVG.| File | Dimensions | Type | Usage |
|---|---|---|---|
| logo.svg | 200 × 110 | STACK | Primary logo — dark backgrounds, header, footer |
| logo-light.svg | 200 × 110 | STACK | Primary logo — light/white backgrounds |
| logo-dark.svg | 200 × 110 | STACK | Dark variant — alternate dark background use |
| logo-white.svg | 200 × 110 | STACK | Print, white/color overlays |
| logomark-dark.svg | 80 × 80 | Avatar, social profile, inline icon — dark bg | |
| logomark-light.svg | 80 × 80 | Avatar, inline icon — light bg | |
| og-image.svg | 1200 × 630 | STACK | Open Graph, Twitter card, link previews |
| favicon.svg | 32 × 32 | BOX | Browser tab favicon (adaptive light/dark) |
| favicon-16.svg | 16 × 16 | BOX | Small favicon fallback |
| favicon-32.svg | 32 × 32 | BOX | Standard favicon |
| icon-192.svg | 192 × 192 | BOX | PWA / Android app icon |
| icon-512.svg | 512 × 512 | BOX | PWA splash / high-res app icon |
| apple-touch-icon.svg | 192 × 192 | BOX | iOS home screen icon |
BOX Background container (required for app/browser
icons)
Transparent — mark only, no box
STACK [0] on top, wordmark below
08 — Spacing & Scale
Clear Space
Minimum clear space equals the height of the
[0] mark on all four sides. Never
crowd the mark.
min · 24px
small · 40px
medium · 64px
large · 96px+