A DesignMD user

Generated Nov 7, 2026

DESIGN.md for nove-nextjs-template.vercel.app

nove-nextjs-template.vercel.app6 componentsJost

Remix

4 screenshots captured· nove-nextjs-template.vercel.app

1 / 4 · Nove | Café espresso at home · Above the fold

Preview

the generated design system

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

Design tokens

version: alpha
name: Nove-nextjs-template
description: |
  Nove's design system embodies a refined, minimalist aesthetic rooted in
  Italian craftsmanship and modern simplicity. The visual language prioritizes
  clarity and elegance through restrained color use, generous whitespace, and
  carefully weighted typography. Every element serves a functional purpose while
  maintaining a sophisticated, premium character that reflects the precision of
  espresso machine engineering. The system balances bold, commanding display
  typography with delicate micro-interactions and subtle depth, creating an
  environment where content and product photography breathe. The overall mood is
  aspirational yet approachable—luxury without pretension, technology with a
  human touch.
source:
  url: "https://nove-nextjs-template.vercel.app/"
  pagesAnalyzed: 2
  extractedAt: 2026-11-07
  tokensMeasured: true
typography:
  display-xl:
    fontFamily: Jost
    fontSize: 72px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -1.08px
  display-lg:
    fontFamily: Jost
    fontSize: 60px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -0.9px
  display-lg-loose:
    fontFamily: Jost
    fontSize: 60px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.9px
  display-md:
    fontFamily: Jost
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.72px
  heading-md:
    fontFamily: Jost
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.45px
  heading-sm:
    fontFamily: Jost
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.38
    letterSpacing: -0.3px
  heading-xs:
    fontFamily: Jost
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.43
    letterSpacing: 0px
  body-xl:
    fontFamily: Jost
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.63
    letterSpacing: 0px
  body-xl-strong:
    fontFamily: Jost
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.63
    letterSpacing: 0px
  body-lg:
    fontFamily: Jost
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  body-md:
    fontFamily: Jost
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-sm:
    fontFamily: Jost
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.63
    letterSpacing: 0px
  body-sm-tight:
    fontFamily: Jost
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  button:
    fontFamily: Jost
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  caption-lg:
    fontFamily: Jost
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.56
    letterSpacing: 0px
  caption-md:
    fontFamily: Jost
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.38
    letterSpacing: 0px
  caption-md-strong:
    fontFamily: Jost
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0px
  code-xl:
    fontFamily: "IBM Plex Mono"
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -3px
  code-xl-strong:
    fontFamily: "IBM Plex Mono"
    fontSize: 60px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1.5px
  code-lg:
    fontFamily: "IBM Plex Mono"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.75px
  code-md:
    fontFamily: "IBM Plex Mono"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  code-sm:
    fontFamily: "IBM Plex Mono"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  code-sm-strong:
    fontFamily: "IBM Plex Mono"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0px
rounded:
  none: 0px
  xs: 7.2px
  sm: 12px
  md: 21.6px
  lg: 26.4px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 32px
  xxxl: 40px
  section: 48px
  band: 64px
borderWidths:
  thin: 1px
shadows:
  sm: "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px"
  md: "rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
  lg: "rgba(0, 0, 0, 0.25) 0px 25px 50px -12px"
  xl: "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px"
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(oklab(0.2 0.00253361 0.00544225 / 0.6) 0%, rgba(0, 0, 0, 0) 100%)"
  - context: section
    kind: radial
    value: "radial-gradient(at 78% 100%, lab(17.6352 0.870228 2.09891) 0%, rgba(0, 0, 0, 0) 65%)"
