---
version: alpha
name: Vantara
description: Conservation editorial — warm cream canvas with deep forest-green ink, earthy moss and bark accents, generous wildlife photography, and a calm institutional voice. Restrained sans-serif typography over soft-radius cards.
colors:
  # Canvas + ink
  background: "#f5f1e8"
  surface: "#ffffff"
  surface-soft: "#efe9da"
  ink: "#1f2a21"
  ink-secondary: "#4a5448"
  ink-muted: "#7a8275"

  # Brand greens
  primary: "#2f5d3a"
  forest-deep: "#16331f"
  moss: "#5a7d4f"
  sage: "#9fb593"

  # Earthy accents
  bark: "#6b5840"
  sand: "#cdbb9a"
  clay: "#a8744d"

  # Neutral scale
  cream-100: "#faf7f0"
  cream-200: "#efe9da"
  warm-300: "#ddd4c2"
  warm-400: "#bfb39c"
  warm-500: "#8c8472"

  # On-color
  on-primary: "#f5f1e8"
  on-surface: "#1f2a21"

  # Borders + lines
  border: "#ddd4c2"
  border-strong: "#bfb39c"

typography:
  display-hero:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.08
    letterSpacing: -1px
  section-heading:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.5px
  card-title:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 1.5px
  body-large:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.5px
  caption:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.2px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 140px

rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.forest-deep}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.primary}"
  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 14px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 28px
    borderColor: "{colors.border}"
  card-image:
    backgroundColor: "{colors.surface-soft}"
    rounded: "{rounded.lg}"
    padding: 0px
    borderColor: "{colors.border}"
  card-feature:
    backgroundColor: "{colors.forest-deep}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.xl}"
    padding: 40px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 20px 32px
    borderColor: "{colors.border}"
  eyebrow-label:
    textColor: "{colors.moss}"
    typography: "{typography.eyebrow}"
---

# Vantara Design System

## Overview

Vantara — meaning "Star of the Forest" — is a wildlife rescue, rehabilitation and conservation initiative, and its design language reflects that mission: warm, calm, and unmistakably grounded in the natural world. The canvas is a soft cream (`{colors.background}`) rather than clinical white, evoking aged paper, savanna light, and an editorial publication more than a corporate site. Deep forest-green ink (`{colors.ink}`) carries the text, keeping contrast high while staying tonally within the brand's earthy world.

The system reads as institutional yet compassionate. Photography of animals and landscapes does the emotional heavy lifting, so the chrome around it stays quiet: restrained sans-serif body copy, a serif display face for headlines, and generous whitespace that lets each image breathe. Color is used sparingly and purposefully — greens for action and identity, earthy bark and clay tones as supporting accents drawn from the wildlife palette itself.

Typography pairs a refined serif (Cormorant Garamond) for display and headings with a clean humanist sans (Inter) for body and UI. The serif lends the headlines a literary, conservation-journal gravity; the sans keeps reading text legible and modern. Uppercase tracked eyebrow labels in moss green introduce sections, a classic editorial move.

**Key Characteristics:**
- Warm cream canvas (`{colors.background}`) instead of white — paper-like, organic
- Deep forest-green ink (`{colors.ink}`) for high-contrast, on-brand reading text
- Serif display (Cormorant Garamond) over sans body (Inter) — editorial pairing
- Earthy supporting palette: moss, sage, bark, sand, clay
- Photography-forward layouts with quiet surrounding chrome
- Pill-shaped primary CTAs in brand green
- Uppercase tracked eyebrow labels in moss green
- Soft-radius cards on white surfaces lifted off the cream canvas

## Colors

### Primary
- **Cream Canvas** (`{colors.background}`): The page background — warm, paper-like.
- **Forest Ink** (`{colors.ink}`): Primary text and headings, deep green-black.
- **Brand Green** (`{colors.primary}`): Primary CTAs, links, active states.
- **White Surface** (`{colors.surface}`): Cards and panels lifted off the cream.

### Brand Greens
- **Forest Deep** (`{colors.forest-deep}`): Feature panels, hover states, darkest green.
- **Moss** (`{colors.moss}`): Eyebrow labels, secondary accents.
- **Sage** (`{colors.sage}`): Soft tints, decorative fills.

### Earthy Accents
- **Bark** (`{colors.bark}`): Warm brown accent for variety.
- **Sand** (`{colors.sand}`): Muted tan for tags and dividers.
- **Clay** (`{colors.clay}`): Terracotta highlight, used sparingly.

### Neutral Scale
- **Cream 100** (`{colors.cream-100}`): Lightest surface tint.
- **Cream 200** (`{colors.cream-200}`): Soft section backgrounds.
- **Warm 300** (`{colors.warm-300}`): Borders and dividers.
- **Warm 400** (`{colors.warm-400}`): Stronger borders, muted UI.
- **Warm 500** (`{colors.warm-500}`): Muted text on cream.

### Text
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting body copy.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata.

## Typography

### Font Family
- **Display / Headings**: `Cormorant Garamond`, with fallbacks `Georgia, serif`
- **Body / UI**: `Inter`, with fallbacks `Helvetica, Arial, sans-serif`

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 56px serif hero — mission statements |
| `section-heading` | 40px serif section titles |
| `card-title` | 26px serif card headings |
| `eyebrow` | Uppercase tracked section labels |
| `body-large` | Lead paragraphs, introductions |
| `body` | Standard reading text |
| `body-small` | UI text, metadata |
| `button-ui` | Buttons and links |
| `caption` | Tags, captions |

