Skip to content
DesignMunkDesignMunk Submit a site

Astryx

astryx.atmeta.com
Start anywhere. Change anything. Ship faster.
Design Tools Developer Tools Next.js Homepage Figtree
Share Visit site
astryx.atmeta.com DESKTOP · 1440
Astryx

AI Breakdown

Design export

# Design brief: the Astryx 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/14172044/astryx-1440x3235.webp
- Above the fold: https://cdn.designmunk.com/2026/09/14172044/astryx-1440x900.webp
- On DesignMunk: https://designmunk.com/astryx/

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

# Astryx: Floating UI Demos Framing a Spacious Hero

## Overview

Astryx presents an engineering-ready design system with a friendly, approachable tone. Surfaces are bright and neutral, typography pairs clean sans headlines with a classic serif body, and spacing is generous—especially in the hero. The overall feel is practical and calm, with interactive moments delivered through pill buttons and compact, example-driven modules.

## Page Structure

- Global navigation: slim top bar with logo, compact text links, search, mode toggle, community/GitHub icons, and a pill "Get started" button.
- Hero stage: over-tall, airy canvas with floating product chips; centered brandmark, display headline, short subcopy, and two CTAs (primary pill and text link).
- Tagline block: large two-line value statement set as display type above a short paragraph.
- Theme storefront demo: a faux shop header followed by a row of product cards with titles, short descriptions, quantity and "Add to cart".
- Checkout demo: condensed form showing shipping method options, payment choices, and a primary "Pay now" action.
- Studio AI demo: chat window with conversation history, structured order summary, and quick-action chips.
- Inventory management demo: filters and tags over a data table with selectable rows and row-action menus; list/grid toggle.
- Revenue summary: a KPI figure alongside a vertical activity feed of recent orders.
- Component sampler: a compact strip showing badges, form inputs, switches, and buttons with a search field.
- Agent/CLI section: prompt and response example for generating a page.
- Templates and credibility: templates teaser, usage stat, and three short value pillars with inline links.
- Blog teasers: stacked article cards with dates and read times.
- Closing CTA and footer: final two-button call to action followed by a multi-column footer with product, resources, and social links.

## Colors