components:
  button-text:
    textColor: "lab(7.22121 0.833631 1.86806)"
    height: 52px
    padding: "0px 32px 0px 32px"
    fontSize: 16px
    fontFamily: Jost
    fontWeight: 500
    lineHeight: 1.5
    rounded: "3.35544e+07px"
    backgroundColor: "lab(92.4776 0.341237 2.25915)"
  button-text-2:
    textColor: "lab(96.7639 0.224769 1.5044)"
    height: 52px
    padding: "0px 32px 0px 32px"
    fontSize: 16px
    fontFamily: Jost
    fontWeight: 500
    lineHeight: 1.5
    rounded: "3.35544e+07px"
    backgroundColor: "lab(7.22121 0.833631 1.86806)"
  button-outline:
    typography: "{typography.button}"
    textColor: "lab(7.22121 0.833631 1.86806)"
    border: "1px solid oklab(0.2 0.00253361 0.00544225 / 0.25)"
    height: 44px
    padding: "0px 20px 0px 24px"
    rounded: "3.35544e+07px"
  card:
    typography: "{typography.body-md}"
    textColor: "lab(7.22121 0.833631 1.86806)"
    border: "1px solid lab(7.22121 0.833631 1.86806 / 0.11)"
    padding: "40px 40px 40px 40px"
    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.05) 0px 1px 2px 0px"
    rounded: "{rounded.lg}"
    backgroundColor: "lab(99.078 0.111103 0.751424)"
  card-lg:
    typography: "{typography.body-md}"
    textColor: "lab(7.22121 0.833631 1.86806)"
    padding: "12px 12px 12px 12px"
    rounded: "{rounded.lg}"
    backgroundColor: "lab(92.4776 0.341237 2.25915)"
  badge-text:
    typography: "{typography.caption-md-strong}"
    textColor: "lab(96.7639 0.224769 1.5044)"
    height: 24px
    padding: "2px 10px 2px 10px"
    rounded: "3.35544e+07px"
    backgroundColor: "lab(17.6352 0.870228 2.09891)"
  badge-text-2:
    typography: "{typography.code-sm-strong}"
    textColor: "lab(96.7639 0.224769 1.5044)"
    height: 24px
    padding: "2px 10px 2px 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"
    backgroundColor: "lab(7.22121 0.833631 1.86806)"
  navigation:
    typography: "{typography.body-md}"
    textColor: "lab(96.7639 0.224769 1.5044)"
  footer:
    typography: "{typography.body-md}"
    textColor: "lab(7.22121 0.833631 1.86806)"
    padding: "96px 20px 20px 20px"
  link:
    typography: "{typography.body-md}"
    textColor: "lab(96.7639 0.224769 1.5044)"
    rounded: "{rounded.sm}"
  link-sm:
    typography: "{typography.body-md}"
    textColor: "lab(7.22121 0.833631 1.86806)"
    rounded: "{rounded.md}"
states:
  other-hover:
    target: other
    state: hover
    opacity: 1
  input-disabled:
    target: input
    state: disabled
    opacity: 0.5
  other-disabled:
    target: other
    state: disabled
    opacity: 0.5
  other-focus:
    target: other
    state: focus
    rounded: "3.40282e+38px"
  other-focus-visible:
    target: other
    state: focus-visible
    outlineWidth: 1px
breakpoints:
  - width: 375
    containerWidth: 351
    gridColumns: 4
    navLinksVisible: 15
    menuToggleVisible: true
    headingPx: 36
    bodyPx: 16
    sectionPaddingX: 12
  - width: 768
    containerWidth: 728
    gridColumns: 6
    navLinksVisible: 15
    menuToggleVisible: true
    headingPx: 48
    bodyPx: 16
    sectionPaddingX: 20
  - width: 1024
    containerWidth: 984
    gridColumns: 6
    navLinksVisible: 19
    menuToggleVisible: true
    headingPx: 60
    bodyPx: 16
    sectionPaddingX: 20
  - width: 1280
    containerWidth: 1240
    gridColumns: 4
    navLinksVisible: 19
    menuToggleVisible: true
    headingPx: 60
    bodyPx: 16
    sectionPaddingX: 20
  - width: 1440
    containerWidth: 1400
    gridColumns: 4
    navLinksVisible: 19
    menuToggleVisible: true
    headingPx: 60
    bodyPx: 16
    sectionPaddingX: 20
coverage:
  statesFound: 43
  gradientsFound: 2
  rolesUnassigned: 0
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: false
  semanticRampDeclared: false

Design System Inspired by Nove

1. Visual Theme & Atmosphere

Nove's design system embodies a refined, minimalist aesthetic rooted in Italian craftsmanship and modern simplicity. The visual language prioritizes clarity and elegance through restrained color use, generous whitespace, and carefully weighted typography. Every element serves a functional purpose while maintaining a sophisticated, premium character that reflects the precision of espresso machine engineering. The system balances bold, commanding display typography with delicate micro-interactions and subtle depth, creating an environment where content and product photography breathe. The overall mood is aspirational yet approachable—luxury without pretension, technology with a human touch.

Key Characteristics

Minimalist color palette: near-black text on off-white surfaces with selective accent highlighting
Generous whitespace and breathing room between sections
Bold, expressive headline typography with tight letter-spacing
Micro-elevation system using barely-visible shadows for layering
Pill-shaped interactive elements (buttons, badges, navigation items)
Premium imagery given prominence with minimal chromatic competition
Refined micro-interactions using opacity and color blending rather than obvious movement

2. Color Palette & Roles

Primary

Brand Accent (lab(17.6352 0.870228 2.09891)): Deep warm brown used for hero badges, accent text, and high-impact call-to-action elements; represents the coffee brand's warmth and authenticity.

Interactive

