Phạm Thiện Bảo

Generated Oct 11, 2026

DESIGN.md for openquiz.ai

openquiz.ai17 colors6 components-apple-system

Remix

12 screenshots captured· openquiz.ai

1 / 12 · OpenQuiz - Free vocabulary learning, speaking practice and pronunciation scoring · Above the fold

Preview

the generated design system

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

Design tokens

version: alpha
name: Openquiz
description: |
  OpenQuiz's design system embodies a modern, education-focused aesthetic built
  on clarity and accessibility. The visual personality is clean and confident,
  with a strong reliance on high-contrast monochromatic foundations paired with
  carefully placed accent colours that guide user attention. The system
  prioritizes legibility and cognitive ease—critical for a language-learning
  platform—using generous whitespace, straightforward typography, and subtle
  elevation to create visual hierarchy. The design feels contemporary yet
  approachable, avoiding unnecessary ornamentation while maintaining visual
  interest through thoughtful use of cards, badges, and depth layers. The
  overall mood is purposeful and energetic, reflecting the active learning
  journey users undertake.
source:
  url: "https://openquiz.ai/"
  pagesAnalyzed: 6
  extractedAt: 2026-10-11
  tokensMeasured: true
colors:
  primary: "#000000"
  canvas: "#FFFFFF"
  surface: "#212529"
  surface-alt: "#EAECF0"
  on-primary: "#FFFFFF"
  ink: "#0F1729"
  body: "#1A1A1A"
  muted: "#212529"
  faint: "#475569"
  hairline: "#DBDFE6"
  error: "#DC3545"
  accent-1: "#2563EB"
  accent-2: "#3B82F6"
  accent-3: "#A7F3D0"
  accent-4: "#0D6EFD"
  accent-5: "#94A3B8"
  accent-6: "#047857"
  accent-7: "#10B981"
  neutral-1: "#F6F7F9"
typography:
  display-lg:
    fontFamily: -apple-system
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0px
  display-md:
    fontFamily: -apple-system
    fontSize: 48px
    fontWeight: 900
    lineHeight: 1
    letterSpacing: 0px
  heading-xxl:
    fontFamily: -apple-system
    fontSize: 30.4px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0px
  heading-xl:
    fontFamily: -apple-system
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  heading-lg:
    fontFamily: -apple-system
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  heading-md:
    fontFamily: -apple-system
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sm:
    fontFamily: -apple-system
    fontSize: 19.2px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0px
  heading-xs:
    fontFamily: -apple-system
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0px
  body-xl:
    fontFamily: -apple-system
    fontSize: 20px
    fontWeight: 300
    lineHeight: 1.6
    letterSpacing: 0px
  body-xl-strong:
    fontFamily: -apple-system
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0px
  body-lg:
    fontFamily: -apple-system
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.56
    letterSpacing: 0px
  body-md:
    fontFamily: -apple-system
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.75
    letterSpacing: 0px
  body-sm:
    fontFamily: -apple-system
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.71
    letterSpacing: 0px
  body-sm-strong:
    fontFamily: -apple-system
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.43
    letterSpacing: 0px
  nav-md:
    fontFamily: -apple-system
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: 0px
  nav-sm:
    fontFamily: -apple-system
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  button-md:
    fontFamily: -apple-system
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-md-strong:
    fontFamily: -apple-system
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0px
  caption-sm:
    fontFamily: -apple-system
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.67
    letterSpacing: 0px
  caption-sm-strong:
    fontFamily: -apple-system
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0px
  caption-sm-tight:
    fontFamily: -apple-system
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: 0px
  caption-sm-2:
    fontFamily: -apple-system
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: 0px
  caption-sm-uppercase:
    fontFamily: -apple-system
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: 1.68px
    textTransform: uppercase
  caption-xs:
    fontFamily: -apple-system
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0px
rounded:
  none: 0px
  xs: 6px
  sm: 8px
  md: 10px
  lg: 12px
  xl: 14px
  xxl: 24px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 28px
  xxxl: 32px
  section: 40px
  band: 48px
borderWidths:
  thin: 1px
  medium: 2px
shadows:
  sm: "rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
  md: "rgba(0, 0, 0, 0.075) 0px 2px 4px 0px"
  lg: "rgba(0, 0, 0, 0.08) 0px 4px 12px 0px"
  xl: "rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px"
elevationStrategy: layered-micro
themes:
  derived: dark   # the other theme is the site's measured palette
  light:
    bg: "#FFFFFF"
    surface: "#212529"
    surfaceRaised: "#202429"
    text: "#0F1729"
    textMuted: "#1A1A1A"
    border: "#DBDFE6"
    accent: "#000000"
    accentFg: "#FFFFFF"
    focusRing: "#000000"
    elevation: shadow
  dark:
    bg: "#0F0F10"
    surface: "#1D1D1E"
    surfaceRaised: "#29292A"
    text: "#F5F5F5"
    textMuted: "#9E9E9E"
    border: "#353536"
    accent: "#858585"
    accentFg: "#0B0B0C"
    focusRing: "#666666"
    elevation: "border+surface"
  contrastFailures:
    - "light: text on surface = 1.16:1 (needs 4.5:1)"
