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

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