Baedillah Rizky Hendriyan n

Generated Oct 13, 2026

DESIGN.md for 21st.dev

21st.dev/@mohammadshehadeh/templates/prism2 componentsGeneral Sans

Remix

2 screenshots captured· 21st.dev

1 / 2 · Liquid AI - Prism | Templates | 21st | 21st · Above the fold

Preview

the generated design system

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

Design tokens

version: alpha
name: 21st
description: |
  Liquid AI – Prism embodies a dark, sophisticated aesthetic centered on
  liquid-glass morphology and pure-black minimalism. The design conveys
  cutting-edge AI capability through restraint: a self-contained black palette,
  elegant typography that breathes through whitespace, and subtle depth shifts
  driven by colour blocking rather than heavy shadows. The visual language
  prioritizes content over decoration, with the exception of carefully composed
  video backgrounds that anchor hero sections and feature blocks. This is a
  system designed for agencies and AI-forward brands that want to project
  technical mastery through deliberate understatement—glacial navigation,
  word-by-word headline reveals, and gentle micro-interactions that reward close
  attention without demanding it.
source:
  url: "https://21st.dev/@mohammadshehadeh/templates/prism"
  pagesAnalyzed: 1
  extractedAt: 2026-10-13
  tokensMeasured: true
typography:
  heading-sm:
    fontFamily: "General Sans"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.6px
    textTransform: capitalize
  heading-xs:
    fontFamily: "General Sans"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: -0.13px
  body-md:
    fontFamily: "General Sans"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.63
    letterSpacing: 0px
  body-sm:
    fontFamily: "General Sans"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
    textTransform: capitalize
  body-xs:
    fontFamily: "General Sans"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0px
  button-sm:
    fontFamily: "General Sans"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  button-xs:
    fontFamily: "General Sans"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
rounded:
  none: 0px
  xs: 3px
  sm: 6px
  md: 8px
  lg: "30%"
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
  xxxl: 64px
  section: 80px
borderWidths:
  thin: 1px
shadows:
  sm: "oklab(0 0 0 / 0.05) 0px 1px 3px 0px, oklab(0 0 0 / 0.05) 0px 1px 2px -1px"
  md: "rgba(0, 0, 0, 0.25) 0px 0.5px 1px 0px, rgba(0, 0, 0, 0.02) 0px -3px 4px 0px inset"
  lg: "rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px"
  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: "#F7F7F7"
    surfaceRaised: "#EEEEEE"
    text: "#111111"
    textMuted: "#646464"
    border: "#E2E2E2"
    accent: "#111111"
    accentFg: "#FFFFFF"
    focusRing: "#111111"
    elevation: shadow
  dark:
    bg: "#0F0F10"
    surface: "#1D1D1E"
    surfaceRaised: "#29292A"
    text: "#F5F5F5"
    textMuted: "#9E9E9E"
    border: "#353536"
    accent: "#818181"
    accentFg: "#0B0B0C"
    focusRing: "#636363"
    elevation: "border+surface"
gradients:
  - context: section
    kind: linear
    value: "linear-gradient(to top, oklch(0.967 0 0) 0px, rgba(0, 0, 0, 0) 100%)"
components:
  button-outline:
    typography: "{typography.button-sm}"
    textColor: "oklch(0.21 0.006 285.883)"
    border: "1px solid oklch(0.871 0.005 286.285)"
    height: 36px
    padding: "0px 12px 0px 12px"
    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, oklab(0 0 0 / 0.05) 0px 1px 3px 0px, oklab(0 0 0 / 0.05) 0px 1px 2px -1px"
    rounded: "{rounded.sm}"
    backgroundColor: "oklch(0.968 0.001 286.375)"
  button-text:
    typography: "{typography.body-xs}"
    textColor: "oklch(0.556 0 0)"
    height: 28px
    padding: "0px 12px 0px 12px"
    rounded: "{rounded.md}"
    backgroundColor: "oklch(0.939 0 0)"
  button-text-2:
    typography: "{typography.body-sm}"
    textColor: "oklch(1 0 0)"
    height: 28px
    padding: "0px 12px 0px 12px"
    rounded: "{rounded.sm}"
    backgroundColor: "oklch(0.141 0.004 285.824)"
  link:
    typography: "{typography.button-sm}"
    textColor: "oklch(0.556 0 0)"
  link-lg:
    typography: "{typography.body-sm}"
    textColor: "oklch(0.141 0.004 285.824)"
    padding: "0px 8px 0px 8px"
    rounded: "{rounded.md}"
