Skip to content
DesignMunkDesignMunk Submit a site

Overmind

overmindlab.ai
The AI engineering copilot for agent optimisation and model training.
AI Developer Tools Next.js Tailwind Homepage Geist Pixel Square mondwest
Share Visit site
overmindlab.ai DESKTOP · 1440
Overmind

AI Breakdown

Design export

# Design brief: the Overmind 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/09164614/overmindlab-ai-featured.png
- Above the fold: https://cdn.designmunk.com/2026/09/09164614/overmindlab-ai-featured.png
- On DesignMunk: https://designmunk.com/overmind/

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

# Overmind: Pixel Noir UI with CRT-Lit Hero

## Overview

Overmind is built for AI and engineering teams, with a deliberate retro-compute personality: white on near-black, pixel textures, and minimal accent colour. The tone is serious, technical, and confident. Layouts are dense but ordered; whitespace and thin rules keep long sections scannable. When tokens don't dictate a choice, prefer clarity over spectacle: white text on #0a0a0a, restrained orange highlights, and straightforward grids.

## Colors

- **primary (#ffffff):** Core text and primary elements on dark surfaces.
- **secondary (#f4a368):** Accent for actions, highlights, and important deltas; use sparingly.
- **tertiary (#1447e6):** Link blue and secondary accents in long-form content.
- **neutral (#0a0a0a):** Global background and card surfaces in dark mode.
- **border (#374151):** Subtle rules, dividers, and input outlines on dark backgrounds.
- **brand-gryphonne-sepia-wash (#823a0a):** Warm sepia accent for retro moments and illustrations.
- **brand-dusted-truffle (#9c8474):** Secondary neutral for muted UI chrome and captions.
- **surface ({colors.neutral}):** Alias of neutral for component surfaces.
- **on-surface ({colors.primary}):** Alias of primary for text and icons on surfaces.

## Typography

- Headline Display (headline-lg, 96px; headline-md, 68px) uses Mondwest. Status: custom/self-hosted. Substitutes: Gloock, Bodoni Moda, or Cormorant (Google) for a high-contrast display serif.
- Section Heads (headline-sm 48px; headline-xs 34px) use Pixelify Sans. Status: Google; may be loaded directly.
- Body (body-md 24px, 1.5 line height) uses GeistPixelSquare. Status: custom/self-hosted. Substitutes: Pixelify Sans (500), Silkscreen, or Press Start 2P (Google) for pixel-influenced text.
- Monospace/metrics (not tokened but available): Geist Mono and Roboto Mono are Google families; use for code, IDs, and tabular numerals where appropriate.

## Layout

- Spacing scale is 4/8/16/24/40, enabling an 8-pt rhythm with larger leaps for section spacing.
- Use md (16px) padding inside cards; lg (24px) and xl (40px) for vertical section rhythm.
- Grids favour dense content: 12-column responsive layout with 16–24px gutters keeps copy blocks narrow while allowing metric panels to stack.
- Keep max line length to ~60–70 characters at body-md for readability on dark backgrounds.

## Elevation & Depth

Shadows are largely absent. Depth is conveyed with: 1) high contrast (#ffffff on #0a0a0a), 2) thin #374151 borders, and 3) an inset inner shadow (measured_shadows.inner) for CRT-style frames. Use tonal steps and whitespace to separate sections before adding effects.

## Shapes

Three corner states define hierarchy: 0px for text links and stripped elements; 4px (rounded.sm) for buttons and small controls; 8px (rounded.md) for cards and larger containers. Keep radii consistent—this system reads as crisp, not bubbly.

## Components

- Buttons
  - Primary: background #ffffff; text #201c19; 4px radius; 12px × 24px padding; 40px height. Use for the main CTA.
  - Secondary: text #ffffff on transparent/dark; 4px radius; 12px × 24px; 40px height. Use for less-prominent actions.
  - Link: text #ffffff or #1447e6; 0px radius. For inline and tertiary actions.
- Card: background #0a0a0a; text #ffffff; 8px radius; 16px padding; separate with #374151 borders when grouping.

### Hero Header
- headline-lg (96px, Mondwest) centered on #0a0a0a. Subheader in body-md (24px). Primary button centered using the button-primary spec.

### CRT Showcase Frame
- Container card with 8px radius and measured_shadows.inner to simulate bezel. Borders in #374151; captions in #9c8474 if needed.

### Pipeline Section Header
- Section title in headline-sm (48px, Pixelify Sans) with small overline label (body-md scaled down if needed). Use #f4a368 chips minimally for step tags.

### "Your unfair advantage" Feature List
- Four items in a two-column grid. Each item: subhead in Pixelify Sans (headline-xs 34px), body in body-md, divider in #374151.

### Stat Delta Badge
- Large inline metric (e.g., "52% → 78%") set in Geist Mono or Roboto Mono for clarity; label in body-md; use #f4a368 to highlight the delta arrow only.

### Pricing Comparison Module
- Two-column comparison with card rows. Rules in #374151, headings in Pixelify Sans, body in body-md. Primary savings callout uses #f4a368; keep buttons as primary/secondary specs.

### Final CTA Banner
- Full-width card with 8px radius and centered copy. Primary action uses button-primary; secondary action uses button-secondary.

## Do's and Don'ts

- Do keep text #ffffff on #0a0a0a for all core copy; use #374151 rules to structure long sections.
- Do reserve #f4a368 for CTAs, key links, and quantified wins; overuse weakens emphasis.
- Do use 4px radius on interactive controls and 8px on containers; avoid ad-hoc radii.
- Don't add drop shadows; rely on borders, tonal steps, and the provided inner inset for frames.
- Don't mix additional display faces; if Mondwest is unavailable, switch all display to a single Google substitute for consistency.
- Don't reduce body below 24px on dark backgrounds; smaller sizes will strain readability with the pixel forms.

## Agent Prompt Guide

Quick colour reference — Text: #ffffff; Background: #0a0a0a; Border: #374151; Accent: #f4a368; Link: #1447e6.

1) Build a hero
- Background #0a0a0a. Center an H1 in Mondwest at 96px/1.0, color #ffffff, letter-spacing -0.008em. Subhead in GeistPixelSquare 24px/1.5, color #ffffff. Primary button: background #ffffff, text #201c19, radius 4px, height 40px, padding 12px 24px.

2) Create a two-column feature grid
- Section title: Pixelify Sans 48px, #ffffff. Each feature: subhead Pixelify Sans 34px, body GeistPixelSquare 24px/1.5. Grid uses 16px inner padding, 24px column gap, dividers #374151. Icons or chips may use #f4a368 sparingly.

3) Stat delta callout
- Container card: background #0a0a0a, radius 8px, padding 16px, border 1px #374151. Stat set in Geist Mono 700, 48–68px range; label in GeistPixelSquare 24px. Color the arrow or percent in #f4a368.

4) Pricing comparison module
- Two cards side-by-side on #0a0a0a. Headings Pixelify Sans 34px; body GeistPixelSquare 24px. Row dividers #374151. Primary savings chip in #f4a368; link colour #1447e6. Include a button-primary at the end.

5) Final CTA banner
- Full-width card with 8px radius, 40px vertical padding. Title Mondwest 68px; body GeistPixelSquare 24px. Primary button per button-primary; optional secondary button per button-secondary.

## Similar Brands

- Vercel — austere dark UI with restrained accent colour; Overmind is more stylized with serif display and pixel textures.
- Replit — dark, developer-first interface with monospaced/pixel cues; Overmind is higher-contrast with a serif hero.
- Cursor — minimal dark palette and focused CTAs; Overmind adds retro CRT framing and a warmer accent.
- GitHub Copilot — developer credibility and dark surfaces; Overmind pushes a bolder display type and stronger cost comparison storytelling.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #ffffff;
  --color-secondary: #f4a368;
  --color-tertiary: #1447e6;
  --color-neutral: #0a0a0a;
  --color-border: #374151;
  --color-brand-gryphonne-sepia-wash: #823a0a;
  --color-brand-dusted-truffle: #9c8474;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 96px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1;
  --text-headline-lg-tracking: -0.008em;
  --text-headline-md-size: 68px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.21;
  --text-headline-md-tracking: -0.011em;
  --text-headline-sm-size: 48px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.21;
  --text-headline-xs-size: 34px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.21;
  --text-body-md-size: 24px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --text-body-md-tracking: -0.01em;
  --font-mondwest: "mondwest";
  --font-pixelify-sans: "Pixelify Sans";
  --font-geistpixelsquare: "GeistPixelSquare";

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

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;

  /* Components */
  --button-primary-background-color: var(--color-primary);
  --button-primary-text-color: #201c19;
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 12px 24px;
  --button-primary-height: 40px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 12px 24px;
  --button-secondary-height: 40px;
  --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: #ffffff;
  --color-secondary: #f4a368;
  --color-tertiary: #1447e6;
  --color-neutral: #0a0a0a;
  --color-border: #374151;
  --color-brand-gryphonne-sepia-wash: #823a0a;
  --color-brand-dusted-truffle: #9c8474;
  --color-surface: #0a0a0a;
  --color-on-surface: #ffffff;
  --font-headline-lg: "mondwest";
  --font-headline-md: "mondwest";
  --font-headline-sm: "Pixelify Sans";
  --font-headline-xs: "Pixelify Sans";
  --font-body-md: "GeistPixelSquare";
  --text-headline-lg: 96px;
  --text-headline-md: 68px;
  --text-headline-sm: 48px;
  --text-headline-xs: 34px;
  --text-body-md: 24px;
  --tracking-headline-lg: -0.008em;
  --tracking-headline-md: -0.011em;
  --tracking-body-md: -0.01em;
  --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: 4px;
  --radius-md: 8px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.957,
                    0.639,
                    0.408
                ],
                "hex": "#f4a368"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.078,
                    0.278,
                    0.902
                ],
                "hex": "#1447e6"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.039,
                    0.039,
                    0.039
                ],
                "hex": "#0a0a0a"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.216,
                    0.255,
                    0.318
                ],
                "hex": "#374151"
            }
        },
        "brand-gryphonne-sepia-wash": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.51,
                    0.227,
                    0.039
                ],
                "hex": "#823a0a"
            }
        },
        "brand-dusted-truffle": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.612,
                    0.518,
                    0.455
                ],
                "hex": "#9c8474"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.039,
                    0.039,
                    0.039
                ],
                "hex": "#0a0a0a"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 4,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 40,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 4,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "mondwest",
                "fontSize": {
                    "value": 96,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.008,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "mondwest",
                "fontSize": {
                    "value": 68,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.011,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Pixelify Sans",
                "fontSize": {
                    "value": 48,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Pixelify Sans",
                "fontSize": {
                    "value": 34,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "GeistPixelSquare",
                "fontSize": {
                    "value": 24,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.01,
                    "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 Overmind**, 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
reloop.sh
Reloop Communication
Reloop
fellow.ai
Fellow AI
Fellow
thedrive.ai
The Drive AI AI
The Drive AI