Primary CTA (lab(7.22121 0.833631 1.86806)): Near-black, used for button text, card backgrounds, and primary body copy; the system's dominant foreground color for maximum contrast and readability.
Secondary Button (lab(92.4776 0.341237 2.25915)): Light warm gray, used for secondary button fills and contained card backgrounds; provides subtle visual hierarchy.

Neutral Scale

Canvas / Page Background (lab(99.078 0.111103 0.751424)): Off-white with minimal warm cast, serves as the default page and card surface; ensures legibility while maintaining warmth.
Muted Text (lab(96.7639 0.224769 1.5044)): Soft near-white used for text on dark backgrounds (dark buttons, badges) and secondary UI elements.
Border / Hairline (oklab(0.2 0.00253361 0.00544225 / 0.25)): Ultra-light transparent dark tint for subtle dividing lines and card borders; maintains visual separation without harshness.

Semantic / Status

Focus Ring (var(--ring)): Not explicitly extracted; see Known Gaps.

3. Typography Rules

Font Family

Primary: Jost (sans-serif) — a geometric, humanist typeface that conveys both modernity and approachability. Fallback stack: Jost, system-ui, -apple-system, sans-serif

Secondary / Code: IBM Plex Mono — a fixed-width face for technical or product specification display. Fallback stack: IBM Plex Mono, Menlo, Courier New, monospace

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display Extra Large	Jost	72px	500	1	-1.08px	`{typography.display-xl}` Hero statements, primary h1
Display Large	Jost	60px	500	1.05	-0.9px	`{typography.display-lg}` Major section headers, h2
Display Large (Loose)	Jost	60px	500	1.25	-0.9px	`{typography.display-lg-loose}` Alternative large h1 spacing
Display Medium	Jost	48px	500	1	-0.72px	`{typography.display-md}` Section headers, h3
Heading Medium	Jost	30px	500	1.25	-0.45px	`{typography.heading-md}` Card titles, subsection headers
Heading Small	Jost	20px	500	1.38	-0.3px	`{typography.heading-sm}` Feature labels, callout headers
Heading Extra Small	Jost	14px	600	1.43	0px	`{typography.heading-xs}` Badge text, micro-labels
Body Extra Large	Jost	20px	400	1.63	0px	`{typography.body-xl}` Large body copy, intro paragraphs
Body Extra Large (Strong)	Jost	20px	500	1.63	0px	`{typography.body-xl-strong}` Emphasized body text
Body Large	Jost	18px	500	1.25	0px	`{typography.body-lg}` Feature descriptions, highlighted body
Body Medium	Jost	16px	400	1.5	0px	`{typography.body-md}` Standard body copy, form labels
Body Small	Jost	14px	400	1.63	0px	`{typography.body-sm}` Secondary text, helper copy
Body Small (Tight)	Jost	14px	400	1.43	0px	`{typography.body-sm-tight}` Link text, dense body
Caption Large	Jost	18px	400	1.56	0px	`{typography.caption-lg}` Photo credits, large captions
Caption Medium	Jost	12px	400	1.38	0px	`{typography.caption-md}` Footnotes, meta information
Caption Medium (Strong)	Jost	12px	500	1.33	0px	`{typography.caption-md-strong}` Emphasized captions, badge labels
Button	Jost	14px	500	1.43	0px	`{typography.button}` Call-to-action text
Code Extra Large	IBM Plex Mono	60px	400	1	-3px	`{typography.code-xl}` Display code/specifications
Code Extra Large (Strong)	IBM Plex Mono	60px	500	1.05	-1.5px	`{typography.code-xl-strong}` Emphasized large code
Code Large	IBM Plex Mono	30px	400	1	-0.75px	`{typography.code-lg}` Heading-level code
Code Medium	IBM Plex Mono	14px	400	1.43	0px	`{typography.code-md}` Inline code, specifications
Code Small	IBM Plex Mono	12px	400	1.33	0px	`{typography.code-sm}` Captions, micro code
Code Small (Strong)	IBM Plex Mono	12px	500	1.33	0px	`{typography.code-sm-strong}` Emphasized small code

Principles

Display sizes carry negative letter-spacing to create visual tension and confidence in hero moments; this tightening is essential to the system's premium feel.
Jost's geometric construction makes it legible even at extreme sizes; use Jost for all body, heading, and button copy.
IBM Plex Mono is reserved for product specifications, technical details, and occasional numerical callouts where monospaced appearance adds authority.
Line-height loosens slightly for body text (1.5–1.63) to ensure comfort in reading; headings remain tighter (1–1.38) for visual density.
Weight contrast drives hierarchy: headings are 500, body is 400, accents use 600 sparingly (heading-xs only).
Letter-spacing is uniformly 0px except in display sizes, where negative tracking creates typographic drama.

4. Component Stylings

Buttons

Primary Button (dark background, light text, pill-shaped)