gradients:
  - context: section
    kind: linear
    value: "linear-gradient(to right bottom, rgb(9, 9, 11), rgb(24, 24, 27), rgb(2, 44, 34))"
  - context: section
    kind: linear
    value: "linear-gradient(to right bottom, rgb(246, 247, 249), rgb(255, 255, 255), rgb(234, 236, 240))"
components:
  button-primary:
    typography: "{typography.button-md}"
    textColor: "{colors.on-primary}"
    height: 48px
    padding: "0px 20px 0px 20px"
    rounded: "{rounded.sm}"
    backgroundColor: "{colors.primary}"
  button-primary-sm:
    typography: "{typography.nav-sm}"
    textColor: "{colors.on-primary}"
    height: 36px
    padding: "0px 12px 0px 12px"
    rounded: "{rounded.sm}"
    backgroundColor: "{colors.primary}"
  button-secondary:
    typography: "{typography.nav-sm}"
    textColor: "{colors.ink}"
    height: 48px
    padding: "0px 32px 0px 32px"
    rounded: "{rounded.sm}"
    backgroundColor: "{colors.surface-alt}"
  button-icon:
    textColor: "{colors.on-primary}"
    height: 40px
    fontSize: 16px
    fontFamily: -apple-system
    fontWeight: 400
    lineHeight: 1.5
    rounded: "{rounded.lg}"
    backgroundColor: "{colors.primary}"
  button-outline:
    typography: "{typography.button-md}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.hairline}"
    height: 48px
    padding: "0px 20px 0px 20px"
    rounded: "{rounded.sm}"
    backgroundColor: "{colors.neutral-1}"
  button-outline-sm:
    textColor: "{colors.ink}"
    border: "1px solid {colors.hairline}"
    height: 40px
    padding: "8px 12px 8px 12px"
    fontSize: 14px
    fontFamily: -apple-system
    fontWeight: 400
    lineHeight: 1.43
    rounded: "{rounded.sm}"
    backgroundColor: "{colors.neutral-1}"
  card:
    textColor: "{colors.ink}"
    border: "2px solid rgba(200, 200, 220, 0.4)"
    fontSize: 16px
    boxShadow: "rgba(0, 0, 0, 0.08) 0px 4px 12px 0px"
    fontFamily: -apple-system
    fontWeight: 400
    lineHeight: 1.5
    rounded: "{rounded.xxl}"
    backgroundColor: "rgba(255, 255, 255, 0.9)"
  card-sm:
    textColor: "{colors.ink}"
    border: "1px solid {colors.hairline}"
    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.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px"
    fontFamily: -apple-system
    fontWeight: 400
    lineHeight: 1.5
    rounded: "{rounded.xl}"
    backgroundColor: "rgba(255, 255, 255, 0.95)"
  navigation:
    textColor: "{colors.ink}"
    height: 36px
    fontSize: 16px
    fontFamily: -apple-system
    fontWeight: 400
    lineHeight: 1.5
  navigation-lg:
    textColor: "{colors.body}"
    height: 82px
    padding: "16px 0px 16px 0px"
    fontSize: 16px
    fontFamily: -apple-system
    fontWeight: 400
    lineHeight: 1.6
    backgroundColor: "{colors.canvas}"
  footer:
    textColor: "{colors.ink}"
    border: "1px solid {colors.hairline}"
    fontSize: 16px
    fontFamily: -apple-system
    fontWeight: 400
    lineHeight: 1.5
    backgroundColor: "rgba(234, 236, 240, 0.25)"
  footer-lg:
    textColor: "{colors.on-primary}"
    padding: "48px 0px 48px 0px"
    fontSize: 16px
    fontFamily: -apple-system
    fontWeight: 400
    lineHeight: 1.6
    backgroundColor: "{colors.surface}"
  link:
    textColor: "{colors.ink}"
    fontSize: 16px
    fontFamily: -apple-system
    fontWeight: 400
    lineHeight: 1.5
  link-2:
    typography: "{typography.caption-sm}"
    textColor: "rgb(80, 88, 104)"
  badge-filled:
    textColor: "{colors.on-primary}"
    height: 20.375px
    padding: "4.2px 7.8px 4.2px 7.8px"
    fontSize: 12px
    fontFamily: -apple-system
    fontWeight: 700
    lineHeight: 1
    rounded: "{rounded.xs}"
    backgroundColor: "{colors.surface}"
  badge-filled-2:
    textColor: "rgb(248, 249, 250)"
    height: 20.375px
    padding: "4.2px 7.8px 4.2px 7.8px"
    fontSize: 12px
    fontFamily: -apple-system
    fontWeight: 700
    lineHeight: 1
    rounded: "{rounded.xs}"
    backgroundColor: "{colors.surface}"