states:
  button-active:
    target: button
    state: active
    transform: "scale(0.97)"
  other-hover:
    target: other
    state: hover
    opacity: 0
  card-hover:
    target: card
    state: hover
    opacity: 1
  nav-hover:
    target: nav
    state: hover
    opacity: 1
  other-focus:
    target: other
    state: focus
    opacity: 1
  other-focus-visible:
    target: other
    state: focus-visible
    opacity: 1
  other-disabled:
    target: other
    state: disabled
    opacity: 0.5
breakpoints:
  - width: 375
    containerWidth: 333
    gridColumns: 2
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 24
    bodyPx: 16
    sectionPaddingX: 6
  - width: 768
    containerWidth: 694
    gridColumns: 2
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 24
    bodyPx: 16
    sectionPaddingX: 6
  - width: 1024
    containerWidth: 1014
    gridColumns: 2
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 24
    bodyPx: 16
    sectionPaddingX: 6
  - width: 1280
    containerWidth: 790
    gridColumns: 2
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 24
    bodyPx: 16
    sectionPaddingX: 6
  - width: 1440
    containerWidth: 790
    gridColumns: 2
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 24
    bodyPx: 16
    sectionPaddingX: 6
coverage:
  statesFound: 61
  gradientsFound: 1
  rolesUnassigned: 0
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: true
  semanticRampDeclared: false

Design System Inspired by Liquid AI - Prism

1. Visual Theme & Atmosphere

Liquid AI – Prism embodies a dark, sophisticated aesthetic centered on liquid-glass morphology and pure-black minimalism. The design conveys cutting-edge AI capability through restraint: a self-contained black palette, elegant typography that breathes through whitespace, and subtle depth shifts driven by colour blocking rather than heavy shadows. The visual language prioritizes content over decoration, with the exception of carefully composed video backgrounds that anchor hero sections and feature blocks. This is a system designed for agencies and AI-forward brands that want to project technical mastery through deliberate understatement—glacial navigation, word-by-word headline reveals, and gentle micro-interactions that reward close attention without demanding it.

Key Characteristics:

Pure-black and off-white palette with minimal accent variation
Colour-blocking for depth; shadows are nearly imperceptible
Fine typography built on General Sans (body, UI) with deliberate negative tracking on headings
Liquid-glass pill-shaped navigation and component styling
Video-forward hero and section backgrounds
Entrance animations applied via CSS only; no JavaScript choreography
Highly restrained interaction feedback (scale, opacity, subtle colour shifts)

2. Color Palette & Roles

The site operates within a tightly constrained neutral palette with no declared semantic status colours. All design intent flows through pure black, off-white, and near-grey tones, with depth achieved entirely through surface colour relationships.

Primary Neutrals

Foreground / Text (oklch(0.556 0 0)): Primary text colour on light surfaces; used on body copy, labels, and standard UI text
Background / Canvas (oklch(0.968 0.001 286.375)): Light neutral surface; primary page background and card fills
Ink / Black (oklch(0.141 0.004 285.824)): Deepest neutral; used for headings, high-emphasis text, and dark button fills
Border / Hairline (oklch(0.871 0.005 286.285)): Subtle dividers and outline strokes; nearly indistinguishable from canvas

Surface & Semantics

Muted Surface: Used for disabled or secondary elements; exact shade managed via CSS variable (oklch(var(--muted)))
Foreground Mix (10%): color-mix(in oklab, oklch(var(--foreground)) 10%, transparent) — slight surface lift on hover
Foreground Mix (40%): color-mix(in oklab, oklch(var(--foreground)) 40%, transparent) — stronger interaction feedback
Foreground Mix (80%): color-mix(in oklab, oklch(var(--foreground)) 80%, transparent) — near-text opacity for secondary messaging

3. Typography Rules

Font Family

