Yuye Pan

Generated Oct 14, 2026

DESIGN.md for voxt.actnow.dev

voxt.actnow.dev1 colors5 componentsInter

Remix

12 screenshots captured· voxt.actnow.dev

1 / 12 · Voxt — Local-first AI voice input for Mac · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: Voxt
description: |
  Voxt embodies a precise, tech-forward aesthetic grounded in clarity and
  accessibility. The design celebrates restraint: a predominantly neutral
  palette anchors minimalist layouts, while strategic use of whitespace and
  typography—especially the careful deployment of negative letter-spacing on
  display sizes—creates a sense of deliberate control and professional
  confidence. The brand communicates through subtle depth layering
  (micro-shadows and barely-there transparency shifts) rather than bold visual
  drama. This is a system designed for users who value function over ornament,
  where every pixel choice reflects purposeful hierarchy and intent. The color
  story is almost exclusively tonal: ink, near-white, and carefully measured
  greys create a calm, distraction-free environment where polished text
  output—the core product promise—remains the hero.
source:
  url: "https://voxt.actnow.dev/"
  pagesAnalyzed: 6
  extractedAt: 2026-10-14
  tokensMeasured: true
colors:
  ink: "#FFFFFF"
typography:
  display-xxl:
    fontFamily: Inter
    fontSize: 528px
    fontWeight: 600
    lineHeight: 0.74
    letterSpacing: 23.76px
  display-xl:
    fontFamily: Inter
    fontSize: 60.8px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0px
  display-lg:
    fontFamily: Inter
    fontSize: 54.4px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0px
  display-md:
    fontFamily: Inter
    fontSize: 52.8px
    fontWeight: 600
    lineHeight: 0.96
    letterSpacing: -2.11px
  display-sm:
    fontFamily: Inter
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -1.2px
  display-xs:
    fontFamily: Inter
    fontSize: 41.6px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -1.04px
  heading-xl:
    fontFamily: Inter
    fontSize: 38.4px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0px
  heading-lg:
    fontFamily: Inter
    fontSize: 35.2px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: -0.88px
  heading-md:
    fontFamily: Inter
    fontSize: 34.4px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.86px
  heading-sm:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.48px
  heading-xs:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  heading-xs-strong:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0px
  body-xl:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0px
  body-lg:
    fontFamily: Inter
    fontSize: 18.4px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: -0.18px
  body-md:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.87
    letterSpacing: 0px
  body-md-strong:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.6
    letterSpacing: 0px
  body-sm:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  body-xs:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.85
    letterSpacing: 0px
  nav:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  button-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0px
  button-md:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-sm:
    fontFamily: Inter
    fontSize: 13.44px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-xs:
    fontFamily: Inter
    fontSize: 12.8px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  caption-sm:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.67
    letterSpacing: 0px
  caption-sm-strong:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  caption-xs:
    fontFamily: Inter
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 1.32px
  code-sm:
    fontFamily: "JetBrains Mono"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  code-xs:
    fontFamily: "JetBrains Mono"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.82
    letterSpacing: 0px
rounded:
  none: 0px
  xs: 8px
  sm: 10px
  md: 12px
  lg: 14px
  xl: 18px
  xxl: 22px
  r-24: 24px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 32px
  xxxl: 48px
  section: 52px
  band: 60px
borderWidths:
  thin: 1px
shadows:
  sm: "rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px"
  md: "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px"
  lg: "rgba(15, 23, 42, 0.45) 0px 24px 60px -40px"
  xl: "rgba(91, 33, 182, 0.45) 0px 16px 40px -28px"
elevationStrategy: layered-micro
themes:
  derived: light   # the other theme is the site's measured palette
  light:
    bg: "#FBFBFB"
    surface: "#F1F1F1"
    surfaceRaised: "#E9E9E9"
    text: "#1D1D1D"
    textMuted: "#707070"
    border: "#D8D8D8"
    accent: "#707070"
    accentFg: "#FFFFFF"
    focusRing: "#8F8F8F"
    elevation: shadow
  dark:
    bg: "#0F1011"
    surface: "#0F1010"
    surfaceRaised: "#222323"
    text: "#FFFFFF"
    textMuted: "#ABABAC"
    border: "#2C2D2E"
    accent: "#FFFFFF"
    accentFg: "#0B0B0C"
    focusRing: "#FFFFFF"
    elevation: "border+surface"
