# DistillerSR Design System

> Deep navy foundations anchored by high-contrast sky blue actions and clinical Palanquin typography.

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

## TL;DR
DistillerSR utilizes a "monochrome-plus" system where a deep navy `#1e345d` serves as the primary structural and typographic anchor. High-voltage sky blue (`#00b5ff`, `#00acf0`) is reserved strictly for primary conversion points and interactive highlights, creating a clear functional hierarchy. The system relies on the **Palanquin** font family across all roles, using a wide weight range (300 to 800) to distinguish between editorial display and functional UI. Layouts are characterized by generous vertical padding (50px-54px) and a sharp, mostly flat aesthetic with minimal border radii (0px-5px).

## Signature DNA
1. **The Navy Anchor** (Deep navy `#1e345d` used as both a text color on white and a full-bleed section background, creating high-contrast content blocks across all analyzed pages).
2. **Clinical Weight Contrast** (The pairing of Palanquin weight 300 for large display headers with weight 600/700 for functional labels and sub-headers).
3. **Sky Blue Signal** (A strict adherence to bright blue tones like `#00b5ff` for primary buttons, ensuring the "Get Started" action is the most vibrant element on any canvas).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.navy}` | `#1e345d` | Primary text, section backgrounds, borders | 214 | 0.8 | Computed Style |
| `{color.white}` | `#ffffff` | Page background, button text, card surfaces | 257 | 1.0 | `--wp--preset--color--white` |
| `{color.off-white}` | `#f7f4f4` | Subtle section backgrounds | 22 | 0.8 | Computed Style |
| `{color.black}` | `#000000` | Deepest text shadows and presets | 12 | 1.0 | `--wp--preset--color--black` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.sky-blue}` | `#00b5ff` | Primary button backgrounds | 7 | 0.6 | Computed Style |
| `{color.bright-blue}` | `#00acf0` | Secondary button backgrounds | 7 | 0.6 | Computed Style |
| `{color.ocean-blue}` | `#00a0df` | Text accents and icons | 43 | 0.8 | Computed Style |
| `{color.gold}` | `#fdb913` | Decorative highlights (pharmaceutical labels) | 5 | 0.6 | decorative_only |
| `{color.lime}` | `#c1d42f` | Decorative highlights (medical device labels) | 3 | 0.6 | decorative_only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Palanquin | 300, 400, 500, 600, 700, 800 | All (Display, Body, UI) | Palanquin (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display-lg}` | 64px | 70.4px | normal | 600 | Hero Headlines | `h2` |
| `{type.display-md}` | 60px | 96px | normal | 300 | Editorial Headers | `h2` |
| `{type.display-sm}` | 48px | 52.8px | normal | 600 | Section Headers | `h2` |
| `{type.heading-md}` | 30px | 33px | normal | 500 | Feature Titles | `h3` |
| `{type.heading-sm}` | 24px | 38.4px | normal | 700 | Module Headers | `h2.et_pb_module_header` |
| `{type.body-lg}` | 18px | 30.6px | normal | 500 | Intro Paragraphs | `p:nth-of-type(2)` |
| `{type.body-md}` | 17px | 28.9px | normal | 500 | Default Body/Nav | `header a` |
| `{type.caption}` | 12px | 13.2px | 0.5px | 800 | Labels/Badges | `p:nth-of-type(1)` |

### Principles
1. **Weight as Hierarchy:** Use weight 300 for large-scale "light" headers and weight 700+ for small-scale "heavy" labels.
2. **Fixed Line Heights:** Most body and heading styles use explicit pixel-based line heights (e.g., 30.6px) rather than unitless multipliers.
3. **Navy Default:** All typography defaults to `#1e345d` unless sitting on a navy background, where it flips to `#ffffff`.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 5px | 26 |
| `{space.sm}` | 10px | 61 |
| `{space.md}` | 20px | 32 |
| `{space.lg}` | 25px | 30 |
| `{space.xl}` | 50px | 28 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Sections, sharp cards, primary containers | 487 occurrences |
| `{radius.sm}` | 5px | Primary buttons, feature cards | 22 occurrences |
| `{radius.md}` | 10px | Secondary buttons, specific UI controls | 7 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | none | Default section state | 0px border-width |
| Floating | `rgba(0, 0, 0, 0.3) 0px 12px 18px -6px` | Interactive cards/Customer stories | Card component |
| Soft | `rgba(0, 0, 0, 0.2) 0px 2px 18px 0px` | Image/Media containers | About page cards |

