Skip to content
DesignMunkDesignMunk Submit a site

Tokens

tokens.studio
Single source of truth for design tokens—automate, sync, scale effortlessly.
Design Tools Developer Tools Framer Homepage Almarena Neue
Share Visit site
tokens.studio DESKTOP · 1440
Tokens

AI Breakdown

Design export

# Design brief: the Tokens 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/09162253/tokens-studio-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/09162253/tokens-studio-featured.webp
- On DesignMunk: https://designmunk.com/tokens/

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

# Tokens Studio: Oversized Display Type and Aqua CTAs

## Overview

Tokens Studio targets design-system practitioners—designers and engineers who manage tokens and multi-tool workflows. The brand voice is technical, confident, and minimal, with playful accents used sparingly. The UI should feel spacious and orderly on a bright canvas, with near-black text for clarity and one vivid accent to direct attention. When no specific token applies, favor light surfaces, firm contrast, and border-driven grouping over decorative effects.

## Colors

- **primary (#0C0F0F):** Near-black ink for headlines and core text.
- **secondary (#073339):** Deep teal for limited, supportive accents and dark chips.
- **tertiary (#38E8F5):** Electric aqua for primary actions, highlights, and key UI affordances.
- **neutral (#FFFFFF):** Page canvas and card backgrounds.
- **border (#E5E7EB):** Subtle dividers, input strokes, and card edges.
- **surface (#FFFFFF):** Alias of neutral; use for standard surfaces and sections.
- **on-surface (#0C0F0F):** Text and icons placed on surface backgrounds.

## Typography

- Almarena Neue Display ExtraBold (custom). Role: headline-lg at 80px, tight tracking (-0.03em) for hero and major statements. Not freely hosted; suggested substitutes: Anton, Bebas Neue, or League Spartan for similar bold, condensed impact.
- Almarena Neue Regular (custom). Role: body-md at 16px, long-form copy and UI labels. Not freely hosted; suggested substitutes: Inter, Work Sans, or Manrope for modern, legible UI text.
- Headline set (md 24px, sm 20px, xs 18px) uses generic sans-serif; treat as system UI fallbacks (e.g., Inter/SF/Segoe). Use md for section headers, sm for card titles, xs for eyebrow/overlines.
- Line heights: 1.2–1.22 for headings, 1.58 for body copy to maintain readable rhythm on a bright canvas.

## Layout

Spacing follows a short, practical ladder: 6 / 14 / 24 / 40 / 100px. Use xs (6) for micro gaps, sm (14) for button padding rhythm and compact stacks, md (24) for card gutters and grid gaps, lg (40) for section padding, and xl (100) to bookend major sections like the hero. Compose sections on a responsive multi-column grid; keep gutters at md or lg and let the white canvas and borders do most grouping. Prefer short line lengths for feature copy and resource cards.

## Elevation & Depth

Shadows are not part of the interface tokens (all levels: none). Depth is expressed through: 1px borders in #E5E7EB, clear contrast between #FFFFFF surfaces and #0C0F0F text, and generous whitespace. When emphasis is needed, lean on the aqua accent (#38E8F5) or a thicker border—not drop shadows.

## Shapes

Corner radii are understated: sm 4px for inputs and chips; md 8px for cards and secondary buttons; lg 10px for the primary button. Larger radii indicate higher interactivity or primary action while keeping the aesthetic rectilinear and technical.

## Components

Buttons and cards are border-first with a single accent color carrying emphasis.

- Primary Button: background #38E8F5, text #0000EE, height 40px, padding 10px 16px, radius 10px. Use for the main CTA per view.
- Secondary Button: text #0C0F0F on a neutral surface, height 40px, padding 10px 16px, radius 4px. Pair with the primary CTA.
- Link Button: unfilled, 0px radius, #0C0F0F text; reserve for low-emphasis actions.
- Card: background #FFFFFF, text #0C0F0F, 16px padding, 8px radius; add a #E5E7EB border to separate from the page canvas.

### Hero Headline Block
- Headline: 80px Display, line-height 1.2, center-aligned on #FFFFFF. Supporting body set in 16px. Vertical spacing uses xl (100px) above/below.

### Dual CTA Row
- Left: Primary button; Right: Secondary button. Gap md (24px). Place directly below hero copy.

### Floating Token Badges (Illustration)
- Decorative chips around the hero. If reproduced as UI, render as cards with 8px radius and a #E5E7EB stroke; avoid shadows.

### Product Screenshot Panel
- A wide card containing charts/code framed by a #E5E7EB border, 8px radius, padding md (24px)–lg (40px) depending on viewport.

### Feature Columns
- Three columns per row. Each item: header at 24px, body at 16px, card background #FFFFFF with 8px radius and md (24px) internal spacing.

### Social Proof Metrics Row
- Large numeric stat blocks (e.g., "300k users"), followed by one-sentence quotes. Use md (24px) gaps and border separators.

### Resource & Blog Cards
- Grid of cards with 8px radius, 16px internal padding, 1px #E5E7EB border. Titles at 20px, supporting text at 16px.

### Footer Link Columns
- Multi-column list set in 16px with sm (14px) line spacing within groups and md (24px) gaps between columns; neutral background, border-top divider.

## Do's and Don'ts

- Do reserve #38E8F5 for primary CTAs, key highlights, and active states; keep the rest monochrome.
- Do use #E5E7EB borders to separate cards and sections; avoid adding drop shadows.
- Do pair the 80px display headline with ample xl (100px) spacing so it doesn't crowd.
- Don't exceed a 10px radius; mixed, larger radii will look off-brand.
- Don't lighten core text below #0C0F0F on white; contrast is a feature here.
- Don't stack more than two CTAs together; use the dual-button pattern only.

## Agent Prompt Guide

Quick color reference — Text: #0C0F0F; Background: #FFFFFF; Border: #E5E7EB; Accent: #38E8F5.

1) Build a hero
- Background #FFFFFF; container centered.
- H1: 80px 'Almarena Neue Display ExtraBold', Anton, system-ui, sans-serif; line-height 1.2; letter-spacing -0.03em; color #0C0F0F.
- Body: 16px 'Almarena Neue Regular', Inter, system-ui, sans-serif; line-height 1.58; color #0C0F0F; max 70ch.
- Buttons: Primary — bg #38E8F5, text #0000EE, h 40px, padding 10px 16px, radius 10px. Secondary — text #0C0F0F, h 40px, padding 10px 16px, radius 4px, 1px border #E5E7EB. Gap 24px. Section padding top/bottom 100px.

2) Three-column features
- Section padding 40px top/bottom. Grid: 3 equal columns with 24px gaps.
- Each card: bg #FFFFFF; 1px border #E5E7EB; radius 8px; padding 24px.
- Title: 24px sans-serif; body: 16px; both color #0C0F0F. Optional small icon in #073339.

3) Social proof strip
- Background #FFFFFF; top/bottom padding 40px; internal gaps 24px.
- Stat number: 24px sans-serif bold; label/body: 16px.
- Use thin dividers in #E5E7EB between items; CTA link styled as button-link (#0C0F0F text).

4) Resource grid
- 2–3 columns with 24px gaps. Card: bg #FFFFFF; border #E5E7EB; radius 8px; padding 16px.
- Title 20px; excerpt 16px; link as button-link with #0C0F0F. Keep image/thumb corners at 8px to match the card.

5) Footer
- Section divider: 1px #E5E7EB. Columns with 24px gaps. Links 16px, color #0C0F0F; small meta text also 16px but 0.8 opacity of #0C0F0F if needed.

## Similar Brands

- Figma — Similar white canvas and border-first components; Figma leans more neutral with less saturated accents.
- Framer — Shares large display headlines and bright cyan accents; Framer uses more gradients and motion.
- Storybook — Technical, documentation-driven UI with restrained color; Storybook is denser and more utilitarian.
- Supernova — Design-system tooling with cards and proof sections; Supernova often employs darker surfaces and more illustration.
- Penpot — Open-source design tool with simple type and bright accents; Penpot's visuals are flatter and more product-screenshot led.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #0c0f0f;
  --color-secondary: #073339;
  --color-tertiary: #38e8f5;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 80px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.2;
  --text-headline-lg-tracking: -0.03em;
  --text-headline-md-size: 24px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.21;
  --text-headline-sm-size: 20px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.2;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.58;
  --text-body-md-tracking: -0.011em;
  --font-almarena-neue-display-extrabold: "Almarena Neue Display ExtraBold";
  --font-sans-serif: "sans-serif";
  --font-almarena-neue-regular: "Almarena Neue Regular";

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

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

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: #0000ee;
  --button-primary-rounded: var(--radius-lg);
  --button-primary-padding: 10px 16px;
  --button-primary-height: 40px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 10px 16px;
  --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: #0c0f0f;
  --color-secondary: #073339;
  --color-tertiary: #38e8f5;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-surface: #ffffff;
  --color-on-surface: #0c0f0f;
  --font-headline-lg: "Almarena Neue Display ExtraBold";
  --font-headline-md: "sans-serif";
  --font-headline-sm: "sans-serif";
  --font-headline-xs: "sans-serif";
  --font-body-md: "Almarena Neue Regular";
  --text-headline-lg: 80px;
  --text-headline-md: 24px;
  --text-headline-sm: 20px;
  --text-headline-xs: 18px;
  --text-body-md: 16px;
  --tracking-headline-lg: -0.03em;
  --tracking-body-md: -0.011em;
  --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;
  --radius-lg: 10px;
  --spacing-xs: 6px;
  --spacing-sm: 14px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 100px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.047,
                    0.059,
                    0.059
                ],
                "hex": "#0c0f0f"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.027,
                    0.2,
                    0.224
                ],
                "hex": "#073339"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.22,
                    0.91,
                    0.961
                ],
                "hex": "#38e8f5"
            }
        },
        "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.047,
                    0.059,
                    0.059
                ],
                "hex": "#0c0f0f"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 14,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 40,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 100,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 4,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 10,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Almarena Neue Display ExtraBold",
                "fontSize": {
                    "value": 80,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.03,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "sans-serif",
                "fontSize": {
                    "value": 24,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "sans-serif",
                "fontSize": {
                    "value": 20,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "sans-serif",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Almarena Neue Regular",
                "fontSize": {
                    "value": 16,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.011,
                    "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 Tokens**, 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