gradients:
  - context: section
    kind: radial
    value: "radial-gradient(circle, oklch(0.21 0.006 285.885 / 0.18) 1px, rgba(0, 0, 0, 0) 1px)"
  - context: section
    kind: linear
    value: "linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.3))"
  - context: section
    kind: linear
    value: "repeating-linear-gradient(-32deg, oklch(0.21 0.006 285.885 / 0.08) 0px, oklch(0.21 0.006 285.885 / 0.08) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 12px)"
  - context: section
    kind: linear
    value: "url(\"https://voxt.actnow.dev/images/landing/dark-noise-2.png\"), linear-gradient(rgb(57, 55, 55), rgb(27, 27, 27))"
components:
  button-text:
    typography: "{typography.body-sm}"
    textColor: "oklch(0.985 0 0)"
    height: 48px
    padding: "0px 20px 0px 20px"
    rounded: "{rounded.xxl}"
    backgroundColor: "oklch(0.09 0.01 0)"
  button-text-sm:
    textColor: "oklch(0.21 0.006 285.885)"
    height: 34px
    padding: "4px 12px 4px 4px"
    fontSize: 16px
    fontFamily: Inter
    fontWeight: 400
    lineHeight: 1.5
    rounded: "3.35544e+07px"
    backgroundColor: "oklch(0 0 0 / 0.04)"
  button-outline:
    typography: "{typography.body-sm}"
    textColor: "oklch(0.21 0.006 285.885)"
    border: "1px solid oklab(0 0 0 / 0.08)"
    height: 48px
    padding: "0px 20px 0px 20px"
    rounded: "{rounded.xxl}"
    backgroundColor: "oklch(1 0 0)"
  card:
    textColor: "oklch(0.21 0.006 285.885)"
    border: "1px solid oklab(0 0 0 / 0.07)"
    padding: "12px 12px 12px 12px"
    fontSize: 16px
    boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(15, 23, 42, 0.45) 0px 24px 60px -40px"
    fontFamily: Inter
    fontWeight: 400
    lineHeight: 1.5
    rounded: "{rounded.xl}"
    backgroundColor: "oklch(1 0 0)"
  card-lg:
    textColor: "oklch(0.21 0.006 285.885)"
    border: "1px solid oklab(0 0 0 / 0.06)"
    padding: "28px 28px 28px 28px"
    fontSize: 16px
    boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(15, 23, 42, 0.28) 0px 16px 40px -34px"
    fontFamily: Inter
    fontWeight: 400
    lineHeight: 1.5
    rounded: "{rounded.r-24}"
    backgroundColor: "oklch(1 0 0)"
  navigation:
    textColor: "oklch(0.21 0.006 285.885)"
    height: 40px
    fontSize: 16px
    fontFamily: Inter
    fontWeight: 400
    lineHeight: 1.5
  footer:
    textColor: "{colors.ink}"
    fontSize: 16px
    fontFamily: Inter
    fontWeight: 400
    lineHeight: 1.5
  link:
    typography: "{typography.heading-xs-strong}"
    textColor: "oklch(0.21 0.006 285.885)"
  link-lg:
    typography: "{typography.body-sm}"
    textColor: "oklch(0.21 0.006 285.885)"
    border: "1px solid oklab(0 0 0 / 0.08)"
    padding: "0px 16px 0px 16px"
    rounded: 26px
    backgroundColor: "oklch(1 0 0)"
states:
  other-hover:
    target: other
    state: hover
    opacity: 1
  nav-hover:
    target: nav
    state: hover
    opacity: 1
  input-disabled:
    target: input
    state: disabled
    opacity: 0.5
  other-disabled:
    target: other
    state: disabled
    opacity: 0.5
  other-focus-visible:
    target: other
    state: focus-visible
    outlineWidth: 1px
breakpoints:
  - width: 375
    containerWidth: 343
    gridColumns: 2
    navLinksVisible: 17
    menuToggleVisible: true
    headingPx: 61
    bodyPx: 16
    sectionPaddingX: 0
  - width: 768
    containerWidth: 720
    gridColumns: 3
    navLinksVisible: 17
    menuToggleVisible: true
    headingPx: 61
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1024
    containerWidth: 896
    gridColumns: 3
    navLinksVisible: 17
    menuToggleVisible: true
    headingPx: 61
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1280
    containerWidth: 1152
    gridColumns: 3
    navLinksVisible: 17
    menuToggleVisible: true
    headingPx: 61
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1440
    containerWidth: 1320
    gridColumns: 3
    navLinksVisible: 17
    menuToggleVisible: true
    headingPx: 61
    bodyPx: 16
    sectionPaddingX: 0
coverage:
  statesFound: 61
  gradientsFound: 4
  rolesUnassigned: 0
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: false
  semanticRampDeclared: false

Design System Inspired by Voxt

1. Visual Theme & Atmosphere