Primary: General Sans (body, buttons, navigation, labels)
Fallback stack: System sans-serif stack (e.g., -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif)

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display / Heading (small)	General Sans	24px	600	1.25	−0.6px	Text-transform: capitalize; largest display role measured
Heading (xs)	General Sans	13px	600	1.5	−0.13px	Section-level headings and sub-titles
Body (md)	General Sans	15px	500	1.63	0px	Primary body copy and narrative text
Body (sm)	General Sans	13px	500	1.43	0px	Text-transform: capitalize; used for labels and metadata
Button (sm)	General Sans	14px	500	1.43	0px	Standard button label size
Button (xs)	General Sans	13px	500	1.43	0px	Smaller call-to-action buttons
Body (xs)	General Sans	12px	500	1.33	0px	Links, captions, fine print

Principles

Negative tracking on display: The {typography.heading-sm} role uses −0.6px letter-spacing, creating visual tension and premium feel
Consistent weight hierarchy: All text is either weight 500 (UI) or 600 (headings); no lighter weights
Line height rhythm: Body line heights (1.63 for md, 1.43 for sm, 1.5 for xs) create breathing room without excess
Capitalization as texture: Body-sm and heading-sm roles use text-transform: capitalize to unify section labels and UI metadata
Single font family: General Sans handles the entire hierarchy with no serif pairings, reinforcing technical cohesion

4. Component Stylings

Buttons

Outline Button

Background: oklch(0.968 0.001 286.375) (off-white)
Text colour: oklch(0.21 0.006 285.883) (near-black)
Border: 1px solid oklch(0.871 0.005 286.285) (hairline)
Padding: 0px 12px (horizontal symmetry)
Height: 36px
Font size: {typography.button-sm} (14px)
Border radius: {rounded.sm} (6px)
Box shadow: oklab(0 0 0 / 0.05) 0px 1px 3px 0px, oklab(0 0 0 / 0.05) 0px 1px 2px -1px
Hover: text colour shifts to oklch(var(--foreground)); scale 0.97 on active

Text Button (Secondary)

Background: oklch(0.939 0 0) (very light grey)
Text colour: oklch(0.556 0 0) (mid-grey)
Border: 0px (flat)
Padding: 0px 12px
Height: 28px
Font size: {typography.body-sm} (12px)
Border radius: {rounded.md} (8px)
Box shadow: none
Hover: background shifts to color-mix(in oklab, oklch(var(--foreground)) 10%, transparent)

Text Button (Tertiary / Dark)

Background: oklch(0.141 0.004 285.824) (black)
Text colour: oklch(1 0 0) (white)
Border: 0px (flat)
Padding: 0px 12px
Height: 28px
Font size: {typography.body-xs} (13px)
Border radius: {rounded.sm} (6px)
Box shadow: none
Hover: opacity and colour interactions via CSS variable oklch(var(--sidebar-accent-foreground))

Navigation / Pills

Fixed glass-pill container with low-contrast dark background
Navigation links use the Large Link variant above
Horizontal alignment with equal spacing
Focus-visible state: 2px solid oklch(var(--ring) / 0.7) outline
Active nav items: background shifts to color-mix(in oklab, oklch(var(--foreground)) 15%, transparent)

Cards & Containers

Background: oklch(0.968 0.001 286.375) (off-white canvas)
Border: 1px solid oklch(0.871 0.005 286.285) (hairline)
Border radius: {rounded.none} (0px) for photo elements; {rounded.md} (8px) or {rounded.lg} (30%) for card containers
Padding: {spacing.md} to {spacing.lg} (16–24px) internal spacing
Hover: opacity shifts to 1; background may transition to color-mix(in oklab, oklch(var(--foreground)) 10%, transparent)
Elevation shadow (optional): rgba(0, 0, 0, 0.25) 0px 0.5px 1px 0px, rgba(0, 0, 0, 0.02) 0px -3px 4px 0px inset for subtle inset depth

Inputs & Forms

Font size: {typography.body-md} (15px)
Font family: General Sans
Padding: 0px 12px (horizontal), 0px 8px (vertical, inferred from button sizing)
Border radius: {rounded.sm} (6px)
Border: 1px solid oklch(0.871 0.005 286.285) (hairline)
Focus-visible: 2px solid oklch(var(--ring) / 0.75) outline
Hover: border colour may shift to color-mix(in oklab, oklch(var(--foreground)) 15%, transparent)

5. Layout Principles

Spacing System

The design uses an 8px base unit with a power-of-two-adjacent scale:

