Skip to content
DesignMunkDesignMunk Submit a site

TheyDo

theydo.com
The AI platform behind every customer-grounded decision
AI Software Next.js Tailwind Homepage DM Sans wulkan
Share Visit site
theydo.com DESKTOP · 1440
TheyDo

AI Breakdown

Design export

# Design brief: the TheyDo 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/14085407/theydo-com-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/14085407/theydo-com-featured-1440x900.webp
- On DesignMunk: https://designmunk.com/theydo/

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

# TheyDo: Editorial Serif Hero with One Magenta Word

## Overview

TheyDo's UI is editorial and enterprise-ready: black type on white, one bright magenta accent, and wide negative space. The personality is confident and measured rather than playful. Layouts are spacious, copy-led, and supported by soft product imagery. Use the serif for authority and the sans for clarity; avoid ornament and excess color.

## Page Structure

- Eyebrow Bar: full-width announcement strip at the very top with a short message and a right-aligned link.
- Global Navigation: left-aligned logo; centered/left menus (Platform, Solutions, Resources, Customers); right-side actions with a filled CTA and a Login link; sticky behavior acceptable.
- Hero: oversized two-tone display headline with one italic magenta word; short supporting paragraph; two side-by-side CTAs (filled first, lighter second); a faint product-UI collage sits behind the content.
- Social Proof Row: compact badges/labels near the hero headline (e.g., analyst rating and "Leader" tag) in a single line.
- Proof Stripe: small section header "The world's leading enterprises..." followed by a concise supporting subhead; optional quote card appears nearby.
- Three-Pillar Rail: consecutive blocks for Build context, Deliver intelligence, Track impact; each with a heading and brief copy; can be stacked or in a row depending on width.
- Agent Intro: sub-hero style section introducing the AI agent with headline and short explanation; may reuse quote component.
- Guided Outcomes: alternating text/image rows explaining Connect data, Prioritize roadmap, and Tie to outcomes; keep copy left and supporting visual/right on desktop.
- Use Cases Grid: a row of link cards; typically 2-up pairs with concise headings and chevron/arrow affordance; interleaved with testimonial quotes.
- "Soon" Announcement: focused block for TheyDo MCP with short body and a single primary CTA to join a waitlist.
- Customer Results + CTA: headline with three quotes, followed by a strong CTA band repeating the two buttons.
- Metrics Bar: four compact KPIs in a single row.
- Footer: slim product tagline with a request-trial link, then a dense multi-column sitemap and a final legal row.

## Colors

