Orchard

Remix this template to create a similar design — same sections, layout, animations, colors, and typography.

Visit site

A dashboard for people operations. Soft peach-cream canvas, terracotta and green accents, Fraunces serif over DM Sans.

core colors

typefaces

tokens

agent.kombai.com/kombai-inspiration-library/templates/orchard/index.html

Palette

The system's color tokens.

surface

#FDEEE3

card-cream

#FFF9F4

terracotta

#C97B5A

terracotta-deep

#B36647

terracotta-darkest

#A85838

terracotta-light

#D9926F

sage

#6FB67A

sage-light

#86C490

sage-deep

#5AA468

mint

#CFEBD4

blue

#7AA7D9

blue-light

#9CBEE3

ink

#3A2C3A

muted

#9A7E86

muted-legend

#7A6470

hairline-peach

#F0D2BE

track-cream

#F0E3CE

track-mint

#DCEEDF

blob-halo

#FDEEE3

badge-high-bg

#C97B5A

badge-med-bg

#EFD6A8

badge-med-text

#7A5B1E

badge-low-bg

#D8EBDB

badge-low-text

#3F7A4A

badge-due-bg

#FBE7D7

badge-due-text

#B36647

badge-sched-bg

#E2EAF5

badge-sched-text

#3D6695

grad-card