Background: lab(7.22121 0.833631 1.86806) (near-black)
Text Color: lab(92.4776 0.341237 2.25915) (light warm gray)
Padding: 0px 32px (horizontal), 0px vertical
Height: 52px
Font: Jost, {typography.button} (14px, weight 500, line-height 1.43)
Border: 1px solid rgba(0, 0, 0, 0) (no visible border)
Border Radius: {rounded.full} (pill shape, 9999px)
Box Shadow: none
Width: 203px
Hover: Text color becomes lab(96.7639 0.224769 1.5044), background becomes color-mix(in oklab, lab(7.22121 0.833631 1.86806) 85%, transparent)

Secondary Button (light background, dark text, pill-shaped)

Background: lab(92.4776 0.341237 2.25915) (light warm gray)
Text Color: lab(7.22121 0.833631 1.86806) (near-black)
Padding: 0px 32px, 0px vertical
Height: 52px
Font: Jost, {typography.button} (14px, weight 500, line-height 1.43)
Border: 1px solid rgba(0, 0, 0, 0) (no visible border)
Border Radius: {rounded.full} (pill shape, 9999px)
Box Shadow: none
Width: 218px
Hover: Background becomes color-mix(in oklab, lab(92.4776 0.341237 2.25915) 85%, transparent)

Ghost / Outline Button (transparent background, dark border, pill-shaped)

Background: rgba(0, 0, 0, 0) (transparent)
Text Color: lab(7.22121 0.833631 1.86806) (near-black)
Padding: 0px 20px to 0px 24px, 0px vertical
Height: 44px
Font: Jost, {typography.button} (14px, weight 500, line-height 1.43)
Border: 1px solid oklab(0.2 0.00253361 0.00544225 / 0.25) (subtle dark hairline)
Border Radius: {rounded.full} (pill shape, 9999px)
Box Shadow: none
Width: 174px
Hover: Border color becomes color-mix(in oklab, oklab(0.2 0.00253361 0.00544225 / 0.25) 60%, transparent), text remains dark

Cards & Containers

Standard Card (light background, subtle border, soft shadow)

Background: lab(99.078 0.111103 0.751424) (off-white)
Text Color: lab(7.22121 0.833631 1.86806) (near-black)
Padding: {spacing.xxxl} (40px all sides)
Font: Jost, {typography.body-md} (16px, weight 400, line-height 1.5)
Border: 1px solid lab(7.22121 0.833631 1.86806 / 0.11) (ultra-light dark hairline)
Border Radius: {rounded.lg} (26.4px)
Box Shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px (micro elevation, md tier)
Width: 630px
Height: 660px

Large Card / Container (light background, no border, flat)

Background: lab(92.4776 0.341237 2.25915) (light warm gray)
Text Color: lab(7.22121 0.833631 1.86806) (near-black)
Padding: {spacing.sm} (12px all sides)
Font: Jost, {typography.body-md} (16px, weight 400, line-height 1.5)
Border: 0px solid lab(7.22121 0.833631 1.86806 / 0.11) (no border)
Border Radius: {rounded.lg} (26.4px)
Box Shadow: none
Width: 1400px
Height: 860px

Inputs & Forms

Text Input / Form Field (light background, subtle border, focus state)

Background: default lab(99.078 0.111103 0.751424) (off-white)
Text Color: lab(7.22121 0.833631 1.86806) (near-black)
Border: 1px solid oklab(0.2 0.00253361 0.00544225 / 0.25) (subtle hairline)
Border Radius: {rounded.sm} (12px)
Padding: {spacing.md} (16px) horizontally, {spacing.sm} (12px) vertically
Font: Jost, {typography.body-md} (16px, weight 400, line-height 1.5)
Hover: Background becomes color-mix(in oklab, var(--input) 40%, transparent)
Focus-Visible: Border color becomes var(--primary) or var(--ring) with outline 1px; box-shadow includes focus ring
Disabled: Opacity 0.5

Navigation

Navigation Bar (horizontal menu, transparent background)

Background: rgba(0, 0, 0, 0) (transparent)
Text Color: lab(96.7639 0.224769 1.5044) (soft near-white, dark theme compatible)
Padding: 0px all sides
Font: Jost, {typography.body-md} (16px, weight 400, line-height 1.5)
Border: 0px solid lab(96.7639 0.224769 1.5044 / 0.14) (no visible border)
Border Radius: {rounded.none} (0px)
Box Shadow: none
Width: 732.656px
Height: 206px
Visible Links: 15–19 depending on viewport
Hover: Text color becomes var(--foreground), background becomes var(--muted) or var(--secondary) with color-mix(in oklab, var(--secondary), var(--foreground) 5%) or opacity 0.5
Focus: Box-shadow receives focus ring treatment

Badges

Solid Badge (dark background, light text, pill-shaped)