- Primary (#000000): Core ink for headlines, body text, and icons.
- Tertiary (#225bff): Accent blue for links, focused highlights, and occasional UI accents.
- Neutral (#ffffff): Paper white for page background and major surfaces.
- Border (#e5e7eb): Divider gray for strokes, table lines, and input borders.
- Surface ({colors.neutral}): Canvas for cards and panels; matches the base page background.
- on-surface ({colors.primary}): Default text color when placed on surfaces.

## Typography

- Figtree (Google, sans-serif): Used for display and section headings at 42/33/26px, weight 400 with tight line-heights (1.24/1.21/1.19). Load directly from Google Fonts; Roboto is available as a secondary sans if needed.
- Times New Roman (serif): Used for smaller headings (20px) and body copy (16px). As a system serif it isn't web-served here; agents should substitute if unavailable. Suitable substitutes: Georgia (system serif), Source Serif 4 (Google), or Noto Serif (Google), preserving the serif warmth and x-height at similar sizes.
- Pairing guidance: Keep headings in Figtree regular for a soft display voice; run all body content in the serif at 16px for readable, editorial-leaning prose. Avoid mixing weights that compete with the heavy brand logotype.

## Layout

- Spacing scale is compact at the micro level (4/12/20/24px) with a macro spacer at 166px for hero and section breathing room. Use xs/sm for control gaps, md for card padding and vertical rhythm, lg for section insets, and xl for marquee bands.
- Sections stack in a single flow with occasional two-panel rows (e.g., KPI + activity). Keep gutters consistent by reusing md (20px) and lg (24px) between sibling elements.
- Containers are centered with generous top/bottom padding; examples (storefront, checkout, table) should read as self-contained cards on a neutral page.
- When uncertain, prefer more whitespace and shorter line lengths; demos, not paragraphs, carry the message.

## Elevation & Depth

- Shadows are not used; hierarchy comes from whitespace, thin borders (#e5e7eb), and tonal contrast (black on white). Active and focus states rely on border emphasis and accent blue rather than drop shadows.
- Keep backgrounds clean; depth is suggested by layered cards and spacing, not effects.

## Shapes

- Cards and panels use a consistent 8px radius for approachable, modern geometry.
- Interactive elements (primary/secondary buttons, inputs, chips) use full (9999px) radii for pill shapes.
- Mixing radii within a single component is discouraged; reserve pills for tap targets and keep containers at 8px to signal structure.

## Components

Buttons
- Primary: #15110c background, white text, pill radius (9999px), 36px height, 8x12px padding. Use for the main action in a section.
- Secondary: #053659 background with #15110c text, pill radius, 36px height. Limit to light backgrounds and non-critical actions due to tighter contrast.
- Link: Unfilled, black text, no radius; inline with copy.

Card
- White background, black text, 8px radius, 16px internal padding, bordered with #e5e7eb when separation is needed.

### Top Navigation
- Slim horizontal bar with text links set in Figtree (20–26px range for prominence), black text on white, and a right-aligned primary pill "Get started" (36px tall). Dividers use #e5e7eb.

### Hero Marquee with Floating Cards
- Over-tall band using xl (166px) top/bottom padding. Centered display headline (Figtree 42px), short body (Times New Roman 16px), primary pill and text link. Decorative product chips can sit left/right; keep them within an 8px card radius.

### Theme Storefront Demo
- Faux shop header row above a row of product cards. Each card: 8px radius, 16px padding, title (Figtree 26px), description (Times New Roman 16px), quantity control, and primary "Add to cart" button.

### Checkout Form
- Stacked form within a card: email input, shipping method radios rendered as bordered rows, payment method selector, card fields, and a prominent primary action. Use md (20px) vertical spacing and #e5e7eb dividers.

### Studio AI Chat Dock
- Chat window card with 8px radius; message bubbles as nested cards on white. Headings at 20–26px, body at 16px. Quick-action chips rendered as small pills.

### Inventory Management Table
- Filters and tags sit above a bordered table. Header row in Figtree 20–26px; cells in Times New Roman 16px. Use #e5e7eb for grid lines; row hover states emphasize border or background tint, not shadow.

### Revenue KPI + Activity Feed
- A row of two cards: large KPI figure on the left, compact list of order events on the right. Keep consistent 8px radii and md spacing within cards.

### Blog Preview List
- Stacked article cards with title (Figtree 26–33px), meta set in the serif at 16px, and subtle dividers. Primary links use #225bff.

## Do's and Don'ts

- Do use Figtree for all headings and the serif for body at 16px; mixing families inside a paragraph reduces coherence.
- Do keep cards at 8px radius and buttons as full-pill; avoid introducing third radii.
- Do rely on #e5e7eb borders and whitespace for separation; skip drop shadows.
- Do reserve #225bff for links and key accents to preserve a simple, readable palette.
- Don't place the secondary button on dark or photo backgrounds; its #15110c text loses contrast.
- Don't crowd demos; maintain md (20px) gaps inside cards and xl (166px) breathing room in marquee sections.

## Agent Prompt Guide

Quick color reference: text #000000, background #ffffff, border #e5e7eb, accent #225bff.

1) Build the hero block
- Container on #ffffff with top/bottom padding 166px. Center a heading in Figtree 42px/1.24, weight 400, color #000000. Add a 16px Times New Roman paragraph under it. Place two CTAs: a primary pill (36px tall, 8px 12px padding, bg #15110c, text #ffffff, radius 9999px) and a text link in #000000.

2) Top navigation with CTA
- Horizontal bar on #ffffff. Left: wordmark. Center: links in Figtree 20px #000000 with 20px gaps. Right: search icon, mode toggle, and a primary pill button (36px tall, bg #15110c, text #ffffff). Use a bottom border 1px #e5e7eb.

3) Storefront product card row
- Row of 8px-radius cards (background #ffffff, 16px padding, 1px border #e5e7eb). Inside each: title Figtree 26px #000000, description Times New Roman 16px, quantity stepper, and a primary pill button (36px, #15110c on #ffffff).

4) Inventory table with filters
- Filters row using small pills (radius 9999px) and inputs. Table uses 1px #e5e7eb grid lines, header in Figtree 20px #000000, cells in Times New Roman 16px #000000, row padding 12–20px.

5) KPI + activity feed
- Two cards side-by-side on large screens; stack on small. KPI card: large figure in Figtree 33–42px #000000. Activity card: list items separated by #e5e7eb dividers, body in Times New Roman 16px. All cards 8px radius on #ffffff.

## Similar Brands

- MUI (Material UI): component-first marketing with clean docs; Astryx is warmer typographically with a serif body.
- Radix UI: neutral surfaces and precise primitives; Astryx adds richer demos (storefront, checkout, AI chat).
- Shopify Polaris: strong e-commerce examples and tables; Astryx is less teal and more black-on-white with blue accents.
- Vercel: engineering-driven clarity and black/white palette; Astryx is softer in type and uses pill buttons widely.
- Stripe: crisp blue accents and generous whitespace; Astryx is more component-demo heavy and avoids shadows.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #000000;
  --color-tertiary: #225bff;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 42px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.24;
  --text-headline-md-size: 33px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.21;
  --text-headline-sm-size: 26px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.19;
  --text-headline-xs-size: 20px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.2;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --font-figtree: "Figtree";
  --font-times-new-roman: "Times New Roman";

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

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 12px;
  --spacing-md: 20px;
  --spacing-lg: 24px;
  --spacing-xl: 166px;

  /* Components */
  --button-primary-background-color: #15110c;
  --button-primary-text-color: var(--color-neutral);
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 8px 12px;
  --button-primary-height: 36px;
  --button-secondary-background-color: #053659;
  --button-secondary-text-color: #15110c;
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 8px 12px;
  --button-secondary-height: 36px;
  --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-sm);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #000000;
  --color-tertiary: #225bff;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-surface: #ffffff;
  --color-on-surface: #000000;
  --font-headline-lg: "Figtree";
  --font-headline-md: "Figtree";
  --font-headline-sm: "Figtree";
  --font-headline-xs: "Times New Roman";
  --font-body-md: "Times New Roman";
  --text-headline-lg: 42px;
  --text-headline-md: 33px;
  --text-headline-sm: 26px;
  --text-headline-xs: 20px;
  --text-body-md: 16px;
  --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: 4px;
  --spacing-sm: 12px;
  --spacing-md: 20px;
  --spacing-lg: 24px;
  --spacing-xl: 166px;
}
```

### 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"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.133,
                    0.357,
                    1
                ],
                "hex": "#225bff"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.906,
                    0.922
                ],
                "hex": "#e5e7eb"
            }
        },
        "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": 4,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 12,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 20,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 166,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "full": {
            "$value": {
                "value": 9999,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Figtree",
                "fontSize": {
                    "value": 42,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Figtree",
                "fontSize": {
                    "value": 33,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Figtree",
                "fontSize": {
                    "value": 26,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Times New Roman",
                "fontSize": {
                    "value": 20,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Times New Roman",
                "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 Astryx**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse Design Tools →
weaveos.com
Weave Analytics
Weave
clears.ai
Clears AI
Clears
slasheditor.dev
SlashEditor Developer Tools
SlashEditor
astrobuildkit.com
Astrobuildkit Design Tools
Astrobuildkit