# Carbonodev Design System

> High-contrast monochrome architecture punctuated by a single high-voltage electric blue for primary actions.

**Source:** https://carbonodev.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Carbonodev utilizes a stark, high-contrast foundation of pure white `#ffffff` and deep charcoal `#171717` to establish a professional, engineering-focused aesthetic. The system is strictly monochrome until the primary interaction layer, where Electric Blue `#344ada` is used for critical CTAs and brand signals. Typography is anchored by **Poppins**, using heavy weights (700) and generous letter-spacing (up to 2px) for display headings to create a modern, geometric rhythm. Layouts are spacious, often utilizing 100px+ section gaps and sharp 0px borders, with the only softening occurring in the 27px pill-shaped primary buttons.

## Signature DNA
1. **The Electric Blue Pivot** (Primary CTA background `#344ada` against monochrome `#171717` or `#ffffff` backgrounds, seen on Home and About pages).
2. **Geometric Display Tracking** (Poppins 700 at 48px with a specific 2.016px letter-spacing, used for `ui-blockTitle` across all main landing sections).
3. **Sharp-Edge Containment** (Universal 0px border-radius for all layout surfaces and blocks, contrasted only by the rounded pill buttons).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--ui-light-shade-color` | `#ffffff` | Page background, primary surface, button text | 148 | 1.0 | Computed Style |
| `--ui-dark-shade-color` | `#171717` | Primary text, dark section backgrounds, headings | 49 | 1.0 | Computed Style |
| `--ui-text-color` | `#a8a8a8` | Secondary body text, subheadings, muted labels | 15 | 1.0 | Computed Style |
| `--w-page-default-background` | `#f9f9f9` | Subtle section alternating background | 1 | 1.0 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--ui-btn-primary-bg-color` | `#344ada` | Primary CTA background | 2 | 1.0 | Resolved Primary |
| `--ui-btn-primary-hover-bg-color` | `#6d8fff` | Primary button hover state (decorative_only) | 1 | 1.0 | Computed Style |
| `accent-link` | `#0000ee` | Standard text link color | 8 | 0.6 | Computed Style |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `--ui-brand-color` | `#e11f32` | Brand signal/Error (Captured in tokens, not observed in UI screenshots) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Poppins | 400, 500, 600, 700 | Heading & UI | Poppins (Google Fonts) | OFL |
| Montserrat | 400 | Secondary Body | Montserrat (Google Fonts) | OFL |
| Times New Roman | 400 | Fallback Body | N/A | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{typography.display}` | 48px | 68.016px | 2.016px | 700 | Section Titles | `h2.ui-blockTitle` |
| `{typography.heading-lg}` | 26px | 33.8px | 1.3px | 600 | Page Headers | `h2.ui-headingLg` |
| `{typography.quote}` | 20px | 26px | 1px | 500 | Emphasis/Quotes | `h1.ui-quote` |
| `{typography.subtitle}` | 18px | 36px | 0.9px | 400 | Subheadings | `p.ui-subtitle` |
| `{typography.body}` | 16px | 32px | normal | 400 | Default Body | `header.w-section` |
| `{typography.body-ui}` | 16px | 32px | 0.8px | 400 | Functional Text | `p.ui-text` |
| `{typography.button}` | 14px | 14px | 0.994px | 700 | CTA Labels | `a.w-button` |
| `{typography.nav}` | 13px | normal | 1.3px | 600 | Navigation Links | `a.w-nav__link` |

### Principles
1. **Display Tracking:** Headings must use positive letter-spacing (1px to 2px) to maintain a technical, airy feel.
2. **Weight Contrast:** Jump directly from 400 (body) to 700 (headings/buttons) to create clear hierarchy.
3. **Line Height Generosity:** Body text uses a 2.0x line-height (32px on 16px font) for maximum readability.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{spacing.xs}` | 5px | 24 |
| `{spacing.sm}` | 15px | 8 |
| `{spacing.md}` | 30px | 12 |
| `{spacing.lg}` | 50px | 3 |
| `{spacing.section}` | 100px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Layout blocks, cards, images | `div.background_2xT` |
| `{radius.pill}` | 27px | Primary and Secondary Buttons | `a.button_2W3` |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All UI elements | `shadow: none` |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary call to action
**Pages observed:** Home, About
**Spec:** Background `#344ada` / Text `#ffffff` / Border `0px` / Radius `27px` / Padding `15px 30px` / Typography `Poppins 700 14px`
**States observed:** Default: Captured | Hover: `#6d8fff` | Active: Not captured