- Primary (#000000): Core text and headline ink; use for most typography.
- Tertiary (#e82183): Accent for emphasis such as a single italicized word, small tags, or highlights; use sparingly.
- Neutral (#ffffff): Page background and card surfaces.
- Border (#e5e7eb): Subtle dividers, input outlines, and card separators; keep at 1px for quiet structure.
- surface ({colors.neutral}): Default surface color, identical to Neutral; use for cards and panels.
- on-surface ({colors.primary}): Default text color on surfaces, identical to Primary; ensures consistent contrast.

## Typography

- Wulkan (custom/self-hosted): Display serif for headline-lg (72px/1.11/-0.03em), headline-md (50px/1.2/-0.018em), and headline-xs (24px/1.33/-0.025em). Not freely hosted by Google; if unavailable, substitute Playfair Display, Fraunces, or Spectral for a similar high-contrast editorial voice.
- DM Sans (Google): Sans-serif for headline-sm (35px/1.03/-0.003em) and body-md (17px/1.53/-0.006em). Freely available; load from Google Fonts. Use DM Sans for navigation, UI labels, and long-form copy.
- Emphasis: When highlighting a single word in headlines, apply italics plus the accent color #e82183; keep the rest black.
- Weight: Tokens specify 400 for display styles and body; reserve heavier weights sparingly for labels or small emphasis where needed.

## Layout

- Spacing scale: xs 6px, sm 16px, md 30px, lg 60px, xl 80px. Use sm for intra-component gaps, md for block padding, lg/xl for section padding.
- Rhythm: Large headlines create strong anchors; pair with md-to-lg top/bottom margins to avoid crowding.
- Grid: Content typically centers in a single column with occasional two-column rows for text/visual pairings and use-case links. Avoid guessing fixed column counts; keep cards in responsive rows.
- Containers: Cards use 16px internal padding; nav and footer can run full-bleed with content constrained centrally.

## Elevation & Depth

No drop shadows are used (all measured levels are none). Hierarchy comes from scale, weight, white space, and thin #e5e7eb borders. Secondary depth is implied through stacked white cards against a white background—contrast is handled tonally, not with effects.

## Shapes

Two radii: 5px (rounded.sm) for buttons and inputs; 8px (rounded.md) for cards and larger blocks. Keep shapes consistent—do not mix additional radii. Square edges are reserved for text links and underlined accents.

## Components

- Button — Primary: text color #131110, height 38px, 12px 15px padding, 5px radius. Use on light surfaces; when additional affordance is needed, pair with a subtle border using the Border token.
- Button — Secondary (filled): background #131110 with white text, 38px tall with 12px 15px padding and 5px radius. Use as the dominant CTA in heroes and section footers.
- Button — Link: text-only action in #000000 with no radius; place inline with copy.
- Card: white background, black text, 16px padding, 8px radius; no shadow; add a 1px #e5e7eb divider where a boundary is useful.

### Eyebrow Announcement Bar
- Full-width strip above the nav with compact DM Sans 17px text and a right-aligned link; sm (16px) vertical padding.

### Global Navigation
- Left logo, menu group, and right-side CTAs. Use DM Sans 17px for items; primary action uses the filled 38px button; maintain sm gaps between items.

### Hero Headline Stack
- Wulkan 72px headline with one italic #e82183 word; short DM Sans 17px paragraph; two buttons aligned left with a 16px gap.

### Social Proof Badges
- A compact row of small tags/badges above or just below the headline; keep typography DM Sans and gaps at xs–sm.

### Product Canvas Collage
- A soft arrangement of white cards behind the hero. Each card uses 8px corners and 16px padding with faint borders; keep opacity low so text stays dominant.

### Three-Pillar Rail
- Three sequential blocks titled Build, Deliver, Track; headline-sm (35px) with short body; stack on mobile; use lg spacing between.

### Use-Case Link Cards
- A row of clickable cards with concise headings and arrows; white background, 8px radius, 16px padding; arrange in pairs on desktop.

### Metrics Bar
- Four compact KPI tiles in one row; large numeric emphasis with short labels; keep plenty of horizontal spacing and avoid shadows.

## Do's and Don'ts

- Do reserve #e82183 for a single keyword or small UI highlights; overuse dilutes emphasis.
- Do keep buttons at 38px height and use the filled dark button for primary CTAs.
- Do rely on whitespace and the #e5e7eb border for structure; avoid adding shadows.
- Don't introduce extra radii; stick to 5px for controls and 8px for cards.
- Don't center long paragraphs; left-align body text in DM Sans 17px for readability.
- Don't add new brand colors; the palette is black, white, and one magenta accent.

## Agent Prompt Guide

Quick color reference — Text: #000000; Background: #ffffff; Border: #e5e7eb; Accent: #e82183.

1) Build the hero
- Container: center; top/bottom padding 80px.
- H1: font-family 'Wulkan', 'Playfair Display', serif; size 72px; line-height 1.11; letter-spacing -0.03em; color #000000.
- Emphasis: wrap one word in italics and color #e82183.
- Paragraph: DM Sans 17px/1.53 #000000, max-width ~640px.
- CTAs: left to right — filled button (background #131110, text #ffffff, height 38px, padding 12px 15px, radius 5px) then light button (text #131110, height 38px, padding 12px 15px, radius 5px) with a 16px gap.

2) Add social proof badges
- Row above or below H1; DM Sans 17px; small tags with 6–16px gaps; keep colors #000000 text on #ffffff with thin #e5e7eb borders if needed.

3) Three-pillar rail
- Section padding 60–80px. Create three blocks titled Build, Deliver, Track.
- Headings: DM Sans 35px/1.03; body: DM Sans 17px/1.53.
- Cards: #ffffff background, 8px radius, 16px internal padding; no shadow; thin #e5e7eb dividers optional.

4) Use-case link cards
- Two-column row of white cards (8px radius, 16px padding) each with a short heading and arrow.
- Heading: Wulkan 24px/1.33; body: DM Sans 17px.
- Maintain 30px gutters and 60px section spacing.

5) Metrics bar
- Four stat tiles in one row; numbers in Wulkan 50px; labels in DM Sans 17px; tiles on white with 8px corners, separated by 1px #e5e7eb borders.

