Skip to content
DesignMunkDesignMunk Submit a site

Moxie

moxie.birju.dev
Use any AI with Claude Code—Moxie in your Mac menu bar.
AI Developer Tools Astro Homepage Inter Signifier
Share Visit site
moxie.birju.dev DESKTOP · 1440
Moxie

AI Breakdown

Design export

# Design brief: the Moxie 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/10/03063637/moxie-birju-dev-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/10/03063637/moxie-birju-dev-featured-1440x900.webp
- On DesignMunk: https://designmunk.com/moxie/

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

# Moxie: Serif Display Above a Centered MacBook Demo

## Overview

Moxie's site is calm, technical, and Mac-native. It aims at developers and power users, using minimal color, high legibility, and roomy spacing. The tone is confident and instructional rather than salesy. The UI should feel precise, with actions expressed as pill buttons and supporting proof delivered through copy-led sections and small dark cards.

## Page Structure

- Global header: compact bar; logo left, centered text links, right-aligned pill Download button.
- Hero: small eyebrow badge, large serif headline, short paragraph, two pill CTAs side-by-side; a Product Hunt badge and platform notes sit below.
- Device showcase: oversized centered MacBook frame screenshot spanning the content width, providing immediate product context.
- Feature stack: a vertical sequence of h3 callouts with short copy; inline UI elements (code chips, dark usage cards, notifications, heatmap, menu bar popover) appear near the text.
- App tour: text-led section listing primary app areas as stacked rows with brief descriptions; denser than the hero but still airy.
- Provider compatibility: centered, multi-row strip of provider logos and labels; compact spacing.
- Privacy/local-first: short copy block with a three-item checklist row.
- Final CTA: centered headline with a single Download button; version and OS notes beneath.
- Footer: utility links in a compact grid plus a long list of the maker's other apps; final inline nav for legal and support.

## Colors