Background: lab(7.22121 0.833631 1.86806) (near-black)
Text Color: lab(96.7639 0.224769 1.5044) (soft near-white)
Padding: 2px 10px (horizontal), 2px vertical
Height: 24px
Font: IBM Plex Mono, {typography.caption-md-strong} (12px, weight 500, line-height 1.33)
Border: 1px solid rgba(0, 0, 0, 0) (no visible border)
Border Radius: {rounded.full} (pill shape, 9999px)
Box Shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px (subtle sm tier elevation)
Width: 71px

Accent Badge (warm brown background, light text, pill-shaped)

Background: lab(17.6352 0.870228 2.09891) (deep warm brown)
Text Color: lab(96.7639 0.224769 1.5044) (soft near-white)
Padding: 2px 10px (horizontal), 2px vertical
Height: 24px
Font: Jost, {typography.caption-md-strong} (12px, weight 500, line-height 1.33)
Border: 1px solid rgba(0, 0, 0, 0) (no visible border)
Border Radius: {rounded.full} (pill shape, 9999px)
Box Shadow: none
Width: 87px

Footer

Footer (light background, minimal border)

Background: rgba(0, 0, 0, 0) (transparent)
Text Color: lab(7.22121 0.833631 1.86806) (near-black)
Padding: 96px 20px 20px 20px (top-left-right-bottom)
Font: Jost, {typography.body-md} (16px, weight 400, line-height 1.5)
Border: 0px solid lab(7.22121 0.833631 1.86806 / 0.11) (no border)
Border Radius: {rounded.none} (0px)
Box Shadow: none
Width: 1440px
Height: 1328.72px (full height) or 895px (compact)

5. Layout Principles

Spacing System

The spacing system uses a base unit of 4px ({spacing.xxs}), with a multiplied scale for logical rhythm:

{spacing.xxs} = 4px — internal component padding, micro-gaps
{spacing.xs} = 8px — small component spacing, tight button groups
{spacing.sm} = 12px — form field padding, section dividers
{spacing.md} = 16px — standard gap between elements, inline lists, primary padding
{spacing.lg} = 20px — section headers, card spacing within containers
{spacing.xl} = 24px — contained section padding, large component gaps
{spacing.xxl} = 32px — card interior padding, major block spacing
{spacing.xxxl} = 40px — hero section padding, large card margins
{spacing.section} = 48px — vertical rhythm for content sections
{spacing.band} = 64px — large section dividers, full-bleed spacing

Usage Context:

Button/input internal spacing: {spacing.md} to {spacing.lg}
Card padding: {spacing.xxxl} (40px)
Section top/bottom margins: {spacing.section} to {spacing.band}
Page horizontal padding: {spacing.md} to {spacing.xl} depending on viewport

Grid & Container

Maximum container width: 1400px (full content width at 1440px viewport with side margins)
Content column width: Scales from 351px (375px viewport) to 1400px (1440px viewport+)
Grid columns: 4–6 columns depending on viewport; exact counts are measured per breakpoint (see Responsive Behavior)
Section padding horizontal: {spacing.sm} (12px) at 375px; {spacing.xl} (20px) at 768px+
Margin strategy: Full-bleed sections alternate with centered content columns; no fixed container except where explicitly constrained

Whitespace Philosophy

The system embraces negative space as a design element. Large expanses of off-white canvas (lab(99.078 0.111103 0.751424)) surround content, allowing photography and typography to command attention. Sections are separated by full-height band spacing ({spacing.band} — 64px), giving breathing room between concepts. Cards and containers themselves add padding ({spacing.xxxl} — 40px) around interior content, creating a layered sense of containment without visual clutter. Text is never crowded; line-height is generous (1.5–1.63 for body), and display copy is surrounded by silent space to amplify impact.

Border Radius Scale

All border-radius values as measured:

{rounded.none} = 0px — footer, navigation, full-bleed sections (sharp edges)
{rounded.xs} = 7.2px — button corners (tight curve, pill-adjacent)
{rounded.sm} = 12px — link corners, form fields, containers (gentle curve)
{rounded.md} = 21.6px — card corners, secondary links (moderate roundness)
{rounded.lg} = 26.4px — primary card corners, overlay surfaces (strong roundness, approaching pill)
{rounded.full} = 9999px — buttons, badges, avatars (perfect pill/circle shape)

Border Widths

Hairline (thin): 1px — card borders, input borders, button ghost states, form dividers
No thicker border weights are used in the measured system; depth comes from color, shadow, and spacing rather than stroke weight

6. Depth & Elevation

The system uses a layered-micro elevation strategy: depth emerges from stacked, near-transparent shadows rather than dramatic chiaroscuro. Multiple shadow layers create barely-there lift, preserved through careful color blending and opacity modulation.