{spacing.xxs} = 4px (micro adjustments, icon padding)
{spacing.xs} = 8px (compact grouping, button padding)
{spacing.sm} = 12px (small components, input internal spacing)
{spacing.md} = 16px (standard card padding, section gutters)
{spacing.lg} = 24px (feature block gutters, larger component padding)
{spacing.xl} = 32px (major section margins)
{spacing.xxl} = 48px (hero padding, large section spacing)
{spacing.xxxl} = 64px (full-screen section tops/bottoms)
{spacing.section} = 80px (primary vertical section dividers)

Usage contexts:

Cards: {spacing.md} to {spacing.lg} internal padding
Buttons: {spacing.sm} (12px) horizontal padding
Section margins: {spacing.section} (80px) vertical; {spacing.md} to {spacing.lg} horizontal
Hero: {spacing.xxxl} (64px) top/bottom, {spacing.xxl} (48px) sides

Grid & Container

Max width: Content columns measured at 790px (desktop max at 1280px+); flexible narrower
Layout strategy: 2-column grid confirmed across all measured breakpoints (375px through 1440px)
Section padding-x: Consistent 6px at all viewport sizes (measured as global padding or margin)
Container approach: Full-width sections with internal max-width constraint; sidebar navigation fixed or overlay
Video hero: Full-viewport width and height; background-attachment: fixed for parallax; text centered with blur-in animation on headline

Whitespace Philosophy

Space is the primary design tool. Sections are separated by generous vertical gutters ({spacing.section} = 80px); cards breathe within themselves via {spacing.md} to {spacing.lg}. Text does not crowd; body line heights exceed 1.6. The absence of visual clutter forces every element to justify its presence—color shifts, typography scale, or movement alone signal hierarchy.

Border Radius Scale

{rounded.none} = 0px (images, full-bleed video blocks, sharp edges)
{rounded.xs} = 3px (minimal rounding, rare use)
{rounded.sm} = 6px (button primary, input fields, subtle curve)
{rounded.md} = 8px (card containers, navigation pills, standard containers)
{rounded.lg} = 30% (pill-shaped items, circular callouts, full-width soft containers)

Component mappings:

Buttons: {rounded.sm} (6px)
Form inputs: {rounded.sm} (6px)
Navigation pills: {rounded.md} (8px)
Cards: {rounded.md} (8px) or {rounded.lg} (30%) for full-bleed content
Images: {rounded.none} (0px)

Border Widths

Thin / Hairline: 1px (all borders on buttons, inputs, cards, and dividers)
No thicker strokes observed; the system favours minimal stroking

6. Depth & Elevation

Level	Treatment	Use
Flat	No shadow; colour blocking only	Primary surfaces, buttons, cards on white canvas
Micro (sm)	`oklab(0 0 0 / 0.05) 0px 1px 3px 0px, oklab(0 0 0 / 0.05) 0px 1px 2px -1px`	Button outlines, subtle lifts
Medium (md)	`rgba(0, 0, 0, 0.25) 0px 0.5px 1px 0px, rgba(0, 0, 0, 0.02) 0px -3px 4px 0px inset`	Custom depth; inset shadow for recess effect
Large (lg)	`rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`	Secondary emphasis
XL (xl)	`rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px`	Maximum depth; modals, overlays, floating sections

Shadow philosophy: The system uses layered-micro elevation: depth comes primarily from colour shifts and surface opacity changes rather than shadows. When shadows do appear, they employ stacked near-transparent layers (oklab at 0.05–0.1 opacity) that create barely-perceptible lift. This reinforces the "liquid glass" aesthetic—elements feel embedded in a continuous plane rather than floating above it. The one exception is the inset shadow (md level), which suggests recession and containment.

Opacity Levels

Opacity variations observed in interaction states:

Disabled: opacity: 0.5 to 0.7 (reduced prominence without removal)
Hover (subtle): opacity: 0.8 to 0.9 (dimming or highlight, context-dependent)
Hover (full): opacity: 1 (full visibility on reveal)
Overlay / Veil hover: opacity: var(--veil-hover) (custom variable, likely 0.6–0.8)

Z-index / Layering

The system defines a shallow stacking order:

