# offchain.design — Design System

## 1. Visual Theme & Atmosphere
offchain.design is a design agency or portfolio in the web3/crypto space, built on Framer. The design language is monochromatic and confident — near-pure white canvas, black text, with electric blue as the sole accent. The typography pairing of Geist (display) and Geist Mono (UI labels) signals developer-adjacent credibility. This is a studio that communicates through restraint: no gradients, no unnecessary decoration. The pill-shaped border-radius (`200px`) on interactive elements creates the one moment of softness in an otherwise angular system.

## 2. Color Palette & Roles
| Role | Value | Notes |
|------|-------|-------|
| Background | White / near-white | Clean canvas |
| Foreground | Black | Primary text |
| Accent | `rgb(0, 0, 238)` | Link-blue — the sole chromatic moment |

Three-color system. The blue is pure browser link-blue, used as a deliberate stylistic choice — a nod to raw web origins that's been retrofitted into a premium context.

## 3. Typography Rules
- **Display**: Geist — variable-weight sans-serif (600 at 64px for h1). Tight line-height (1.05). No letter-spacing — relies on weight for impact.
- **Mono layer**: Geist Mono — used for h2 and likely metadata/labels (16px, 400 weight). Creates a code-terminal contrast.
- Two registers: large editorial (Geist) and small functional (Geist Mono). No body-copy serif.
- The monospace register signals technical authenticity without abandoning elegance.

## 4. Component Stylings
- **Buttons/Pills**: `border-radius: 200px` — fully pill-shaped. The system's only softness.
- **Borders**: Minimal or none visible — clean edge-to-edge.
- **No shadows**: Elevation is absent. Everything sits on the same plane.
- **Interactive states**: Likely colour shifts on the blue accent.

## 5. Layout Principles
- Full-width editorial sections.
- Asymmetric text-heavy layouts typical of Framer agency sites.
- Geist Mono labels likely serve as section headers/labels in small caps or uppercase.
- Generous whitespace — content density is low.

## 6. Depth & Elevation
Completely flat. No shadows defined. Depth is conveyed through typography scale alone — the 64px Geist headline versus 16px Geist Mono creates vertical hierarchy without spatial layering.

## 7. Do's and Don'ts
**Do:**
- Keep the palette strictly monochromatic — blue for links only
- Use Geist Mono for all secondary labels, section markers, metadata
- Apply the 200px pill radius only on interactive elements

**Don't:**
- Introduce any additional accent colour
- Mix serif fonts into this system
- Add shadows or elevation — flatness is intentional

## 8. Responsive Behavior
Framer-powered with automatic responsive breakpoints. Hero type scales down from 64px. Geist Mono labels remain small (16px) across all viewports. Pill buttons maintain their shape at all sizes.

## 9. Agent Prompt Guide
> Reproduce offchain.design style: white background, black text, electric blue `rgb(0,0,238)` as sole accent. Geist 600 at large scale for headlines, Geist Mono 400 for labels and UI text. Border-radius 200px on interactive elements. Zero shadows. Completely flat, editorial layout.

*Generated by Sparkbites — extracted from live CSS analysis*