Skip to content
DesignMunkDesignMunk Submit a site

Understory

understory.io
More bookings, less admin—bookings and ads that grow your experiences.
Marketing Software Webflow Homepage Inter National 2 Condensed
Share Visit site
understory.io DESKTOP · 1440
Understory

AI Breakdown

Design export

# Design brief: the Understory design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/07090212/understory-io-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/07090212/understory-io-featured.webp
- On DesignMunk: https://designmunk.com/understory/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# Understory: Condensed Evergreen Headlines and Sage CTA Pills

## Overview

Understory targets experience businesses that need to sell tickets and manage operations without overhead. The UI should feel confident, outdoorsy, and practical. It leans spacious over dense, with warm neutrals and deep evergreen type for clarity. Use typographic weight and whitespace to carry hierarchy rather than effects.

## Colors

- **primary (#022c12):** Evergreen for headlines, key icons, and CTAs.
- **secondary (#7c9480):** Muted sage for supportive text, icons, and subtle fills.
- **tertiary (#f1f97e):** Citrus highlight for small indicators, arrows, and micro-accents.
- **neutral (#f6f4e8):** Warm parchment background for pages and most surfaces.
- **border (#e5e7eb):** Soft gray for dividers, inputs, and card outlines.
- **brand-aspen-mist (#d1d6cc):** Light sage tint used for chips, notices, and gentle section bands.
- **surface ({colors.neutral}):** Default surface color; same as neutral.
- **on-surface ({colors.primary}):** Default text color placed on neutral surfaces.

## Typography

- National 2 Condensed — headline-lg 85px/1 and headline-md 70px/1 at 700 weight. Purpose: big, compact headlines that carry brand voice. Availability: custom/self-hosted; agents cannot fetch it directly. Substitutes: Oswald (Google), Bebas Neue (Google), Archivo Narrow (Google).
- Ppeditorialnew — headline-sm 40px/1.25 at 400. Purpose: editorial subheads and emphatic stats with softer tone. Availability: custom/self-hosted; agents cannot fetch it. Substitutes: Playfair Display (Google), Cormorant Garamond (Google), Lora (Google).
- Inter — headline-xs 18px/1.22 and body-md 16px/1.5 at 400 with -0.015em tracking. Purpose: UI copy, navigation, FAQs, and long-form text. Availability: Google Fonts; agents can load it across weights if needed.

## Layout

Spacing is measured rather than fluid guessing: xs 6px for tight chips and inline gaps; sm 16px for internal padding; md 20px for block spacing between headings and copy; lg 40px for section rhythm and grid gutters; xl 92px for hero and section paddings. Use a fluid grid; let sections breathe with lg/xl vertical spacing and keep copy widths comfortable. Cards and screenshots sit on neutral surfaces with clear margins instead of shadows.

## Elevation & Depth

Shadows are off (none). Hierarchy is created by color contrast (primary on neutral), thin borders (#e5e7eb), tonal surfaces (brand-aspen-mist for light emphasis), and whitespace. Use borders to separate groups and rely on typographic scale for prominence.

## Shapes

Two radii define language: md 12px for interactive, touchable elements (buttons, chips, tabs) and sm 8px for containers (cards, screenshot frames). Rounded shapes should be consistent across a section to avoid mixed cues.

## Components

- Buttons
  - Primary: background {colors.primary}, text {colors.primary}, radius 12px, height 38px, padding 10px 12px. Use for strongest calls on neutral surfaces.
  - Secondary: background {colors.primary}, text #ffffff, same sizing. Use when higher contrast is required.
  - Link: text-only in {colors.primary}, radius 0.
- Card: neutral background, primary text, radius 8px, 16px padding. Use for content groups, stat blocks, or screenshot frames.

### Hero Billboard
- Background: #f6f4e8. Headline in National 2 Condensed 70–85px, color #022c12. Two CTAs aligned to the copy; include a short supporting paragraph in Inter 16px.

### Feature Assurance Chips
- Small pills listing "Start taking bookings today / Cancel anytime / Switch in under a day." Background #d1d6cc, text #022c12, radius 12px, horizontal spacing xs–sm.

### Demo App Frame
- A wide card over photography. Card: #f6f4e8 with radius 8px and 16px padding; outline using #e5e7eb. Place on a full-bleed image band.

### Impact Stats Grid
- Three items (21%, 30%, 90%). Number in headline-sm 40px; label in Inter 16–18px. Use card or neutral surface with subtle borders between items.

### Benefit Tabs
- Tabs: Inter 16px; active label in #022c12 with a tonal background (#d1d6cc) or underline. Panels hold short paragraphs and bullet points.

### Experience Type Pill Grid
- Link pills for categories (Tours, Festivals, Camps...). Border #e5e7eb, text #022c12, radius 12px, compact sm padding.

### How-It-Works Steps
- Three vertical steps with short headings and body copy. Use lg spacing between steps and md between headings and descriptions.

### FAQ Accordion
- Section divider and item borders in #e5e7eb. Questions in Inter 18px; answers in Inter 16px, no shadows, ample padding sm–md.

## Do's and Don'ts

- Do use headline-lg/md for page-level statements and keep supporting copy in Inter 16px; avoid stacking multiple display sizes in one block.
- Do reserve #f1f97e for small, directional accents (icons, arrows) rather than large fills.
- Do use radius 12px for CTAs and chips, and radius 8px for cards to maintain clear interaction cues.
- Do separate sections with lg/xl spacing and thin borders; shadows are not part of this system.
- Don't mix many greens; keep primary text and icons #022c12 and use #7c9480 only as a supportive tone.
- Don't place dense content over photography; keep the app frame on a neutral card for readability.

## Agent Prompt Guide

Quick reference — Text: #022c12. Background: #f6f4e8. Border: #e5e7eb. Accent: #f1f97e.

1) Build a hero band
- Background #f6f4e8. Set H1 in "National 2 Condensed", 700, 85px, line-height 1, color #022c12. Body copy in Inter 16px/1.5, color #022c12. Primary CTA: background #022c12, text #ffffff, radius 12px, height 38px, padding 10px 12px. Secondary CTA: link-style in #022c12. Add a small tag chip with background #d1d6cc, text #022c12, radius 12px.

2) Add a feature-assurance chip row
- Create three inline pills with background #d1d6cc, text #022c12, radius 12px, horizontal padding 16px, gap 6px. Place directly under the hero CTAs.

3) Compose an "Impact" stats grid
- Three cards on #f6f4e8 with 1px borders in #e5e7eb, radius 8px, padding 16px. Number in "Ppeditorialnew" 40px/1.25, weight 400, color #022c12. Label in Inter 16px/1.5, color #022c12.

4) Create a tabbed benefits section
- Tab labels in Inter 16px; active tab uses text color #022c12 over a #d1d6cc chip (radius 12px). Content panel sits on #f6f4e8 with a top border #e5e7eb and body text in Inter 16px.

## Similar Brands

- Eventbrite — ticketing SaaS with bold headings and proof blocks; more orange energy where Understory stays evergreen and parchment.
- FareHarbor — tours and activities booking platform; relies on ocean blues versus Understory's forest palette.
- Squarespace Scheduling (Acuity) — restrained, typographic marketing for bookings; more monochrome and minimal than Understory's outdoorsy warmth.
- Mindbody — fitness booking and management; denser UI and brighter accents compared to Understory's calmer, nature-leaning tones.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #022c12;
  --color-secondary: #7c9480;
  --color-tertiary: #f1f97e;
  --color-neutral: #f6f4e8;
  --color-border: #e5e7eb;
  --color-brand-aspen-mist: #d1d6cc;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 85px;
  --text-headline-lg-weight: 700;
  --text-headline-lg-leading: 1;
  --text-headline-md-size: 70px;
  --text-headline-md-weight: 700;
  --text-headline-md-leading: 1;
  --text-headline-sm-size: 40px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.25;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --text-body-md-tracking: -0.015em;
  --font-national-2-condensed: "National 2 Condensed";
  --font-ppeditorialnew: "Ppeditorialnew";
  --font-inter: "Inter";

  /* Rounded */
  --radius-sm: 8px;
  --radius-md: 12px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 20px;
  --spacing-lg: 40px;
  --spacing-xl: 92px;

  /* Components */
  --button-primary-background-color: var(--color-primary);
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: var(--radius-md);
  --button-primary-padding: 9.99984px 11.9998px;
  --button-primary-height: 38px;
  --button-secondary-background-color: var(--color-primary);
  --button-secondary-text-color: #ffffff;
  --button-secondary-rounded: var(--radius-md);
  --button-secondary-padding: 9.99984px 11.9998px;
  --button-secondary-height: 38px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #022c12;
  --color-secondary: #7c9480;
  --color-tertiary: #f1f97e;
  --color-neutral: #f6f4e8;
  --color-border: #e5e7eb;
  --color-brand-aspen-mist: #d1d6cc;
  --color-surface: #f6f4e8;
  --color-on-surface: #022c12;
  --font-headline-lg: "National 2 Condensed";
  --font-headline-md: "National 2 Condensed";
  --font-headline-sm: "Ppeditorialnew";
  --font-headline-xs: "Inter";
  --font-body-md: "Inter";
  --text-headline-lg: 85px;
  --text-headline-md: 70px;
  --text-headline-sm: 40px;
  --text-headline-xs: 18px;
  --text-body-md: 16px;
  --tracking-body-md: -0.015em;
  --font-weight-headline-lg: 700;
  --font-weight-headline-md: 700;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 8px;
  --radius-md: 12px;
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 20px;
  --spacing-lg: 40px;
  --spacing-xl: 92px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.008,
                    0.173,
                    0.071
                ],
                "hex": "#022c12"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.486,
                    0.58,
                    0.502
                ],
                "hex": "#7c9480"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.945,
                    0.976,
                    0.494
                ],
                "hex": "#f1f97e"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.965,
                    0.957,
                    0.91
                ],
                "hex": "#f6f4e8"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.906,
                    0.922
                ],
                "hex": "#e5e7eb"
            }
        },
        "brand-aspen-mist": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.82,
                    0.839,
                    0.8
                ],
                "hex": "#d1d6cc"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.965,
                    0.957,
                    0.91
                ],
                "hex": "#f6f4e8"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.008,
                    0.173,
                    0.071
                ],
                "hex": "#022c12"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 20,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 40,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 92,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 12,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "National 2 Condensed",
                "fontSize": {
                    "value": 85,
                    "unit": "px"
                },
                "fontWeight": 700
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "National 2 Condensed",
                "fontSize": {
                    "value": 70,
                    "unit": "px"
                },
                "fontWeight": 700
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Ppeditorialnew",
                "fontSize": {
                    "value": 40,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 16,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.015,
                    "unit": "em"
                }
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as Understory**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse Marketing →
capsulecrm.com
Capsule Productivity
Capsule
stivio.ai
Stivio AI
Stivio
slite.com
Slite AI
Slite
gogallery.online
Gogallery Creative
Gogallery