# vellum.ai Design System

> High-contrast forest greens and stone neutrals meet high-waisted serif display type on a clean white canvas.

**Source:** [https://vellum.ai](https://vellum.ai) | **Captured:** 2026-06-17 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Vellum.ai utilizes a "Forest and Stone" palette, anchoring deep greens (#2e8b3c, #216c37) against a foundation of pure white (#ffffff) and varied stone grays (#171717, #57534e). The typography is a sophisticated pairing of **Instrument Serif** for large, high-contrast display headings and **DM Sans** for utilitarian body and UI text. Visual depth is achieved through subtle inset shadows and 1px borders rather than heavy elevation. The system feels academic yet modern, using generous whitespace and structured grids to organize complex AI tooling information.

## Signature DNA
1. **Instrument Serif Display** (High-contrast serif headings at 51px with tight -1.024px tracking, seen on Homepage and Pricing heroes).
2. **Forest Green Accents** (The use of #2e8b3c for primary CTAs and semantic success indicators across all analyzed pages).
3. **Inset Depth** (A specific shadow pattern using `rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset` to create "pressed" or "contained" card surfaces).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--color-white` | `#ffffff` | Page background, card surface, button text | 130 | 1.0 | Computed Style |
| `--color-black` | `#000000` | Primary text, footer backgrounds | 88 | 1.0 | Computed Style |
| `--color-stone-900` | `#171717` | Primary body text, dark button backgrounds | 57 | 0.8 | Computed Style |
| `--color-moss-700` | `#24292e` | Secondary text, dark surfaces | 2 | 1.0 | CSS Variable |
| `--color-stone-200` | `#e9e6e2` | Default borders and dividers | 1 | 1.0 | CSS Variable |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--color-forest-600` | `#2e8b3c` | Primary brand color, success icons, links | 17 | 0.8 | Computed Style |
| `--color-forest-700` | `#216c37` | Primary button background (hover/active) | 3 | 0.6 | Computed Style |
| `--color-forest-400` | `#6ecf87` | Pricing tier highlights, secondary accents | 8 | 1.0 | CSS Variable |
| `--color-moss-400` | `#71808e` | Decorative icons, muted text | 1 | 1.0 | Decorative Only |

### Semantic
| Token | Hex | Role |
| :--- | :--- | :--- |
| `--color-forest-600` | `#2e8b3c` | Success / Positive state |
| `--color-danger-600` | `#e86b40` | Error / Alert state |
| `--color-amber-500` | `#f5c94e` | Warning state |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Instrument Serif | 400 | Display, Headings | Instrument Serif (Google Fonts) | OFL |
| DM Sans | 300, 400, 500, 600, 700 | Body, UI, Buttons, Labels | DM Sans (Google Fonts) | OFL |
| Inter | 500 | UI Labels | Inter (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `display-mega` | 144px | 144px | normal | 600 | 404 Page | `span.not-found-four` |
| `display-h1` | 51px | 66.56px | -1.024px | 400 | Section Titles | `h2.bfg-section-title` |
| `heading-sm` | 24px | 24px | normal | 300 | FAQ Icons | `span.product-faq-plus` |
| `body-lg` | 18px | 25.984px | normal | 500 | FAQ Questions | `p.product-faq-question` |
| `body-md` | 16px | 24px | normal | 400 | Default Body | `header.blog-new-header` |
| `body-sm-bold` | 15px | 19.76px | normal | 600 | Card Titles | `h3.bfg-title` |
| `label-caps` | 13px | 19.2px | 0.768px | 700 | Table Headers | `th.cps-highlight` |
| `caption` | 12px | 18px | normal | 400 | Muted Metadata | `span.lkg-desc` |

### Principles
1. **Serif for Narrative:** Instrument Serif is reserved for "storytelling" moments—hero headers and section titles.
2. **Sans for Utility:** DM Sans handles all interactive elements, data tables, and long-form descriptions.
3. **Tight Display Tracking:** Large serif headings use negative letter-spacing (-1px range) to maintain visual tension.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `--space-1` | 4px | 5 |
| `--space-3` | 12px | 9 |
| `--space-4` | 16px | 24 |
| `--space-5` | 20px | 13 |
| `--space-10` | 40px | 4 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `--radius-none` | 0px | Tables, specific sections | `td.cps-col-vellum` |
| `--radius-sm` | 8px | Small UI controls | `select.pricing-select` |
| `--radius-md` | 14px | Feature Cards | `div.card` (observed) |
| `--radius-lg` | 16px | Pricing Cards | `div.pricing-card` |
| `--radius-full` | 100px | Pill Buttons | `button.wuh-mobile-cta` |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| Inset Low | `rgba(0, 0, 0, 0.08) 0px 1px 2px 0px inset` | Secondary Cards | Pricing machine specs |
| Inset Med | `rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset` | Primary Cards | Homepage feature cards |
| Floating | `rgba(0, 0, 0, 0.3) 0px 4px 16px 0px` | Modals/Popovers | Observed on hover states |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (Get Started)
**Pages observed:** [https://vellum.ai](https://vellum.ai), [https://vellum.ai/pricing](https://vellum.ai/pricing)
**Spec:** Background: #2e8b3c | Text: #ffffff | Radius: 100px | Padding: 12px 24px | Font: DM Sans 600
**States observed:** Default | Hover: #216c37 | Focus: Captured | Active: Captured | Disabled: Not captured

#### Ghost Button
**Role:** Secondary actions (Documentation, GitHub)
**Pages observed:** [https://vellum.ai](https://vellum.ai)
**Spec:** Background: transparent | Text: #171717 | Border: 1px #e9e6e2 | Radius: 100px
**States observed:** Default | Hover: #f6f5f4 | Active: Captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying product capabilities
**Pages observed:** [https://vellum.ai](https://vellum.ai)
**Spec:** Background: rgba(255, 255, 255, 0.5) | Border: 1px rgba(0, 0, 0, 0.1) | Radius: 14px | Shadow: Inset Med
**States observed:** Default | Hover: Shadow increase

#### Comparison Table
**Role:** Competitor feature mapping
**Pages observed:** [https://vellum.ai](https://vellum.ai)
**Spec:** Background: #ffffff | Text: #171717 | Border: 1px #e9e6e2 | Radius: 0px
**States observed:** Default

### Tier 3: Surface-specific

#### Pricing Tier Card
**Role:** Plan selection
**Pages observed:** [https://vellum.ai/pricing](https://vellum.ai/pricing)
**Spec:** Background: #ffffff | Border: 1px #e9e6e2 | Radius: 16px | Padding: 24px
**States observed:** Default | Active (Selected): Border #2e8b3c

#### FAQ Accordion
**Role:** Information disclosure
**Pages observed:** [https://vellum.ai/pricing](https://vellum.ai/pricing)
**Spec:** Text: #171717 | Border-bottom: 1px #e9e6e2 | Font: DM Sans 500 (18px)
**States observed:** Default | Expanded

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | 1280px |
| Section Gaps | 80px - 120px |
| Column Grid | 12-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | < 768px | Stacked cards, 100% width buttons, hidden desktop nav |
| Desktop | 1440px | Multi-column grids, fixed top navigation |

## Imagery & decoration
Vellum uses playful, organic "blob" characters with expressive eyes to anthropomorphize AI agents. These are paired with technical screenshots of the Vellum platform. It avoids generic stock photography in favor of high-fidelity UI previews and custom vector illustrations.

## Do's
- Use **Instrument Serif** for all H1 and H2 headings.
- Apply the **Inset Med shadow** to cards on white backgrounds to create depth.
- Use **#2e8b3c** for all primary success states and primary buttons.
- Maintain a minimum of **80px** vertical spacing between major sections.
- Use **DM Sans** for all tabular data and code-adjacent labels.

## Don'ts
- **Don't** use #2e8b3c for body text; reserve it for interactive or semantic elements.
- **Don't** use serif fonts for buttons or navigation items.
- **Don't** mix sub-brand colors (like the Forest-400 #6ecf87) as the primary CTA color; always use Forest-600 #2e8b3c.
- **Don't** use rounded corners on data tables; keep them sharp (0px).
- **Don't** use pure black (#000000) for long-form body text; use Stone-900 (#171717).

## Similar brands
- **Linear** (High-contrast UI, technical precision)
- **Vercel** (Clean typography, monochromatic foundation with sharp accents)
- **Notion** (Iconography-heavy, structured layout)

## Quick start

```css
/* CSS Variables */
:root {
  --color-forest-600: #2e8b3c;
  --color-stone-900: #171717;
  --color-stone-200: #e9e6e2;
  --font-display: 'Instrument Serif', serif;
  --font-sans: 'DM Sans', sans-serif;
  --shadow-inset: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
}
```

## Agent prompt examples
- "Create a feature card using Vellum's 14px border radius, an inset shadow of `rgba(0,0,0,0.06) 0px 2px 4px 0px inset`, and a heading in Instrument Serif 24px."
- "Design a primary button using Forest Green #2e8b3c, 100px border radius, and DM Sans Bold 15px text."
- "Generate a pricing table row with 1px #e9e6e2 borders and DM Sans 14px text."

## Known gaps
- Hover states for mobile navigation were not fully captured.
- Dark mode variables were not present in the analyzed source pages.
- Specific animation timing functions for accordion transitions were not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | [https://vellum.ai](https://vellum.ai) | 1440px | 2026-06-17 |
| Pricing | [https://vellum.ai/pricing](https://vellum.ai/pricing) | 1440px | 2026-06-17 |
| Mobile Home | [https://vellum.ai](https://vellum.ai) | 390px | 2026-06-17 |