Level	Treatment	Use
Flat	No shadow	Navigation, footer, large containers, text-only sections
Micro (md)	`rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`	Standard card surfaces, contained components
Small (sm)	`rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px`	Elevated cards, floating elements, badge emphasis
Large (lg)	`rgba(0, 0, 0, 0.25) 0px 25px 50px -12px`	Navigation dropdowns, modals, overlays (reserved)
Extra Large (xl)	`rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px`	Dropdown menus, floating tooltips

Shadow Philosophy: Shadows are intentionally subtle because the system's depth comes primarily from color-blocking (light cards on light canvas, dark text on light backgrounds) and spatial separation (generous padding, section breaks). When shadows do appear, they serve to:

Distinguish interactive surfaces (cards, dropdowns) from static backgrounds
Signal layering without harshness (accent badges, emphasized elements)
Maintain legibility in overlapping contexts (modals over content)

The dominant aesthetic is flat with micro-texture: the eye reads depth through adjacency and color relationships, not dramatic shadow depth.

Opacity Levels

Two opacity levels are measured for interactive states:

50% opacity (0.5) — disabled form inputs, disabled buttons, deprioritized text
25% opacity (0.25) — subtle borders (hairlines with dark color at reduced opacity), overlay masks

Z-index / Layering

The stacking order (ascending):

Base (0): Content, cards, navigation
Dropdown / Modal Overlay (10–40): Measured as 10, 20, 30, 40 for cascading dropdowns and layered navigation
Reserved for future: sticky headers, floating action buttons, toasts (not measured in extraction)

7. Do's and Don'ts

Do

Use Jost for all body, heading, and interactive text. Its geometric proportion is the system's typographic signature; deviating to another sans-serif dilutes brand consistency.
Apply negative letter-spacing (-0.9px to -1.08px) on all display sizes (48px+). This tightens the letterforms and creates visual drama; omitting it makes headlines feel loose and unrefined.
Maintain 40px padding inside cards and containers. This breathing room is essential to the premium feel; cramped interiors undermine the luxury positioning.
Use pill-shaped buttons ({rounded.full}) for all primary CTAs and badges. The 9999px border-radius is a systemic identifier.
Build depth through color-blocking and spacing first. Shadows are secondary; prioritize off-white backgrounds, near-black text, and generous margins to establish hierarchy.
Keep interactive elements at minimum 44px height (see Responsive Behavior). This ensures touch targets are accessible on mobile and remains visually cohesive.
Layer micro-shadows (md and sm tiers) on cards and floating elements. These create visual distinction without competing with content.
Use the brown accent (lab(17.6352 0.870228 2.09891)) sparingly for hero badges and product highlights. Overuse dilutes impact; reserve it for moments of emphasis.
Preserve the near-black / off-white contrast (lab(7.22121 0.833631 1.86806) on lab(99.078 0.111103 0.751424)). This is the system's default text-on-canvas pairing; it ensures readability and premium feel.
Scale typography strictly to the measured hierarchy. Do not interpolate between sizes; use the roles provided (body-md, heading-sm, display-lg, etc.) to maintain consistency.

Don't

Do NOT use rounded corners tighter than {rounded.xs} (7.2px) on interactive elements. Buttons, badges, and inputs must feel intentional; sharp corners (0px) make them appear harsh or broken.
Do NOT apply borders thicker than 1px. The system uses hairline strokes; thicker borders feel inelegant and clunky.
Do NOT shadow text or create drop-shadow filters on typography. Text shadows muddy legibility; rely on color contrast and weight instead.
Do NOT mix Jost with other sans-serifs in the same UI. If you need a secondary typeface, use IBM Plex Mono only for code/specifications.
Do NOT use the light warm gray (lab(92.4776 0.341237 2.25915)) as body text. It lacks sufficient contrast; reserve it for button fills and secondary surfaces.
Do NOT remove horizontal padding from sections on mobile. Even at 375px, maintain {spacing.sm} (12px) padding-x to prevent text from touching screen edges.
Do NOT abbreviate display typography letter-spacing. The negative tracking is a defining design trait; restoring it to 0px makes headlines feel generic.
Do NOT use multiple shadow layers simultaneously on standard elements. Stick to one tier (md OR sm) per surface; layering creates visual noise.
Do NOT override focus states with custom styles. The system uses {ring} focus-visible borders and opacity changes; preserve them for accessibility.
Do NOT invent semantic colors (error red, success green, warning yellow). The extracted system does not declare them; if needed, propose additions to the design team rather than assuming.
Do NOT stretch buttons to full width unless explicitly designed for that context. The measured buttons have defined widths (174–218px); proportional sizing maintains brand character.

8. Responsive Behavior

Breakpoints