## Components

### Tier 1: Foundational

#### Rounded Button (Primary)
**Role:** Main call to action (e.g., "Get Started")
**Pages observed:** homepage, pricing, about
**Spec:** Background `{color.sky-blue}` (#00b5ff) | Text `{color.navy}` (#1e345d) | Radius 5px | Padding 10px 40px | Typography 17px/600
**States observed:** Default: Captured | Hover: Not captured

#### Surface (Navy Section)
**Role:** Full-width structural container
**Pages observed:** homepage, pricing, about
**Spec:** Background `{color.navy}` (#1e345d) | Text `{color.white}` (#ffffff) | Radius 0px | Padding 50px
**States observed:** Default: Captured

### Tier 2: Patterns

#### Feature Card
**Role:** Content grouping for capabilities or resources
**Pages observed:** homepage, pricing
**Spec:** Background `{color.white}` (#ffffff) | Border 0px | Radius 5px | Shadow `none` | Padding 21px
**States observed:** Default: Captured

#### Resource Label (Badge)
**Role:** Categorization tag
**Pages observed:** homepage, resources
**Spec:** Background `{color.gold}` (#fdb913) or `{color.lime}` (#c1d42f) | Text `{color.navy}` (#1e345d) | Radius 0px | Typography 12px/800
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Header Navigation
**Role:** Global site navigation
**Pages observed:** homepage, pricing, about
**Spec:** Background `{color.white}` (#ffffff) | Text `{color.navy}` (#1e345d) | Typography 17px/500 | Height 64px (approx)
**States observed:** Default: Captured

#### FAQ Toggle
**Role:** Accordion for information disclosure
**Pages observed:** homepage
**Spec:** Background `{color.white}` (#ffffff) | Border-bottom 1px `{color.navy}` | Typography 21px/600 | Icon: Plus/Minus
**States observed:** Default: Captured | Active: Captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px (approx) |
| Section Padding (Vertical) | 50px - 54px |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; padding reduces to 15px-20px; headers scale to 34px-48px. |
| Desktop | 1440px | Multi-column grids (3-up or 4-up); full-width navy sections. |

## Do's
- Use Palanquin weight 300 for large, airy display headers.
- Reserve `#00b5ff` strictly for primary conversion buttons.
- Use `#1e345d` for all structural borders and primary text.
- Apply 50px vertical padding to separate major content blocks.
- Ensure all labels use weight 800 and 0.5px letter spacing.

## Don'ts
- Do not use border-radius on full-width section containers.
- Do not use the accent gold (`#fdb913`) for primary buttons; it is for categorization only.
- Do not mix font families; Palanquin is the sole typeface for all brand layers.
- Avoid using shadows on standard content sections; keep the layout flat.

## Quick start

```css
:root {
  --dsr-navy: #1e345d;
  --dsr-sky-blue: #00b5ff;
  --dsr-white: #ffffff;
  --dsr-off-white: #f7f4f4;
  --dsr-gold: #fdb913;
  --dsr-font-main: 'Palanquin', sans-serif;
  --dsr-radius-sm: 5px;
  --dsr-space-xl: 50px;
}
```

## Agent prompt examples
- "Generate a hero section with a `#1e345d` background, a Palanquin weight 300 headline in `#ffffff`, and a primary button using `#00b5ff` with a 5px radius."
- "Create a content card with a white background, no border, a 5px radius, and a top category label using `#fdb913` with 12px Palanquin weight 800 text."
- "Design a pricing table using `#1e345d` for headers and Palanquin weight 600 for the currency display."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the computed style evidence.
- Specific mobile breakpoint triggers (e.g., 768px vs 1024px) were not defined in the source tokens.
- Complex form input states (error/focus) were not captured on the analyzed pages.