### Principles
- **Serif gravity, sans clarity**: Cormorant Garamond announces; Inter informs.
- **Tracked eyebrows**: Uppercase moss-green labels (1.5px tracking) open sections.
- **Generous line-height**: Body copy at 1.65–1.7 for a calm, readable rhythm.
- **Restraint over weight**: Serif headings sit at weight 500, never heavy bold.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large editorial jumps (`{spacing.3xl}`–`{spacing.4xl}`) for section separation.

### Grid & Container
- Max content width approximately 1200px, centered
- Hero: full-bleed photography with overlaid serif headline
- Feature sections: 2–3 column card grids
- Story sections: alternating image / text columns

### Whitespace Philosophy
- **Editorial calm**: Large vertical padding lets photography and headlines breathe.
- **Cream over white**: The warm canvas softens the whole page, reducing glare.
- **Photography-led**: Images anchor sections; text and chrome stay quiet around them.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow, on cream | Page background, text blocks |
| Surface | White card on cream | Standard cards, panels |
| Lifted | Soft shadow `0 2px 12px rgba(31,42,33,0.08)` | Feature cards, image cards |
| Feature | Forest-deep panel | Dark call-to-action / quote blocks |

**Shadow Philosophy**: Shadows are soft and tinted with the forest ink, never neutral gray. Most depth comes from the contrast between white surfaces and the cream canvas rather than heavy elevation.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed images |
| `sm` | 4px | Small inline elements |
| `md` | 8px | Inputs, small cards |
| `lg` | 16px | Standard cards, image containers |
| `xl` | 24px | Feature panels |
| `pill` | 9999px | Buttons, badges, tags |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Brand green, cream text, pill radius. The default CTA.
- **`button-secondary`** — White surface, green text, green outline, pill.

### Pills & Badges
- **`badge`** — Soft cream surface, green text, full pill.

### Cards
- **`card`** — White surface lifted off cream, soft 16px radius, warm border.
- **`card-image`** — Image container with soft radius and warm border.
- **`card-feature`** — Dark forest-deep panel, cream text, 24px radius — for quotes and major CTAs.

### Inputs
- **`input`** — White surface, warm border, 8px radius.

### Navigation
- **`nav-bar`** — Cream header, green-ink links, warm bottom border.

### Distinctive Components
- **Eyebrow Label**: Uppercase moss-green tracked label introducing each section.
- **Feature Panel**: Deep forest-green block with cream text for mission quotes.

## Do's and Don'ts

### Do
- Use the warm cream canvas (`{colors.background}`), not pure white
- Pair Cormorant Garamond headlines with Inter body
- Let photography lead; keep chrome quiet
- Use brand green for action, earthy tones as supporting accents
- Use uppercase tracked moss eyebrows to open sections
- Tint shadows with the forest ink, never neutral gray

### Don't
- Don't use heavy bold weights on serif headings — 500 is the ceiling
- Don't introduce cool blues or grays — stay in the warm earthy world
- Don't crowd photography with dense chrome
- Don't use sharp corners on cards or buttons
- Don't set primary green to the page background — keep CTAs distinct

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked, smaller hero serif |
| Tablet | 600–1024px | 2-column grids begin |
| Desktop | 1024–1280px | Full multi-column layouts |
| Large | >1280px | Centered, generous margins |

### Collapsing Strategy
- Hero serif scales 56px → ~36px on mobile, keeps tracking proportionally
- Feature cards: 3-column → 2-column → single column
- Alternating image/text rows stack to image-over-text
- Navigation collapses to hamburger menu
- Section spacing: 96px+ → ~56px on mobile

### Image Behavior
- Full-bleed hero photography maintains aspect on all sizes
- Card images keep soft radius and warm border at every breakpoint

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Brand Green `{colors.primary}`
- Background: Cream Canvas `{colors.background}`
- Heading text: Forest Ink `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Eyebrow label: Moss `{colors.moss}`
- Border: Warm `{colors.border}`

### Example Component Prompts
- "Create a hero on cream background `{colors.background}`. Full-bleed wildlife photo with overlaid serif headline at 56px Cormorant Garamond weight 500, color `{colors.ink}`. Below it, a green pill CTA (`{colors.primary}`, cream text, 14px 28px padding)."
- "Design a card: white surface `{colors.surface}` on cream, 16px radius, warm border `{colors.border}`. Serif title at 26px Cormorant Garamond. Body at 17px Inter weight 400, `{colors.ink-secondary}`."
- "Build a feature quote panel: forest-deep background `{colors.forest-deep}`, cream text `{colors.on-primary}`, 24px radius, 40px padding."
- "Add an eyebrow label: uppercase Inter 13px weight 600, 1.5px tracking, moss green `{colors.moss}`, above a serif section heading."

### Iteration Guide
1. Cream canvas first — never pure white
2. Serif headlines (Cormorant Garamond 500) over Inter body
3. Green for action, earthy bark/sand/clay as accents only
4. Pill radius on buttons and badges; 16px on cards
5. Tinted soft shadows; depth from surface-vs-cream contrast

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Vantara. Brand names and trademarks belong to their respective owners.