states:
  other-hover:
    target: other
    state: hover
    boxShadow: "rgba(0, 0, 0, 0.08) 0px 4px 12px"
    transform: "translateY(-2px) translateZ(0px)"
  card-hover:
    target: card
    state: hover
    boxShadow: none
  button-hover:
    target: button
    state: hover
    boxShadow: "rgba(0, 0, 0, 0.2) 0px 4px 12px"
    transform: "translateY(-2px)"
    borderColor: "rgb(51, 51, 51)"
    backgroundColor: "rgb(51, 51, 51)"
breakpoints:
  - width: 375
    containerWidth: 375
    gridColumns: 2
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 36
    bodyPx: 16
    sectionPaddingX: 0
  - width: 768
    containerWidth: 768
    gridColumns: 4
    navLinksVisible: 4
    menuToggleVisible: true
    headingPx: 48
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1024
    containerWidth: 896
    gridColumns: 4
    navLinksVisible: 4
    menuToggleVisible: true
    headingPx: 48
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1280
    containerWidth: 896
    gridColumns: 4
    navLinksVisible: 4
    menuToggleVisible: true
    headingPx: 48
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1440
    containerWidth: 1280
    gridColumns: 4
    navLinksVisible: 4
    menuToggleVisible: true
    headingPx: 48
    bodyPx: 16
    sectionPaddingX: 0
coverage:
  statesFound: 71
  gradientsFound: 2
  rolesUnassigned: 8
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: true
  semanticRampDeclared: true

Design System Inspired by OpenQuiz

1. Visual Theme & Atmosphere

OpenQuiz's design system embodies a modern, education-focused aesthetic built on clarity and accessibility. The visual personality is clean and confident, with a strong reliance on high-contrast monochromatic foundations paired with carefully placed accent colours that guide user attention. The system prioritizes legibility and cognitive ease—critical for a language-learning platform—using generous whitespace, straightforward typography, and subtle elevation to create visual hierarchy. The design feels contemporary yet approachable, avoiding unnecessary ornamentation while maintaining visual interest through thoughtful use of cards, badges, and depth layers. The overall mood is purposeful and energetic, reflecting the active learning journey users undertake.

Key Characteristics

High-contrast black and white foundations with strategic accent colours
Clean card-based layouts with subtle shadows and soft borders
Generous whitespace and breathing room between elements
Pill-shaped and rounded interactive components
Primary CTA emphasis through solid fill with no borders
Accessible colour palette with semantic clarity
Typography-led design with clear hierarchy
Gentle elevation through layered shadows rather than stark borders

2. Color Palette & Roles

Primary