LINEAR-GRADIENT(155DEG, #FFF9F4, #FAE3D3)

grad-ribbon

LINEAR-GRADIENT(120DEG, #C97B5A, #B36647 70%, #A85838)

Typography

Type tokens — family, size.

displayThe quick brown fox jumps'Fraunces', serif
36px

bodyThe quick brown fox jumps'DM Sans', sans-serif
14px

monoThe quick brown fox jumps'DM Mono', monospace
12px

labelThe quick brown fox jumps'DM Sans', sans-serif
12px

Spacing & Shape

Layout spacing tokens.

Token	Value	Preview
xs	4px
sm	8px
md	16px
lg	24px
xl	28px
xxl	40px

Border Radius

Corner rounding tokens.

Token	Value	Preview
md	18px
lg	24px
xl	28px
pill	9999px

design.md

The system as one file your coding agent can read and build from.

design.mdreadable by AI agents

tokens (raw)

name: orchard-design
version: alpha
description: >
  Orchard is a warm, editorial People Operations dashboard built on a peach
  surface (#FDEEE3) with a terracotta brand voltage (#C97B5A) and a sage-green
  positive accent (#6FB67A). The signature move is the "headcount orchard": each
  department drawn as a cluster of haloed circular blobs sized by team, rooted on
  a soft hill curve. Cards are large, deeply rounded (24px) cream-gradient panels
  carrying a soft brown-tinted drop shadow. The type story pairs a Fraunces serif
  display, a DM Sans body, and DM Mono for every number and date — giving the UI
  a calm, almanac-like feel rather than a clinical SaaS one.
colors:
  # Surface
  surface: '#FDEEE3'           # page background; also small icon-chip fills
  card-cream: '#FFF9F4'        # lightest card/list-row surface, ribbon text color
  # Brand / voltage
  terracotta: '#C97B5A'        # primary brand; chart bars, dots, icons, high badges
  terracotta-deep: '#B36647'   # darker terracotta; ribbon mid-stop, blob accents
  terracotta-darkest: '#A85838'# ribbon end stop
  terracotta-light: '#D9926F'  # lighter terracotta blob / gradient start
  # Positive accent
  sage: '#6FB67A'              # positive metrics, low-risk, eNPS bars
  sage-light: '#86C490'        # lighter sage blob / gradient start
  sage-deep: '#5AA468'         # deepest sage blob
  mint: '#CFEBD4'              # positive figures on ribbon (+38, 8.1)
  # Tertiary (ops/info)
  blue: '#7AA7D9'              # Ops & Support / offer-stage / blue blobs
  blue-light: '#9CBEE3'        # lighter blue blob
  # Text
  ink: '#3A2C3A'               # primary heading + body text (plum-brown)
  muted: '#9A7E86'             # secondary / meta text, data captions
  muted-legend: '#7A6470'      # legend + chart legend text
  # Hairlines / tints
  hairline-peach: '#F0D2BE'    # card dividers, progress-track fill
  track-cream: '#F0E3CE'       # medium-risk progress track
  track-mint: '#DCEEDF'        # low-risk progress track + Ready badge bg
  blob-halo: '#FDEEE3'         # 5–7px ring drawn around every orchard blob
  # Semantic badge fills
  badge-high-bg: '#C97B5A'     # High risk pill (terracotta)
  badge-med-bg: '#EFD6A8'      # Med risk pill
  badge-med-text: '#7A5B1E'
  badge-low-bg: '#D8EBDB'      # Low risk pill
  badge-low-text: '#3F7A4A'
  badge-due-bg: '#FBE7D7'      # Due pill bg (peach)
  badge-due-text: '#B36647'
  badge-sched-bg: '#E2EAF5'    # Scheduled pill (blue tint)
  badge-sched-text: '#3D6695'
  # Gradients
  grad-card: 'linear-gradient(155deg, #FFF9F4, #FAE3D3)'  # .card-grad panels
  grad-ribbon: 'linear-gradient(120deg, #C97B5A, #B36647 70%, #A85838)' # .ribbon-grad header
typography:
  display:
    fontFamily: "'Fraunces', serif"
    fontSize: 36px       # ribbon h1 (text-4xl); section h2 24px (text-2xl) / 20px (text-xl)
    fontWeight: 600
    lineHeight: 1.25
  body:
    fontFamily: "'DM Sans', sans-serif"
    fontSize: 14px       # default body / list rows (text-sm)
    fontWeight: 400
  mono:
    fontFamily: "'DM Mono', monospace"
    fontSize: 12px       # numbers, dates, badges (text-xs); KPI figures at 30px
    fontWeight: 500
  label:
    fontFamily: "'DM Sans', sans-serif"
    fontSize: 12px       # uppercase KPI labels
    fontWeight: 400
    letterSpacing: 0.4px
    textTransform: uppercase
rounded:
  pill: 9999px           # rounded-full: blobs, dots, badges, avatars, progress bars
  md: 18px               # inner list rows / risk rows
  lg: 24px               # standard cards
  xl: 28px               # hero ribbon
spacing:                 # base unit 4px; Tailwind scale
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 28px               # gap-7 between cards
  xxl: 40px              # px-10 page gutter
components:
  ribbon:
    background: '{colors.grad-ribbon}'
    textColor: '{colors.card-cream}'
    typography: '{typography.display}'
    rounded: '{rounded.xl}'
    padding: '28px 36px'
    shadow: soft-shadow
  card:
    background: '{colors.grad-card}'
    textColor: '{colors.ink}'
    rounded: '{rounded.lg}'
    padding: '28px 36px'
    shadow: soft-shadow
  listRow:
    backgroundColor: '{colors.card-cream}'
    textColor: '{colors.ink}'
    typography: '{typography.body}'
    rounded: '{rounded.md}'
    padding: '12px 16px'
  iconChip:
    backgroundColor: '{colors.surface}'
    rounded: '{rounded.pill}'
    size: '36px (w-9) / 40px (w-10)'
    iconColor: '{colors.terracotta}'
  badgeHigh:
    backgroundColor: '{colors.badge-high-bg}'
    textColor: '{colors.card-cream}'
    typography: '{typography.mono}'
    rounded: '{rounded.pill}'
    padding: '2px 8px'
  badgeLow:
    backgroundColor: '{colors.badge-low-bg}'
    textColor: '{colors.badge-low-text}'
    typography: '{typography.mono}'
    rounded: '{rounded.pill}'
    padding: '2px 8px'
  progressBar:
    trackColor: '{colors.hairline-peach}'
    fillColor: '{colors.terracotta}'
    rounded: '{rounded.pill}'
    height: '10px (h-2.5) / 28px (h-7)'
  orchardBlob:
    backgroundColor: '{colors.terracotta}'
    rounded: '{rounded.pill}'
    halo: '0 0 0 5–7px {colors.blob-halo}'
motion:
  reveal: 'anime.js — opacity 0→1, translateY 22→0, 750ms outCubic, stagger 120ms on .reveal'
  blobBreathe: 'anime.js — .dept-cluster scale 1→1.02, 4000ms inOutSine, alternate loop, stagger 380ms'
  riskPulse: 'anime.js — .risk-high scale 1→1.03, 2600ms inOutSine, alternate loop, stagger 500ms'
icons:
  library: inline SVG (custom 24x24)
  style: outline
  stroke: 1.7px
  sizes: { sm: 19px, md: 20px, lg: 22px }
  color: '{colors.terracotta}'

Orchard

orchard-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

Orchard is a People Operations dashboard with the warmth of an almanac rather than the chill of a SaaS console. The whole page sits on a peach surface (#FDEEE3) with deep plum-brown ink (#3A2C3A) for text. A single terracotta voltage (#C97B5A) carries the brand — chart bars, icon strokes, legend dots, high-risk pills — balanced by a sage-green positive accent (#6FB67A) for good news and low risk, plus a quiet blue (#7AA7D9) for ops/info. The hero is a terracotta gradient "ribbon" (linear-gradient(120deg, #C97B5A, #B36647 70%, #A85838)) holding a greeting and five mono KPIs separated by faint vertical rules. Below it the signature move: the headcount orchard, where each department is a cluster of two-to-three overlapping circular blobs — sized by team, ringed by a 5–7px peach halo, and rooted on a soft hill curve drawn in SVG. Every panel is a deeply rounded (24px) cream-gradient card carrying one soft brown-tinted shadow. The type story is the personality: Fraunces serif for display, DM Sans for body, and DM Mono for every figure and date.

Colors

Surface. The page is surface #FDEEE3 (peach). Cards use the grad-card linear-gradient(155deg, #FFF9F4, #FAE3D3); the lightest fill card-cream #FFF9F4 is used for inner list rows, low-risk risk-rows, and as the ribbon's text color. Small round icon chips are filled with the page surface.

Brand / voltage. terracotta #C97B5A is the primary — icon strokes, the first chart dataset, legend dots, high-risk badges, the Applied funnel bar, and the larger orchard blobs. It deepens through terracotta-deep #B36647 and terracotta-darkest #A85838 (ribbon gradient stops, blob accents) and lightens to terracotta-light #D9926F for gradient starts and smaller blobs.

Positive accent. sage #6FB67A marks good news — low-risk bars, the eNPS chart dataset, the offer-accept rate — with sage-light #86C490 and sage-deep #5AA468 as blob variants. On the dark ribbon, positive figures use mint #CFEBD4.

Tertiary. blue #7AA7D9 (and blue-light #9CBEE3) cover Ops & Support blobs, the Offer funnel stage, and Scheduled badges.

Text. ink #3A2C3A is heading + body. muted #9A7E86 is the workhorse secondary/meta color (subtitles, data captions). muted-legend #7A6470 is used for the orchard legend and chart legend.

Hairlines & tints. hairline-peach #F0D2BE draws card dividers and progress tracks; track-cream #F0E3CE and track-mint #DCEEDF are the medium- and low-risk progress tracks. blob-halo #FDEEE3 is the ring around every orchard blob.

Semantic badges. High #C97B5A on cream; Med #EFD6A8/#7A5B1E; Low #D8EBDB/#3F7A4A; Due #FBE7D7/#B36647; Scheduled #E2EAF5/#3D6695; Ready reuses Low's mint/green.

Typography

Three Google Fonts, all imported in the inline <style>: Fraunces (opsz 9–144, weights 400–700) for display, DM Sans (400–700) for body, and DM Mono (400–500) for numerals. Fraunces is the editorial signature — used on all headings via .font-display. DM Mono carries every KPI figure, date, percentage, and badge number, which gives the dashboard its tabular, ledger-like read. Closest open substitutes are already open-source (all three are SIL OFL).

Token	Size	Weight	Line-height	Tracking	Usage
display	36 / 24 / 20px	600	~1.25 (tight)	0	Greeting h1 (text-4xl), section h2s (text-2xl/xl), dept names
body	14px (text-sm)	400–600	normal	0	Subtitles, list-row names, button-like text
mono	12 / 30px	500	normal	0	KPI figures (text-3xl), dates, %, badge values
label	12px (text-xs)	400	normal	wide (uppercase)	Uppercase KPI labels on ribbon

Layout

Base unit 4px on the Tailwind scale. The page is a single centered column, max-w-[1440px], with px-10 py-8 gutters. Vertical rhythm between major blocks is mt-7 (28px). Structure top to bottom: (1) full-width terracotta ribbon hero with greeting + 5 KPIs; (2) full-width headcount orchard panel — an overflow-x-auto strip with a min-w-[900px], 300px-tall SVG hill and eight department clusters spaced via justify-between; (3) a grid-cols-12 gap-7 row splitting into Attrition risk (col-span-5), Open reqs funnel (col-span-3), and Engagement pulse chart (col-span-4); (4) a full-width Upcoming reviews panel with a responsive 1/2/3-column grid of avatar rows. Whitespace is generous and the composition is calm and horizontal.

Elevation & Depth

One shadow language: .soft-shadow = box-shadow: 0 18px 40px -22px rgba(58,44,58,0.28) — a soft, long, brown-plum-tinted drop applied to the ribbon and every card. Depth inside the orchard comes not from shadows but from the box-shadow: 0 0 0 5–7px #FDEEE3 peach halo rings drawn around each blob and avatar (a flat ring, not a glow), which let overlapping circles read as separate. No glass/backdrop-blur; the look is matte and paper-like.

Shapes

Soft and rounded throughout. Cards are rounded-[24px], the hero ribbon is a larger rounded-[28px], inner list/risk rows are rounded-[18px]. Everything circular — orchard blobs, legend dots, KPI/icon chips, avatars, badges, and all progress bars — uses rounded-full (9999px). Nothing in the system is square or sharp; the orchard blob is the defining round form.

Components

Ribbon (hero) — .ribbon-grad terracotta gradient fill, rounded-[28px], soft-shadow, px-9 py-7, cream text; holds a circular glyph chip, Fraunces greeting, mono date, and 5 KPI columns split by 1px rgba(255,249,244,0.22) rules. Label "Good morning, Priya".
Card — .card-grad cream gradient, rounded-[24px], soft-shadow, ~px-8/9 py-7; header = icon chip + Fraunces h2 + muted subtitle.
Icon chip — w-9 h-9 (or w-10 h-10) rounded-full, fill #FDEEE3, centered 19–22px outline SVG with #C97B5A stroke.
Risk row — rounded-[18px] px-5 py-3.5; high-risk rows fill #FBE7D7, others fill #FFF9F4; carries a name, a status pill, and a h-2.5 rounded-full progress bar with a gradient fill (terracotta / amber / sage).
Status badge — rounded-full mono text-xs, px-2 py-0.5; color-coded High/Med/Low/Due/Ready/Scheduled (see Colors). Label e.g. "High · 18%".
Funnel bar — h-7 rounded-full solid bar (terracotta → sage → blue by stage) with a label + mono count above; divider border-top:1px solid #F0D2BE.
Orchard cluster — .dept-cluster flex column: 2–3 absolutely-positioned rounded-full blobs (per-department palette) each with a peach halo, then a Fraunces dept name and mono headcount.
Avatar review row — rounded-[18px] #FFF9F4 row: w-12 h-12 rounded-full pravatar image with a 3px peach ring, name/role, mono date, status pill.
Chart — Chart.js grouped bar: terracotta #C97B5A + sage #6FB67A datasets, borderRadius:10, barThickness:18, grid #F0D9C8/#F0D9C8, mono tick labels in #9A7E86.

Motion

All entrance and ambient motion is anime.js v4 (ESM from esm.sh). On load, .reveal elements fade and rise (opacity 0→1, translateY 22→0, 750ms outCubic, stagger 120ms). Ambient loops then run forever: .dept-cluster blobs "breathe" (scale 1→1.02, 4000ms inOutSine, alternating, staggered 380ms) and .risk-high rows gently pulse (scale 1→1.03, 2600ms inOutSine, alternating, staggered 500ms). No hover transitions are authored in CSS; the hover-to-focus hint in the orchard header copy is aspirational, not implemented.

Iconography

Custom inline outline SVGs on a 24x24 viewBox, stroke-width 1.7, round caps and joins, no fills. Rendered at 19px (most card chips), 20px (ribbon), and 22px (orchard header). UI color is always #C97B5A (terracotta) on a #FDEEE3 chip, except the ribbon's person glyph which is cream on translucent white. Icons are purely decorative section markers; legend dots and orchard blobs are plain divs, not icons.

Do's and Don'ts

Do keep terracotta as the single brand voltage and sage as the only positive accent; reserve blue for ops/info and scheduled states.
Do set every number, date, and percentage in DM Mono and every heading in Fraunces — the serif + mono contrast is the brand.
Do ring every overlapping circle (blob, avatar) with a peach halo so it reads as separate.
Do keep the one soft brown shadow; depth is paper-like, not glassy.
Don't introduce sharp corners — the system is fully rounded, blob-led.
Don't add hard/colored drop shadows or glows; halos do the separating.
Don't put body copy in mono or numbers in DM Sans.
Don't let accent colors compete; one chart series is terracotta, one is sage, and that pairing repeats everywhere.

Known Gaps

The grad-card second stop is #FAE3D3 (only the start #FFF9F4 appears elsewhere as a flat fill); both are read directly from the .card-grad rule.
Heading sizes vary (text-4xl/2xl/xl) under one display token; the table lists the range. Fraunces line-height is the Tailwind leading-tight (~1.25), read from the class rather than an explicit value.
The "hover a cluster to focus" interaction named in the orchard subtitle is not implemented in CSS/JS; only the ambient breathing loop exists.
KPI uppercase label tracking is Tailwind tracking-wide (~0.4px), approximated.