Viewport	Content Width	Grid Columns	Nav Links Visible	Heading Size	Body Font	Section Padding-X
375px	351px	4	15	36px	16px	12px
768px	728px	6	15	48px	16px	20px
1024px	984px	6	19	60px	16px	20px
1280px	1240px	4	19	60px	16px	20px
1440px	1400px	4	19	60px	16px	20px

Breakpoint Thresholds (inferred from measured data):

Mobile: 375px — 767px (4 columns, single-stack navigation, smaller headlines)
Tablet: 768px — 1023px (6 columns, expanded navigation, medium headlines)
Desktop: 1024px — 1280px+ (6 columns at 1024px; 4 columns at 1280px+, full-size headings)

Key Changes:

Heading typography scales from 36px (375px) → 48px (768px) → 60px (1024px+)
Grid column count changes at 1280px (6 → 4), likely due to fixed container max-width implementation
Navigation link count increases from 15 → 19 at the 1024px breakpoint
Section padding-x expands from {spacing.sm} (12px) to {spacing.xl} (20px) at 768px and holds thereafter

Touch Targets

Minimum interactive element sizes on touch devices:

Buttons: 44–52px height (measured buttons are 44px for outline, 52px for primary/secondary)
Links: 44px minimum height (measured link heights span 126–165px, well above minimum)
Form inputs: 44px minimum height (not explicitly measured, but inferred from button standards)
Spacing between targets: Minimum {spacing.md} (16px) horizontal gap, {spacing.sm} (12px) vertical gap

Collapsing Strategy

Typography collapse: Display copy shrinks from {typography.display-xl} (72px) on desktop to {typography.display-lg} (60px) at tablet, then to {typography.display-md} (48px) on mobile. Body text remains stable at {typography.body-md} (16px) across all viewports.
Layout stacking: Multi-column sections reflow to single column at 375px. Card widths scale from fixed (630px on desktop) to fluid (100% of content width on mobile).
Navigation collapse: Full horizontal menu at 1024px+ (19 links visible); no explicit hamburger toggle data extracted, but nav is present at all sizes per measured data. Mobile may use scroll or truncation rather than hidden/revealed menu.
Spacing collapse: Section padding-x halves from {spacing.xl} (20px) to {spacing.sm} (12px) at 375px; padding-y remains consistent ({spacing.section} / {spacing.band}).
Grid collapse: 6-column layout on tablet simplifies to 4 columns on desktop, suggesting a card-based layout that reorders rather than stacking.

9. Agent Prompt Guide

Quick Color Reference

Use these colors to implement any UI component:

Primary CTA / Text: lab(7.22121 0.833631 1.86806) — dark near-black for foreground, button text, card backgrounds
Secondary CTA / Button Fill: lab(92.4776 0.341237 2.25915) — light warm gray for secondary buttons and contained surfaces
Canvas / Page Background: lab(99.078 0.111103 0.751424) — off-white for cards, sections, default surface
Accent / Hero Badge: lab(17.6352 0.870228 2.09891) — deep warm brown for emphasis, calls-to-action, accent elements
Light Text / On Dark: lab(96.7639 0.224769 1.5044) — soft near-white for text on dark backgrounds
Border / Hairline: oklab(0.2 0.00253361 0.00544225 / 0.25) — ultra-light transparent dark for 1px dividing lines

Iteration Guide

Start with Jost for all typography. Every heading, body, button, and link uses Jost unless it is code/specification (IBM Plex Mono). Fallback to system-ui if Jost is unavailable.
Apply negative letter-spacing on display sizes (48px and above). Use the exact values from the Typography Hierarchy table: -0.9px for 60px headlines, -1.08px for 72px, -0.72px for 48px. Do not round or omit.
Build all buttons as pills with {rounded.full} (9999px). Primary buttons use dark backgrounds (lab(7.22121 0.833631 1.86806)) with light text; secondary buttons invert this. Ghost buttons use transparent background with dark border and text.
Use 40px padding inside cards and major containers ({spacing.xxxl}). Never crowd content; generous internal whitespace is the system's defining luxury trait.
Layer shadows carefully. Standard cards use micro-shadow (rgba(0, 0, 0, 0.05) 0px 1px 2px 0px); elevated cards use small-shadow. Do not stack multiple shadows on normal elements.
Maintain responsive typography. At 375px, use 36px headlines; at 768px, switch to 48px; at 1024px+, use 60px or 72px. Do not interpolate between sizes; jump to the next role in the hierarchy.
Reserve the brown accent (lab(17.6352 0.870228 2.09891)) for high-impact moments. Use it on hero badges, accent links, or primary CTAs where it will draw attention. Overuse dilutes effect.
Preserve focus states. All interactive elements must have :focus-visible styles using var(--ring) border color and appropriate box-shadow. Do not remove or override them.
Scale spacing from the base unit (4px). Use {spacing.md} (16px) as the default gap; double to {spacing.lg} (20px) or {spacing.xl} (24px) for major sections. Never use arbitrary pixel values.
Test at 375px, 768px, and 1024px minimum. The system is optimized for these three breakpoints; content must adapt correctly (text size, column count, padding). At mobile, ensure section padding-x is at least {spacing.sm} (12px).

