Skip to content
DesignMunkDesignMunk Submit a site

Adapt

adapt.com
One agent. Full control on the full-stack AI platform.
AI Developer Tools Next.js Tailwind Homepage Geist Saans
Share Visit site
adapt.com DESKTOP · 1440
Adapt

AI Breakdown

Design export

# Design brief: the Adapt 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/08143439/adapt-com-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/08143439/adapt-com-featured.webp
- On DesignMunk: https://designmunk.com/adapt/

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

# Adapt: Triptych App–Model–Infra Cards With Operational Detail

## Overview

Adapt's UI is calm, technical, and spacious. It targets engineering-led teams who need to see real operational detail (latency, routing, logs) without visual noise. The tone is serious and product-forward, with restrained color and generous 56–120px vertical rhythm. When tokens don't prescribe, bias toward high contrast text on white, light borders, and operational clarity over decoration.

## Colors

- **primary (#1a1a1a):** Core ink for headlines, dense body text, and icons.
- **secondary (#040404):** Ultra-dark accents for high-emphasis CTAs and glyphs.
- **tertiary (#2f7d54):** Accent green for highlights, badges, and success states.
- **neutral (#ffffff):** Default page and card background.
- **border (#c4c4c4):** Hairline strokes, dividers, and input outlines.
- **brand-namara-grey (#7c7c7c):** Secondary text, timestamps, and meta labels.
- **surface ({colors.neutral} → #ffffff):** Surface backgrounds matching page canvas.
- **on-surface ({colors.primary} → #1a1a1a):** Default text on any surface.

## Typography

- Saans (custom): Used for large and medium headlines (headline-lg 64px, headline-md 48px, headline-sm 20px). As a proprietary family, agents must not fetch it directly. Use close, obtainable substitutes: Inter (Google) for neutral grotesk tone, Space Grotesk (Google) for geometric flair while keeping tight spacing, or Work Sans (Google) for similar x-height and warmth.
- Geist (Google): System body and small heading family. Freely available; safe to load. Applies to headline-xs (18px/500/1.22) and body-md (16px/500/1.5, +0.083em). The slightly increased letter-spacing in body-md keeps dense copy readable on white.
- Roles:
  - headline-lg (64/500/1.05/-0.03em): Hero statements and section intros.
  - headline-md (48/500/1.08/-0.02em): Major section headers (Customers, Layers).
  - headline-sm (20/500/1.4): Card titles and UI panel headings.
  - headline-xs (18/500/1.22, Geist): Subheads, table captions, metadata blocks.
  - body-md (16/500/1.5, Geist): Primary paragraph copy and lists.

## Layout

Spacing scale runs compact to generous: 2, 10, 20, 56, 120px. Use xs and sm inside controls, md for intra-card padding and stack gaps, lg for section spacing within a viewport, and xl to separate major narrative blocks (hero → proof, layers → framework). A standard 12-column grid with wide gutters supports the triptych card row; cards use fixed padding (24px 32px) from tokens. Keep max line length near 65–75ch for body copy.

## Elevation & Depth

Depth is conveyed through a single subtle outer shadow (sm) combining a 1px outline and soft drop (ideal for cards and floating micro-UI). Larger shadow tiers are none; hierarchy relies on whitespace, thin borders (#c4c4c4), and tone. The inner inset shadow can provide pressed or inset fields when needed.

## Shapes

Two radii define language: 8px (rounded.sm) for interactive controls and small surfaces; 12px (rounded.md) for cards and featured panels. Use square corners for textual links (button-link radius 0) to differentiate navigation from actions.

## Components

Buttons and Card (tokened):
- Button Primary: Text #1a1a1a, 40px height, 13×20px padding, 8px radius. Pair with sm shadow or a 1px border for definition on white.
- Button Secondary: Background #1f1f1f, Text #fdfdfd, 40px height, 13×20px padding, 8px radius.
- Button Link: Text #1f1f1f, square corners; use for lightweight inline actions.
- Card: Background #ffffff, Text #1f1f1f, 12px radius, 24×32px padding; apply sm shadow.

Distinctive components on this page:

### Triptych Feature Cards
- Three side-by-side panels (Apps, Models, Infra) using Card tokens (12px radius, sm shadow). Headings in 20px Saans; body in 16px Geist. Equal widths with md (20px) gaps.

### Scenario Switcher
- A compact tab control toggling Slack/GitHub/Linear/Web/Messages/Teams. Use 8px radius pills, 10–20px horizontal padding, and border #c4c4c4 for inactive states; active tab uses on-surface text.

### Router Tier Table
- A dense table listing tiers (xfast/fast/balanced/deep) with model, best-for, p50, and cost. Head row in headline-xs (18px/500); cells in body-md. Dividers use #c4c4c4.

### Infra Run Log
- Monospace-feeling list (render with Geist at 16px if no code font) showing steps and timings. Use brand-namara-grey for timings; align values right; apply inner inset for list container if needed.

### Code Scaffold Tree
- File tree for the TypeScript starter. Present in a Card with 12px radius; use 16px body with 20px line height and md spacing between groups.

### Customer Logos Rail
- A horizontally spaced logo group with light captions "Read →". Use md gaps and border separators for multi-row stacking.

### Testimonial Quote Block
- Large section header (48px), quotes in 18–20px range (use headline-xs or headline-sm), author line in brand-namara-grey. Generous lg (56px) spacing between quotes.

### Changelog List
- Stack of entries with bolded titles and date links. Use headline-xs for titles, body-md for summaries, md (20px) vertical rhythm.

## Do's and Don'ts

- Do use #1a1a1a for all primary text on #ffffff backgrounds; keep contrast high.
- Do reserve #2f7d54 for accents, small badges, or success; avoid flooding large backgrounds with the accent.
- Do space major sections with 56–120px vertical rhythm; let cards breathe.
- Don't introduce heavier shadows; only the sm compound shadow is in system.
- Don't round cards to 8px; containers take 12px while controls use 8px to signal hierarchy.
- Don't reduce body letter-spacing; body-md relies on +0.083em for clarity in dense technical copy.

## Agent Prompt Guide

Quick color reference
- Text: #1a1a1a
- Background: #ffffff
- Border: #c4c4c4
- Accent: #2f7d54

1) Build the hero
- Background #ffffff. H1 set in Saans 64px, weight 500, line-height 1.05, letter-spacing -0.03em (substitute Inter if Saans unavailable). Body copy in Geist 16px/1.5/500/0.083em. Primary CTA: 40px height, 13px 20px padding, 8px radius, text #1a1a1a on white with a 1px #c4c4c4 stroke and the sm shadow.

2) Triptych feature cards (Apps / Models / Infra)
- Use three equal-width cards: background #ffffff, text #1a1a1a, radius 12px, padding 24px 32px, sm shadow. Card titles in Saans 20px/500 (or Inter), body in Geist 16px. Gap between cards: 20px; section top/bottom padding: 56px.

3) Router tier table
- Container: card spec above. Table header in Geist 18px/500 (headline-xs). Row text in Geist 16px. Use #c4c4c4 dividers (1px). Accent tier labels with #2f7d54.

4) Testimonials section
- Section heading in Saans 48px/500/1.08/-0.02em (or Inter). Quote text in Geist 18–20px; author lines in #7c7c7c. Section padding 120px top, 120px bottom; 56px between quotes.

5) Changelog stack
- For each entry, title in Geist 18px/500, summary in Geist 16px, link styled as button-link (text #1f1f1f, radius 0). Stack items with 20px gaps; add top border #c4c4c4 to the list.

## Similar Brands

- Linear — Similar monochrome canvas and minimal color, but Linear leans into purples and denser motion; Adapt shows more operational UI (logs, tiers).
- Vercel — Shares the black/white, developer-forward voice and compact components; Vercel uses darker surfaces overall while Adapt keeps pages bright.
- Notion — Quiet typographic system and light borders; Notion is more editorial, Adapt is more runtime/infra specific.
- OpenAI Platform — Technical tables and model details overlap; OpenAI uses more blue accents and denser documentation patterns.
- Anthropic — Sparse layout and high-contrast type; Anthropic skews more text-first while Adapt uses micro-UI cards for proof.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #1a1a1a;
  --color-secondary: #040404;
  --color-tertiary: #2f7d54;
  --color-neutral: #ffffff;
  --color-border: #c4c4c4;
  --color-brand-namara-grey: #7c7c7c;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 64px;
  --text-headline-lg-weight: 500;
  --text-headline-lg-leading: 1.05;
  --text-headline-lg-tracking: -0.03em;
  --text-headline-md-size: 48px;
  --text-headline-md-weight: 500;
  --text-headline-md-leading: 1.08;
  --text-headline-md-tracking: -0.02em;
  --text-headline-sm-size: 20px;
  --text-headline-sm-weight: 500;
  --text-headline-sm-leading: 1.4;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 500;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 16px;
  --text-body-md-weight: 500;
  --text-body-md-leading: 1.5;
  --text-body-md-tracking: 0.083em;
  --font-saans: "saans";
  --font-geist: "Geist";

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

  /* Spacing */
  --spacing-xs: 2px;
  --spacing-sm: 10px;
  --spacing-md: 20px;
  --spacing-lg: 56px;
  --spacing-xl: 120px;

  /* Components */
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 13px 20px;
  --button-primary-height: 40px;
  --button-secondary-background-color: #1f1f1f;
  --button-secondary-text-color: #fdfdfd;
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 13px 20px;
  --button-secondary-height: 40px;
  --button-link-text-color: #1f1f1f;
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: #1f1f1f;
  --card-rounded: var(--radius-md);
  --card-padding: 24px 32px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #1a1a1a;
  --color-secondary: #040404;
  --color-tertiary: #2f7d54;
  --color-neutral: #ffffff;
  --color-border: #c4c4c4;
  --color-brand-namara-grey: #7c7c7c;
  --color-surface: #ffffff;
  --color-on-surface: #1a1a1a;
  --font-headline-lg: "saans";
  --font-headline-md: "saans";
  --font-headline-sm: "saans";
  --font-headline-xs: "Geist";
  --font-body-md: "Geist";
  --text-headline-lg: 64px;
  --text-headline-md: 48px;
  --text-headline-sm: 20px;
  --text-headline-xs: 18px;
  --text-body-md: 16px;
  --tracking-headline-lg: -0.03em;
  --tracking-headline-md: -0.02em;
  --tracking-body-md: 0.083em;
  --font-weight-headline-lg: 500;
  --font-weight-headline-md: 500;
  --font-weight-headline-sm: 500;
  --font-weight-headline-xs: 500;
  --font-weight-body-md: 500;
  --radius-sm: 8px;
  --radius-md: 12px;
  --spacing-xs: 2px;
  --spacing-sm: 10px;
  --spacing-md: 20px;
  --spacing-lg: 56px;
  --spacing-xl: 120px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.102,
                    0.102,
                    0.102
                ],
                "hex": "#1a1a1a"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.016,
                    0.016,
                    0.016
                ],
                "hex": "#040404"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.184,
                    0.49,
                    0.329
                ],
                "hex": "#2f7d54"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.769,
                    0.769,
                    0.769
                ],
                "hex": "#c4c4c4"
            }
        },
        "brand-namara-grey": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.486,
                    0.486,
                    0.486
                ],
                "hex": "#7c7c7c"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.102,
                    0.102,
                    0.102
                ],
                "hex": "#1a1a1a"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 2,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 10,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 20,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 56,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 120,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 12,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "saans",
                "fontSize": {
                    "value": 64,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.03,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "saans",
                "fontSize": {
                    "value": 48,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.02,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "saans",
                "fontSize": {
                    "value": 20,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Geist",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Geist",
                "fontSize": {
                    "value": 16,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": 0.083,
                    "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 Adapt**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse AI →
weaveos.com
Weave Analytics
Weave
stivio.ai
Stivio AI
Stivio
slite.com
Slite AI
Slite
clears.ai
Clears AI
Clears