Voxt embodies a precise, tech-forward aesthetic grounded in clarity and accessibility. The design celebrates restraint: a predominantly neutral palette anchors minimalist layouts, while strategic use of whitespace and typography—especially the careful deployment of negative letter-spacing on display sizes—creates a sense of deliberate control and professional confidence. The brand communicates through subtle depth layering (micro-shadows and barely-there transparency shifts) rather than bold visual drama. This is a system designed for users who value function over ornament, where every pixel choice reflects purposeful hierarchy and intent. The color story is almost exclusively tonal: ink, near-white, and carefully measured greys create a calm, distraction-free environment where polished text output—the core product promise—remains the hero.

Key Characteristics

Minimal, neutral-forward palette (no vibrant accent; all greys and whites)
Precise typography with tight tracking on headlines and generous line-height on body text
Micro-layered shadows and soft depth—elevation comes from barely-perceptible opacity shifts
Generous whitespace and breathing room between elements
Pill-shaped interactive controls (border-radius: {rounded.full}) paired with sharp or highly-rounded card surfaces
No decorative color; all ornament is structural (gradients, noise textures, patterns)

2. Color Palette & Roles

Primary / Brand

Ink (#FFFFFF): Primary text color for headings, labels, and critical information. Used throughout the interface for maximum contrast and legibility.

Neutral Scale

The extracted tokens reveal a single declared neutral: {colors.ink} (#FFFFFF). This represents text color. The system computes additional neutrals through CSS variables and color-mix functions (backgrounds, borders, surfaces), but these are not directly extracted. Backgrounds are inferred as near-white or off-white based on button and card rendering against the page.

Canvas / Page Background: Near-white to off-white (inferred from card and button contrast; not explicitly extracted)
Card Surface: #FFFFFF or near-white with subtle borders
Border / Hairline: Very light grey, approximately oklch(0 0 0 / 0.06) to oklch(0 0 0 / 0.08) (measured on card and button borders)

Interactive & Surfaces

Interactive elements (buttons, inputs) render with extremely subtle background colors and near-transparent borders. The system relies on opacity shifts and borders rather than color fill to indicate state.

Button Fill (Primary): oklch(0.09 0.01 0) — nearly black, used for primary call-to-action buttons
Button Text (Primary CTA): oklch(0.985 0 0) — near-white, ensuring contrast
Button Outline (Secondary): oklch(1 0 0) — white/transparent fill with thin border, for secondary or ghost actions
Input Background: oklch(0 0 0 / 0.04) — barely perceptible tint; relies on border for definition
Hairline / Border: oklab(0 0 0 / 0.08) to oklab(0 0 0 / 0.1) — ultra-light grey boundaries

3. Typography Rules

Font Family

Primary: Inter (sans-serif) Fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif

Secondary (Code): JetBrains Mono (monospace) Fallback: "Courier New", monospace

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display XXL	Inter	528px	600	0.74	23.76px	Hero-scale headlines; extreme tight tracking
Display XL	Inter	60.8px	600	1.0	0px	Primary page title; tight vertical set
Display LG	Inter	54.4px	600	1.5	0px	Major section headers
Display SM	Inter	48px	600	1.25	-1.2px	Large display; negative tracking
Display XS	Inter	41.6px	600	1.25	-1.04px	Display-scale with tight tracking
Display MD	Inter	52.8px	600	0.96	-2.11px	Hero heading; prominent negative tracking
Heading XL	Inter	38.4px	600	1.5	0px	Major section titles
Heading LG	Inter	35.2px	600	1.5	-0.88px	Large section headings
Heading MD	Inter	34.4px	600	1.25	-0.86px	Medium section headings
Heading SM	Inter	24px	600	1.25	-0.48px	Small headings; subtle tracking
Heading XS	Inter	16px	500	1.5	0px or -0.16px	Small labels, tertiary headings
Heading XS Strong	Inter	16px	600	1.5	0px	Emphasized small heading
Body XL	Inter	24px	600	1.0	0px	Large body emphasis
Body MD Strong	Inter	15px	600	1.6	0px	Emphasized body copy
Body LG	Inter	18.4px	400	1.65	-0.18px	Large body text
Body MD	Inter	15px	400	1.87	0px	Standard body text; generous line spacing
Body SM	Inter	14px	500	1.43	0px	Smaller body, medium weight
Body XS	Inter	13px	400	1.85	0px	Extra-small body text
Button LG	Inter	18px	500	1.33	0px	Large button copy
Button MD	Inter	15px	500	1.5	0px	Standard button text
Button SM	Inter	13.44px	500	1.5	0px	Small button copy
Button XS	Inter	12.8px	500	1.5	0px	Extra-small button; icon labels
Caption SM Strong	Inter	12px	500	1.5	0px	Emphasized caption
Caption SM	Inter	12px	400	1.67	0px	Standard caption; annotation
Caption XS	Inter	11px	500	1.5	1.32px	Tiny label; expanded tracking
Navigation	Inter	15px	400	1.6	0px	Nav links and breadcrumbs
Code SM	JetBrains Mono	12px	500	1.43	0px	Inline code; medium weight
Code XS	JetBrains Mono	11px	400	1.82	0px	Tiny code; light weight

Principles

Tracking is intentional: Display sizes carry negative letter-spacing (−2.11px on display-md, −1.2px on display-sm) to tighten the visual weight; body text has neutral or positive spacing for readability.
Line height scales with size: Small text (13px–15px) gets 1.6–1.87 line-height; large display text (48px+) compresses to 0.74–1.5 for impact.
Weight hierarchy: Body text is consistently 400 (regular); headings and buttons shift to 500–600 to signal hierarchy; code uses 400–500 to preserve monospace rhythm.
Caption emphasis: Caption XS uses 1.32px letter-spacing to make tiny text more legible and distinct.

4. Component Stylings

Buttons

Primary Button (`.button:not(.outline)`)

Background: oklch(0.09 0.01 0) (near-black)
Text Color: oklch(0.985 0 0) (near-white)
Font: Inter, 14px, weight 500, line-height 20px ({typography.button-md})
Padding: 0px 20px
Height: 48px
Border Radius: {rounded.xxl} (22px)
Border: None
Box Shadow: {rounded.xs} shadow (subtle micro-lift)
Hover State: Color shifts inferred from interaction data; specific state values not extracted
Width: Auto (content + padding)

Secondary Button (`.button.outline`)

Background: oklch(1 0 0) (white/transparent)
Text Color: oklch(0.21 0.006 285.885) (dark neutral)
Font: Inter, 14px, weight 500, line-height 20px
Padding: 0px 20px
Height: 48px
Border Radius: {rounded.xxl} (22px)
Border: 1px solid oklab(0 0 0 / 0.08) (hairline grey)
Box Shadow: None
Hover State: Border and background may shift per CSS variables

Button Small Variant (`.button-sm`)

Background: oklch(0 0 0 / 0.04) (barely-tinted)
Text Color: oklch(0.21 0.006 285.885) (dark)
Font: Inter, 16px, weight 400, line-height 24px
Padding: 4px 12px
Height: 34px
Border Radius: {rounded.full} (pill; 9999px computed)
Border: None visible (0px)
Box Shadow: None
Use: Icon labels, compact actions

Cards & Containers

Card Default

Background: oklch(1 0 0) (white)
Text Color: oklch(0.21 0.006 285.885) (dark)
Font: Inter, 16px, weight 400, line-height 24px
Padding: {spacing.sm} (12px all sides)
Width: 360px (measured)
Height: 267px (content-dependent)
Border Radius: {rounded.xl} (18px)
Border: 1px solid oklab(0 0 0 / 0.07) (hairline)
Box Shadow: rgba(15, 23, 42, 0.45) 0px 24px 60px -40px (layered-micro; deepest lift)

Card Large Variant

Background: oklch(1 0 0) (white)
Text Color: oklch(0.21 0.006 285.885) (dark)
Font: Inter, 16px, weight 400, line-height 24px
Padding: {spacing.xxl} (28px all sides)
Width: 632px (measured)
Height: Auto (content-driven)
Border Radius: {rounded.r-24} (24px)
Border: 1px solid oklab(0 0 0 / 0.06) (hairline, even lighter)
Box Shadow: rgba(15, 23, 42, 0.28) 0px 16px 40px -34px (lighter layered-micro)

Inputs & Forms

Input Default

Background: oklch(0 0 0 / 0.04) (barely-perceptible tint)
Text Color: oklch(0.21 0.006 285.885) (dark)
Font: Inter, 14px–16px, weight 400
Padding: Typically {spacing.md} (16px) horizontal, {spacing.sm} (12px) vertical (standard form spacing)
Border Radius: {rounded.md} (12px) typical; varies by context
Border: 1px solid oklab(0 0 0 / 0.1) (hairline grey)
Box Shadow: None
Disabled State: opacity: 0.5
Focus: State-specific behaviors inferred but not fully extracted

Navigation

Navigation Default (Header/Menu)

Background: rgba(0, 0, 0, 0) (transparent)
Text Color: oklch(0.21 0.006 285.885) (dark)
Font: Inter, 15px, weight 400, line-height 1.6 ({typography.nav})
Padding: 0px (no internal padding; spacing via margin)
Height: 40px (measured; implies vertical centering)
Border Radius: {rounded.none} (0px)
Border: None
Box Shadow: None
Hover State: Color may shift to accent or lighter variant per CSS variables
Focus State: May highlight accent color

Badges & Labels

Badge (`.button.text-sm`)

Background: oklch(0 0 0 / 0.04) (barely-tinted)
Text Color: oklch(0.21 0.006 285.885) (dark)
Font: Inter, 16px, weight 400, line-height 24px
Padding: 4px 12px (compact)
Border Radius: {rounded.full} (pill)
Border: None
Use: Labels, tags, status indicators (non-semantic color; purely tonal)

5. Layout Principles

Spacing System

Base Unit: {spacing.xs} = 8px

Scale (all multiples of 4px or 8px):

{spacing.xxs} = 4px — micro-spacing (borders, hairlines)
{spacing.xs} = 8px — tight spacing between elements
{spacing.sm} = 12px — compact spacing; card internals
{spacing.md} = 16px — standard spacing; padding, margins
{spacing.lg} = 20px — generous spacing; button padding
{spacing.xl} = 24px — section internal spacing
{spacing.xxl} = 32px — large section gaps
{spacing.xxxl} = 48px — major layout breaks
{spacing.section} = 52px — content section vertical rhythm
{spacing.band} = 60px — full-width section separation

Usage Context:

Button internals: {spacing.lg} (20px horizontal padding)
Card internals: {spacing.sm} to {spacing.xxl} (12–32px depending on card size)
Between sections: {spacing.band} (60px) for major visual breaks
Text-to-margin: {spacing.md} (16px) as default breathing room

Grid & Container

Max Width: Approximately 1440px at desktop (measured at 1440px viewport)
Content Column Width: Scales with viewport:
- 375px viewport: 343px content (16px margin per side)
- 768px–1440px: scales proportionally (centered)
Column Strategy: 3-column grid at tablet and above; 2-column at mobile (375px); single-column or flexible below
Section Padding (X): 0px measured at all breakpoints; breathing room achieved via max-width container and flexbox alignment, not section-level padding

Whitespace Philosophy

Whitespace is the system's primary organizational tool. Elements are separated by measured spacing scales rather than borders. Cards float on white backgrounds with hairline borders and micro-shadows, creating depth through absence of color rather than visual weight. Navigation is spread horizontally with generous gaps. Sections stack vertically with {spacing.band} (60px) between, creating clear visual pauses. This creates a calm, uncluttered interface where the eye moves deliberately from element to element.

Border Radius Scale

{rounded.none} = 0px — sharp edges; images, full-width sections
{rounded.xs} = 8px — subtle rounding; small buttons
{rounded.sm} = 10px — light rounding; minor components
{rounded.md} = 12px — standard rounding; inputs, default cards
{rounded.lg} = 14px — gentle rounding; medium containers
{rounded.xl} = 18px — pronounced rounding; cards, large components
{rounded.xxl} = 22px — very round; primary buttons, prominent cards
{rounded.r-24} = 24px — extra round; large cards
{rounded.full} = 9999px — pill/circle; badges, toggle buttons, small labels

Component Contexts:

Primary buttons: {rounded.xxl} (22px)
Small badge/label buttons: {rounded.full} (pill)
Cards: {rounded.xl} (18px) for default, {rounded.r-24} (24px) for large
Inputs: {rounded.md} (12px) typical
Images: {rounded.none} (0px) sharp

Border Widths

Thin = 1px — hairline borders on cards, buttons, inputs
- Applied to: card borders, secondary button borders, input borders
- Used to define surface boundaries without visual weight

6. Depth & Elevation

Level	Treatment	Use
Flat	No shadow; `box-shadow: none`	Buttons (outline variant), inputs, transparent nav, flat backgrounds
Micro	`rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`	Primary buttons, subtle hover states
Medium	`rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px`	Custom components, moderate lift
Large	`rgba(15, 23, 42, 0.45) 0px 24px 60px -40px`	Default card shadow; primary surface lift
Extra Large	`rgba(91, 33, 182, 0.45) 0px 16px 40px -28px`	Accent card shadow (colored depth)

Shadow Philosophy

The system uses layered-micro elevation: many near-transparent layers stack to create barely-perceptible depth. Rather than a single strong shadow, multiple blur radii and color opacities (0.1–0.45) compound to lift surfaces off the background. This preserves the minimalist aesthetic—depth exists, but subtly. The largest shadows (card shadows) top out at 24–60px blur with negative vertical offset (−40px to −28px), creating a sense of floating without drama. Colors range from near-black (rgba(15, 23, 42, 0.45)) to purple-tinted accent (rgba(91, 33, 182, 0.45)), tying depth to the brand's color story.

Opacity Levels

The system employs opacity shifts for interaction and state clarity:

100% (1.0) — Default, fully visible elements
75% (0.75) — Hover states, subtle emphasis
55% (0.55) — Secondary layers, reduced emphasis
45% (0.45) — Shadow/depth color opacity
40% (0.40) — Overlay or muted elements
35% (0.35) — Subtle background textures, noise
14% (0.14) — Extremely faint accents, backgrounds

These shifts replace color changes in many interaction contexts, keeping the palette stable while signaling state through transparency.

Z-index / Layering

The stacking scale governs layering order:

Base = 1–2 — Default document flow; cards, body content
Dropdown = 10, 20, 30 — Modals, popovers, menus (progressive layering for nested dropdowns)
Sticky/Fixed = 50 — Fixed headers, sticky navigation, always-on-top elements

This minimal scale reflects the site's restrained use of overlays. Most content stacks naturally; only modals and menus require explicit z-index control.

7. Do's and Don'ts

Do

Use the spacing scale consistently: Choose from {spacing.xs} through {spacing.band} rather than arbitrary values. Align all margins, padding, and gaps to this scale.
Apply negative letter-spacing on display sizes: Headlines at 40px+ should carry −0.5px to −2.11px tracking to tighten visual weight. Body text stays neutral (0px).
Layer shadows for depth, not weight: Combine micro and medium shadows (multiple blur radii) rather than one strong shadow. Keep shadow opacity below 0.5 to preserve minimalism.
Use pill-shaped buttons for primary actions: Apply {rounded.full} (9999px) to badge buttons and secondary interactive controls; {rounded.xxl} (22px) to primary buttons.
Rely on hairline borders for definition: Use 1px solid oklab(0 0 0 / 0.08) to separate surfaces without adding visual clutter.
Preserve the tonal palette: New colors must respect the existing neutral-forward system. Avoid vibrant accents; prefer opacity shifts and border shifts.
Test for accessibility: Ensure all text contrast meets WCAG AA. The near-white text on near-black buttons meets this; confirm custom color combinations do the same.
Keep card internals generous: Use {spacing.md} to {spacing.xl} (16–24px) for padding so content breathes.

Don't

Invent spacing values: Do not use 7px, 18px, or 25px. Stick to the published scale.
Flatten the hierarchy: Display sizes must be 600 weight; body must stay 400–500. Do not use 700+ weights or underweight display text.
Use saturated or vibrant colors: The system has no place for neon, bright primary colors, or status-color red/green/yellow. All colors are tonal or near-white.
Round buttons sharply: Primary buttons must be {rounded.xxl} (22px minimum); only small badges use {rounded.full}.
Add hard drop shadows: Shadows must use layered micro-blur (multiple shadow values stacked) with opacity ≤ 0.45. Avoid single, strong, dark shadows.
Omit negative tracking on headlines: Display-scale text (40px+) without tight tracking looks loose and loses impact. Apply −0.5px to −2.11px as measured.
Mix fonts gratuitously: Inter for body/UI, JetBrains Mono for code only. Do not introduce serif, script, or other display faces.
Over-pad card internals: Cards should feel spacious but not bloated. 12–28px internal padding is the range; beyond that, content feels lost.
Apply color to indicate state: Use opacity shifts ({opacity} values) or border color changes instead of adding new fill colors for hover/active/disabled states.

8. Responsive Behavior

Breakpoints

Breakpoint	Viewport Width	Content Width	Grid Columns	Key Changes
Mobile	375px	343px	2	Nav links all visible; section padding 0px; font sizes preserved
Tablet	768px	720px	3	More breathing room; 3-column grid enabled; card widths expand
Desktop	1024px	896px	3	Full layout available; all interactive elements visible
Large Desktop	1280px	1152px	3	Max width nears limit; margin increases symmetrically
Full	1440px	1320px	3	System max width reached; centered on larger screens

Collapse Point: The navigation does not collapse to a hamburger menu in the measured breakpoints (375px–1440px). All nav links remain visible and accessible. If a collapse point exists, it occurs below 375px.

Touch Targets

Minimum interactive element sizes for touch platforms:

Buttons: 48px height minimum (observed on primary and secondary buttons)
Links: 40px height implied (navigation default measured at 40px)
Small badge buttons: 34px height minimum (observed on .button-sm)
Horizontal padding: 16px minimum on buttons and links to allow comfortable tap zones
Spacing between adjacent interactive elements: {spacing.md} (16px) to prevent accidental presses

Collapsing Strategy

Typography: Font sizes do NOT scale down at mobile; 48px headline stays 48px at 375px viewport. Breaks are managed via line-height and letter-spacing, not size reduction.
Cards: Card widths adapt to container width (360px on mobile, expanding to 632px at desktop); internal padding stays consistent ({spacing.sm}–{spacing.xxl}).
Columns: Content reflows from 3-column to 2-column at 375px mobile. No single-column layout observed; grid always maintains at least 2 columns.
Spacing: Horizontal section padding is 0px (consistent across all breakpoints); vertical spacing between sections remains {spacing.band} (60px).
Button sizes: Primary buttons stay 48px tall and 152px wide; small buttons stay 34px. No size reduction observed across breakpoints.
Navigation: Stays horizontal and fully visible; no mobile menu toggle observed in captured range.

9. Agent Prompt Guide

Quick Color Reference

Primary CTA Fill: oklch(0.09 0.01 0) (near-black; button background)
Primary CTA Text: oklch(0.985 0 0) (near-white)
Secondary Button Fill: oklch(1 0 0) (white)
Secondary Button Border: oklab(0 0 0 / 0.08) (hairline grey)
Card Background: oklch(1 0 0) (white)
Card Border: oklab(0 0 0 / 0.07) to oklab(0 0 0 / 0.06) (hairline)
Card Shadow: rgba(15, 23, 42, 0.45) 0px 24px 60px -40px (default), rgba(91, 33, 182, 0.45) 0px 16px 40px -28px (accent)
Page Background: Near-white (inferred; not explicitly extracted)
Body Text: oklch(0.21 0.006 285.885) (dark neutral)
Input Background: oklch(0 0 0 / 0.04) (barely-tinted)
Input Border: oklab(0 0 0 / 0.1) (light hairline)

Iteration Guide

Start with Inter font at measured sizes: Do not approximate. Use exact px values from the typography table (e.g., 60.8px for {typography.display-xl}, not 60px or 64px).
Apply negative tracking to display text: Any headline at 40px+ must carry letter-spacing of −0.5px to −2.11px depending on size. Measure on provided scale.
Use the spacing scale, not pixels: Replace all custom padding/margin with scale tokens ({spacing.xs} = 8px, {spacing.md} = 16px, etc.). Never invent an in-between value.
Build cards with hairline borders + micro-shadows: Combine 1px solid oklab(0 0 0 / 0.07) border with the measured card shadow CSS. Do not flatten or simplify.
Pill-shape small interactive elements: Badges, small badges, toggle states: use border-radius: {rounded.full} (9999px). Primary buttons use {rounded.xxl} (22px).
Replace color changes with opacity shifts: Hover, active, disabled states should adjust opacity (scale: 0.75, 0.55, 0.45, 0.35) or border color, not fill color. Only buttons and inputs use fill color explicitly.
Preserve the neutral palette: Do not add vibrant accents, status colors, or saturated tints. The system is tonal; depth and state come from opacity, borders, and shadows.
Set line-height per role, not globally: Body is 1.6–1.87; display is 0.74–1.5. Use values from the hierarchy table.
Test card radius by variant: Default cards are {rounded.xl} (18px); large cards are {rounded.r-24} (24px); buttons are {rounded.xxl} (22px). Do not homogenize.
Confirm shadow values match: Card shadows are multi-layer with specific color and offset (e.g., rgba(15, 23, 42, 0.45) 0px 24px 60px -40px). Copy exactly; do not simplify to a single shadow.

10. Known Gaps

Semantic colors: The site does not expose error, success, warning, or info colors. No semantic status ramp exists; do not invent one.
Interaction states (partial): CSS variables hint at hover/focus/active states (var(--foreground), var(--accent), etc.), but specific hex or oklch() values for these states were not extracted. Implementation may require reading CSS variables or inferring from context.
Dark mode / theme variants: Only one theme (light) was extracted and measured. The presence of CSS variable references suggests possible dark-mode support, but the dark palette was not captured; it is not part of this document.
Gradients and decorative textures: Section backgrounds use radial and linear gradients plus noise textures (see extracted Gradients block). These are purely decorative and not part of the core color/typography system; they are not required for baseline component implementation.
Motion / transitions: No animation curves, durations, or easing functions were extracted. Hover and focus states exist but have no measured transition timings.
Font variable details: Inter and JetBrains Mono weights, styles, and variable font axes (if present) were not characterized beyond the weights listed in the hierarchy.
Surfaces behind authentication: The site's private or user-account areas were not visited or analyzed. Design patterns for authenticated states, dashboards, or account management are not documented.
Accessibility tokens: Color contrast ratios, focus indicators, and ARIA-related styling were not explicitly measured; compliance is inferred from measured color pairs but not verified.
Component animation states: Loading, progress, or animated states (spinners, progress bars) are not part of the extracted data.
Print or export styles: No print stylesheet or export-specific styling was measured.

Want a DESIGN.md like this for your own website?

Design tokens

Extracted from voxt.actnow.dev

Neutral

#FFFFFF

Headings / primary text

Typography · Inter

body13px · 400 · 24px

body15px · 400 · 28px

caption12px · 400 · 20px

body14px · 500 · 20px

display528px · 600 · 390.72px

h152.8px · 600 · 50.688px

button12.8px · 500 · 19.2px

body18.4px · 400 · 30.36px

body15px · 600 · 24px

body24px · 600 · 24px

body18px · 600 · 28px

body13px · 500 · 13px

body14px · 400 · 20px

h224px · 600 · 30px

nav-link15px · 400 · 24px

link15px · 400 · 24px

h316px · 500 · 24px

body14.72px · 500 · 22.08px

h160.8px · 600 · 60.8px

h254.4px · 600 · 81.6px

h335.2px · 600 · 52.8px

h416px · 600 · 24px

button18px · 500 · 24px

list-item15px · 400 · 22.5px

body16px · 400 · 32px

heading34.4px · 600 · 43px

body16px · 500 · 28px

body18px · 400 · 32px

display41.6px · 600 · 52px

heading38.4px · 600 · 57.6px

body17px · 400 · 32px

display48px · 600 · 60px

display44.8px · 600 · 53.76px

caption11px · 500 · 16.5px

button15px · 500 · 22.5px

caption12px · 500 · 18px

h316px · 500 · 24px

link14px · 400 · 24px

body13px · 500 · 19.5px

h230.4px · 600 · 34.048px

body16.32px · 400 · 28.0704px

button13.44px · 500 · 20.16px

body14.72px · 400 · 24px

h320px · 600 · 30px

link16px · 400 · 24px

Typography · JetBrains Mono

code12px · 500 · 17.1429px

code11px · 400 · 20px

Spacing

8px

12px

4px

20px

16px

32px

80px

52px

Elevation

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(15, 23, 42, 0.45) 0px 24px 60px -40px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(91, 33, 182, 0.45) 0px 16px 40px -28px

Components · 5

Remixes of voxt.actnow.dev

Latest remixes

No public remixes yet. Be the first to make one.

Remix it

DESIGN.md for voxt.actnow.dev

Preview

Design System Inspired by Voxt

1. Visual Theme & Atmosphere

2. Color Palette & Roles

Primary / Brand

Neutral Scale

Interactive & Surfaces

3. Typography Rules

Font Family

Hierarchy

Principles

4. Component Stylings

Buttons

Primary Button (.button:not(.outline))

Secondary Button (.button.outline)

Button Small Variant (.button-sm)

Cards & Containers

Card Default

Card Large Variant

Inputs & Forms

Input Default

Navigation

Navigation Default (Header/Menu)

Navigation Link (Styled as .link.default-lg)

Links

Link Default

Badges & Labels

Badge (.button.text-sm)

5. Layout Principles

Spacing System

Grid & Container

Whitespace Philosophy

Border Radius Scale

Border Widths

6. Depth & Elevation

Opacity Levels

Z-index / Layering

7. Do's and Don'ts

Do

Don't

8. Responsive Behavior

Breakpoints

Touch Targets

Collapsing Strategy

9. Agent Prompt Guide

Quick Color Reference

Iteration Guide

10. Known Gaps

Remixes of voxt.actnow.dev

Preview

Design System Inspired by Voxt

1. Visual Theme & Atmosphere

2. Color Palette & Roles

Primary / Brand

Neutral Scale

Interactive & Surfaces

3. Typography Rules

Font Family

Hierarchy

Principles

4. Component Stylings

Buttons

Primary Button (.button:not(.outline))

Secondary Button (.button.outline)

Button Small Variant (.button-sm)

Cards & Containers

Card Default

Card Large Variant

Inputs & Forms

Input Default

Navigation

Navigation Default (Header/Menu)

Navigation Link (Styled as .link.default-lg)

Links

Link Default

Badges & Labels

Badge (.button.text-sm)

5. Layout Principles

Spacing System

Primary Button (`.button:not(.outline)`)

Secondary Button (`.button.outline`)

Button Small Variant (`.button-sm`)

Navigation Link (Styled as `.link.default-lg`)

Badge (`.button.text-sm`)

Primary Button (`.button:not(.outline)`)

Secondary Button (`.button.outline`)

Button Small Variant (`.button-sm`)

Navigation Link (Styled as `.link.default-lg`)

Badge (`.button.text-sm`)