Skip to content
DesignMunkDesignMunk Submit a site

Astrobuildkit

astrobuildkit.com
The Astro design system your AI agent already knows.
Design Tools Developer Tools Astro Tailwind Homepage Inter
Share Visit site
astrobuildkit.com DESKTOP · 1440
Astrobuildkit

AI Breakdown

Design export

# Design brief: the Astrobuildkit 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/03140445/astrobuildkit-com-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/10/03140445/astrobuildkit-com-featured-1440x900.webp
- On DesignMunk: https://designmunk.com/astrobuildkit/

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

# Astrobuildkit: Live Theme Switcher Proves the System

## Overview

A precise, developer-facing brand with a calm, white-first palette accented by saturated violet. The tone is instructional and confident: show the knobs, then show the output. Layouts are airy with a consistent two-column rhythm; dense concepts are broken into discrete, scannable sections. Use contrast and structure over decoration; animation appears in product visuals, not in core UI chrome.

## Page Structure

- Top navigation: compact bar with logo left; product, pricing, and docs links center/right; a prominent primary CTA at the far right.
- Hero: left-aligned oversized headline with short subcopy; two CTAs in a row; right side hosts a simplified stacked-tile illustration; soft gradient background inside the container.
- Social proof band: small overlapping avatar row and a short trust caption.
- Logo/tool row: a horizontal list of platform logos under a "Built on the tools you already use" caption.
- Intro split: two-column section—left column with strong headline, right column with descriptive paragraph and short proof list.
- Feature splits (sequence): alternating two-column rows pairing copy with a visual—code snippet, backgrounds stack, animated visuals, and layout/config examples. Each uses card-like surfaces inside the container.
- Agent flow rail: a four-step horizontal process with numbered markers and brief explanations; reads like a terminal/runner.
- Live theme switcher: a dense control panel of palette/theme/layout toggles shown as selectable pills and radios; sits within a wide card.
- Backgrounds demo: split section with copy plus a code block showing four background components stacked.
- Comparison table: multi-column matrix contrasting the product against templates and generic AI; rows highlight differentiators.
- FAQ: accordion list of questions; each item expands within a bordered card.
- Founder bio: narrative section with personal intro and links to related projects.
- Closing CTA: pricing line with two buttons, followed by a multi-column footer of product/resources/legal links.

## Colors