10. Known Gaps

Semantic color roles (error, success, warning, info): The extracted site does not declare these states in its markup. No error-red, success-green, or warning-yellow palette exists in the system. If these states are needed, they must be designed and added separately.
Dark mode / theme variants: The extraction measured a light theme only. No dark-mode CSS custom properties or alternate palettes were detected. If dark-mode is required, it must be designed from first principles.
Interaction states beyond :hover, :focus, :focus-visible, :disabled: The system declares button/link hover effects and focus rings, but does not expose :active, :pressed, or :aria-selected states. If fine-grained interaction feedback is needed (e.g., active link underlines, pressed button styling), these must be inferred or added.
Animation / transition timing: No CSS transition, animation, or duration values were extracted. The system may have animations, but they are not declared in the measured styles. Assume interactions are instantaneous unless explicitly designed otherwise.
Specific focus ring appearance: The :focus-visible rules use var(--ring) as a CSS custom property variable, but its actual color value was not extracted. The ring behavior is present (border-color change, box-shadow) but the exact visual appearance depends on runtime CSS variable resolution. Recommend defining --ring as a high-contrast color (e.g., a saturated accent or outline) during implementation.
Form field error / warning states: Input and form components do not expose error-state styling in the extraction. Disabled state (opacity 0.5) is present, but invalid/error/warning variants are not measured.
Spatial / container query behavior: No CSS @container rules or container-query breakpoints were detected. Responsive behavior is viewport-based only.
Print styles or media queries: No @media print or print-specific styles were extracted.
Gradients and decorative fills (measured but not integrated into component roles): Two gradient definitions were extracted:
- Section linear: linear-gradient(oklab(0.2 0.00253361 0.00544225 / 0.6) 0%, rgba(0, 0, 0, 0) 100%)
- Section radial: radial-gradient(at 78% 100%, lab(17.6352 0.870228 2.09891) 0%, rgba(0, 0, 0, 0) 65%)
These appear to be background decorations for sections or hero areas but are not formally assigned to a component role. Assume they are used as layered overlays on hero images or full-bleed sections; implement as needed for visual polish.
Surfaces behind authentication / restricted content: The extraction covers 2 public pages. Behind-login pages, account dashboards, admin interfaces, or gated features were not analyzed and may have design patterns not reflected in this document.
Keyboard shortcut or accessibility feature styling: No :disabled, :aria-* attribute selectors, or keyboard-specific styles (e.g., outline-offset) were extracted. Standard focus-visible treatment is present, but advanced a11y patterns are not measured.
Icon sizing and styling: No icon components or icon sets were extracted. The system references icons (e.g., in navigation, on the bag button) but does not declare their sizing, color, or weight. Assume icons scale with adjacent text and inherit foreground color.
Component size variants (small, medium, large buttons, etc.): Only primary (52px height), secondary (52px height), and ghost (44px height) button variants were measured. No sm or lg button sizes were extracted; assume these three sizes cover the system's needs.

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

Design tokens

Extracted from nove-nextjs-template.vercel.app

Typography · Jost

body14px · 400 · 22.75px

body18px · 500 · 22.5px

h260px · 500 · 63px

body16px · 400 · 24px

button14px · 500 · 20px

heading20px · 500 · 27.5px

caption12px · 500 · 16px

caption12px · 400 · 16.5px

heading14px · 600 · 20px

h160px · 500 · 75px

h330px · 500 · 37.5px

link14px · 400 · 20px

caption18px · 400 · 28px

body20px · 400 · 32.5px

body20px · 500 · 32.5px

body16px · 500 · 24px

h172px · 500 · 72px

h348px · 500 · 48px

body18px · 400 · 28px

body24px · 500 · 30px

body20px · 500 · 25px

body24px · 400 · 32px

body20px · 500 · 20px

Typography · IBM Plex Mono

code12px · 500 · 16px

code14px · 400 · 20px

code30px · 400 · 30px

code60px · 400 · 60px

code12px · 400 · 16px

code60px · 500 · 63px

code29.7024px · 400 · 29.7024px

code18px · 400 · 28px

code36px · 400 · 40px

code16px · 400 · 24px

Spacing

16px

12px

20px

8px

32px

4px

24px

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, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 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) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px

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 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px

Components · 6

Remixes of nove-nextjs-template.vercel.app

Latest remixes

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

Remix it