#### Surface (Light)
**Role:** Standard content section
**Pages observed:** Home, Pricing, About
**Spec:** Background `#ffffff` / Text `#171717` / Border `0px` / Radius `0px` / Typography `Poppins 400 16px`
**States observed:** Default: Captured

#### Surface (Dark)
**Role:** Hero and Footer sections
**Pages observed:** Home, About
**Spec:** Background `#171717` / Text `#ffffff` / Border `0px` / Radius `0px` / Typography `Poppins 400 16px`
**States observed:** Default: Captured

### Tier 2: Patterns

#### Top Navigation
**Role:** Global site navigation
**Pages observed:** Home, About
**Spec:** Background `transparent` (on dark) / Text `#ffffff` / Height `auto` / Typography `Poppins 600 13px`
**States observed:** Default: Captured

#### Footer
**Role:** Global site closure
**Pages observed:** Home, About
**Spec:** Background `#171717` / Text `#a8a8a8` / Border-top `1px solid #a8a8a8` / Typography `Poppins 400 13px`

#### Section Header
**Role:** Introducing new content blocks
**Pages observed:** Home, About
**Spec:** Text `#171717` / Typography `Poppins 700 48px` / Letter-spacing `2.016px`

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Gap | 100px - 125px |
| Horizontal Gutter | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Section padding reduces to 15px |
| Desktop | 1440px | Full horizontal menu; 100px section spacing |

## Imagery & decoration
Carbonodev uses abstract, high-saturation gradients (Red-Orange, Cyan-Blue, Purple-Blue) as full-width separator bands to break the monochrome rhythm. UI elements themselves remain strictly flat with no shadows.

## Do's
- Use `#344ada` only for primary interactive elements.
- Maintain `2.016px` letter-spacing on all `48px` Poppins headings.
- Ensure section gaps are at least `100px` to maintain the "Scale" brand signal.
- Use pure white `#ffffff` for text when placed on dark `#171717` surfaces.
- Keep all container corners at a sharp `0px` radius.

## Don'ts
- **Wrong:** Using `#e11f32` (Brand Red) as a primary button background. **Right:** Use `#344ada`. **Reason:** Red is reserved for semantic signals/internal tokens, not the primary user path.
- Do not apply drop shadows to cards or surfaces; the brand is strictly flat.
- Do not use Poppins Bold (700) for body text; keep it for headings and buttons only.
- Do not reduce line-height below `1.5` for body copy.
- Do not mix rounded corners on layout blocks; only buttons may be rounded.

## Similar brands
- Vercel (Monochrome + Geometry)
- Linear (High contrast + Specific accent)
- Stripe (Typography-led hierarchy)

## Quick start

### CSS Custom Properties
```css
:root {
  --ui-primary: #344ada;
  --ui-dark: #171717;
  --ui-light: #ffffff;
  --ui-muted: #a8a8a8;
  --font-main: 'Poppins', sans-serif;
  --radius-pill: 27px;
  --spacing-section: 100px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #344ada;
  --color-surface-dark: #171717;
  --font-poppins: "Poppins";
  --letter-spacing-display: 2.016px;
  --radius-pill: 27px;
}
```

## Agent prompt examples
- "Generate a hero section with a `#171717` background, Poppins 700 text at 48px with 2px letter-spacing, and a pill-shaped button using `#344ada`."
- "Create a content grid on a `#ffffff` background using `#a8a8a8` for subheadings and sharp 0px corners for all image containers."
- "Design a footer with a dark background `#171717`, using 13px Poppins for links with 1.3px letter-spacing."

## Known gaps
- Hover states for secondary buttons were not captured in the source evidence.
- Error and Success messaging UI was not present in the analyzed pages.
- Form input field styles were not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Home | https://carbonodev.com | 1440px | 2026-06-06 |
| About | https://carbonodev.com/about | 1440px | 2026-06-06 |
| Mobile Home | https://carbonodev.com | 390px | 2026-06-06 |