Base: z-index: 1 to 2 (standard document flow)
Dropdown: z-index: 10 to 55 (navigation dropdowns, popovers, menus)
Modal / Overlay: z-index: 50+ (explicitly layered above dropdowns)
Toast / Alert: z-index: 55+ (topmost notifications)

Most interactive components sit at base; navigation and modals use the 10–55 range.

7. Do's and Don'ts

Do

Use the spacing scale rigorously. Every margin and padding must come from {spacing.xxs} through {spacing.section}; do not introduce arbitrary values
Lead with colour blocking. Achieve depth through surface colour shifts and opacity blends, not shadow stacking
Maintain the 6px border radius on buttons and inputs. The 8px radius is reserved for cards and navigation; do not cross-apply
Apply negative tracking (-0.6px) to display headings. This tightens letterforms and signals premium typography
Animate via CSS entrances only. Use keyframe animations for headline reveals and section fades; avoid JavaScript-driven choreography
Keep navigation fixed and glass-like. Use a semi-transparent dark background with hairline borders; maintain the pill aesthetic
Group buttons by semantic role. Outline buttons for primary CTAs, text buttons for secondary, dark buttons for tertiary; let colour do the work
Respect the 790px max content width on desktop. Narrower breakpoints use full width minus gutters; do not exceed 790px at 1280px+

Don't

Do not invent spacing values. Every margin/padding must align to the scale or leave it under "Known Gaps"
Do not use shadows to create hierarchy. The system relies on colour and opacity; if depth is needed, adjust surface tone instead
Do not apply rounded corners to image elements. Images use {rounded.none} (0px); only containers round
Do not mix heading and body font families. General Sans is the sole typeface; no serif accents or display fonts
Do not disable button outlines in focus-visible state. The 2px solid oklch(var(--ring) / 0.7) outline is mandatory for accessibility
Do not scale buttons beyond 0.97 on active. This is the only active transform; no translate, skew, or other distortions
Do not create custom opacity levels. Use the observed scale (0.5, 0.7, 0.8, 0.9, 1) or defer to CSS variables like var(--veil-hover)
Do not apply decoration or gradients to buttons or text. The gradient linear-gradient(to top, oklch(0.967 0 0) 0px, rgba(0, 0, 0, 0) 100%) is reserved for section overlays only

8. Responsive Behavior

Breakpoints

Viewport	Content Width	Grid Columns	Layout Shift	Largest Heading	Body Font	Section Padding-x
375px	333px	2	Full-width sections stack	24px	15px (`{typography.body-md}`)	6px
768px	694px	2	Flexible; 2-column maintained	24px	15px	6px
1024px	1014px	2	Flexible; 2-column maintained	24px	15px	6px
1280px	790px (max-width applied)	2	Content width capped	24px	15px	6px
1440px	790px (max-width maintained)	2	Content width capped	24px	15px	6px

Key observations:

No single-column layout at any breakpoint; 2-column grid persists from mobile upward
Content max-width applied at 1280px and maintained through 1440px
Typography does not scale; heading and body sizes remain constant
Section padding (6px) is uniform across all viewports
No hamburger menu or mobile navigation toggle observed; nav remains visible or is overlay

Touch Targets

Minimum button height: 36px (outline), 28px (text variants)
Minimum button width: Varies (64px for small text button, 144px for outline); padding-x always {spacing.sm} (12px)
Minimum link area: 24px height (inline links); larger for nav links (28px)
Minimum input height: Inferred 36px or 40px (measured buttons; inputs follow similar sizing)
Spacing between interactive elements: {spacing.md} (16px) minimum horizontal and vertical

Collapsing Strategy

Hero section: Full-viewport height at all sizes; background video scales with container
Feature rows: Maintain full width; internal content grid follows max-width logic
Cards: Stack or compress internally; no layout shift to single-column
Navigation: Remains visible in a fixed pill at all breakpoints; no hamburger collapse
Typography: No scaling; all font sizes constant across viewport ranges
Sections: All use full width minus 6px padding; max-width constraints apply to content column only

9. Agent Prompt Guide

Quick Color Reference

