Skip to content
DesignMunkDesignMunk Submit a site

TurboStarter

turbostarter.dev
Ship a production SaaS this weekend with one codebase.
AI Developer Tools Next.js Tailwind Homepage sans
Share Visit site
turbostarter.dev DESKTOP · 1440
TurboStarter

AI Breakdown

Design export

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

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

# TurboStarter: Giant Type, One Orange Pill Everywhere

## Overview

Developer-first and action-oriented. The interface is bright, spacious, and minimal, with a monochrome base and a single high-energy orange accent for actions. Headlines are large and tightly tracked; body text runs larger than average for quick scanning. When tokens don't cover a case, bias to white backgrounds, strong borders, and compact, pill-shaped controls.

## Page Structure

- Utility bar: a thin top strip centered with a small link; minimal separators.
- Header: left logo and tiny product badge, centered/inline primary navigation, right-aligned utilities (social, theme); one row, generous horizontal padding.
- Hero: oversized two-line display headline, short supporting line, primary orange pill and a ghost/secondary pill; a micro-urgency line sits beneath; social avatars and rating follow on a single row.
- Integration strip: one to multiple rows of monochrome tool logos inside light bordered chips; dense but low-contrast.
- Features overview: section heading, then stacked feature modules combining short copy with a demo visual (code sample card, small UI shots); comfortable spacing between modules.
- System capabilities: a denser grid of small cards linking to areas like ideas, internationalization, teams, SEO, CLI; compact rows with icons.
- Founder bio: one-column block with stats in small counters; friendly and personal.
- Time-saved comparison: a two-column list contrasting regular vs. turbo methods; compact rows with icons.
- Pricing: two tall cards in a row (core and bundle), each with price, bullets, countdown/timer, and a strong primary CTA; clear upgrade path.
- Testimonials: a vertical list of quote cards with avatars and attribution; light borders, ample white space.
- Showcase gallery: a multi-row grid of external project cards with logos, short descriptions, and links.

## Colors