- Primary (#000000): Core ink for headings, body text, and icons.
- Secondary (#f2dfd9): Warm shell tint for subtle accents and backgrounds behind badges or notes.
- Tertiary (#db6b46): Tomato highlight used sparingly for emphasis and promotional elements.
- Neutral (#ffffff): Paper background across the site.
- surface (#ffffff): Default surface for cards/sections that stay white.
- on-surface (#000000): Text and icon color on white surfaces.

## Typography

- Signifier (custom, not freely hosted): Used for headline-lg at 45px/1.05 with slight tight tracking for the hero display. Not loadable from Google; suggested substitutes with similar feel: Gloock, Cormorant Garamond, or Libre Caslon Text.
- Inter var (custom variable build): Used for headline-md/sm/xs and body-md. If variable Inter is unavailable, load Inter from Google (available) at matching weights.
- Inter (google): Safe fallback for all sans levels; use 16px/1.65 for body and 21–35px for smaller headings as per tokens.
- Geist Mono (custom): Reserved for code chips and inline technical strings; if unavailable, substitute JetBrains Mono, IBM Plex Mono, or Roboto Mono.

## Layout

- Spacing scale: 8 / 16 / 32 / 56 / 80px powers vertical rhythm. Use md (32) between stacked blocks, lg (56) for section breathing, and xl (80) above/below the hero and device showcase.
- Page width: a centered single-column flow with occasional wide media (the MacBook frame) breaking the column while text remains measure-friendly.
- Grids: most sections are one-column stacks; logo and provider lists form simple rows. Keep dense lists compact but separated by md gaps.
- Alignment: center in hero and CTAs; left-align copy in feature stacks for scan speed.

## Elevation & Depth

- Shadows are light and functional. Hairline delineation and subtle halos (sm/inner) separate sticky elements and badges from white backgrounds.
- The dark card style provides tonal depth without heavy blur; where emphasis is needed, prefer a thin border or inner shadow over large drops.
- Z-order is minimal; hierarchy is conveyed by typography, whitespace, and tone rather than deep elevation.

## Shapes

- Two radii define the language: 8px corners for cards and chips; 9999px fully rounded pills for primary actions and tags.
- Use round pills for interactive controls (CTAs, small badges). Reserve 8px rectangles for information containers and code elements.

## Components

Buttons and cards are the foundation; follow token values for consistency.

- Button — Primary: pill (radius 9999px), 44px height, 0 24px padding, black text (#000000) on a light surface; distinguish state via subtle fill or hairline outline; spacing between siblings: sm (16px).
- Button — Secondary: same dimensions as primary with lighter or outlined treatment; keep text black.
- Button — Link: inline text-style action with no radius; use primary color for text and standard underline on hover.
- Card: dark container (#1c1a19) with white text, 8px radius, 12px × 14px padding; ideal for small meters, popovers, and status blocks.

### Top Navigation
Compact bar with logo left, three center links, and a right-aligned pill Download button. Use body-md for links, md horizontal padding, and sm gaps between items.

### Hero CTA Group
Centered stack: eyebrow badge, headline-lg in Signifier, one body line, then two pill buttons in a row (primary then secondary). Below, a small row contains a promo badge and short platform notes.

### Promo Badge (Product Hunt)
Small outlined badge with tomato accent (#db6b46) and rounded corners; sits under the CTAs. Keep it visually secondary by using on-surface text and a thin border.

### Device Mockup
Oversized MacBook frame image centered in the column; apply generous top/bottom spacing (lg–xl). Corners are rounded to match the screenshot frame; minimal shadow so it feels part of the page.

### Feature Callout Card
Left-aligned h3 (headline-sm), short paragraph, and a supporting dark card (#1c1a19) showing usage meters or lists. Use md gaps between elements and sm padding inside the card.

### Inline Code Chip
Monospace token (Geist Mono or substitute), 8px radius, compact padding (xs–sm), on white background with black text. Use for file paths, keys, and env variables placed inline with copy.

### Heatmap
Dense grid of small squares inside a dark card; 8px radius outer container, xs gaps inside. Works as a compact visual summary adjacent to copy.

### Footer Link Grid
Multi-column text list of links with md vertical spacing; a separate block lists the maker's other apps as single-line links. Keep body-md type and tight sm gaps.

## Do's and Don'ts

- Do keep text black on white; reserve #f2dfd9 and #db6b46 for subtle accents and promotional elements.
- Do use pill buttons at 44px height and 0–24px padding; keep sibling CTAs aligned on a single baseline.
- Do prefer 8px radius dark cards for technical readouts; avoid mixing additional radii.
- Don't introduce new brand colors or gradients into UI chrome; bright color should appear only inside screenshots.
- Don't stack more than two CTAs in the hero; beyond two, demote extras to link style.
- Don't use heavy drop shadows; rely on the provided hairline/inner treatments or tonal contrast instead.

## Agent Prompt Guide

Quick color reference — text: #000000; background: #ffffff; border: #000000; accent: #db6b46; soft-accent: #f2dfd9.

1) Build the hero
- Container: centered, background #ffffff, vertical gaps 32px (md).
- Eyebrow badge: pill radius 9999px, text 13–14px Inter, text color #000000, background #f2dfd9, inline padding 8px 12px.
- Headline: font-family 'Signifier','Inter',serif; size 45px; weight 400; line-height 1.05; letter-spacing -0.025em; color #000000; center aligned.
- Body: Inter 16px/1.65, color #000000, max-width ~60ch, center.
- CTAs: two inline pills 44px height, 0 24px padding, radius 9999px; text color #000000; 16px gap.

2) Feature callout with dark card
- Section padding top/bottom 56px (lg); left-aligned copy.
- H3: Inter 27px/1.19, color #000000; paragraph: Inter 16px/1.65.
- Supporting card: background #1c1a19; text #ffffff; radius 8px; padding 12px 14px; place to the right or below with 32px gap.

3) Device mockup block
- Full-width media container centered; top margin 56–80px; bottom 56px.
- Place a single large screenshot with rounded corners matching the asset; no strong shadow; background stays #ffffff.

4) Provider logo strip
- Centered row(s) with Inter labels 16px; 16px gaps horizontally, 8–16px vertically.
- Keep text color #000000 on #ffffff; use #f2dfd9 chips sparingly for emphasis; no heavy borders; radius 8px on any chips.

## Similar Brands

- Raycast — Similarly Mac-native, black/white typography with disciplined accent use; Raycast pushes bolder dark sections, while Moxie stays predominantly white.
- Linear — Tight Inter typography and restrained palette; Linear is more product-brand heavy with gradients, whereas Moxie keeps gradients inside screenshots only.
- Setapp — Mac app marketplace that uses centered hero CTAs and device frames; Setapp employs more color blocks, Moxie remains minimal.
- Cursor — Developer-oriented landing with sparse color and dense feature copy; Cursor leans darker overall, while Moxie favors light surfaces.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: #f2dfd9;
  --color-tertiary: #db6b46;
  --color-neutral: #ffffff;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 45px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.05;
  --text-headline-lg-tracking: -0.025em;
  --text-headline-md-size: 35px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.2;
  --text-headline-sm-size: 27px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.19;
  --text-headline-sm-tracking: -0.015em;
  --text-headline-xs-size: 21px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.19;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.65;
  --font-signifier: "Signifier";
  --font-inter-var: "Inter var";

  /* Rounded */
  --radius-sm: 8px;
  --radius-full: 9999px;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 32px;
  --spacing-lg: 56px;
  --spacing-xl: 80px;

  /* Components */
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 0px 24px;
  --button-primary-height: 44px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 0px 24px;
  --button-secondary-height: 44px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: #1c1a19;
  --card-text-color: var(--color-neutral);
  --card-rounded: var(--radius-sm);
  --card-padding: 12px 14px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #000000;
  --color-secondary: #f2dfd9;
  --color-tertiary: #db6b46;
  --color-neutral: #ffffff;
  --color-surface: #ffffff;
  --color-on-surface: #000000;
  --font-headline-lg: "Signifier";
  --font-headline-md: "Inter var";
  --font-headline-sm: "Inter var";
  --font-headline-xs: "Inter var";
  --font-body-md: "Inter var";
  --text-headline-lg: 45px;
  --text-headline-md: 35px;
  --text-headline-sm: 27px;
  --text-headline-xs: 21px;
  --text-body-md: 16px;
  --tracking-headline-lg: -0.025em;
  --tracking-headline-sm: -0.015em;
  --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: 8px;
  --radius-full: 9999px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 32px;
  --spacing-lg: 56px;
  --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"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.949,
                    0.875,
                    0.851
                ],
                "hex": "#f2dfd9"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.859,
                    0.42,
                    0.275
                ],
                "hex": "#db6b46"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "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": 8,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 32,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 56,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 80,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "full": {
            "$value": {
                "value": 9999,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Signifier",
                "fontSize": {
                    "value": 45,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.025,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter var",
                "fontSize": {
                    "value": 35,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter var",
                "fontSize": {
                    "value": 27,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.015,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter var",
                "fontSize": {
                    "value": 21,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter var",
                "fontSize": {
                    "value": 16,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        }
    }
}
```

## 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 Moxie**, 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