Holographic

Generated Oct 16, 2026

DESIGN.md for designmd.me

designmd.me11 colors4 componentsInter

Remix

2 screenshots captured· designmd.me

1 / 2 · DesignMD — Generate DESIGN.md Files with AI · Above the fold

Preview

the generated design system

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

Design tokens

version: alpha
name: Designmd
description: |
  DesignMD presents a premium, developer-focused design system rooted in a
  sophisticated dark-mode aesthetic. The brand embraces a minimalist,
  high-contrast approach where deep charcoal canvases (#0F1012) ground the
  interface, while vibrant electric blue (#3B82F6) serves as the primary accent
  and call-to-action engine. The system balances clarity with restraint:
  surfaces are defined through subtle elevation and thin hairline borders rather
  than bold shadows, creating a clean, distraction-free environment ideal for
  displaying design tokens and code. Accent colors—including pink (#F472B6),
  amber, teal, and purple—appear as decorative flourishes in hero sections and
  visual demos, adding personality without compromising readability. The
  typography hierarchy emphasizes precision, with generous negative tracking on
  display sizes and consistent line-height ratios that support both dense
  information and breathing room. Overall, the atmosphere is polished,
  tech-forward, and purposeful—designed for designers and developers who value
  accuracy, speed, and extractable design intelligence.
source:
  url: "https://designmd.me/"
  pagesAnalyzed: 1
  extractedAt: 2026-10-16
  tokensMeasured: true
colors:
  primary: "#3B82F6"
  accent: "#F472B6"
  canvas: "#0F1012"
  surface: "#17181B"
  on-primary: "#FFFFFF"
  ink: "#F5F6F8"
  body: "#9AA0AB"
  hairline: "#2A2C31"
  accent-1: "#FBBF24"
  accent-2: "#34D399"
  accent-3: "#A78BFA"
typography:
  display-lg:
    fontFamily: Inter
    fontSize: 42px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -1.26px
  display-lg-newsreader:
    fontFamily: Newsreader
    fontSize: 42px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -1.26px
  heading-md:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: -0.48px
  heading-sm:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0px
  heading-sm-strong:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0px
  heading-xs:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.56
    letterSpacing: 0px
  body-lg:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.63
    letterSpacing: 0px
  body-lg-strong:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.63
    letterSpacing: 0px
  body-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.63
    letterSpacing: 0px
  body-md-strong:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  body-sm:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.63
    letterSpacing: 0px
  body-xs:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.63
    letterSpacing: 0px
  button-sm:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: 0px
  button-xs:
    fontFamily: Inter
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  label:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.56
    letterSpacing: 0px
  caption-sm:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  caption-sm-loose:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  caption-sm-strong:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0px
  caption-xs:
    fontFamily: Inter
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0px
  caption-xs-strong:
    fontFamily: Inter
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 1.54px
    textTransform: uppercase
  caption-xs-uppercase:
    fontFamily: Inter
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 1.76px
    textTransform: uppercase
  code-md:
    fontFamily: "Geist Mono"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  code-sm:
    fontFamily: "Geist Mono"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  code-xs:
    fontFamily: "Geist Mono"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 10px
  lg: 14px
  xl: 18px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 28px
  xxxl: 40px
  section: 56px
  band: 80px
borderWidths:
  thin: 1px
shadows:
  sm: "oklab(0 0 0 / 0.04) 0px 10px 15px -3px, oklab(0 0 0 / 0.04) 0px 4px 6px -4px"
  md: "rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px"
  lg: "oklab(0.999994 0.0000455678 0.0000200868 / 0.04) 0px 0px 0px 1px, oklab(0 0 0 / 0.25) 0px 20px 25px -5px, oklab(0 0 0 / 0.25) 0px 8px 10px -6px"
  xl: "oklab(0 0 0 / 0.1) 0px 10px 15px -3px, oklab(0 0 0 / 0.1) 0px 4px 6px -4px"
elevationStrategy: layered-micro
themes:
  derived: light   # the other theme is the site's measured palette
  light:
    bg: "#F7FAFF"
    surface: "#EDF0F5"
    surfaceRaised: "#E6E9ED"
    text: "#13171C"
    textMuted: "#696C70"
    border: "#D4D7DB"
    accent: "#1469F4"
    accentFg: "#FFFFFF"
    focusRing: "#3B82F6"
    elevation: shadow
  dark:
    bg: "#0F1012"
    surface: "#17181B"
    surfaceRaised: "#2A2A2D"
    text: "#F5F6F8"
    textMuted: "#9AA0AB"
    border: "#2A2C31"
    accent: "#3B82F6"
    accentFg: "#0B0B0C"
    focusRing: "#3B82F6"
    elevation: "border+surface"
gradients:
  - context: hero
    kind: radial
    value: "radial-gradient(closest-side, color(srgb 0.231373 0.509804 0.964706 / 0.16), rgba(0, 0, 0, 0) 72%)"
    filter: "blur(10px)"
  - context: section
    kind: linear
    value: "linear-gradient(to right in oklab, rgb(59, 130, 246) 0%, rgb(37, 99, 235) 50%, rgb(59, 130, 246) 100%)"
  - context: section
    kind: linear
    value: "linear-gradient(to right, rgb(59, 130, 246) 0%, lab(49.9355 55.1776 -81.8963) 50%, rgb(59, 130, 246) 100%)"
    filter: "blur(12px)"
  - context: section
    kind: linear
    value: "linear-gradient(to top in oklab, rgb(11, 12, 14) 0%, rgba(0, 0, 0, 0) 100%)"
  - context: section
    kind: mixed
    value: "linear-gradient(0deg, color(srgb 0.135686 0.120784 0.191765), rgb(23, 24, 27)), radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 0px)"
components:
  button-outline:
    typography: "{typography.button-xs}"
    textColor: "lab(76.7419 18.3911 -37.0706)"
    border: "1px solid oklab(0.605991 0.096526 -0.230582 / 0.3)"
    height: 26.5px
    padding: "4px 10px 4px 10px"
    rounded: "3.35544e+07px"
    backgroundColor: "oklab(0.605991 0.096526 -0.230582 / 0.07)"
  button-outline-2:
    textColor: "{colors.ink}"
    border: "1px solid oklab(0.29312 -0.000261039 -0.00949392 / 0.6)"
    height: 26.5px
    padding: "4px 8px 4px 8px"
    fontSize: 11px
    fontFamily: Inter
    fontWeight: 400
    lineHeight: 1.5
    rounded: "3.35544e+07px"
    backgroundColor: "oklab(0.172796 -0.000422016 -0.00442117 / 0.4)"
  button-text:
    textColor: "{colors.on-primary}"
    height: 24px
    padding: "2px 10px 2px 10px"
    fontSize: 14px
    fontFamily: Inter
    fontWeight: 600
    lineHeight: 1.43
    rounded: "3.35544e+07px"
    backgroundColor: "oklab(0.999994 0.0000455678 0.0000200868 / 0.15)"
  card:
    textColor: "{colors.ink}"
    border: "1px solid {colors.hairline}"
    fontSize: 16px
    boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.999994 0.0000455678 0.0000200868 / 0.04) 0px 0px 0px 1px, oklab(0 0 0 / 0.25) 0px 20px 25px -5px, oklab(0 0 0 / 0.25) 0px 8px 10px -6px"
    fontFamily: Inter
    fontWeight: 400
    lineHeight: 1.5
    rounded: "{rounded.lg}"
    backgroundColor: "{colors.surface}"
  card-sm:
    textColor: "{colors.ink}"
    border: "1px solid {colors.hairline}"
    fontSize: 16px
    fontFamily: Inter
    fontWeight: 400
    lineHeight: 1.5
    rounded: "{rounded.xl}"
    backgroundColor: "oklab(0.209237 0.000128426 -0.00610217 / 0.4)"
  footer:
    textColor: "{colors.ink}"
    border: "1px solid oklab(0.29312 -0.000261039 -0.00949392 / 0.5)"
    padding: "24px 0px 24px 0px"
    fontSize: 16px
    fontFamily: Inter
    fontWeight: 400
    lineHeight: 1.5
  link:
    textColor: "{colors.ink}"
    fontSize: 16px
    fontFamily: Inter
    fontWeight: 400
    lineHeight: 1.5
  link-sm:
    typography: "{typography.button-sm}"
    textColor: "{colors.on-primary}"
    padding: "4px 10px 4px 10px"
    boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px"
    rounded: "3.35544e+07px"
states:
  other-hover:
    target: other
    state: hover
    backgroundColor: "rgba(0, 0, 0, 0.05)"
breakpoints:
  - width: 375
    containerWidth: 356
    gridColumns: 1
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 28
    bodyPx: 16
    sectionPaddingX: 16
  - width: 768
    containerWidth: 730
    gridColumns: 2
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 38
    bodyPx: 16
    sectionPaddingX: 24
  - width: 1024
    containerWidth: 976
    gridColumns: 4
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 42
    bodyPx: 16
    sectionPaddingX: 24
  - width: 1280
    containerWidth: 1104
    gridColumns: 4
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 42
    bodyPx: 16
    sectionPaddingX: 24
  - width: 1440
    containerWidth: 1104
    gridColumns: 4
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 42
    bodyPx: 16
    sectionPaddingX: 24
coverage:
  statesFound: 61
  gradientsFound: 5
  rolesUnassigned: 3
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: false
  semanticRampDeclared: false

Design System Inspired by DesignMD

1. Visual Theme & Atmosphere

DesignMD presents a premium, developer-focused design system rooted in a sophisticated dark-mode aesthetic. The brand embraces a minimalist, high-contrast approach where deep charcoal canvases ({colors.canvas} — #0F1012) ground the interface, while vibrant electric blue ({colors.primary} — #3B82F6) serves as the primary accent and call-to-action engine. The system balances clarity with restraint: surfaces are defined through subtle elevation and thin hairline borders rather than bold shadows, creating a clean, distraction-free environment ideal for displaying design tokens and code. Accent colors—including pink ({colors.accent} — #F472B6), amber, teal, and purple—appear as decorative flourishes in hero sections and visual demos, adding personality without compromising readability. The typography hierarchy emphasizes precision, with generous negative tracking on display sizes and consistent line-height ratios that support both dense information and breathing room. Overall, the atmosphere is polished, tech-forward, and purposeful—designed for designers and developers who value accuracy, speed, and extractable design intelligence.

Key Characteristics

Deep dark canvas with high-contrast text ({colors.ink} — #F5F6F8)
Primary accent ({colors.primary} — #3B82F6) dominates interactive and brand moments
Pill-shaped buttons and cards ({rounded.full} — 9999px) for a modern, approachable feel
Multi-layer shadow elevation with layered-micro depth strategy
Measured, negative-tracked typography for display sizes
Sparse, single-tier component styling with minimal decoration
Functional color ramp: canvas, surface, body text, and thin hairlines only
Code-ready design tokens exported as a core product feature

2. Color Palette & Roles

Primary

Primary / Brand ({colors.primary} — #3B82F6): Primary call-to-action, brand mark, active states, and hero section accents. The dominant interactive color across buttons, links, and highlights.
On Primary ({colors.on-primary} — #FFFFFF): Label and foreground color applied directly over primary-colored surfaces for maximum contrast.

Accent Colors

Secondary Accent ({colors.accent} — #F472B6): Pink accent used in hero bands, decorative demos, and secondary visual elements to add warmth and visual variety.
Decorative Amber ({colors.accent-1} — #FBBF24): Accent accent—no measured role; used in demo sections and gradient overlays for visual interest.
Decorative Teal ({colors.accent-2} — #34D399): Accent accent—no measured role; used in decorative contexts and gradient layers.
Decorative Purple ({colors.accent-3} — #A78BFA): Accent accent—no measured role; used in decorative contexts and visual enhancements.

Neutral Scale

Canvas ({colors.canvas} — #0F1012): Default page background; the foundational dark surface for the entire interface.
Surface ({colors.surface} — #17181B): Card and panel backgrounds; a slightly lighter variant of canvas used for layered containers.
Ink ({colors.ink} — #F5F6F8): Headings and primary text; the brightest neutral used for maximum readability.
Body ({colors.body} — #9AA0AB): Body copy and secondary text; a mid-tone gray for reduced emphasis.

Surface & Borders

Hairline ({colors.hairline} — #2A2C31): 1px borders, dividers, and subtle stroke outlines; nearly indistinguishable from canvas to maintain minimal visual noise.

3. Typography Rules

Font Family

Primary: Inter (sans-serif)

Fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif

Secondary (Display): Newsreader (serif)

Fallback: Georgia, "Times New Roman", serif

Code: Geist Mono (monospace)

Fallback: "Courier New", monospace

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display LG	Inter	42px	700	1.1 (46.2px)	-1.26px	Hero-scale headlines; tight tracking for impact
Display LG (Serif)	Newsreader	42px	700	1.1 (46.2px)	-1.26px	Alternative display with serif character
Heading MD	Inter	24px	700	1.33 (31.92px)	-0.48px	Major section headings; compact tracking
Heading SM Strong	Inter	15px	700	1.4 (21px)	0px	Emphasized subheadings
Heading SM	Inter	15px	600	1.5 (22.5px)	0px	Subheadings and prominent labels
Heading XS	Inter	12px	600	1.56 (18.72px)	0px	Tertiary headings and emphasis
Body LG Strong	Inter	16px	500	1.63 (26.08px)	0px	Emphasized body copy
Body LG	Inter	16px	400	1.63 (26.08px)	0px	Primary narrative text
Body MD Strong	Inter	14px	500	1.43 (20.02px)	0px	Emphasized medium body text
Body MD	Inter	14px	400	1.63 (22.82px)	0px	Standard body text
Body SM	Inter	13px	400	1.63 (21.19px)	0px	Reduced body text
Body XS	Inter	12px	400	1.63 (19.56px)	0px	Minimal body text
Label	Inter	18px	400	1.56 (28.08px)	0px	Input labels and form headers
Caption SM Strong	Inter	12px	500	1.33 (15.96px)	0px	Emphasized caption
Caption SM Loose	Inter	12px	400	1.5 (18px)	0px	Loose caption spacing
Caption SM	Inter	12px	400	1.33 (15.96px)	0px	Standard caption and fine print
Caption XS Strong	Inter	11px	700	1.5 (16.5px)	1.54px	Emphasized uppercase label
Caption XS Uppercase	Inter	11px	700	1.5 (16.5px)	1.76px	Uppercase micro label with loose tracking
Caption XS	Inter	11px	600	1.5 (16.5px)	0px	Micro label and emphasis
Button SM	Inter	12px	600	1.33 (15.96px)	0px	Small button label
Button XS	Inter	11px	500	1.5 (16.5px)	0px	Extra-small button label
Code MD	Geist Mono	12px	400	1.33 (15.96px)	0px	Standard code block
Code SM	Geist Mono	11px	400	1.5 (16.5px)	0px	Small inline code
Code XS	Geist Mono	10px	400	1.5 (15px)	0px	Minimal code text

Principles

Tight Display Tracking: Negative letter-spacing on display sizes (-1.26px on 42px headlines) creates a premium, high-impact appearance and is a defining trait of the brand hierarchy.
Consistent Line-Height Ratios: Body text maintains 1.63 line-height across sizes for readability; tighter ratios on captions (1.33–1.5) preserve compact layouts.
Weight-Based Emphasis: Bold weight (700) is reserved for headings; medium (500) for labels and emphasis; regular (400) for body and code.
Uppercase Micro Labels: Caption XS and Caption XS Strong employ uppercase text-transform with expanded letter-spacing (1.54–1.76px) for signage-like labels.
Code Monospace: Geist Mono is used exclusively for code blocks and technical references, with consistent 4-unit line-height increment (1.33–1.5) mirroring prose hierarchy.

4. Component Stylings

Buttons

Primary Button (CTA)

Background: {colors.primary} (#3B82F6)
Text Color: {colors.on-primary} (#FFFFFF)
Border Radius: {rounded.full} (9999px)
Padding: {spacing.sm} 10px / {spacing.sm} 10px (4px 10px)
Font: {typography.button-xs} (11px, weight 500, line-height 1.5)
Border: none
Box Shadow: none
Height: 26.5px
Hover State: Increase opacity to 0.9; slightly darken or reduce primary saturation

Outline Button (Secondary)

Background: oklab(0.605991 0.096526 -0.230582 / 0.07) — subtle blue tint
Text Color: lab(76.7419 18.3911 -37.0706) — muted blue-gray
Border: 1px solid oklab(0.605991 0.096526 -0.230582 / 0.3) — low-contrast blue stroke
Border Radius: {rounded.full} (9999px)
Padding: {spacing.xs} 10px / {spacing.xs} 10px (4px 10px)
Font: {typography.button-xs} (11px, weight 500)
Box Shadow: none
Height: 26.5px
Hover State: Border opacity increases; background lightens slightly

Ghost Button (Tertiary)

Background: oklab(0.172796 -0.000422016 -0.00442117 / 0.4) — dark semi-transparent
Text Color: rgb(245, 246, 248) ({colors.ink})
Border: 1px solid oklab(0.29312 -0.000261039 -0.00949392 / 0.6) — neutral hairline
Border Radius: {rounded.full} (9999px)
Padding: {spacing.xs} 8px / {spacing.xs} 8px (4px 8px)
Font: {typography.button-xs} (11px, weight 400)
Box Shadow: none
Height: 26.5px
Hover State: Opacity shifts to 1 or background darkens

Text Button (Minimal)

Background: oklab(0.999994 0.0000455678 0.0000200868 / 0.15) — barely-visible overlay
Text Color: rgb(255, 255, 255) (pure white)
Border: none
Border Radius: {rounded.full} (9999px)
Padding: 2px 10px (2px 10px)
Font: {typography.button-sm} (12px, weight 600)
Box Shadow: none
Height: 24px
Hover State: Background opacity increases; text may lighten

Cards & Containers

Default Card

Background: {colors.surface} (#17181B)
Text Color: {colors.ink} (#F5F6F8)
Border: 1px solid {colors.hairline} (#2A2C31)
Border Radius: {rounded.lg} (14px)
Padding: 0px (structural containers; padding applied to inner content)
Font: {typography.body-lg} (16px, weight 400, line-height 1.63)
Box Shadow: oklab(0 0 0 / 0.25) 0px 20px 25px -5px, oklab(0 0 0 / 0.25) 0px 8px 10px -6px — layered-micro elevation
Hover State: Background color shifts slightly; may increase elevation or border opacity

Small Card (Default SM)

Background: oklab(0.209237 0.000128426 -0.00610217 / 0.4) — dark semi-transparent
Text Color: {colors.ink} (#F5F6F8)
Border: 1px solid {colors.hairline} (#2A2C31)
Border Radius: {rounded.xl} (18px)
Padding: 0px
Font: {typography.body-lg} (16px, weight 400)
Box Shadow: none
Hover State: Background opacity may increase; subtle lift

Navigation

Navigation Bar

Background: {colors.canvas} (#0F1012)
Text Color: {colors.body} (#9AA0AB)
Border: 1px solid oklab(0.29312 -0.000261039 -0.00949392 / 0.5) — subtle divider
Font: {typography.body-md} (14px, weight 400)
Active Link Color: {colors.primary} (#3B82F6)
Hover State: Text opacity increases to 1; border may highlight with primary accent

Navigation Link (Active)

Text Color: {colors.primary} (#3B82F6)
Border Bottom: thin underline or outline in primary color
Font: {typography.body-md} (14px, weight 400)

Navigation Link (Inactive)

Text Color: {colors.body} (#9AA0AB)
Font: {typography.body-md} (14px, weight 400)
Hover State: Color transitions to {colors.ink}; opacity increases to 1

Inputs & Forms

Text Input

Background: rgba(0, 0, 0, 0) — transparent or surface inherited
Text Color: {colors.ink} (#F5F6F8)
Border: 1px solid {colors.hairline} (#2A2C31)
Border Radius: {rounded.none} (0px) — sharp, rectangular inputs
Padding: {spacing.md} horizontal
Font: {typography.label} (18px, weight 400)
Focus State: Border color shifts to {colors.primary} (#3B82F6)

Input Label

Text Color: {colors.body} (#9AA0AB)
Font: {typography.heading-xs} (12px, weight 600)
Margin Bottom: {spacing.xs} (8px)
Text Transform: Optional uppercase
Letter Spacing: 0–0.5px for emphasis

Footer

Footer Container

Background: rgba(0, 0, 0, 0) — transparent overlay on canvas
Text Color: {colors.ink} (#F5F6F8)
Border Top: 1px solid oklab(0.29312 -0.000261039 -0.00949392 / 0.5)
Padding: {spacing.xl} vertical (24px 0px)
Font: {typography.body-lg} (16px, weight 400)
Border Radius: {rounded.none} (0px)

5. Layout Principles

Spacing System

The spacing system is built on a 4px base unit, scaling to larger values in logical increments for rhythm and proportion.

{spacing.xxs} = 4px — microscopic spacing between tightly grouped elements
{spacing.xs} = 8px — compact padding within buttons, small gaps
{spacing.sm} = 12px — button padding, small component gaps
{spacing.md} = 16px — standard padding, content inset
{spacing.lg} = 20px — generous spacing, section breaks
{spacing.xl} = 24px — major section padding, large component spacing
{spacing.xxl} = 28px — substantial vertical rhythm
{spacing.xxxl} = 40px — large block separations
{spacing.section} = 56px — major content section gaps
{spacing.band} = 80px — full-width hero and band sections

Usage Context:

xxs–xs: Button internals, badge padding, micro-interactions
sm–md: Card padding, input padding, component spacing
lg–xl: Section separations, heading margins, container insets
xxl–band: Hero section spacing, page-level spacing, full-width gaps

Grid & Container

Max Content Width: 1104px (measured at 1280px+ viewport) — constrains multi-column layouts
Full-Width Sections: 1440px (full viewport at desktop)
Column Strategy:
- 1 column at 375px (mobile)
- 2 columns at 768px (tablet)
- 4 columns at 1024px+ (desktop)
Section Padding (Horizontal):
- 16px at 375px viewport
- 24px at 768px+ viewport
Container Padding: {spacing.md} to {spacing.xl} inside cards; {spacing.xxl} to {spacing.section} between major sections

Whitespace Philosophy

The design prioritizes breathing room and clarity through strategic whitespace. Sections are separated by substantial gaps ({spacing.section} — 56px or {spacing.band} — 80px), allowing each content block to stand alone. Component internals use consistent padding ({spacing.md} horizontal, {spacing.lg} vertical) to ensure text and icons do not crowd edges. Between related elements (like buttons in a group), spacing is compact ({spacing.xs} to {spacing.sm}), while between unrelated regions it expands significantly. This hierarchical spacing guides the eye and reduces cognitive load in information-dense interfaces.

Border Radius Scale

{rounded.none} = 0px — Inputs, sharp structural elements
{rounded.xs} = 4px — Image borders, small decorative elements
{rounded.sm} = 8px — Minor component corners
{rounded.md} = 10px — Moderate component rounding
{rounded.lg} = 14px — Card borders, container corners
{rounded.xl} = 18px — Large card variants, prominent containers
{rounded.full} = 9999px — Buttons, pills, circular elements

Component Contexts:

Buttons: {rounded.full} (pill-shaped, approachable)
Cards: {rounded.lg} to {rounded.xl} (14–18px, modern softness)
Images: {rounded.xs} (4px, subtle)
Inputs: {rounded.none} (0px, sharp, form-like)

Border Widths

Thin ({rounded.full} or thin stroke) = 1px — All buttons, card borders, dividers, and hairlines across the system. This is the only border width used; the system maintains visual consistency through single-thickness strokes.

6. Depth & Elevation

Level	Treatment	Use
Flat	No shadow; border only	Buttons, inputs, minimal cards, footer
Micro	`rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`	Subtle lift for small elements, link variants
Small	`oklab(0 0 0 / 0.04) 0px 10px 15px -3px, oklab(0 0 0 / 0.04) 0px 4px 6px -4px`	Card containers, modest elevation
Medium	`rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`	Dropdown, tooltip, or modal entrance
Large	`oklab(0.999994 0.0000455678 0.0000200868 / 0.04) 0px 0px 0px 1px, oklab(0 0 0 / 0.25) 0px 20px 25px -5px, oklab(0 0 0 / 0.25) 0px 8px 10px -6px`	Prominent cards, hero overlays, deep modals
XL	`oklab(0 0 0 / 0.1) 0px 10px 15px -3px, oklab(0 0 0 / 0.1) 0px 4px 6px -4px`	Full-screen modals, sticky headers over content

Shadow Philosophy:

The system employs a layered-micro elevation strategy where depth is conveyed through stacked, near-transparent shadow layers rather than bold single shadows. Shadows use oklab color space with very low opacity (0.04–0.25 alpha), creating barely perceptible lift that does not compete with the dark background. The approach mirrors Tailwind CSS shadow scales but emphasizes subtlety over drama. Most interactive elements remain flat or carry only a hairline border; elevation is reserved for containers and modals that require clear visual separation. This constraint keeps the interface clean and minimal, aligning with developer-centric aesthetics.

Opacity Levels

0% (0.00) — Hidden or fully transparent overlays
3% (0.03) — Barely-visible overlay for texture or subtle tint
40% (0.40) — Semi-transparent background for secondary surfaces or disabled states
70% (0.70) — Reduced opacity for muted interactive elements or secondary text
80% (0.80) — High opacity but slightly reduced for hover states or secondary emphasis
90% (0.90) — Near-full opacity for active or highlighted states

Z-index / Layering

Base (0): Content, cards, default components
Dropdown (40–55): Floating menus, tooltips, popovers (z-index: 40, 50, 55)
Sticky (60): Sticky headers, floating action bars
Modal (100): Full-screen modals, overlays, dialogs
Toast (200): Toast notifications, alerts, top-layer notifications

7. Do's and Don'ts

Do

Use {colors.primary} (#3B82F6) sparingly for CTAs — Reserve the bright blue for primary actions (Sign In, Compare, primary buttons). Secondary actions and navigation should use outline or ghost variants to reduce visual noise.
Apply {rounded.full} (9999px) to all interactive elements — Buttons, chips, and toggles should use pill-shaped borders for consistency and approachability.
Stack spacing values from the scale — Use {spacing.md} (16px) for standard padding, {spacing.xl} (24px) for large sections, and {spacing.section} (56px) for major separations. Never invent intermediate values.
Maintain negative tracking on display sizes — Preserve {typography.display-lg} letter-spacing of -1.26px; this is a defining visual trait. Do not round it to 0.
Use {colors.ink} (#F5F6F8) for all primary text — Headings, labels, and body copy should default to the bright neutral for maximum contrast against {colors.canvas}.
Layer shadows with transparency, not opacity — Use oklab shadows with 0.04–0.25 alpha to create micro-elevations; avoid bold, opaque shadows that conflict with the minimal aesthetic.
Apply {rounded.lg} (14px) or {rounded.xl} (18px) to card containers — Cards should feel modern and soft without becoming overly rounded; avoid {rounded.full} for cards.
Constrain content to max-width 1104px at desktop — Maintain reading comfort and visual balance across large screens.
Use 1px borders exclusively — All strokes, dividers, and outlines should be 1px solid; the system has no thicker borders.
Include uppercase letter-spacing on micro labels — Captions using {typography.caption-xs-uppercase} should display with 1.76px letter-spacing and text-transform: uppercase for signage clarity.

Don't

Don't use {colors.accent} (#F472B6) or decorative accents for functional UI — Pink, amber, teal, and purple are reserved for hero sections, demo overlays, and decorative gradients. Never apply them to buttons, inputs, or navigation.
Don't apply strong shadows to every element — The system is minimal. Shadows should be reserved for cards, modals, and clearly elevated surfaces. Buttons and inputs remain flat or carry border only.
Don't invent spacing values outside the scale — Do not use 14px, 18px, or 30px padding; stick to the published scale ({spacing.xxs} through {spacing.band}).
Don't round or soften letter-spacing on display text — The -1.26px tracking is intentional and defines the brand. Do not reduce it for "clarity."
Don't use colors other than {colors.ink}, {colors.body}, and {colors.primary} for text — These three roles cover all typographic needs. Avoid introducing ad-hoc grays or accent colors for readability.
Don't apply rounded corners to input fields — Inputs must use {rounded.none} (0px) to signal form structure and clarity.
Don't combine multiple shadow levels on a single element — Choose one elevation from the table (Flat, Micro, Small, Medium, Large, or XL) and apply it consistently.
Don't set opacity below 0.7 for interactive text — Hover and active states should increase opacity to 1 or swap to a brighter color, not dim further.
Don't use the decorative accent colors in critical UI — {colors.accent-1}, {colors.accent-2}, and {colors.accent-3} have no defined roles and should appear only in demos, gradients, or hero overlays.
Don't skip the hairline border on cards and containers — Even minimal elements should include a 1px {colors.hairline} border to define structure.

8. Responsive Behavior

Breakpoints

Viewport	Content Width	Grid Columns	Menu Toggle	Largest Heading (H1)	Body Text	Section Padding-X
375px	356px	1	Yes (hamburger)	28px	16px	16px
768px	730px	2	Yes (hamburger)	38px	16px	24px
1024px	976px	4	Yes (hamburger)	42px	16px	24px
1280px	1104px	4	Yes (hamburger)	42px	16px	24px
1440px	1104px	4	Yes (hamburger)	42px	16px	24px

Derived Breakpoints:

Mobile (375px): Single-column layout, reduced heading size (28px), minimal padding (16px)
Tablet (768px): Heading grows to 38px, padding increases to 24px, two-column grid for content
Desktop (1024px+): Full 42px heading size, four-column grid, content capped at 1104px max-width
Menu Behavior: Navigation menu toggle (hamburger) remains visible across all breakpoints; no breakpoint hides it in favor of visible links

Touch Targets

Minimum Button Height: 44px (mobile), 26.5px–40px (desktop)
Minimum Button Width: 44px square or proportionally wider for text
Minimum Link Height: 44px (including padding)
Minimum Input Height: 44px (mobile standard)
Minimum Tap Zone: 8–16px padding around interactive elements to meet accessibility guidelines

Collapsing Strategy

Typography Scale: Heading sizes decrease from 42px (desktop) → 38px (tablet) → 28px (mobile) while maintaining negative tracking and line-height ratios.
Column Layout: Content reflows from 4 columns (desktop) → 2 columns (tablet) → 1 column (mobile). Grid items stack vertically.
Section Spacing: Padding decreases from 24px (tablet+) → 16px (mobile) to preserve screen real estate on small devices. Vertical gaps ({spacing.section} and {spacing.band}) remain proportionally large.
Navigation: Menu is always toggled (hamburger), with full-width overlay menu on mobile/tablet. Navigation bar height and link sizing reduce at smaller viewports but remain touch-accessible (44px minimum).
Card Width: Cards scale to full container width on mobile (single column), then 50% on tablet (2 columns), then proportional widths on desktop (4-column grid).
Button Sizing: Buttons maintain 26.5–40px height but reduce padding at mobile, with full-width or stacked layouts for multiple CTAs.

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: Primary ({colors.primary} — #3B82F6) — use for Sign In, Compare, primary action buttons, and active states
Secondary CTA: Outline variant with oklab(0.605991 0.096526 -0.230582 / 0.07) background and oklab(0.605991 0.096526 -0.230582 / 0.3) border
Background: Canvas ({colors.canvas} — #0F1012) — default page background
Surface: Surface ({colors.surface} — #17181B) — card and container background
Heading Text: Ink ({colors.ink} — #F5F6F8) — all headings and primary text
Body Text: Body ({colors.body} — #9AA0AB) — secondary or reduced-emphasis text
Borders & Dividers: Hairline ({colors.hairline} — #2A2C31) — 1px borders, subtle structure
Decorative Accents: Accent ({colors.accent} — #F472B6), Accent-1 ({colors.accent-1} — #FBBF24), Accent-2 ({colors.accent-2} — #34D399), Accent-3 ({colors.accent-3} — #A78BFA) — hero sections, overlays, demos only

Iteration Guide

Always use pill-shaped buttons — Apply {rounded.full} (9999px border-radius) to all interactive buttons and chips. This is non-negotiable and defines the system's approachable aesthetic.
Apply negative tracking only to display text — {typography.display-lg} uses -1.26px letter-spacing; {typography.heading-md} uses -0.48px. All other typography sizes use 0px or positive tracking. Do not round tight tracking to 0.
Constrain content width to 1104px at desktop — Never allow text or card layouts to exceed 1104px on large screens. Use max-width and centered alignment.
Use layered-micro shadows for elevation — Avoid single, bold shadows. Stack multiple oklab-based shadows with low opacity (0.04–0.25) to create depth. Refer to the Elevation table for exact values.
Stick to the spacing scale — Padding, margins, and gaps must use values from {spacing.xxs} (4px) through {spacing.band} (80px). Do not invent intermediate values.
Heading sizes scale with viewport — Mobile: 28px, Tablet: 38px, Desktop: 42px. Update {typography.display-lg} size proportionally in CSS (use clamp or media queries).
Borders are always 1px and always {colors.hairline} — No thicker strokes; all dividers and outlines use 1px #2A2C31. This maintains visual consistency and minimalism.
Reserve primary blue (#3B82F6) for CTAs only — Use it for primary buttons, active navigation links, and hover states. Secondary actions use outlines or ghost variants.
Use {typography.body-lg} (16px, weight 400, line-height 1.63) for standard body copy — This is the default narrative text size across the system. Avoid smaller sizes except for captions or code.
Ensure touch targets are at least 44px on mobile — Buttons and interactive elements must include padding to meet accessibility standards. Desktop buttons can be smaller (26.5–40px) but should never be cramped.
Apply {colors.ink} to all primary text — Headings, labels, and main body text should use #F5F6F8. Reserve {colors.body} (#9AA0AB) for secondary or de-emphasized text only.
Cards use {rounded.lg} (14px) or {rounded.xl} (18px), never {rounded.full} — Card borders should be modern and soft but not pill-shaped. Maintain distinction between card and button styling.

10. Known Gaps

No semantic color ramp declared: The site does not expose error, warning, success, or info color states in its HTML or CSS. No semantic colors were measured; treat status communication as out of scope for this extraction.
Three decorative accent colors with no measured role: {colors.accent-1} (amber), {colors.accent-2} (teal), and {colors.accent-3} (purple) appear in demo gradients and hero sections but have no defined functional roles. Use them for visual variety in non-critical surfaces only.
Interaction states inferred, not exhaustively captured: The extraction lists observed :hover states from stylesheets, but focus, active, disabled, and loading states may not be fully represented. Refer to hover guidelines in Component Stylings and interpolate missing states conservatively.
No dark/light mode data: The extraction covers the measured (dark) theme only. Light mode appearance, if it exists, was not analyzed; do not assume a generated or inverted light variant.
Single page analyzed: Only the homepage (https://designmd.me/) was screenshotted and analyzed. Surfaces behind authentication, additional pages, or hidden components are not represented.
No animation or transition timing: CSS transitions, keyframe animations, or motion duration values were not extracted. Implement transitions conservatively (e.g., 200–300ms ease-in-out) without explicit spec from this document.
Limited component coverage: Only the most frequently measured components (buttons, cards, navigation, inputs, links, footer) are detailed. Rare or undocumented components (modals, tabs, tooltips, popovers) may require interpolation using the design principles outlined above.
Copy state and loading states not measured: Submit button states (loading, disabled, success) and form validation states are not represented in the extraction; infer these using the opacity and color-mixing patterns observed in hover states.
Z-index values inferred: The three z-index values (40, 50, 55) all refer to dropdowns. A complete z-index stacking context (modals, toasts, sticky headers) has been extrapolated but not fully verified against live page behavior.

Document Version: 1.0 | Brand: DesignMD | Extraction Date: 2025 | Page: https://designmd.me/

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

Design tokens

Extracted from designmd.me

Primary

#3B82F6

Primary CTA, brand accent, active state

#F472B6

Secondary accent / hero band

#FBBF24

Accent / decorative

#34D399

Accent / decorative

#A78BFA

Accent / decorative

Neutral

#0F1012

Default page background

#17181B

Card / panel background

#F5F6F8

Headings / primary text

#9AA0AB

Body copy

#FFFFFF

Label colour on brand surfaces

#2A2C31

1px borders and dividers

Typography · Inter

h142px · 700 · 46.2px

h224px · 700 · 32px

h315px · 600 · 22.5px

body13px · 400 · 21.125px

link12px · 400 · 19.5px

button11px · 500 · 16.5px

input18px · 400 · 28px

list-item14px · 400 · 22.75px

heading12px · 600 · 18.6667px

body16px · 400 · 26px

body16px · 500 · 26px

body14px · 500 · 20px

caption11px · 700 · 16.5px

body14px · 600 · 22.75px

heading15px · 700 · 21px

caption11px · 700 · 16.5px

caption12px · 400 · 16px

caption12px · 400 · 18px

body14px · 600 · 20px

body13px · 400 · 19.5px

caption12px · 500 · 16px

body18px · 600 · 28px

caption11px · 600 · 16.5px

button12px · 600 · 16px

Typography · Geist Mono

code12px · 400 · 16px

code11px · 400 · 16.5px

code10px · 400 · 15px

Typography · Newsreader

display42px · 700 · 46.2px

Spacing

4px

8px

12px

16px

20px

24px

28px

40px

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.04) 0px 10px 15px -3px, oklab(0 0 0 / 0.04) 0px 4px 6px -4px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(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, oklab(0.999994 0.0000455678 0.0000200868 / 0.04) 0px 0px 0px 1px, oklab(0 0 0 / 0.25) 0px 20px 25px -5px, oklab(0 0 0 / 0.25) 0px 8px 10px -6px

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.1) 0px 10px 15px -3px, oklab(0 0 0 / 0.1) 0px 4px 6px -4px

Components · 4

Remixes of designmd.me

Latest remixes

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

Remix it

DESIGN.md for designmd.me

Preview

Design System Inspired by DesignMD

1. Visual Theme & Atmosphere

2. Color Palette & Roles

Primary

Accent Colors

Neutral Scale

Surface & Borders

3. Typography Rules

Font Family

Hierarchy

Principles

4. Component Stylings

Buttons

Primary Button (CTA)

Outline Button (Secondary)

Ghost Button (Tertiary)

Text Button (Minimal)

Cards & Containers

Default Card

Small Card (Default SM)

Navigation

Navigation Bar

Navigation Link (Active)

Navigation Link (Inactive)

Inputs & Forms

Text Input

Input Label

Links

Standard Link

Small Link Variant

Footer

Footer Container

5. Layout Principles

Spacing System

Grid & Container

Whitespace Philosophy

Border Radius Scale

Border Widths

6. Depth & Elevation

Opacity Levels

Z-index / Layering

7. Do's and Don'ts

Do

Don't

8. Responsive Behavior

Breakpoints

Touch Targets

Collapsing Strategy

9. Agent Prompt Guide

Quick Color Reference

Iteration Guide

10. Known Gaps

Remixes of designmd.me

Preview

Design System Inspired by DesignMD

1. Visual Theme & Atmosphere

2. Color Palette & Roles

Primary

Accent Colors

Neutral Scale

Surface & Borders

3. Typography Rules

Font Family

Hierarchy

Principles

4. Component Stylings

Buttons

Primary Button (CTA)

Outline Button (Secondary)

Ghost Button (Tertiary)

Text Button (Minimal)

Cards & Containers

Default Card

Small Card (Default SM)

Navigation

Navigation Bar

Navigation Link (Active)

Navigation Link (Inactive)