# Medida Design System

> High-contrast editorial precision anchored by neon-green accents and classical serif display typography.

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

## TL;DR
Medida utilizes a striking "monochrome plus one" strategy, where a high-voltage neon green (#66ff66) punctuates an otherwise achromatic foundation of deep charcoal (#1b1b1b) and pure white (#ffffff). The system is typographically driven, pairing the high-contrast, classical serif **Rufina** for massive display headlines with the pragmatic sans-serif **Open Sans** for functional UI and body text. Layouts are characterized by sharp, 0px border radii on primary components and generous vertical spacing, creating an atmosphere that feels both technologically advanced and editorially sophisticated.

## Signature DNA
1. **The High-Voltage Accent** (#66ff66 is used as a singular chromatic signal for headlines, borders, and primary surfaces, often set against #1b1b1b for maximum contrast).
2. **Oversized Serif Display** (Rufina is deployed at extreme scales, reaching 117px for primary headers, creating a "poster-like" layout hierarchy).
3. **Sharp Geometry** (A strict 0px border radius policy applies to all buttons and primary content surfaces, reinforcing a precise, architectural feel).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.surface.dark}` | `#1b1b1b` | Primary background, footer, and text | 60 | 0.8 | computed_style |
| `{color.surface.light}` | `#ffffff` | Page background and inverse text | 51 | 0.8 | computed_style |
| `{color.text.muted}` | `#bababa` | De-emphasized body text | 3 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.primary}` | `#66ff66` | Headlines, button borders, accent surfaces | 18 | 0.8 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Rufina | 700 | Display and Headings | Playfair Display | Google Fonts |
| Open Sans | 400 | Body and UI Labels | N/A | Google Fonts |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.mega}` | 117px | 110.8px | normal | 700 | Hero Display | `h2.cl-white` |
| `{type.display.xl}` | 78px | 66.1px | normal | 700 | Section Header | `h1` |
| `{type.display.lg}` | 66px | 75.3px | normal | 700 | Sub-section Header | `h2` |
| `{type.title.md}` | 22px | 25.6px | 3.22px | 400 | Tracking-heavy labels | `p.text-md` |
| `{type.body.lg}` | 18px | 25.6px | 3px | 400 | Intro text | `p` |
| `{type.body.md}` | 16px | 25.6px | normal | 400 | Standard body | `p` |
| `{type.label.sm}` | 14px | 16.1px | normal | 400 | Navigation links | `a` |
| `{type.label.ui}` | 14px | 50px | normal | 400 | Button labels | `span` |

### Principles
1. **Extreme Display Contrast:** Headline sizes jump from 22px to 66px+, skipping mid-range sizes to create clear visual anchors.
2. **Wide Tracking for Labels:** Small caps and labels (22px and 18px) use aggressive letter-spacing (3px+) to distinguish them from running prose.
3. **Color-Coded Hierarchy:** Rufina headlines alternate between `#ffffff` and `#66ff66` based on section background to maintain legibility.

## Spacing
**Base unit:** 4px (approximate)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 13px | 3 |
| `{space.sm}` | 21px | 21 |
| `{space.md}` | 52px | 12 |
| `{space.lg}` | 112px | 6 |
| `{space.xl}` | 271px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Buttons, Cards, Sections | 99 occurrences |
| `{radius.pill}` | 50px | Cookie Banner Buttons | 3 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.glow}` | `rgba(27, 27, 27, 0.8) 0px 0px 40px 40px` | Dark section transitions | 3 occurrences |

## Components
### Tier 1: Foundational

#### Button
**Role:** Primary site actions
**Pages observed:** All
**Spec:** Background: `transparent` / Text: `#ffffff` / Border: `2px solid #66ff66` / Radius: `0px` / Padding: `0px 52px` / Type: `14px Open Sans`
**States observed:** Default: captured | Hover: not captured

#### Navigation
**Role:** Global header
**Pages observed:** All
**Spec:** Background: `#1b1b1b` / Text: `#ffffff` / Height: `custom` / Radius: `0px`
**States observed:** Default: captured

### Tier 2: Patterns

#### Cookie Banner
**Role:** Consent management
**Pages observed:** All
**Spec:** Background: `#66ff66` / Text: `#1b1b1b` / Radius: `0px` / Padding: `70px 0px`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Dark Section
**Role:** Content grouping on charcoal
**Pages observed:** All
**Spec:** Background: `#1b1b1b` / Text: `#ffffff` / Padding: `42px 0px 112px`
**States observed:** Default: captured

#### Accent Section
**Role:** High-impact brand messaging
**Pages observed:** All
**Spec:** Background: `#66ff66` / Text: `#1b1b1b` / Padding: `70px 0px 490px`
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max Width | 1440px |
| Section Padding | 112px (vertical) |
| Content Alignment | Left-aligned headlines, staggered imagery |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; headline sizes scale down; vertical padding reduces. |

## Imagery & decoration
Medida uses high-contrast black and white photography. Images are often treated with a grayscale filter to ensure they do not compete with the `#66ff66` accent color. Decorative elements include a subtle geometric cube pattern in the footer (`#1b1b1b` on `#1b1b1b` variation).

## Do's
- Use `#66ff66` for primary headlines when on a dark `#1b1b1b` background.
- Maintain a strict `0px` border radius for all UI buttons.
- Set Rufina headlines to at least `66px` for section headers.
- Apply `3px` letter-spacing to Open Sans labels at `18px` or `22px`.
- Use grayscale photography to maintain brand color integrity.

## Don'ts
- **Wrong:** Using a rounded radius on buttons. **Right:** Always use `0px`. **Reason:** Sharp geometry is a core brand identifier.
- **Wrong:** Using `#66ff66` for long-form body text. **Right:** Use `#ffffff` or `#1b1b1b`. **Reason:** Legibility and contrast concerns.
- **Wrong:** Introducing secondary accent colors (e.g., blue or orange). **Right:** Stick to the monochrome + neon green palette.

## Similar brands
- **Vercel** (Geometric, high-contrast, monochrome)
- **Spotify Design** (Bold typography, high-saturation accents)
- **Helsinki Design System** (Heavy use of grotesque/serif pairings and vibrant green)

## Quick start

```css
/* CSS Variables */
:root {
  --medida-primary: #66ff66;
  --medida-black: #1b1b1b;
  --medida-white: #ffffff;
  --medida-gray: #bababa;
  --font-display: 'Rufina', serif;
  --font-body: 'Open Sans', sans-serif;
  --radius-sharp: 0px;
}
```

## Agent prompt examples
- "Create a hero section with a `#1b1b1b` background, a `117px` Rufina headline in `#66ff66`, and a ghost button with a `2px` `#66ff66` border and `0px` radius."
- "Design a content card using a grayscale image, a `22px` Open Sans label with `3.22px` letter-spacing, and a `66px` Rufina title."
- "Generate a footer with a dark geometric pattern background, using `#ffffff` Open Sans text at `14px` for links."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the static evidence.
- Specific grid column counts were not defined in the source tokens, though a standard 12-column desktop grid is implied by layout alignment.
- Form input styles (text fields, checkboxes) were not present on the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://medida.com | 1440px | 2026-06-06 |
| Pricing | https://medida.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://medida.com | 390px | 2026-06-06 |