Primary / Brand ({colors.primary} — #000000): Primary call-to-action buttons, active states, and brand accent. Used to command attention and establish hierarchy across interactive surfaces.

Accent Colors

Accent 1 ({colors.accent-1} — #2563EB): Decorative accent; no measured functional role in the extraction.
Accent 2 ({colors.accent-2} — #3B82F6): Decorative accent; no measured functional role in the extraction.
Accent 3 ({colors.accent-3} — #A7F3D0): Decorative accent; no measured functional role in the extraction.
Accent 4 ({colors.accent-4} — #0D6EFD): Decorative accent; no measured functional role in the extraction.
Accent 5 ({colors.accent-5} — #94A3B8): Decorative accent; no measured functional role in the extraction.
Accent 6 ({colors.accent-6} — #047857): Decorative accent; no measured functional role in the extraction.
Accent 7 ({colors.accent-7} — #10B981): Decorative accent; no measured functional role in the extraction.

Interactive

Interactive Primary ({colors.primary} — #000000): Primary button fill and active navigation states. Provides maximum contrast and signal strength.

Neutral Scale

Canvas ({colors.canvas} — #FFFFFF): Default page background and label text on brand-coloured surfaces. The foundational light surface.
Surface / Muted ({colors.surface} — #212529): Card and panel backgrounds; secondary and caption text. A near-black neutral for depth and contrast.
Surface Alt ({colors.surface-alt} — #EAECF0): Alternating section band backgrounds. Provides subtle visual separation between content zones.
Ink ({colors.ink} — #0F1729): Primary heading and dominant text colour. The darkest semantic neutral for maximum readability.
Body ({colors.body} — #1A1A1A): Body copy and descriptive text. Nearly as dark as ink but reserved for flowing prose.
Faint ({colors.faint} — #475569): Tertiary text, placeholders, and helper text. Intentionally de-emphasized for visual hierarchy.
Hairline ({colors.hairline} — #DBDFE6): 1px borders, dividers, and subtle form strokes. Barely-visible structure lines.

Surface & Borders

Neutral 1 ({colors.neutral-1} — #F6F7F9): Light neutral surface; used for secondary button backgrounds and subtle surface differentiation.

Semantic / Status

Error ({colors.error} — #DC3545): Error states, destructive actions, and validation failures. High-saturation red for immediate recognition.

3. Typography Rules

Font Family

Primary: -apple-system (system stack including San Francisco, Segoe UI, Roboto with fallback to -apple-system-font)

Secondary: None explicitly defined; all typography uses the primary system stack.

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display XL	-apple-system	56px	700	1.2	0px	Hero / marketing headline; largest display size
Display MD	-apple-system	48px	900	1	0px	Bold display use; ultra-heavy weight for emphasis
Heading XXL	-apple-system	30.4px	700	1.3	0px	Major section head; strong visual anchor
Heading SM	-apple-system	19.2px	700	1.3	0px	Smaller section header
Heading XL	-apple-system	28px	500	1.2	0px	Major heading; medium-weight for clarity
Heading LG	-apple-system	24px	500	1.2	0px	Large section heading
Heading MD	-apple-system	20px	700	1.2	0px	Mid-level heading; bold weight
Heading XS	-apple-system	16px	700	1.2	0px	Small heading; emphasizes structure
Body XL	-apple-system	20px	300	1.6	0px	Large body text; light weight for openness
Body XL Strong	-apple-system	20px	600	1.5	0px	Emphasized large body copy
Body LG	-apple-system	18px	400	1.56	0px	Large body paragraph
Body MD	-apple-system	16px	400	1.75	0px	Standard body copy; primary reading text
Body SM Strong	-apple-system	14px	600	1.43	0px–2.24px	Small bold text; uppercase variant available with 1.4–2.24px tracking
Body SM	-apple-system	14px	400	1.71	0px	Small body text; secondary paragraphs
Button MD	-apple-system	16px	500	1.5	0px	Standard button label
Button MD Strong	-apple-system	16px	600	1.5	0px	Emphasis button text
Nav SM	-apple-system	14px	500	1.43	0px	Small navigation link text
Nav MD	-apple-system	16px	500	1.6	0px	Standard navigation link
Caption SM	-apple-system	12px	400	1.67	0px	Fine print and captions
Caption SM Strong	-apple-system	12px	500	1.33	0px	Emphasized caption
Caption SM Tight	-apple-system	12px	600	1.33	0px	Bold compact caption
Caption SM Uppercase	-apple-system	12px	700	1.33	1.68px	All-caps label; heavy weight and tracking
Caption XS	-apple-system	11px	600	1.5	0px	Smallest caption; bold for readability at tiny scale

Principles

Contrast-driven hierarchy: Bold weights (600–900) and size jumps create clear reading paths without relying on colour alone.
Generous line heights: 1.56–1.75 on body text and 1.43–1.71 on smaller text ensure comfort during extended reading, essential for learning contexts.
Uppercase tracking: When text is uppercased (labels, badges), consistent letter-spacing (1.4–2.24px) prevents visual cramping.
System font stack: -apple-system ensures native rendering and fast load times across all platforms.
Light weights for body: 300–400 weights on large body text (20px+) create an open, inviting tone appropriate for educational content.

4. Component Stylings

Buttons

Primary

Background: {colors.primary} (#000000)
Text Color: {colors.canvas} (#FFFFFF)
Padding: {spacing.md} top/bottom × {spacing.lg} left/right (16px × 20px)
Font: {typography.button-md} (16px, weight 500, line-height 1.5)
Border Radius: {rounded.xs} (6px)
Border: None
Height: 48px
Width: auto / full-width where appropriate
Hover State: Box shadow rgba(0, 0, 0, 0.2) 0px 4px 12px, transform translateY(-2px), background darkens to rgb(51, 51, 51), border rgb(51, 51, 51)

Primary Small

Background: {colors.primary} (#000000)
Text Color: {colors.canvas} (#FFFFFF)
Padding: {spacing.xs} top/bottom × {spacing.sm} left/right (8px × 12px)
Font: {typography.nav-sm} (14px, weight 500, line-height 1.43)
Border Radius: {rounded.xs} (6px)
Border: None
Height: 36px
Hover State: Box shadow rgba(0, 0, 0, 0.2) 0px 4px 12px, transform translateY(-2px), background darkens to rgb(51, 51, 51)

Secondary

Background: {colors.neutral-1} (#F6F7F9)
Text Color: {colors.ink} (#0F1729)
Padding: {spacing.md} top/bottom × 32px left/right
Font: {typography.nav-sm} (14px, weight 500, line-height 1.43)
Border Radius: {rounded.xs} (6px)
Border: None
Height: 48px
Hover State: Background lightens or shifts slightly; maintain text contrast

Ghost / Outline

Background: {colors.neutral-1} (#F6F7F9)
Text Color: {colors.ink} (#0F1729)
Padding: {spacing.md} top/bottom × {spacing.lg} left/right (16px × 20px)
Font: {typography.button-md} (16px, weight 500, line-height 1.5)
Border: 1px solid {colors.hairline} (#DBDFE6)
Border Radius: {rounded.xs} (6px)
Height: 48px
Hover State: Border brightens or shifts on hover

Outline Small

Background: {colors.neutral-1} (#F6F7F9)
Text Color: {colors.ink} (#0F1729)
Padding: 8px × 12px
Font: {typography.nav-sm} (14px, weight 400, line-height 1.43)
Border: 1px solid {colors.hairline} (#DBDFE6)
Border Radius: {rounded.xs} (6px)
Height: 40px

Icon Button

Background: {colors.primary} (#000000)
Text Color: {colors.canvas} (#FFFFFF)
Padding: 0px
Font: 16px, weight 400, line-height 1.5
Border Radius: {rounded.lg} (12px)
Border: None
Height & Width: 40px (square)
Used for: Icon-only controls; consistent sizing for compact layouts

Cards & Containers

Card Default

Background: rgba(255, 255, 255, 0.9) (near-white with slight transparency)
Text Color: {colors.ink} (#0F1729)
Border: 2px solid rgba(200, 200, 220, 0.4) (soft purple-tinged hairline)
Border Radius: {rounded.xxl} (24px)
Padding: 0px (image-first or internal spacing)
Font: {typography.body-md} (16px, weight 400, line-height 1.75)
Box Shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px 0px
Hover State: Box shadow rgba(0, 0, 0, 0.1) 0px 8px 16px, transform translateY(-4px), border colour shifts to primary dark

Card Small

Background: rgba(255, 255, 255, 0.95) (near-opaque white)
Text Color: {colors.ink} (#0F1729)
Border: 1px solid {colors.hairline} (#DBDFE6)
Border Radius: {rounded.xl} (14px)
Padding: 12px
Font: {typography.body-md} (16px, weight 400, line-height 1.75)
Box Shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px
Hover State: Box shadow rgba(0, 0, 0, 0.12) 0px 8px 24px, transform translateY(-4px)

Content Section (dark)

Background: Linear gradient linear-gradient(to right bottom, rgb(9, 9, 11), rgb(24, 24, 27), rgb(2, 44, 34))
Text Color: {colors.canvas} (#FFFFFF)
Padding: Varies (typically {spacing.band} — 48px or larger)
Used for: Dark accent bands, hero sections

Content Section (light)

Background: Linear gradient linear-gradient(to right bottom, rgb(246, 247, 249), rgb(255, 255, 255), rgb(234, 236, 240))
Text Color: {colors.ink} (#0F1729)
Padding: Varies
Used for: Light accent bands, alternating sections

Inputs & Forms

No detailed input/form styling was extracted. See "Known Gaps."

Navigation

Navigation Default (Link)

Background: Transparent
Text Color: {colors.ink} (#0F1729)
Font: {typography.nav-md} (16px, weight 500, line-height 1.6)
Border: None
Border Radius: 0px
Padding: 0px (inherits from layout context)
Hover State: Text colour shifts to primary dark

Navigation Large (Header)

Background: {colors.canvas} (#FFFFFF)
Text Color: {colors.body} (#1A1A1A)
Font: 16px, weight 400, line-height 1.6
Border: None
Border Radius: 0px
Padding: 16px vertical
Height: 82px
Width: Full viewport width
Layout: Horizontal flex row with logo, nav links, and CTA button

Footer

Footer Default (Light)

Background: rgba(234, 236, 240, 0.25) (very subtle alternating band)
Text Color: {colors.ink} (#0F1729)
Font: {typography.body-md} (16px, weight 400, line-height 1.6)
Border: 1px solid {colors.hairline} (#DBDFE6) on top
Border Radius: 0px
Padding: 0px (internal column spacing)

Footer Dark (Alternate)

Background: {colors.surface} (#212529)
Text Color: {colors.canvas} (#FFFFFF)
Font: 16px, weight 400, line-height 1.6
Border: None
Border Radius: 0px
Padding: 48px vertical, 0px horizontal
Height: 705.688px (measured on full page)

Badges

Badge Filled

Background: {colors.surface} (#212529)
Text Color: {colors.canvas} (#FFFFFF)
Font: {typography.caption-sm-tight} (12px, weight 700, line-height 1.33)
Padding: 4.2px × 7.8px
Border Radius: {rounded.xs} (6px)
Border: None
Height: ~20px

Badge Filled Alt

Background: {colors.surface} (#212529)
Text Color: rgb(248, 249, 250) (off-white)
Font: 12px, weight 700, line-height 1.33
Padding: 4.2px × 7.8px
Border Radius: {rounded.xs} (6px)
Used for: Emphasis or secondary categorization

5. Layout Principles

Spacing System

Base unit: {spacing.xs} = 8px

Full Scale:

{spacing.xxs} = 4px (micro-spacing between elements)
{spacing.xs} = 8px (tight padding, small gaps)
{spacing.sm} = 12px (button/badge padding, tight spacing)
{spacing.md} = 16px (standard padding, grid gutter)
{spacing.lg} = 20px (generous padding, larger gaps)
{spacing.xl} = 24px (section-level margin, card spacing)
{spacing.xxl} = 28px (large margin)
{spacing.xxxl} = 32px (very large margin)
{spacing.section} = 40px (between major sections)
{spacing.band} = 48px (between content bands; hero sections)

Usage:

Button padding: {spacing.md} vertical × {spacing.lg} horizontal (16px × 20px)
Card padding: {spacing.md} to {spacing.xl} (16–24px) depending on card size
Section padding: {spacing.section} to {spacing.band} (40–48px) vertical
Grid gutter: {spacing.md} (16px) between columns

Grid & Container

Max Width at 1440px: 1280px content (160px margin left/right)
Max Width at 1280px and 1024px: 896px content
Max Width at 768px and below: Full viewport minus gutters (0px section padding)
Column Count: 4 columns across breakpoints (measured on all responsive sizes)
Grid Gutter: {spacing.md} (16px)
Section Padding Horizontal: 0px at all breakpoints (full-bleed layout for sections, content constrained within)

Whitespace Philosophy

Whitespace is treated as a first-class design element. The system favours breathing room over density: large headings sit atop generous vertical margins, cards maintain internal padding, and sections are clearly separated by margin bands or alternating background colours. Body text uses 1.56–1.75 line-height to prevent crowding. This approach is deliberate—the platform is teaching-focused, and visual simplicity reduces cognitive load. Every interactive element has breathing room, and dense information is broken into scannable sections rather than packed into a single view.

Border Radius Scale

{rounded.none} = 0px (buttons on certain states; sharp edges for structure)
{rounded.xs} = 6px (badges, icon buttons; tight rounding)
{rounded.sm} = 8px (cards and containers; moderate rounding)
{rounded.md} = 10px (component accent rounding)
{rounded.lg} = 12px (icon buttons, larger cards; strong rounding)
{rounded.xl} = 14px (cards and panels; pronounced rounding)
{rounded.xxl} = 24px (large card surfaces; very rounded appearance)
{rounded.full} = 9999px (pill buttons and avatars; circular/fully rounded)

Component Mapping:

Buttons: {rounded.xs} (6px) — modern flat appearance
Primary cards: {rounded.xxl} (24px) — strong visual softness
Small cards: {rounded.xl} (14px) — moderate rounding
Icon buttons: {rounded.lg} (12px)
Badges: {rounded.xs} (6px)

Border Widths

Thin (1px): Hairline borders on cards, form inputs, light dividers; used for {colors.hairline} strokes
Medium (2px): Emphasis borders on cards (card default uses 2px soft purple-tinged border); used for visual accent without heaviness

6. Depth & Elevation

Shadow Elevation

Level	Treatment	Use
Flat	None	Base surfaces, backgrounds
SM (1px lift)	`rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`	Minimal card elevation, subtle depth cue
MD (2px lift)	`rgba(0, 0, 0, 0.075) 0px 2px 4px 0px`	Card and container hover states
LG (4px lift)	`rgba(0, 0, 0, 0.08) 0px 4px 12px 0px`	Default card shadow; standard elevation for interactive surfaces
XL (20px lift)	`rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px`	Modal cards, prominent popovers; layered multi-shadow for depth

Shadow Philosophy:

OpenQuiz uses a layered-micro elevation strategy. Rather than a single strong shadow, most surfaces layer multiple near-transparent shadows to create barely-perceptible depth. This is sophisticated and contemporary: the system avoids harsh shadows in favour of gentle optical lift. Cards at rest use {colors.lg} or similar; on hover, they shift to taller shadows (XL) and move up slightly (transform translateY(-4px)). The effect is refined and responsive without feeling playful or cartoonish.

Opacity Levels

25% (0.25): Used in decorative overlays and subtle background layers (e.g., rgba(200, 200, 220, 0.4) card borders)
50% (0.50): Medium transparency for secondary surfaces or hover states

Z-index / Layering

Dropdown / Tier 1: z-index 10–50 (local dropdowns, tooltips)
Dropdown / Tier 2: z-index 40–50 (nested dropdowns, absolute-positioned menus)
Modal / Primary: z-index 1020 (full-screen overlays, modals)
Modal / Highest: z-index 9998 (sticky headers, persistent UI above modals)

7. Do's and Don'ts

Do

Use the primary button (#000000 on white) as the strongest call to action. The high contrast and solid fill immediately draw the eye; reserve it for the most important interaction per screen.
Maintain generous line-height on body text (1.56–1.75). The platform teaches language; readers spend minutes absorbing content. Tight line-height increases cognitive friction.
Favour outline buttons and secondary actions for secondary CTAs. The outlined style ({colors.neutral-1} with {colors.hairline} border) creates clear hierarchy without competing for attention.
Use card rounded corners consistently. Buttons and small components use {rounded.xs} (6px); larger cards use {rounded.xl} to {rounded.xxl} (14–24px). Never mix sharp and rounded in the same interface.
Elevate interactive surfaces on hover with both shadow and translateY transform. The combination of rgba(0, 0, 0, 0.2) 0px 4px 12px shadow and translateY(-2px) creates a responsive, tactile feel.
Apply uppercase text-transform only with matching letter-spacing. If using text-transform: uppercase, apply tracking of 1.4–2.24px to prevent visual cramping.
Use badges ({colors.surface} — #212529 fill) to tag content and categorize posts. They are high-contrast and immediately scannable.
Structure sections with alternating background bands (white, {colors.surface-alt}, or gradient) to break visual monotony without adding borders.
Keep hairline borders ({colors.hairline} — #DBDFE6) to 1px for subtlety. Avoid thick borders; the system communicates depth through shadow and colour instead.

Don't

Don't use accent colours (blues, greens, teals) as primary CTAs. The brand's primary is pure black for maximum contrast and signal strength. Accent colours are decorative unless explicitly assigned a functional role.
Don't render buttons with sharp corners ({rounded.none}). All measured buttons use {rounded.xs} (6px) minimum. Sharp corners feel dated and break the refined aesthetic.
Don't mix card border widths or shadows inconsistently. The system has defined card variants (default 2px border + LG shadow; small 1px border + XL shadow). Deviating weakens visual coherence.
Don't compress line-height below 1.43 on small text or below 1.5 on body text. The platform is education-focused; cramped text increases cognitive load.
Don't add drop shadows to every element. The system is restrained: flat surfaces have no shadow, cards have subtle shadows, and only hovered or modal elements get pronounced depth.
Don't use the error colour (#DC3545) for general emphasis. Reserve it strictly for errors, destructive actions, and validation failures. Overuse dulls its signal.
Don't apply the #DBDFE6 hairline colour at widths greater than 1px. Thicker hairlines look inconsistent; use {colors.surface-alt} or secondary backgrounds for larger borders.
Don't nest rounded corners at inconsistent radii. If the parent card uses {rounded.xxl} (24px), child elements should use {rounded.lg} or {rounded.xl}, not {rounded.xs}.

8. Responsive Behavior

Breakpoints

Breakpoint	Viewport Width	Content Width	Grid Columns	Nav Visible	Menu Toggle	Display Size	Body Size
Mobile	375px	375px	2	0	Yes	36px	16px
Tablet	768px	768px	4	4	Yes	48px	16px
Laptop	1024px	896px	4	4	Yes	48px	16px
Desktop	1280px	896px	4	4	Yes	48px	16px
Large	1440px	1280px	4	4	Yes	48px	16px

Key Observations:

Navigation links remain hidden on mobile (375px); a hamburger toggle replaces them.
Content column jumps from 375px (mobile full-bleed) to 768px (tablet, still full-bleed at tablet width) to 896px (laptop+) to 1280px (large desktop).
Grid remains 4 columns across tablet, laptop, and desktop (no shift to 12-column or change at large breakpoints).
Display heading size increases from 36px to 48px between mobile and tablet, then remains stable.
Body text size is constant at 16px across all breakpoints.

Touch Targets

Minimum height: 40px for buttons and interactive elements on mobile and touch devices
Minimum width: 40px for standalone icon buttons (square aspect)
Minimum padding: 8px around interactive text to ensure pressable area
Spacing between targets: {spacing.md} (16px) minimum between adjacent buttons or links to prevent mis-taps

Collapsing Strategy

Mobile (375px): Full-bleed layout (0px section padding), single-column content, hamburger navigation toggle, larger touch targets (40px+ height). Headings scale down to 36px.
Tablet (768px): Expand to 2–4 column grid, maintain full-bleed sections. Nav links visible. Headings scale to 48px.
Laptop and above (1024px+): Constrain content to 896–1280px max width, add horizontal margins, maintain 4-column grid. All nav links visible. No menu toggle unless explicitly shown.

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: Brand Black ({colors.primary} — #000000) — solid fill, white text, 6px radius
Secondary CTA: Neutral Light ({colors.neutral-1} — #F6F7F9) — light fill, outline border, ink text
Page Background: Canvas ({colors.canvas} — #FFFFFF) — default page surface
Card Background: Near-White (rgba(255, 255, 255, 0.9–0.95)) — semi-transparent white for depth
Heading Text: Ink ({colors.ink} — #0F1729) — darkest neutral, maximum contrast
Body Text: Body ({colors.body} — #1A1A1A) — nearly as dark as ink; slightly softer
Secondary Text: Faint ({colors.faint} — #475569) — tertiary text, helper copy, placeholders
Hairline / Border: Hairline ({colors.hairline} — #DBDFE6) — 1px dividers, subtle strokes
Error State: Error ({colors.error} — #DC3545) — destructive actions, validation errors
Card Border (accent): Soft Purple-Tinged (rgba(200, 200, 220, 0.4) at 2px) — primary card variant only
Card Border (standard): Hairline ({colors.hairline} — #DBDFE6 at 1px) — small card variant

Iteration Guide

All primary buttons are solid black (#000000) on white with white text. No outlines, no gradients. Use only for the strongest CTA per screen.
Secondary buttons and links use {colors.neutral-1} (#F6F7F9) background with {colors.ink} text and a 1px {colors.hairline} border.
Cards are semi-transparent white (0.9–0.95 opacity) with subtle shadows: small cards use LG shadow + 1px border; large cards use 2px soft border + LG shadow. Hover state elevates with darker shadow and upward transform.
All typography uses the -apple-system font stack. Never substitute other fonts unless explicitly overridden by component spec.
Line-height scales with size: smaller text (12–14px) uses 1.33–1.43; body text (16–20px) uses 1.5–1.75. Never compress below the documented range.
Buttons use a consistent 6px border radius ({rounded.xs}). Icon buttons use 12px ({rounded.lg}). Cards use 14–24px. Never mix radii arbitrarily.
Section padding is 40–48px vertical, 0px horizontal (full-bleed layout). Content columns are constrained at 896px or 1280px depending on viewport.
Spacing scale is anchored to 4px (xxs), 8px (xs), then jumps by 4px increments to 32px. Use only documented values; never invent intermediate spacing.
Hover states combine shadow elevation and translateY(-2px) or translateY(-4px) transform. This creates tactile feedback and signals interactivity.
Badge fill is dark (#212529) with white text, 6px radius, 12px bold font. Used for category tags and content labels.

10. Known Gaps

Input and form styling not extracted: The extraction did not capture detailed CSS for text inputs, select dropdowns, checkboxes, radio buttons, or other form controls. Implement these by analogy to button and card styling (use {colors.hairline} borders, {rounded.xs} for small inputs, {spacing.md} padding).
Interaction states partially extracted: Only hover and focus states were captured. Active, disabled, readonly, and error states for inputs and buttons were not measured. Infer disabled states as reduced opacity (0.5) or greyed text; active states as shifted background or border colour.
Dark mode not observed: No dark theme was detected across the six pages analysed. If dark mode exists, it was not captured. The system as documented is light-mode only.
Eight accent colours lack measured roles: {colors.accent-1} through {colors.accent-7} appear in the design tokens but have no documented functional role in the extraction. Treat them as decorative or reserved for future use.
Gradient usage limited: Only two gradients were captured (dark section band and light section band). Other potential gradients, overlays, or blend modes may exist but were not systematically measured.
Surfaces behind authentication not visited: The extraction covered public pages only. Private user dashboards, profile screens, or authenticated workflows were not analysed and may have different or extended token values.
Animation and transition details not fully specified: CSS transitions and keyframe animations were not systematically extracted. Infer smooth transitions (200–300ms ease-in-out) on colour and transform changes.
Cross-origin stylesheets unreadable: Some design detail may be missing if it was declared in external or inaccessible stylesheets. This extraction represents publicly readable and inline styles only.

Document Version: 1.0 | Extraction Date: 2025 | Pages Analysed: 6 | Design System: OpenQuiz

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

Design tokens

Extracted from openquiz.ai

Primary

#000000

Primary CTA, brand accent, active state

#2563EB

Accent / decorative

#3B82F6

Accent / decorative

#A7F3D0

Accent / decorative

#0D6EFD

Accent / decorative

#94A3B8

Accent / decorative

#047857

Accent / decorative

#10B981

Accent / decorative

Neutral

#FFFFFF

Default page background; label colour on brand surfaces

#212529

Card / panel background; Captions, secondary text

#EAECF0

Alternating section band

#0F1729

Headings / primary text

#1A1A1A

Body copy

#475569

Tertiary / placeholder text

#DBDFE6

1px borders and dividers

#F6F7F9

Neutral

Semantic

#DC3545

Error

Typography · -apple-system

body14px · 600 · 20px

body14px · 400 · 24px

body16px · 400 · 28px

caption12px · 400 · 20px

caption12px · 700 · 16px

body18px · 400 · 28px

caption12px · 500 · 16px

h156px · 700 · 67.2px

h228px · 500 · 33.6px

h324px · 500 · 28.8px

h520px · 700 · 24px

h616px · 700 · 19.2px

nav-link16px · 500 · 25.6px

body20px · 300 · 32px

body20px · 600 · 30px

body24px · 700 · 38.4px

h130.4px · 700 · 39.52px

h219.2px · 700 · 24.96px

body15.68px · 400 · 25.872px

body15.68px · 700 · 25.872px

h148px · 900 · 48px

h236px · 700 · 40px

h330px · 900 · 37.5px

link14px · 400 · 20px

button16px · 600 · 24px

nav-link14px · 500 · 20px

body14px · 600 · 20px

heading16px · 700 · 24px

heading24px · 700 · 32px

caption12px · 600 · 16px

heading18px · 700 · 28px

body14px · 600 · 20px

button16px · 500 · 24px

heading14px · 700 · 20px

caption12px · 700 · 16px

caption11px · 600 · 16.5px

body20px · 900 · 28px

h220px · 700 · 28px

button14px · 500 · 20px

caption8px · 400 · 16px

h416px · 500 · 19.2px

body16px · 600 · 24px

Spacing

16px

12px

8px

24px

4px

80px

20px

48px

Elevation

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px

rgba(0, 0, 0, 0.075) 0px 2px 4px 0px

rgba(0, 0, 0, 0.08) 0px 4px 12px 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 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px

Components · 6

Remixes of openquiz.ai

Latest remixes

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

Remix it