- Primary (#000000): Deep ink for headlines and core text.
- Secondary (#452dd4): Saturated violet accent for CTAs, active states, and key UI highlights.
- Neutral (#ffffff): Paper white for page background and default surfaces.
- brand-dull-lavender (#a494ec): Soft lavender used for subtle borders, badges, and secondary accents.
- surface (#ffffff): Alias of neutral; default card and section backgrounds.
- on-surface (#000000): Alias of primary; text and icon color on light surfaces.

## Typography

Inter Variable provides the entire scale, used with tight tracking at headline sizes and generous line-height for body.
- headline-lg (Inter Variable 48px/1, 590, -0.025em): Primary hero headlines.
- headline-md (38px/1.05, 590, -0.024em): Section leads and major split headings.
- headline-sm (29px/1.21, 590, -0.016em): Sub-section titles and card headers.
- headline-xs (23px/1.22, 590): Minor titles and captions that need weight.
- body-md (18px/1.5, 400): Paragraphs, nav items, table cells, and FAQs.
Availability: Inter Variable here is self-hosted (font_sources type: custom). If you can't load it, use Inter (Google Fonts, variable) as a near-perfect substitute; Manrope and Plus Jakarta Sans are also viable backups with similar x-height and neutrality.

## Layout

Spacing follows a short-to-long scale: 6px (xs) for micro-gaps, 14px (sm) for chip paddings and inline controls, 24px (md) for interior card padding and column gutters, 72px (lg) for section rhythm, and 162px (xl) for major scene breaks like hero-to-body transitions. Most content lives in a centered container; feature sections use a two-column split that stacks on small screens. Full-bleed effects are achieved with backgrounds while content remains contained. Keep vertical rhythm consistent: section tops and bottoms land on 72px multiples, with 24px used inside cards and between stacked elements.

## Elevation & Depth

Shadows are minimal: a light sm shadow (0 1px 2px at 5% black) is allowed on floating cards; larger elevations are none. Depth and hierarchy rely on white vs. tinted surfaces, 1px borders in lavender, and ample whitespace. An inner inset ring is used for focus/selection on inputs and pills where needed.

## Shapes

Corners are intentional and readable: 10px radius for buttons and compact controls; 14px for cards and large panels. Links use square edges. Use the larger radius to signal grouped or layered content, and the smaller radius for interactive single-action elements.

## Components

Tokened primitives:
- Buttons: button-primary and button-secondary share a 44px height, 11px×16px padding, 10px radius, and primary text color. button-link is unrounded with text treatment only. Use secondary (#452dd4) as the accent color for filled states.
- Card: white background (#ffffff), 14px radius, 24px side padding with 52px bottom, subtle sm shadow optional, and on-surface text (#000000).

Distinctive components on this page:

### Hero Split
- Left column: headline-lg (48px/590) and body-md (18px). Two CTAs in a row; primary at 44px height, 10px radius.
- Right column: stacked-tile illustration; keep width roughly one third of the container on desktop.
- Spacing: 72px above/below.

### Trust Avatars Row
- A tight row of circular avatars followed by a short caption. Place inside the hero container margin, separated by 24px.

### Logo Cloud — "Built on the tools you already use"
- Single row of monochrome logos with equal spacing. Use body-md for labels; place on a white surface with lavender (#a494ec) hairline dividers if needed.

### Feature Split with Code
- Two columns: copy (headline-sm + paragraph) and a code card. Card uses 14px radius, 24px padding, white background, and lavender border.

### Theme Switcher Panel
- Dense control board presented within a large card (14px radius, 24px padding). Controls are pills and radios using the inner ring for selection; rely on secondary (#452dd4) for active accents.

### Background Stack Demo
- Copy column plus a preview area that layers multiple background blocks. Keep preview inside a card with 14px radius and sm shadow.

### Process Stepper (Brief → Launch)
- Four numbered steps in a horizontal rail. Numbers are prominent (headline-xs); descriptions in body-md. Use 24px gaps; the rail sits on a white card.

### FAQ Accordion
- Each question in a bordered card (14px radius) that expands to reveal body-md text. Keep 24px vertical spacing between items.

## Do's and Don'ts

- Do use headline-lg for the first on-page h1 and headline-md for major section leads; avoid mixing sizes within a single section.
- Do keep section padding to 72px (lg) and use 24px (md) inside cards; avoid improvising custom spacings.
- Do use secondary (#452dd4) for primary actions; reserve brand-dull-lavender (#a494ec) for borders and subtle accents.
- Do keep buttons 44px tall with 10px radius; avoid pill shapes or extra-wide paddings.
- Don't add heavy drop shadows; prefer a 1px lavender border and whitespace.
- Don't introduce new accent colors; the palette is black, white, violet, and lavender.

## Agent Prompt Guide

Quick color reference — Text: #000000, Background: #ffffff, Border: #a494ec, Accent: #452dd4

1) Build the hero split
- Container: centered, white (#ffffff) background.
- Left column: h1 set in Inter Variable (fallback: Inter, Manrope), 48px, weight 590, line-height 1, color #000000; paragraph at 18px/1.5.
- CTAs: primary button 44px tall, 10px radius, filled with #452dd4, text #ffffff; secondary as text button with underline.
- Right column: placeholder illustration card 14px radius, 24px padding, 1px border #a494ec.
- Section spacing: 72px top & bottom.

2) Logo cloud row
- White surface; heading in body-md 18px.
- Place 6–8 logos in a row with equal gaps; each logo area inside a 14px-radius card with 24px padding and 1px border #a494ec.

3) Theme switcher panel
- Create a wide card (white, 14px radius, 24px padding, subtle sm shadow 0 1px 2px at 5%).
- Add groups: "Palette", "Header", "Container", "Sections". Use pill controls 10px radius.
- Active state: background #452dd4 with text #ffffff; inactive: white with 1px border #a494ec.

4) Feature split with code
- Two columns: left copy (headline-sm 29px/590, body-md 18px) and right code block.
- Code block: white card, 14px radius, 24px padding, border #a494ec; caption in headline-xs 23px/590.

5) FAQ accordion
- Stack 5 items; each is a white card with 14px radius, 24px padding, border #a494ec.
- Question in headline-sm (29px/590); answer in body-md (18px). Active item's caret or label uses #452dd4.

## Similar Brands

- Astro: similarly developer-first with white surfaces and disciplined structure; this page leans harder on a violet accent and live configuration.
- Tailwind UI: clean component marketing with two-column features; Astrobuildkit adds an operational theme switcher and agent-flow rail.
- Vercel: minimal contrasty layouts and strong developer tone; here, borders are lavender rather than grayscale and radii are softer.
- shadcn/ui: token-driven components and restrained elevation; this site adapts that language to a marketing-site library with animated visuals.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: #452dd4;
  --color-neutral: #ffffff;
  --color-brand-dull-lavender: #a494ec;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 48px;
  --text-headline-lg-weight: 590;
  --text-headline-lg-leading: 1;
  --text-headline-lg-tracking: -0.025em;
  --text-headline-md-size: 38px;
  --text-headline-md-weight: 590;
  --text-headline-md-leading: 1.05;
  --text-headline-md-tracking: -0.024em;
  --text-headline-sm-size: 29px;
  --text-headline-sm-weight: 590;
  --text-headline-sm-leading: 1.21;
  --text-headline-sm-tracking: -0.016em;
  --text-headline-xs-size: 23px;
  --text-headline-xs-weight: 590;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 18px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --font-inter-variable: "Inter Variable";

  /* Rounded */
  --radius-sm: 10px;
  --radius-md: 14px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 14px;
  --spacing-md: 24px;
  --spacing-lg: 72px;
  --spacing-xl: 162px;

  /* Components */
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 11px 16px;
  --button-primary-height: 44px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 11px 16px;
  --button-secondary-height: 44px;
  --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: 40px 24px 52px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #000000;
  --color-secondary: #452dd4;
  --color-neutral: #ffffff;
  --color-brand-dull-lavender: #a494ec;
  --color-surface: #ffffff;
  --color-on-surface: #000000;
  --font-headline-lg: "Inter Variable";
  --font-headline-md: "Inter Variable";
  --font-headline-sm: "Inter Variable";
  --font-headline-xs: "Inter Variable";
  --font-body-md: "Inter Variable";
  --text-headline-lg: 48px;
  --text-headline-md: 38px;
  --text-headline-sm: 29px;
  --text-headline-xs: 23px;
  --text-body-md: 18px;
  --tracking-headline-lg: -0.025em;
  --tracking-headline-md: -0.024em;
  --tracking-headline-sm: -0.016em;
  --font-weight-headline-lg: 590;
  --font-weight-headline-md: 590;
  --font-weight-headline-sm: 590;
  --font-weight-headline-xs: 590;
  --font-weight-body-md: 400;
  --radius-sm: 10px;
  --radius-md: 14px;
  --spacing-xs: 6px;
  --spacing-sm: 14px;
  --spacing-md: 24px;
  --spacing-lg: 72px;
  --spacing-xl: 162px;
}
```

### 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.271,
                    0.176,
                    0.831
                ],
                "hex": "#452dd4"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "brand-dull-lavender": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.643,
                    0.58,
                    0.925
                ],
                "hex": "#a494ec"
            }
        },
        "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": 14,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 72,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 162,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 10,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 14,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter Variable",
                "fontSize": {
                    "value": 48,
                    "unit": "px"
                },
                "fontWeight": 590,
                "letterSpacing": {
                    "value": -0.025,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter Variable",
                "fontSize": {
                    "value": 38,
                    "unit": "px"
                },
                "fontWeight": 590,
                "letterSpacing": {
                    "value": -0.024,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter Variable",
                "fontSize": {
                    "value": 29,
                    "unit": "px"
                },
                "fontWeight": 590,
                "letterSpacing": {
                    "value": -0.016,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter Variable",
                "fontSize": {
                    "value": 23,
                    "unit": "px"
                },
                "fontWeight": 590
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter Variable",
                "fontSize": {
                    "value": 18,
                    "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 Astrobuildkit**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse Design Tools →
reloop.sh
Reloop Communication
Reloop
webflow.com
Webflow Design Tools
Webflow
reworkd.ai
Reworkd Data & Infrastructure
Reworkd
inertiajs.com
Inertia.js Developer Tools
Inertia.js