# Refined Design System

> Deep forest greens anchored by high-contrast mint accents and expansive light-grey canvases.

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

## TL;DR
Refined utilizes a sophisticated "monochrome" system that leans heavily into a primary palette of dark forest green (#043e36) and bright mint (#4fe09b). The interface is characterized by a "pill-and-panel" geometry, where buttons and decorative containers use extreme 360px or 50px radii to soften the professional Atlassian-ecosystem context. Typography is exclusively Regola Pro, ranging from massive 96px display sizes to functional 16px body text, maintaining a consistent geometric sans-serif voice. Layouts alternate between clean white surfaces and deep green "ink" sections, using subtle #dcdcdc borders to define structure without adding visual noise.

## Signature DNA
1. **The Pill-Button Contrast** (Primary CTAs use #043e36 with white text, while secondary actions use a 2px border of the same green on transparent backgrounds, both sharing a 360px "super-ellipse" radius. Observed on all analyzed pages.)
2. **Forest & Mint Alternation** (Large section blocks alternate between light grey #f6f6f6 and deep green #043e36, often punctuated by the "Bright Green" #4fe09b for high-visibility badges or secondary surfaces. Observed on Homepage and Pricing.)
3. **Regola Pro Hierarchy** (The system relies on a single font family to carry all weight, using massive 96px display type for marquee moments and bold 700 weight for overlines and emphasis. Observed on Homepage.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--colors--refined-dark-green` | `#043e36` | Primary brand color, button backgrounds, headings, and footer canvas. | 503 | 1 | Computed Style |
| `--colors--refined-light-grey` | `#f6f6f6` | Default page background and subtle section alternating bands. | 27 | 1 | Computed Style |
| `white` | `#ffffff` | Card surfaces and text on dark backgrounds. | 208 | 0.8 | Computed Style |
| `border-grey` | `#dcdcdc` | Default hairline border for cards and dividers. | 39 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--colors--refined-bright-green` | `#4fe09b` | High-contrast accent for badges, secondary card backgrounds, and hover states. | 37 | 1 | Computed Style |
| `--colors--refined-ui-bright-green` | `#108465` | Interactive text and UI-specific green accents. | 36 | 1 | Computed Style |
| `--colors--refined-light-green` | `#ebfff5` | Soft background tint for feature panels or pricing cards. | 18 | 1 | Computed Style |
| `--colors--refined-dark-green-hover` | `#34635c` | Hover state for dark green interactive elements. | 12 | 1 | Computed Style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Regola Pro | 400, 700 | All display, heading, and body copy. | Inter (for body), Montserrat (for headings) | Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `display-mega` | 96px | 144px | normal | 400 | Marquee hero text | `div.c-marquee__text.is--display-text` |
| `display-h1` | 48px | 57.6px | normal | 400 | Page titles | `h1` |
| `heading-h2` | 38px | 45.6px | normal | 400 | Section headers | `h2` |
| `heading-h3` | 30px | 39px | normal | 400 | Sub-section headers | `h3` |
| `body-xl` | 24px | 33.6px | normal | 400 | Lead paragraphs | `div.p-xlarge` |
| `body-lg` | 20px | 28px | normal | 400 | Large body text | `p.p-large` |
| `body-md` | 16px | 24px | normal | 400 | Standard body copy | `div.navbar.w-nav` |
| `body-sm` | 14px | 21px | normal | 400 | Dropdown/UI labels | `div.navbar__dropdown-text` |
| `caption` | 12px | 18px | normal | 400 | Footer/Copyright | `div.footer__copyright` |

### Principles
1. **Geometric Clarity:** Regola Pro is used with "normal" letter spacing across all sizes, relying on size and weight (400 vs 700) for hierarchy.
2. **Bold Overlines:** Small 14px text is frequently set to weight 700 and used as an "overline" label to categorize sections.
3. **Tight Display Leading:** Large display sizes (48px) occasionally use 1.0 line-height (48px) for compact hero animations.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `space-xs` | 4px | 28 |
| `space-sm` | 12px | 35 |
| `space-md` | 16px | 47 |
| `space-lg` | 32px | 46 |
| `space-xl` | 64px | 7 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `radius-sharp` | 0px | Section containers, standard cards | 626 occurrences |
| `radius-panel` | 50px | Tab containers, specific UI panels | 38 occurrences |
| `radius-pill` | 360px | Buttons, badges, and decorative "pill" cards | 20 occurrences |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `flat` | none | Default state for most cards and sections | 17 occurrences |
| `low` | `rgba(0, 0, 0, 0.06) 0px 0px 4px 0px` | Subtle hover or floating card state | 3 occurrences |

## Components
### Tier 1: Foundational
#### Rounded Button (Primary)
**Role:** Primary site actions (Get a demo, Get started)
**Pages observed:** All
**Spec:** Background: `#043e36` / Text: `#ffffff` / Border: `2px #043e36` / Radius: `360px` / Padding: `4px 13.2px 5.2px` / Typography: `Regola Pro 18px`
**States observed:** Default | Hover: `#34635c` | Active: Captured

#### Rounded Button (Secondary/Outline)
**Role:** Secondary actions (Explore apps, See pricing)
**Pages observed:** All
**Spec:** Background: `transparent` / Text: `#043e36` / Border: `2px #043e36` / Radius: `360px` / Padding: `4px 13.2px 5.2px` / Typography: `Regola Pro 18px`
**States observed:** Default | Hover | Active: Captured

### Tier 2: Patterns
#### Navigation
**Role:** Global site header
**Pages observed:** All
**Spec:** Background: `#f6f6f6` / Text: `#043e36` / Border: `none` / Radius: `0px` / Typography: `Regola Pro 16px`
**States observed:** Default | Active: Captured

#### Feature Card (Accent)
**Role:** Highlighting specific product features
**Pages observed:** Homepage, About
**Spec:** Background: `#4fe09b` / Text: `#043e36` / Border: `2px #4fe09b` / Radius: `360px` / Padding: `4px 14.85px 5.2px` / Typography: `Regola Pro 18px`
**States observed:** Default | Active: Captured

### Tier 3: Surface-specific
#### Bordered Surface
**Role:** Content grouping and layout structure
**Pages observed:** Homepage, Pricing
**Spec:** Background: `transparent` / Border: `1px #dcdcdc` / Radius: `0px` / Padding: `24px`
**States observed:** Default | Active: Captured

#### Light Green Panel
**Role:** Soft-contrast feature background
**Pages observed:** Homepage, Pricing
**Spec:** Background: `#ebfff5` / Text: `#043e36` / Radius: `0px` / Padding: `0px`
**States observed:** Default | Active: Captured

## Layout
| Property | Value |
| :--- | :--- |
| Max Width | Not captured in source |
| Section Padding | 40px to 64px (vertical) |
| Grid Gaps | 16px, 32px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Navigation collapses to hamburger; padding reduces to 16px-32px. |
| Desktop | 1440px | Full horizontal navigation; multi-column card grids. |

## Imagery & decoration
Refined uses clean, high-fidelity product screenshots embedded within "pill" or "sharp" containers. Decorative elements include large circular "O" motifs and diagonal "/" strokes in brand green (#4fe09b) to anchor text blocks.

## Do's
- Use `#043e36` for all primary headings to maintain brand authority.
- Apply `360px` radius to all interactive buttons.
- Use `#f6f6f6` for large background areas to avoid pure white glare.
- Set overlines to `14px` weight `700` for clear section categorization.
- Use `#4fe09b` sparingly as an accent for badges or high-priority cards.

## Don'ts
- **Wrong:** Using `#4fe09b` (Bright Green) as the primary text color. **Right:** Use `#043e36`. **Reason:** Contrast and brand hierarchy.
- **Wrong:** Applying rounded corners to all section containers. **Right:** Keep sections at `0px` radius. **Reason:** The "pill" shape is reserved for components, not layouts.
- **Wrong:** Using bold weights for body copy. **Right:** Use `400` weight for long-form text. **Reason:** Regola Pro maintains better legibility at weight 400.
- **Wrong:** Mixing different font families. **Right:** Stick exclusively to Regola Pro.
- **Wrong:** Using sub-brand colors (if they existed) for parent site CTAs.

## Similar brands
- Atlassian (Ecosystem partner)
- Linear (Clean geometric sans-serif usage)
- Framer (High-contrast monochrome/accent system)

## Quick start

### CSS Custom Properties
```css
:root {
  --refined-dark-green: #043e36;
  --refined-bright-green: #4fe09b;
  --refined-light-grey: #f6f6f6;
  --refined-light-green: #ebfff5;
  --refined-border-grey: #dcdcdc;
  --font-primary: 'Regola Pro', sans-serif;
  --radius-pill: 360px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #043e36;
  --color-accent: #4fe09b;
  --color-surface: #f6f6f6;
  --font-regola: 'Regola Pro';
  --radius-pill: 360px;
}
```

## Agent prompt examples
- "Generate a primary CTA button using Refined's dark green #043e36, white text, and a 360px border radius."
- "Create a feature section with a #f6f6f6 background and a heading using Regola Pro at 38px."
- "Design a card component with a 1px #dcdcdc border and 24px internal padding."

## Known gaps
- Specific hover transition durations were not captured in the CSS variable analysis.
- Mobile-specific font scaling for the 96px display size was not explicitly declared in tokens.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://refined.com | 1440px / 390px | 2026-06-06 |
| Pricing | https://refined.com/pricing | 1440px | 2026-06-06 |
| About | https://refined.com/about | 1440px | 2026-06-06 |