- Primary (#0d121c): Deep ink for headlines, core text, and icons.
- Secondary (#fca47c): Warm supporting accent for subtle highlights and badges.
- Tertiary (#f14704): Turbo orange for primary CTAs and emphasis.
- Neutral (#ffffff): Canvas background for most sections and cards.
- Border (#e4e4e7): Light divider for cards, chips, and section boundaries.
- Surface ({colors.neutral}): Default surface, same as the canvas.
- On-surface ({colors.primary}): Text and icon color when rendered on surfaces.

## Typography

The system uses a custom sans family ("Sans" in tokens). It is not provided via a public CDN, so agents should substitute with obtainable sans-serifs of similar geometry: Inter (Google Fonts), Manrope (Google Fonts), or Plus Jakarta Sans (Google Fonts).
- Headline levels: headline-lg 96px/1.0, weight 500, tight -0.05em tracking for the hero; headline-md 65px/1.2 for major section titles; headline-sm 44px/1.2 and headline-xs 30px/1.0 for subsections and cards.
- Body: body-md 20px/1.63 for paragraphs, captions, and list items. Keep body color to #0d121c on #ffffff for clarity.
- Use optical weight 500 for headlines to keep shapes crisp without turning heavy; reserve 400 for long text.

## Layout

Spacing is intentional and binary: very large blocks and compact internals. Use xl (152px) for vertical paddings in hero and key section breaks; lg (40px) for section gutters; md (24px) for card padding and gaps; sm (16px) for inline controls and chip spacing; xs (6px) for micro-gaps between icons and labels. Page grid is a centered single column that expands into simple 2-up rows (features, pricing, gallery) with generous outer margins.

## Elevation & Depth

The UI is largely flat. Shadows are absent at md/lg/xl; a subtle sm shadow (rgba(0,0,0,0.05) 0 1px 2px) may be used for floating elements. Hierarchy is conveyed with whitespace, strong type scale, and hairline borders (#e4e4e7). An inner inset shadow is available for pressed states or input fields.

## Shapes

Two radii create the shape language: sm (12px) for cards, chips, and small images, and full (9999px) for buttons, pills, and avatars. Use full radius for any interactive primary action; keep informational containers at 12px to feel stable and structured.

## Components

Buttons
- Primary: #f14704 background, #fafafa text, full radius, 62px tall with 13px x 20px padding. Use for the main action per view.
- Secondary: #ffffff background, #0d121c text, full radius, 62px tall; pair with the primary as a quieter option.
- Link: #71717a text, no radius; inline action for tertiary paths.

Card
- Background #ffffff, text #09090b, radius 12px, padding 12px; pair with a #e4e4e7 border and no heavy shadow.

### Utility Bar
A thin top strip with centered inline link; minimal height, body-md text, and no dividers. Use xl spacing below to separate from the header.

### Header Navigation
Single row with left-aligned logo and small product badge, middle nav links, and right utilities (social, theme). Links use body-md; hover states only change tone or underline—no fills.

### Hero CTA Group
Two-line headline set in headline-lg (96px). Beneath, a short body line, then a horizontal cluster of the primary orange pill and a ghost/secondary pill. A micro-urgency note aligns under the buttons.

### Trust Bar
Compact row of overlapping circular avatars followed by a star rating snippet. Keep to one line with sm gaps and no shadows.

### Integration Strip
Rows of tool logos inside bordered chips (12px radius). Use md gaps between chips and a light border (#e4e4e7); keep logos monochrome for restraint.

### Feature + Code Sample
Two-column at desktop: left column headline-xs + copy; right column a code card using the Card spec with monospace content. Collapse to stacked order on mobile with md gaps.

### Auth Sheet Specimen
A demo sign-in panel showing provider buttons (full-radius pills) and input fields. Use card radius 12px, md internal gaps, and link-style tertiary text for helpers.

### Pricing Tier Cards
Two tall cards side by side. Each includes a title, price, bullet list, countdown/timer chip, and a full-width primary CTA. Use lg vertical padding, md internal gaps, 12px radius, and border #e4e4e7.

## Do's and Don'ts

- Do set the hero headline with headline-lg 96px and tight tracking; keep one clear CTA in #f14704.
- Do use #e4e4e7 borders to separate cards, chips, and sections instead of drop shadows.
- Do pair the primary pill with a ghost secondary; keep both at 62px height and full radius.
- Do keep sections bright on #ffffff with ample xl breaks; reserve dense grids for feature overviews.
- Don't introduce new accent colors; use #f14704 for primary emphasis and #fca47c sparingly.
- Don't square corners or add heavy shadows; they break the system's soft, crisp feel.

## Agent Prompt Guide

Quick color reference
- Text: #0d121c
- Background: #ffffff
- Border: #e4e4e7
- Accent (primary action): #f14704

1) Build the hero
"Create a centered hero on #ffffff with a two-line h1 set in Inter (substitute for custom 'Sans'), 96px/1.0, weight 500, letter-spacing -0.05em, color #0d121c. Add a 20px body line at 1.63 line-height. Place two buttons below: primary pill 62px tall, full radius (9999px), background #f14704, text #fafafa; secondary pill 62px tall, full radius, background #ffffff, text #0d121c, 1px border #e4e4e7. Use xl (152px) top/bottom padding and md (24px) gap between elements."

2) Integration logo row
"Under a section title in Inter 30px/1.0 weight 500, render a row of logo chips: each a 12px-radius card on #ffffff with 1px border #e4e4e7, 12px internal padding, md (24px) horizontal gap. Keep logos monochrome; overall section has lg (40px) vertical padding."

3) Feature with code card
"Make a two-column layout (1fr 1fr, 40px gap). Left: Inter 44px/1.2 weight 500 headline, then 20px body text. Right: a 12px-radius card on #ffffff, 12px padding, 1px border #e4e4e7 containing a code block. Page text #0d121c on #ffffff, section padding lg (40px)."

4) Pricing two-up
"Render two pricing cards side by side. Each card: background #ffffff, 12px radius, 1px border #e4e4e7, lg (40px) vertical padding, md (24px) internal gaps. Title in Inter 44px/1.2, price emphasized. Primary CTA at bottom: 62px-tall full-radius pill in #f14704 with #fafafa text. Use xl (152px) spacing above the section and lg (40px) below."

## Similar Brands

- Vercel: similarly minimal, monochrome base with oversized type; TurboStarter adds a warmer orange accent and softer, pill-shaped controls.
- Linear: large scale typography and strict spacing; Linear leans darker and purple-accented, while this page stays bright and orange-forward.
- Raycast: developer marketing with bold CTAs and restrained palettes; Raycast prefers dark mode, this site opts for white surfaces and borders.
- Supabase: clean documentation-forward aesthetic with grids and code samples; Supabase's green accent and denser sections contrast with this page's lighter tone.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #0d121c;
  --color-secondary: #fca47c;
  --color-tertiary: #f14704;
  --color-neutral: #ffffff;
  --color-border: #e4e4e7;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 96px;
  --text-headline-lg-weight: 500;
  --text-headline-lg-leading: 1;
  --text-headline-lg-tracking: -0.05em;
  --text-headline-md-size: 65px;
  --text-headline-md-weight: 500;
  --text-headline-md-leading: 1.2;
  --text-headline-md-tracking: -0.018em;
  --text-headline-sm-size: 44px;
  --text-headline-sm-weight: 500;
  --text-headline-sm-leading: 1.2;
  --text-headline-xs-size: 30px;
  --text-headline-xs-weight: 500;
  --text-headline-xs-leading: 1;
  --text-headline-xs-tracking: -0.02em;
  --text-body-md-size: 20px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.63;
  --font-sans: "sans";

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

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

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: #fafafa;
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 13px 20px;
  --button-primary-height: 62px;
  --button-secondary-background-color: var(--color-neutral);
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 13px 20px;
  --button-secondary-height: 62px;
  --button-link-text-color: #71717a;
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: #09090b;
  --card-rounded: var(--radius-sm);
  --card-padding: 12px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #0d121c;
  --color-secondary: #fca47c;
  --color-tertiary: #f14704;
  --color-neutral: #ffffff;
  --color-border: #e4e4e7;
  --color-surface: #ffffff;
  --color-on-surface: #0d121c;
  --font-headline-lg: "sans";
  --font-headline-md: "sans";
  --font-headline-sm: "sans";
  --font-headline-xs: "sans";
  --font-body-md: "sans";
  --text-headline-lg: 96px;
  --text-headline-md: 65px;
  --text-headline-sm: 44px;
  --text-headline-xs: 30px;
  --text-body-md: 20px;
  --tracking-headline-lg: -0.05em;
  --tracking-headline-md: -0.018em;
  --tracking-headline-xs: -0.02em;
  --font-weight-headline-lg: 500;
  --font-weight-headline-md: 500;
  --font-weight-headline-sm: 500;
  --font-weight-headline-xs: 500;
  --font-weight-body-md: 400;
  --radius-sm: 12px;
  --radius-full: 9999px;
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 152px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.051,
                    0.071,
                    0.11
                ],
                "hex": "#0d121c"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.988,
                    0.643,
                    0.486
                ],
                "hex": "#fca47c"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.945,
                    0.278,
                    0.016
                ],
                "hex": "#f14704"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.894,
                    0.894,
                    0.906
                ],
                "hex": "#e4e4e7"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.051,
                    0.071,
                    0.11
                ],
                "hex": "#0d121c"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 40,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 152,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 12,
                "unit": "px"
            }
        },
        "full": {
            "$value": {
                "value": 9999,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "sans",
                "fontSize": {
                    "value": 96,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.05,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "sans",
                "fontSize": {
                    "value": 65,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.018,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "sans",
                "fontSize": {
                    "value": 44,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "sans",
                "fontSize": {
                    "value": 30,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.02,
                    "unit": "em"
                }
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "sans",
                "fontSize": {
                    "value": 20,
                    "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 TurboStarter**, 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