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
