A DesignMD user

Generated Nov 4, 2026

DESIGN.md for cssstudio.ai

cssstudio.ai11 colors6 componentsTASA Orbiter

Remix

12 screenshots captured· cssstudio.ai

1 / 12 · CSS Studio. You and your agent. Designing together. · Above the fold

Preview

the generated design system

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

Design tokens

version: alpha
name: Cssstudio
description: |
  CSS Studio's design system embodies a stark, developer-forward aesthetic built
  on deep charcoal and near-black surfaces paired with a vibrant mint-green
  accent. The visual language is deliberately minimal and code-centric,
  leveraging monospaced typography and geometric precision to reinforce the
  tool's technical nature. Surfaces are intentionally dark to reduce eye strain
  during extended design work, while the electric primary accent (#34D399)
  provides high contrast and immediately signals interactive elements. The
  palette avoids ornament; depth comes from subtle colour shifts and carefully
  calibrated opacity rather than shadows or gradients. This is a system built
  for makers who value clarity and efficiency over decoration.
source:
  url: "https://cssstudio.ai/"
  pagesAnalyzed: 6
  extractedAt: 2026-11-04
  tokensMeasured: true
colors:
  primary: "#34D399"
  canvas: "#0D1111"
  ink: "#FFFFFF"
  hairline: "#1E1E20"
  error: "#FF1231"
  success: "#2DD4BF"
  accent-1: "#B08DF0"
  accent-2: "#3B82F6"
  neutral-1: "#7A8180"
  neutral-2: "#E8EEEE"
  neutral-3: "#000000"
typography:
  display-xl:
    fontFamily: "TASA Orbiter"
    fontSize: 76px
    fontWeight: 700
    lineHeight: 0.92
    letterSpacing: -3.04px
  display-lg:
    fontFamily: "TASA Orbiter"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.02
    letterSpacing: -1.34px
  display-lg-tight:
    fontFamily: "TASA Orbiter"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1.68px
  display-md:
    fontFamily: "TASA Orbiter"
    fontSize: 44px
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: -1.23px
  display-sm:
    fontFamily: "TASA Orbiter"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -1.4px
  display-sm-strong:
    fontFamily: "TASA Orbiter"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1.4px
  heading-lg:
    fontFamily: "TASA Orbiter"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.02
    letterSpacing: -1.44px
  heading-md:
    fontFamily: "TASA Orbiter"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.75px
  heading-md-strong:
    fontFamily: "TASA Orbiter"
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -1.2px
  heading-md-loose:
    fontFamily: "TASA Orbiter"
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.75px
  heading-sm:
    fontFamily: "TASA Orbiter"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.4px
  heading-xs:
    fontFamily: "TASA Orbiter"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.16px
  body-md:
    fontFamily: "TASA Orbiter"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: -0.16px
  body-md-2:
    fontFamily: "TASA Orbiter"
    fontSize: 16px
    fontWeight: 400
    letterSpacing: 0px
  body-sm:
    fontFamily: "TASA Orbiter"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: -0.15px
  body-sm-tight:
    fontFamily: "TASA Orbiter"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.35
    letterSpacing: 0px
  body-sm-loose:
    fontFamily: "TASA Orbiter"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.58
    letterSpacing: 0px
  body-xs:
    fontFamily: "TASA Orbiter"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: -0.14px
  label:
    fontFamily: "TASA Orbiter"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: -0.3px
  caption-sm:
    fontFamily: "TASA Orbiter"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  caption-sm-tight:
    fontFamily: "TASA Orbiter"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.12px
  caption-sm-apple-system:
    fontFamily: -apple-system
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  caption-xs:
    fontFamily: "TASA Orbiter"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0.22px
  caption-xs-tight:
    fontFamily: "TASA Orbiter"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0px
  caption-xs-uppercase:
    fontFamily: "TASA Orbiter"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0.66px
    textTransform: uppercase
  code-sm:
    fontFamily: "Geist Mono"
    fontSize: 13.5px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: -0.4px
  code-xs:
    fontFamily: "Geist Mono"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0px
  code-xs-uppercase:
    fontFamily: "Geist Mono"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 1.32px
    textTransform: uppercase
  code-xs-2:
    fontFamily: "Geist Mono"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0.88px
    textTransform: uppercase
  code-xs-3:
    fontFamily: "Geist Mono"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 1.54px
    textTransform: uppercase
  code-xs-strong:
    fontFamily: "Geist Mono"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
rounded:
  none: 0px
  xs: 2px
  sm: 3px
  md: 4px
  lg: 5px
  xl: 6px
  xxl: 8px
  r-10: 10px
  r-12: 12px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 32px
  xxxl: 36px
  section: 40px
  band: 44px
borderWidths:
  thin: 1px
shadows:
  sm: "rgba(0, 0, 0, 0.55) 0px 20px 40px -12px, rgba(0, 0, 0, 0.3) 0px 6px 16px -6px"
  md: "rgba(0, 0, 0, 0.4) 0px 8px 24px 0px"
  lg: "rgba(10, 10, 10, 0.18) 0px 30px 60px -24px, rgba(10, 10, 10, 0.1) 0px 10px 20px -10px"
  xl: "rgba(255, 255, 255, 0.06) 0px 0px 0px 1px"
elevationStrategy: progressive
themes:
  derived: light   # the other theme is the site's measured palette
  light:
    bg: "#F8FEFC"
    surface: "#EEF4F2"
    surfaceRaised: "#E7ECEA"
    text: "#131B18"
    textMuted: "#696F6E"
    border: "#D5DAD9"
    accent: "#1D845F"
    accentFg: "#FFFFFF"
    focusRing: "#24A676"
    elevation: shadow
  dark:
    bg: "#0D1111"
    surface: "#0D1010"
    surfaceRaised: "#202323"
    text: "#FFFFFF"
    textMuted: "#AAACAC"
    border: "#1E1E20"
    accent: "#34D399"
    accentFg: "#0B0B0C"
    focusRing: "#34D399"
    elevation: "border+surface"
gradients:
  - context: section
    kind: linear
    value: "repeating-linear-gradient(119deg, oklch(0.145 0.01 148 / 0.4) 0px, oklch(0.145 0.01 148 / 0.4) 1.5px, oklch(0.145 0.01 148) 1.5px, oklch(0.145 0.01 148) 8px)"
  - context: section
    kind: linear
    value: "linear-gradient(to right, oklch(0.94 0.008 96) 14px, rgba(0, 0, 0, 0) 14px, rgba(0, 0, 0, 0) calc(100% - 14px), oklch(0.94 0.008 96) calc(100% - 14px)), linear-gradient(to right, oklch(0.94 0.008 96) 14px, rgba(0, 0, 0, 0) 14px, rgba(0, 0, 0, 0) calc(100% - 14px), oklch(0.94 0.008 96) calc(100% - 14px)), linear-gradient(oklch(0.94 0.008 96) 14px, rgba(0, 0, 0, 0) 14px, rgba(0, 0, 0, 0) calc(100% - 14px), oklch(0.94 0.008 96) calc(100% - 14px)), linear-gradient(oklch(0.94 0.008 96) 14px, rgba(0, 0, 0, 0) 14px, rgba(0, 0, 0, 0) calc(100% - 14px), oklch(0.94 0.008 96) calc(100% - 14px))"
  - context: section
    kind: linear
    value: "repeating-linear-gradient(119deg, color(srgb 0.927453 0.922291 0.899187 / 0.2) 0px, color(srgb 0.927453 0.922291 0.899187 / 0.2) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 5px)"
  - context: section
    kind: linear
    value: "linear-gradient(to right, oklch(0.94 0.008 96) 12px, rgba(0, 0, 0, 0) 12px, rgba(0, 0, 0, 0) calc(100% - 12px), oklch(0.94 0.008 96) calc(100% - 12px)), linear-gradient(to right, oklch(0.94 0.008 96) 12px, rgba(0, 0, 0, 0) 12px, rgba(0, 0, 0, 0) calc(100% - 12px), oklch(0.94 0.008 96) calc(100% - 12px)), linear-gradient(oklch(0.94 0.008 96) 12px, rgba(0, 0, 0, 0) 12px, rgba(0, 0, 0, 0) calc(100% - 12px), oklch(0.94 0.008 96) calc(100% - 12px)), linear-gradient(oklch(0.94 0.008 96) 12px, rgba(0, 0, 0, 0) 12px, rgba(0, 0, 0, 0) calc(100% - 12px), oklch(0.94 0.008 96) calc(100% - 12px))"
  - context: hero
    kind: linear
    value: "repeating-linear-gradient(119deg, color(srgb 0.927453 0.922291 0.899187 / 0.1) 0px, color(srgb 0.927453 0.922291 0.899187 / 0.1) 2px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 8px)"
  - context: section
    kind: linear
    value: "repeating-linear-gradient(119deg, color(srgb 0.927453 0.922291 0.899187 / 0.1) 0px, color(srgb 0.927453 0.922291 0.899187 / 0.1) 2px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 8px)"
components:
  button-outline:
    typography: "{typography.code-xs-uppercase}"
    textColor: "oklch(0.145 0.01 148)"
    border: "1px solid oklch(0.94 0.008 96)"
    height: 48px
    padding: "12px 18px 12px 18px"
    backgroundColor: "oklch(0.94 0.008 96)"
  button-primary:
    typography: "{typography.code-xs-uppercase}"
    textColor: "oklch(0.145 0.01 148)"
    border: "1px solid {colors.primary}"
    height: 48px
    padding: "12px 18px 12px 18px"
    backgroundColor: "{colors.primary}"
  button-primary-sm:
    textColor: "oklch(0.145 0.01 148)"
    border: "1px solid {colors.primary}"
    height: 36px
    padding: "8px 14px 8px 14px"
    fontSize: 10px
    fontFamily: "Geist Mono"
    fontWeight: 400
    backgroundColor: "{colors.primary}"
  button-text:
    typography: "{typography.code-xs-strong}"
    textColor: "{colors.primary}"
    height: 21.1875px
    padding: "4px 10px 4px 10px"
    rounded: "{rounded.xl}"
    backgroundColor: "color(srgb 0.203922 0.827451 0.6 / 0.18)"
  card:
    typography: "{typography.body-md-2}"
    textColor: "oklch(0.94 0.008 96)"
    border: "1px solid oklch(0.31 0.012 148)"
    padding: "12px 12px 12px 12px"
    rounded: "{rounded.xxl}"
    backgroundColor: "color(srgb 0.927453 0.922291 0.899187 / 0.02)"
  card-sm:
    typography: "{typography.body-md-2}"
    textColor: "oklch(0.94 0.008 96)"
    border: "1px solid oklch(0.31 0.012 148)"
    rounded: "{rounded.md}"
    backgroundColor: "color(srgb 0.927453 0.922291 0.899187 / 0.04)"
  badge-outline:
    textColor: "oklch(0.94 0.008 96)"
    border: "1px solid oklch(0.31 0.012 148)"
    height: 32.3906px
    padding: "8px 14px 8px 14px"
    fontSize: 12px
    boxShadow: "rgba(0, 0, 0, 0.35) 0px 4px 16px 0px"
    fontFamily: "TASA Orbiter"
    fontWeight: 400
    lineHeight: 1.2
    rounded: 999px
    backgroundColor: "oklch(0.18 0.012 148)"
  badge-text:
    textColor: "oklch(0.69 0.012 148)"
    height: 16.5px
    fontSize: 11px
    fontFamily: "Geist Mono"
    fontWeight: 400
    lineHeight: 1.5
  badge-text-2:
    textColor: "rgb(244, 63, 94)"
    fontSize: 15px
    fontFamily: "Geist Mono"
    fontWeight: 400
    lineHeight: 1.6
  badge-filled:
    typography: "{typography.code-xs}"
    textColor: "rgba(0, 0, 0, 0.85)"
    height: 24px
    padding: "4px 6px 4px 4px"
    rounded: "{rounded.md}"
    backgroundColor: "{colors.neutral-2}"
  navigation:
    typography: "{typography.body-md-2}"
    textColor: "oklch(0.94 0.008 96)"
    height: 72px
    padding: "12px 30px 12px 30px"
  footer:
    typography: "{typography.body-md-2}"
    textColor: "oklch(0.145 0.01 148)"
    padding: "80px 72px 40px 72px"
    backgroundColor: "oklch(0.94 0.008 96)"
  link:
    typography: "{typography.code-xs}"
    textColor: "oklch(0.94 0.008 96)"
    padding: "8px 12px 8px 12px"
  link-2:
    typography: "{typography.body-sm-tight}"
    textColor: "oklch(0.145 0.01 148)"
states:
  button-hover:
    target: button
    state: hover
    opacity: 0.9
  button-disabled:
    target: button
    state: disabled
    opacity: 0.4
  link-hover:
    target: link
    state: hover
    transform: "translate(2px)"
  other-active:
    target: other
    state: active
    transform: "translateY(1px)"
  input-disabled:
    target: input
    state: disabled
    opacity: 0.5
  nav-hover:
    target: nav
    state: hover
    opacity: 1
  card-hover:
    target: card
    state: hover
    opacity: 1
    transform: "translate(3px)"
  other-hover:
    target: other
    state: hover
    opacity: 1
  button-focus-visible:
    target: button
    state: focus-visible
    outline: "currentcolor solid 2px"
    outlineColor: currentcolor
    outlineWidth: 2px
  other-disabled:
    target: other
    state: disabled
    transform: none
breakpoints:
  - width: 375
    containerWidth: 335
    gridColumns: 3
    navLinksVisible: 16
    menuToggleVisible: false
    headingPx: 34
    bodyPx: 16
    sectionPaddingX: 12
  - width: 768
    containerWidth: 691
    gridColumns: 3
    navLinksVisible: 16
    menuToggleVisible: false
    headingPx: 48
    bodyPx: 16
    sectionPaddingX: 24
  - width: 1024
    containerWidth: 922
    gridColumns: 3
    navLinksVisible: 16
    menuToggleVisible: false
    headingPx: 48
    bodyPx: 16
    sectionPaddingX: 24
  - width: 1280
    containerWidth: 1152
    gridColumns: 3
    navLinksVisible: 16
    menuToggleVisible: false
    headingPx: 48
    bodyPx: 16
    sectionPaddingX: 24
  - width: 1440
    containerWidth: 1296
    gridColumns: 3
    navLinksVisible: 16
    menuToggleVisible: false
    headingPx: 48
    bodyPx: 16
    sectionPaddingX: 24
coverage:
  statesFound: 67
  gradientsFound: 6
  rolesUnassigned: 5
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: true
  semanticRampDeclared: true

Design System Inspired by CSS Studio

1. Visual Theme & Atmosphere

CSS Studio's design system embodies a stark, developer-forward aesthetic built on deep charcoal and near-black surfaces paired with a vibrant mint-green accent. The visual language is deliberately minimal and code-centric, leveraging monospaced typography and geometric precision to reinforce the tool's technical nature. Surfaces are intentionally dark to reduce eye strain during extended design work, while the electric primary accent ({colors.primary} — #34D399) provides high contrast and immediately signals interactive elements. The palette avoids ornament; depth comes from subtle colour shifts and carefully calibrated opacity rather than shadows or gradients. This is a system built for makers who value clarity and efficiency over decoration.

Key Characteristics:

Deep, near-black canvas with minimal visual noise
High-contrast accent (#34D399) that cuts through the darkness
Monospaced and serif typefaces reflecting code and structure
Opacity-driven depth strategy; minimal drop shadows
Sharp and pill-shaped border radii used contextually across components
Decorative gradient overlays on hero and section backgrounds
All-caps labeling and uppercase tracking for rhythm and hierarchy

2. Color Palette & Roles

Primary

Brand / Primary Accent ({colors.primary} — #34D399): Primary CTAs, brand mark, active states, and interactive highlights. Provides the visual anchor across the entire system.

Accent Colors (Unassigned / Decorative)

Accent 1 ({colors.accent-1} — #B08DF0): Decorative use; no measured role in the system.
Accent 2 ({colors.accent-2} — #3B82F6): Decorative use; no measured role in the system.

Neutral Scale

Canvas ({colors.canvas} — #0D1111): Default page background, creating the dark foundation.
Ink ({colors.ink} — #FFFFFF): Primary heading and text, ensuring maximum contrast on dark surfaces.
Hairline ({colors.hairline} — #1E1E20): 1px borders and dividers between elements.
Neutral 1 ({colors.neutral-1} — #7A8180): Muted mid-tone for secondary text and disabled states.
Neutral 2 ({colors.neutral-2} — #E8EEEE): Light neutral used in button outlines and surface backgrounds.
Neutral 3 ({colors.neutral-3} — #000000): Pure black for maximum darkness in specific contexts.

Semantic & Status

Error ({colors.error} — #FF1231): Error states and destructive actions.
Success ({colors.success} — #2DD4BF): Success states and confirmation messages.

3. Typography Rules

Font Family

Primary Font: Geist Mono

Monospaced font stack: Geist Mono, monospace
Used for UI labels, code samples, buttons, and captions
URL: https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap
Weights: 400 (regular), 500 (medium)

Secondary Font: TASA Orbiter

Serif display and body font stack: TASA Orbiter, serif
Used for headings, body copy, and navigation
Weights: 400 (regular), 700 (bold)

Fallback Font: -apple-system

System font stack: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
Used for captions as secondary fallback

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display XL	TASA Orbiter	76px	700	0.92	-3.04px	H1; hero headlines
Display LG	TASA Orbiter	48px	700	1.02–1.05	-1.34 to -1.68px	H2; major section heads
Display MD	TASA Orbiter	44px	700	0.95	-1.23px	H3; secondary display
Display SM	TASA Orbiter	40px	400–700	1.05	-1.4px	H2/display; smaller headlines
Heading LG	TASA Orbiter	36px	700	1.02	-1.44px	H1; large section heading
Heading MD	TASA Orbiter	30px	400–700	1.0–1.05	-0.75 to -1.2px	H2/H3; medium headings
Heading SM	TASA Orbiter	20px	700	1.0	-0.4px	H3; small headings
Heading XS	TASA Orbiter	16px	700	1.0	-0.16px	H4; smallest heading
Body MD	TASA Orbiter	16px	400	1.55	-0.16 to 0px	Body text; list items
Body SM	TASA Orbiter	15px	400	1.35–1.58	-0.15 to 0px	Body; links; list items
Body XS	TASA Orbiter	14px	400	1.55	-0.14 to 0px	Small body text
Caption SM	TASA Orbiter	12px	400	1.4–1.5	-0.12 to 0px	Captions; metadata
Caption XS	TASA Orbiter	11px	400	—	0.22–0.66px	Tiny captions
Code XS	Geist Mono	11px	400–500	1.0–1.25	0.22–2.42px	Monospaced labels; uppercase tracking
Code SM	Geist Mono	13.5px	400	1.6	-0.4px	Monospaced body text
Label	TASA Orbiter	20px	700	1.3	-0.3px	Table headers; labels

Principles

Negative letter-spacing on display sizes drives sophistication and visual compression; never round tracked values to 0.
Monospaced typography (Geist Mono) is reserved for UI labels, buttons, and code samples; all-uppercase with high letter-spacing creates visual rhythm.
Serif body text (TASA Orbiter) provides warmth and readability in longer passages while maintaining a structured, technical feel.
Consistent line-height ratios (1.0 for headings, 1.55 for body) ensure vertical rhythm and baseline alignment.
All-caps uppercase treatment on labels and code roles reinforces the developer-first ethos.

4. Component Stylings

Buttons

Primary Button

Background: {colors.primary} (#34D399)
Text Color: #0D1111 (from measured component data)
Padding: {spacing.sm} {spacing.md} (12px 18px)
Height: 48px
Border: 1px solid {colors.primary}
Border Radius: {rounded.none} (0px; sharp corners)
Font: Geist Mono, 11px, weight 400
Line Height: 13.75px
Hover State: opacity 0.9
Disabled State: opacity 0.4

Primary Button Small

Background: {colors.primary} (#34D399)
Text Color: #0D1111
Padding: 8px 14px
Height: 36px
Border: 1px solid {colors.primary}
Border Radius: {rounded.none} (0px)
Font: Geist Mono, 10px, weight 400
Hover State: opacity 0.9
Disabled State: opacity 0.4

Outline Button

Background: {colors.neutral-2} (#E8EEEE)
Text Color: #0D1111
Padding: {spacing.sm} {spacing.md} (12px 18px)
Height: 48px
Border: 1px solid {colors.neutral-2}
Border Radius: {rounded.none} (0px)
Font: Geist Mono, 11px, weight 400
Hover State: opacity 0.8

Text Button

Background: rgba(52, 211, 153, 0.18) (primary with 18% opacity)
Text Color: {colors.primary} (#34D399)
Padding: 4px 10px
Height: auto (~21px)
Border: none
Border Radius: {rounded.xl} (6px; pill-shaped)
Font: Geist Mono, 11px, weight 500
Hover State: opacity 0.8

Cards & Containers

Card Default

Background: rgba(147, 140, 120, 0.02) (neutral with 2% opacity)
Border: 1px solid #4D4D50 (hairline)
Padding: {spacing.sm} (12px)
Border Radius: {rounded.xxl} (8px)
Text Color: #E8EEEE
Font: TASA Orbiter, 16px, weight 400
Hover State: color changes to {colors.primary}, opacity 1, transform translate(3px)

Card Default Small

Background: rgba(147, 140, 120, 0.04) (neutral with 4% opacity)
Border: 1px solid #4D4D50
Padding: 0px
Border Radius: {rounded.md} (4px)
Height: 100px
Hover State: color changes to {colors.primary}

Inputs & Forms

Input Default

Background: transparent or dark surface
Border: 1px solid {colors.hairline} (#1E1E20)
Border Radius: {rounded.md} (4px)
Text Color: {colors.neutral-2} (#E8EEEE)
Font: TASA Orbiter, 15–16px, weight 400
Padding: {spacing.md} (16px)
Focus State: outline 2px solid {colors.primary}
Disabled State: opacity 0.5

Navigation

Header Navigation

Background: transparent
Text Color: {colors.neutral-2} (#E8EEEE)
Height: 72px
Padding: {spacing.md} 30px (12px 30px vertical, 30px horizontal)
Font: TASA Orbiter, 16px, weight 400
Border: none
Hover State: opacity 1
Focus State: outline 2px solid {colors.primary}

Badges

Outline Badge

Background: #2D2D30 (dark neutral)
Border: 1px solid #4D4D50 (hairline)
Text Color: #E8EEEE
Padding: 8px 14px
Height: ~32px
Border Radius: {rounded.full} (9999px; pill-shaped)
Font: TASA Orbiter, 12px, weight 400
Shadow: rgba(0, 0, 0, 0.35) 0px 4px 16px 0px

Text Badge

Background: transparent
Border: none
Text Color: #A8B0AF (neutral mid-tone)
Padding: 0px
Font: Geist Mono, 11px, weight 400
Border Radius: 0px

Filled Badge

Background: {colors.neutral-2} (#E8EEEE)
Text Color: rgba(0, 0, 0, 0.85)
Padding: 4px 6px
Height: 24px
Border Radius: {rounded.md} (4px)
Font: Geist Mono, 11px, weight 400

Footer

Footer Default

Background: {colors.neutral-2} (#E8EEEE)
Text Color: #0D1111 (dark on light)
Padding: 80px 72px 40px 72px
Font: TASA Orbiter, 16px, weight 400
Border: none

5. Layout Principles

Spacing System

Base unit: {spacing.xs} = 8px. All spacing follows a consistent scale:

{spacing.xxs} = 4px — micro spacing (icon padding, tight grouping)
{spacing.xs} = 8px — compact spacing (button padding, small gaps)
{spacing.sm} = 12px — standard component padding (cards, containers)
{spacing.md} = 16px — default margin/padding between elements
{spacing.lg} = 20px — comfortable breathing room
{spacing.xl} = 24px — section gutters and major spacing
{spacing.xxl} = 32px — large section separation
{spacing.xxxl} = 36px — major layout breaks
{spacing.section} = 40px — standard section padding
{spacing.band} = 44px — full-width band padding

Usage Context:

Button internal padding uses {spacing.sm} / {spacing.md}
Card padding uses {spacing.sm} for compact layouts, {spacing.md} for spacious
Section margin uses {spacing.section} or {spacing.band}
Navigation padding uses {spacing.md} vertical, 30px horizontal

Grid & Container

Max Content Width: 1296px (measured at 1440px viewport)

Responsive Column Widths:

375px viewport: 335px content column
768px viewport: 691px content column
1024px+ viewport: 922–1296px content column

Grid Columns: 3 columns across all measured breakpoints (no responsive grid column count change)

Section Patterns:

Full-width hero sections with decorative gradient overlays
Pricing card grid using 2-column layout on desktop, single column on mobile
Feature sections with left-aligned copy and right-aligned UI mockups
Footer spanning full width with multi-column layout

Whitespace Philosophy

Whitespace is architectural in this system; surfaces breathe through layered opacity rather than expansive empty space. Cards and containers use subtle background opacity (0.02–0.04) to sit above the canvas without visual heaviness. Navigation maintains ample vertical padding (12px top/bottom) but tight horizontal line-height, creating a horizontal rhythm. Section spacing uses consistent {spacing.section} or {spacing.band} padding, creating predictable vertical rhythm. Dark background + high-contrast text means whitespace is used sparingly; every gap is intentional and serves visual hierarchy.

Border Radius Scale

{rounded.none} = 0px — buttons, sharp corners for precision UI
{rounded.xs} = 2px — cards, minimal softness
{rounded.sm} = 3px — subtle softness
{rounded.md} = 4px — moderate radius for cards and inputs
{rounded.lg} = 5px — images, small components
{rounded.xl} = 6px — pill-shaped buttons, medium softness
{rounded.xxl} = 8px — cards and containers, comfortable radius
{rounded.r-10} = 10px — overlay/modal corners
{rounded.r-12} = 12px — large containers
{rounded.full} = 9999px — badges and fully pill-shaped elements

Component Mapping:

Buttons (primary/outline): {rounded.none} (sharp)
Text buttons: {rounded.xl} (6px pill)
Cards: {rounded.xs} to {rounded.xxl} (2–8px, context-dependent)
Badges: {rounded.full} (fully pill-shaped)
Overlays: {rounded.r-10} (10px)
Inputs: {rounded.md} (4px)

Border Widths

Thin = 1px — all borders (buttons, cards, inputs, navigation)
Used consistently across the system for hairline definitions

6. Depth & Elevation

Level	Treatment	Use
Base / Flat	No shadow; surface opacity only	Page background, flat buttons, body text
Dropdown	`rgba(0, 0, 0, 0.55) 0px 20px 40px -12px, rgba(0, 0, 0, 0.3) 0px 6px 16px -6px`	Dropdown menus
Dropdown Alt	`rgba(0, 0, 0, 0.4) 0px 8px 24px 0px`	Alternative dropdown shadow
Outline	`rgba(255, 255, 255, 0.06) 0px 0px 0px 1px`	Subtle outline for focus/borders
Card	`rgba(10, 10, 10, 0.18) 0px 30px 60px -24px, rgba(10, 10, 10, 0.1) 0px 10px 20px -10px`	Cards with moderate lift
Badge	`rgba(0, 0, 0, 0.35) 0px 4px 16px 0px`	Badge shadow (measured)

Shadow Philosophy: This system employs a layered-micro elevation strategy with careful opacity blending. Rather than relying on heavy drops, depth is achieved through:

Multiple shadow layers at different blur radii (creating a soft, professional lift)
High transparency values that work against the dark canvas without dominating
Selective shadow application: dropdowns and cards get shadows; buttons and flat UI do not
Surface colour opacity (0.02–0.04 for cards) provides cognitive depth without visual heaviness

The approach prioritizes subtlety and clarity over dramatic layering, reflecting the tool's focus on precision UI work.

Opacity Levels

The system employs opacity strategically for states and secondary content:

85% (0.85) — Hover state for interactive elements; slight dimming without full visibility loss
70% (0.70) — Secondary or muted text; readable but recessive
55% (0.55) — Disabled or inactive states; visual suppression
50% (0.50) — Midpoint opacity for hover effects
35% (0.35) — Low-priority backgrounds; extreme subtlety
22% (0.22) — Button background tints; barely perceptible

Z-index / Layering

The system uses a simple layering hierarchy:

z-index 1–6 — Base layers (default stacking context)
z-index 10 — Dropdown menus, popovers
z-index 20 — Modals, overlays, sticky navigation

This allows dropdowns to sit above base content (z 10) while modals sit above all (z 20).

7. Do's and Don'ts

Do

Use the primary accent (#34D399) sparingly for CTAs, focus states, and active highlights; it is the only colour that breaks through the dark aesthetic.
Maintain sharp corners (0px radius) on primary buttons and form inputs to reinforce precision and code-like structure.
Apply Geist Mono for all UI labels and buttons to maintain technical consistency; reserve TASA Orbiter for body and navigation.
Layer opacity-based depth (cards at 0.02–0.04 opacity) rather than heavy shadows; let the dark canvas provide contrast.
Use all-caps with high letter-spacing on monospaced elements to create visual rhythm and hierarchy.
Maintain consistent padding scales across components; use {spacing.sm} for compact UI, {spacing.md} for standard spacing.
Group related elements tightly (small gaps) and separate sections with {spacing.section} or {spacing.band} padding.
Test interactive states (hover, focus, disabled) on dark backgrounds to ensure the primary accent remains readable.

Don't

Don't use the secondary accent colours (#B08DF0, #3B82F6) for interactive states; they have no functional role in the system and should remain decorative.
Don't add heavy drop shadows to buttons or flat UI; depth comes from surface opacity and colour shifts.
Don't apply border radius inconsistently; use the scale provided (0px for buttons, 4–8px for cards, 9999px for badges).
Don't mix serif and monospaced fonts within a single UI component; keep font roles clearly separated.
Don't exceed 40px section padding horizontally on mobile (375px viewport uses 12px, avoiding layout cramp).
Don't set opacity below 0.22 for interactive elements; maintain sufficient visibility even at lowest opacity levels.
Don't rely on colour alone for error and success states; pair semantic colours with icons or text labels.
Don't remove focus outlines on keyboard navigation; maintain the 2px {colors.primary} outline for accessibility.

8. Responsive Behavior

Breakpoints

Viewport	Trigger	Content Width	Grid Cols	Nav Links	Heading Size	Body Size	Section Padding-X
375px	Mobile	335px	3	16	34px	16px	12px
768px	Tablet	691px	3	16	48px	16px	24px
1024px	Small Desktop	922px	3	16	48px	16px	24px
1280px	Desktop	1152px	3	16	48px	16px	24px
1440px	Large Desktop	1296px	3	16	48px	16px	24px

Breakpoint Strategy: No responsive breakpoint exists where navigation collapses into a toggle menu; the system maintains horizontal navigation links across all measured widths (375px–1440px). Headings scale up from 34px (mobile) to 48px (768px+). Section padding expands from 12px (mobile) to 24px (768px+). Grid remains 3 columns throughout; no reflow occurs. Content width grows linearly from 335px to 1296px.

Touch Targets

Minimum touch target size: 48px (measured on buttons)
Small touch target: 36px (small button variant)
Navigation link height: 44px (includes padding)
Card interactive area: Full card width and height, minimum 100px height

All interactive elements maintain at least 44–48px in one dimension to satisfy touch accessibility on mobile devices.

Collapsing Strategy

Mobile (375px): Horizontal padding reduces to {spacing.sm} (12px); headings scale to 34px; body text remains 16px.
Tablet (768px): Horizontal padding increases to {spacing.md} (24px); headings scale to 48px.
Desktop (1024px+): Padding stabilizes at {spacing.md}; heading size holds at 48px; content width expands to full measured width.
Grid columns: No change across breakpoints; layout remains 3-column throughout.
Navigation: Horizontal navigation remains visible; no hamburger menu toggle observed.
Cards and containers: Width expands proportionally; internal padding remains consistent with the spacing scale.

9. Agent Prompt Guide

Quick Color Reference

Use this mapping for rapid implementation:

Primary CTA / Brand: {colors.primary} (#34D399) — all primary buttons, links on hover, focus states
Page Background / Canvas: {colors.canvas} (#0D1111) — default page background
Text / Ink: {colors.ink} (#FFFFFF) — headings, high-contrast primary text
Hairline / Borders: {colors.hairline} (#1E1E20) — 1px dividers, subtle borders
Secondary Surface / Light Neutral: {colors.neutral-2} (#E8EEEE) — button outlines, light containers, footer background
Muted / Mid-tone: {colors.neutral-1} (#7A8180) — secondary text, disabled states
Error / Destructive: {colors.error} (#FF1231) — error messages, destructive actions
Success / Confirmation: {colors.success} (#2DD4BF) — success states, positive feedback

Iteration Guide

Start with the dark canvas (#0D1111) and pure ink (#FFFFFF) for all surfaces and text; contrast is guaranteed.
Reserve the primary accent (#34D399) for CTAs only; every button, link hover, and focus state uses this colour to maintain visual consistency.
Apply sharp corners (0px) to primary buttons and form inputs; use 4–8px radius for cards and containers to signal different element types.
Layer depth through opacity, not shadows; set card backgrounds to rgba(147, 140, 120, 0.02) and rely on subtle colour shifts.
Use Geist Mono (monospaced) for buttons, labels, and code; TASA Orbiter (serif) for headings and body; never mix within a single component.
Build spacing from the 8px base scale ({spacing.xs}); all padding and margin values should be multiples of 4 or 8 for grid harmony.
Apply negative letter-spacing on display sizes (e.g., {typography.display-xl} at -3.04px); this compression is a defining visual trait.
Test all interactive states (hover: opacity 0.8–0.9; disabled: opacity 0.4; focus: 2px {colors.primary} outline) against the dark canvas.
Keep navigation visible horizontally across all breakpoints; no collapse to hamburger menu.
Validate that text colour always meets WCAG AA contrast (7:1 ratio on dark backgrounds); error and success colours must remain readable.

10. Known Gaps

Interaction states: Only hover, focus-visible, active, and disabled states were extracted from stylesheets. No visited, group-hover, or animation states are documented.
Derived dark/light mode: One measured theme exists; a derived theme (calculated inverse) was not extracted. This system does not ship a light variant.
Cross-origin stylesheets: Some CSS rules may be missing due to CORS restrictions on external stylesheets.
Unassigned accent colours: Two accent colours (#B08DF0, #3B82F6) have no measured role; they appear decorative only and their functional purpose is unclear.
Authentication-gated surfaces: Surfaces behind login or authentication were not visited; any design tokens on those pages are not represented.
Gradient overlays: Decorative repeating linear gradients are documented verbatim but their exact canvas integration (z-index, opacity blending, animation) is not fully specified.
Typography on edge cases: Very small type (< 11px) and very large display type (> 76px) may exist but were not comprehensively measured.
Component animation: Transition timing, easing curves, and animation durations are not extracted from the available CSS.
Shadow states: Only shadow values present in measured components are documented; hover/focus shadow changes, if any, are not recorded.

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

Design tokens

Extracted from cssstudio.ai

Primary

#34D399

Primary CTA, brand accent, active state

#B08DF0

Accent / decorative

#3B82F6

Accent / decorative

Neutral

#0D1111

Default page background

#FFFFFF

Headings / primary text

#1E1E20

1px borders and dividers

#7A8180

Neutral

#E8EEEE

Neutral

#000000

Neutral

Semantic

#FF1231

Error

#2DD4BF

Success

Typography · Geist MonoGoogle Fonts

code11px · 400 · 13.75px

code11px · 400

h611px · 400 · 11px

label12px · 400

code11px · 400

code13.5px · 400 · 21.6px

code11px · 400

button11px · 500 · 13.2px

button11px · 400 · 13.75px

code11px · 400

code11px · 400 · 11px

code12px · 400 · 16.8px

code10px · 400

code11px · 400 · 15.4px

code11px · 400

code10px · 400

code11px · 700

code11px · 400

h311px · 400 · 11px

code12.6px · 400 · 18.9px

code15px · 400 · 24px

code12px · 400

code13px · 400 · 20.15px

code13px · 400

code11px · 400

code10px · 400

Typography · TASA OrbiterGoogle Fonts

body15px · 400 · 23.25px

heading30px · 400 · 30px

link15px · 400 · 20.25px

body16px · 400 · 24.8px

body14px · 400 · 21.7px

caption12px · 400 · 16.8px

body15px · 400 · 23.7px

list-item16px · 400

caption12px · 400 · 18px

body16px · 400

h176px · 700 · 69.92px

h230px · 700 · 30px

heading30px · 700 · 31.5px

body13px · 400 · 18.2px

body17px · 400 · 27.2px

body15px · 700 · 24px

caption11px · 400

h320px · 700 · 20px

body15px · 700 · 22.5px

list-item15px · 400 · 23.25px

h248px · 700 · 48.96px

h344px · 700 · 41.8px

display40px · 700 · 42px

body14px · 400 · 21.7px

display48px · 700 · 50.4px

display40px · 400 · 42px

heading36px · 700 · 36.72px

h148px · 700 · 50.4px

h240px · 700 · 42px

h340px · 700 · 40px

table-header20px · 700 · 26px

display76px · 700 · 64.6px

body18px · 400 · 27px

h416px · 700 · 16px

link16px · 400

caption11px · 400

h1140px · 700 · 117.6px

h248px · 700 · 43.2px

h326px · 700 · 27.3px

body30px · 400 · 36px

Typography · -apple-systemGoogle Fonts

body13px · 400 · 18.2px

caption12px · 400 · 16.8px

Spacing

8px

12px

4px

16px

40px

24px

32px

72px

Elevation

rgba(0, 0, 0, 0.55) 0px 20px 40px -12px, rgba(0, 0, 0, 0.3) 0px 6px 16px -6px

rgba(0, 0, 0, 0.4) 0px 8px 24px 0px

rgba(10, 10, 10, 0.18) 0px 30px 60px -24px, rgba(10, 10, 10, 0.1) 0px 10px 20px -10px

rgba(255, 255, 255, 0.06) 0px 0px 0px 1px

Components · 6

Remixes of cssstudio.ai

Latest remixes

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

Remix it