# outerbloc.com — Design System

## 1. Visual Theme & Atmosphere
Outerbloc is a creative agency site built on Framer that pairs two distinct typographic personalities: Saans Regular (a geometric sans) for functional UI text and Reckless Standard (an editorial serif/display hybrid) for expressive headings. The colour system is nearly monochromatic — dark brown-black canvas, white text — with a single vivid sky-blue accent (`rgb(18, 145, 210)`). The result is a studio aesthetic that feels both considered and spacious: serious craft, visible confidence, zero decoration for its own sake.

## 2. Color Palette & Roles
| Role | Value | Notes |
|------|-------|-------|
| Base | `rgb(28, 26, 22)` | Warm near-black (slight brown cast) |
| Foreground | `rgb(255, 255, 255)` | Primary text on dark |
| Accent | `rgb(18, 145, 210)` | Electric blue — CTAs, highlights |

The warm near-black (`#1c1a16`) is a key distinction from generic dark UIs — it reads as material and grounded, not digital. The blue accent pops sharply against this warm dark.

## 3. Typography Rules
- **Functional UI**: Saans Regular — 380 weight (notably sub-400), 15px, -0.15px tracking. Extremely restrained and precise. Used for navigation, body, labels.
- **Editorial/Display**: Reckless Standard M Regular — likely 28–60px+ for section titles and hero text. A wedge-serif or slab-adjacent display face.
- Weight contrast is extreme: 380 (near-thin) for body, display-weight for headlines. This creates dramatic typographic hierarchy.
- No monospace. No italic-heavy moments. Clean, directional type.

## 4. Component Stylings
- **Border-radius**: 160px — very large pill. Buttons and chips are maximally rounded.
- **Shadows**: None — flat.
- **Surface**: Dark throughout. No light-mode sections detected.
- Framer components with hover-state colour shifts on the blue accent.

## 5. Layout Principles
- Full-bleed dark sections.
- Agency-style split layouts: large type on one side, media or context on the other.
- Generous whitespace matching the sub-400 font weight aesthetic.
- Framer auto-layout grid structure.

## 6. Depth & Elevation
Completely flat. Depth is created by the warm near-black base and the single blue accent creating foreground/background tension. No shadow values in the system.

## 7. Do's and Don'ts
**Do:**
- Use Saans Regular at exactly 380 weight — sub-400 is intentional
- Apply Reckless Standard at headline scale only (28px+)
- Use 160px pill radius on all interactive chip-style elements

**Don't:**
- Lighten the background to a neutral grey — the warm brown-black is specific
- Add more than one accent colour
- Use Saans Regular above 500 weight

## 8. Responsive Behavior
Framer manages responsive breakpoints. Reckless Standard headlines scale down for mobile. Saans Regular body text at 15px is already close to minimum — do not reduce further.

## 9. Agent Prompt Guide
> Reproduce outerbloc.com style: warm near-black `rgb(28,26,22)` base, white text, Saans Regular 380-weight at 15px for body/UI, Reckless Standard for display headlines. Sky-blue accent `rgb(18,145,210)`. Pill radius 160px. Flat, no shadows. Agency editorial layout.

*Generated by Sparkbites — extracted from live CSS analysis*