## Similar Brands

- Qualtrics: similarly restrained enterprise palette and typography; skews more sans-serif and blue-forward compared to TheyDo's editorial serif and magenta accent.
- Contentsquare: clean white layouts with sparse color; leans more geometric and illustration-heavy than TheyDo's copy-led presentation.
- Gainsight: enterprise CX positioning with structured grids; uses a brighter, multi-color palette versus TheyDo's single-accent approach.
- Amplitude: analytics storytelling with large type and generous space; relies on gradients and color fields where TheyDo stays monochrome with a single accent.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #000000;
  --color-tertiary: #e82183;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 72px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.11;
  --text-headline-lg-tracking: -0.03em;
  --text-headline-md-size: 50px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.2;
  --text-headline-md-tracking: -0.018em;
  --text-headline-sm-size: 35px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.03;
  --text-headline-sm-tracking: -0.003em;
  --text-headline-xs-size: 24px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.33;
  --text-headline-xs-tracking: -0.025em;
  --text-body-md-size: 17px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.53;
  --text-body-md-tracking: -0.006em;
  --font-wulkan: "wulkan";
  --font-dm-sans: "DM Sans";

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

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 30px;
  --spacing-lg: 60px;
  --spacing-xl: 80px;

  /* Components */
  --button-primary-text-color: #131110;
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 12px 15px;
  --button-primary-height: 38px;
  --button-secondary-background-color: #131110;
  --button-secondary-text-color: var(--color-neutral);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 12px 15px;
  --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-md);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #000000;
  --color-tertiary: #e82183;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-surface: #ffffff;
  --color-on-surface: #000000;
  --font-headline-lg: "wulkan";
  --font-headline-md: "wulkan";
  --font-headline-sm: "DM Sans";
  --font-headline-xs: "wulkan";
  --font-body-md: "DM Sans";
  --text-headline-lg: 72px;
  --text-headline-md: 50px;
  --text-headline-sm: 35px;
  --text-headline-xs: 24px;
  --text-body-md: 17px;
  --tracking-headline-lg: -0.03em;
  --tracking-headline-md: -0.018em;
  --tracking-headline-sm: -0.003em;
  --tracking-headline-xs: -0.025em;
  --tracking-body-md: -0.006em;
  --font-weight-headline-lg: 400;
  --font-weight-headline-md: 400;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 5px;
  --radius-md: 8px;
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 30px;
  --spacing-lg: 60px;
  --spacing-xl: 80px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.91,
                    0.129,
                    0.514
                ],
                "hex": "#e82183"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.906,
                    0.922
                ],
                "hex": "#e5e7eb"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 30,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 60,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 80,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 5,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "wulkan",
                "fontSize": {
                    "value": 72,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.03,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "wulkan",
                "fontSize": {
                    "value": 50,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.018,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "DM Sans",
                "fontSize": {
                    "value": 35,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.003,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "wulkan",
                "fontSize": {
                    "value": 24,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.025,
                    "unit": "em"
                }
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "DM Sans",
                "fontSize": {
                    "value": 17,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.006,
                    "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 TheyDo**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse AI →
zaro.ai
Zaro AI
Zaro
geardex.app
GearDex Creative
GearDex
wpsubscription.co
WP Subscription Ecommerce
WP Subscription
fellow.ai
Fellow AI
Fellow