Primary CTA / Brand accent: Not explicitly measured; system operates in pure neutrals
Primary text / Foreground: oklch(0.556 0 0) — mid-grey, standard UI text
Background / Canvas: oklch(0.968 0.001 286.375) — off-white, card and page background
Heading text / Black: oklch(0.141 0.004 285.824) — deepest neutral, display and emphasis
Border / Hairline: oklch(0.871 0.005 286.285) — subtle divider, stroke colour
Button outline fill: oklch(0.968 0.001 286.375) (same as canvas)
Button dark fill: oklch(0.141 0.004 285.824) (same as black)
Hover tint (10%): color-mix(in oklab, oklch(var(--foreground)) 10%, transparent)
Hover tint (40%): color-mix(in oklab, oklch(var(--foreground)) 40%, transparent)

Iteration Guide

Always use General Sans. No serif, no display font, no variable weights outside 500 and 600.
Respect the spacing scale. Do not use arbitrary px values; every margin and padding derives from {spacing.xxs} through {spacing.section}.
Apply negative letter-spacing to display. Heading-sm role: −0.6px. All other roles: 0px.
Buttons are colour-coded by role. Outline = light fill + dark text. Text = light grey. Dark = black fill + white text. Do not invent variants.
Border-radius by component. Buttons and inputs: 6px. Cards: 8px or 30%. Images: 0px. Do not round images or leave cards sharp.
Shadows are nearly invisible. Use the micro-layer shadow (oklab 0.05 opacity) for button outlines; use colour shifts for hover/focus feedback.
Focus-visible outline is mandatory. 2px solid oklch(var(--ring) / 0.7) on all interactive elements. Never omit for accessibility.
Opacity for disabled and hover. Disabled: 0.5–0.7. Hover dimming: 0.8–0.9. Reveal: 1. Use CSS variables like var(--veil-hover) when provided.
Max-width content constraint. Desktop (1280px+): 790px max. Smaller viewports: full width minus 6px padding.
Navigate with the pill. Navigation background: semi-transparent dark. Links: 8px border-radius, use Large Link variant. Active state: color-mix(in oklab, oklch(var(--foreground)) 15%, transparent).

10. Known Gaps

No semantic status colours extracted. The site does not declare error, success, warning, or info state colours in its stylesheet. If status indicators are needed, they should be added under a separate colour role and documented in a future iteration.
Interaction states for disabled forms elements partially inferred. Exact disabled styling (border colour, text colour) not fully measured; only opacity (0.5–0.7) confirmed.
Dark mode or theme variants not observed. The extracted data represents a single light theme. If a dark mode exists behind a toggle, it was not captured.
Surfaces behind authentication not analysed. Only the public landing page was inspected; logged-in or account-specific UI may use different tokens.
Exact hover animation timing not extracted. Transitions (hover, focus, active) use implicit CSS defaults; specific transition-duration and transition-timing-function values not measured.
Video hero parallax behaviour only visual. Background-attachment and video properties inferred from visual inspection, not confirmed in stylesheet extraction.
CSS variable fallbacks not fully enumerated. The system uses oklch(var(--ring)), oklch(var(--muted)), and other custom properties; their default values or theming mechanism not fully mapped.
Gradient overlay on sections. One gradient observed: linear-gradient(to top, oklch(0.967 0 0) 0px, rgba(0, 0, 0, 0) 100%). Use context suggests section overlays; exact deployment contexts not comprehensive.
Micro-interaction copy-on-click or form validation UI. No explicit success/error messages or inline validation styling extracted.
Z-index values for dropdowns above 55 not confirmed. Layering order inferred from available data; very deep modals or floating panels may use higher values.
Breakpoint naming convention not extracted. Measured pixel values (375, 768, 1024, 1280, 1440) provided; semantic names (sm, md, lg, xl) inferred but not confirmed as official tokens.

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

Design tokens

Extracted from 21st.dev/@mohammadshehadeh/templates/prism

Typography · General Sans

h124px · 600 · 30px

h213px · 600 · 19.5px

body15px · 500 · 24.375px

link12px · 500 · 16px

button14px · 500 · 20px

button13px · 500 · 18.5714px

body13px · 500 · 18.5714px

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

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, oklab(0 0 0 / 0.05) 0px 1px 3px 0px, oklab(0 0 0 / 0.05) 0px 1px 2px -1px

rgba(0, 0, 0, 0.25) 0px 0.5px 1px 0px, rgba(0, 0, 0, 0.02) 0px -3px 4px 0px inset

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

Components · 2

Remixes of 21st.dev

Latest remixes

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

Remix it