Henry Rodríguez

Generated Oct 30, 2026

DESIGN.md for www.noovolife.com

www.noovolife.com9 colors5 componentsgeneralFont

Remix

12 screenshots captured· www.noovolife.com

1 / 12 · Noovo Camper Vans | the Luxury of Home in a Class B RV · Above the fold

Preview

the generated design system

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

Design tokens

version: alpha
name: Noovolife
description: |
  Noovo's design system embodies premium adventure and modern comfort, grounded
  in warm, approachable tones and clean geometric forms. The brand balances
  aspiration with accessibility—layered photography with dark overlays creates
  cinematic hero moments, while generous whitespace and soft neutrals prevent
  the aesthetic from feeling cold or corporate. Typography is deliberately
  generous and contemporary, favouring tight letter-spacing on large display
  sizes to convey sophistication. The system prioritizes the Noovo product
  (camper vans) as the hero, allowing photography and human storytelling to
  drive emotion, while UI elements remain restrained and functional. Depth is
  achieved through color blocking rather than heavy shadows, and the primary
  brand accent (#FFAC00) acts as a vital call-to-action signifier against the
  warm neutral palette.
source:
  url: "https://www.noovolife.com/"
  pagesAnalyzed: 6
  extractedAt: 2026-10-30
  tokensMeasured: true
colors:
  primary: "#FFAC00"
  canvas: "#F9F7F4"
  surface-alt: "#FFFFFF"
  on-primary: "#131211"
  ink: "#000000"
  body: "#131211"
  muted: "#333333"
  faint: "#6F6E6C"
  hairline: "#E5E7EB"
  neutral-1: "#B4B4B4"
typography:
  display-xl:
    fontFamily: generalFont
    fontSize: 70px
    fontWeight: 400
    lineHeight: 0.9
    letterSpacing: -2.8px
  display-lg:
    fontFamily: generalFont
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -2.5px
  display-lg-2:
    fontFamily: generalFont
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -2.4px
  display-lg-strong:
    fontFamily: generalFont
    fontSize: 60px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0px
  display-md:
    fontFamily: generalFont
    fontSize: 46px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -1.84px
  display-sm:
    fontFamily: generalFont
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -2.5px
  heading-md:
    fontFamily: GeneralSans
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -1.44px
  heading-md-strong:
    fontFamily: generalFont
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -2.5px
  heading-md-tight:
    fontFamily: generalFont
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.11
    letterSpacing: -1.8px
  heading-sm:
    fontFamily: generalFont
    fontSize: 35px
    fontWeight: 400
    lineHeight: 1.03
    letterSpacing: -1.75px
  heading-xs:
    fontFamily: generalFont
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -1px
  heading-xs-strong:
    fontFamily: generalFont
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -1px
  body-xl:
    fontFamily: generalFont
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  body-xl-tight:
    fontFamily: generalFont
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.4px
  body-xl-strong:
    fontFamily: generalFont
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.4px
  body-lg:
    fontFamily: generalFont
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  body-md:
    fontFamily: generalFont
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.29
    letterSpacing: 0px
  body-md-strong:
    fontFamily: generalFont
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.29
    letterSpacing: 0px
  button-md:
    fontFamily: generalFont
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.31
    letterSpacing: -0.32px
  button-sm:
    fontFamily: generalFont
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.07
    letterSpacing: -0.28px
  label-md:
    fontFamily: generalFont
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  label-md-strong:
    fontFamily: generalFont
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  label-sm:
    fontFamily: GeneralSans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.7px
  caption-md:
    fontFamily: generalFont
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  caption-md-strong:
    fontFamily: generalFont
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: -0.24px
  caption-md-tight:
    fontFamily: generalFont
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0px
  caption-sm:
    fontFamily: generalFont
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  caption-xs:
    fontFamily: GeneralSans
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.2px
rounded:
  none: 0px
  xs: 2px
  sm: 10px
  md: 15px
  lg: 20px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 32px
  xxl: 36px
  xxxl: 40px
  section: 52px
  band: 60px
borderWidths:
  thin: 1px
shadows:
  sm: "rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
  md: "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: "#F9F7F4"
    surface: "#FFFFFF"
    surfaceRaised: "#F5F5F5"
    text: "#000000"
    textMuted: "#131211"
    border: "#E5E7EB"
    accent: "#C28300"
    accentFg: "#000000"
    focusRing: "#FFAC00"
    elevation: shadow
  dark:
    bg: "#161109"
    surface: "#241F18"
    surfaceRaised: "#302B24"
    text: "#FFFCF5"
    textMuted: "#A6A39B"
    border: "#3B3730"
    accent: "#FFAC00"
    accentFg: "#0B0B0C"
    focusRing: "#FFAC00"
    elevation: "border+surface"
gradients:
  - context: hero
    kind: linear
    value: "linear-gradient(rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.7) 100%)"
  - context: hero
    kind: linear
    value: "linear-gradient(45deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%)"
  - context: hero
    kind: linear
    value: "linear-gradient(rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%)"
  - context: section
    kind: linear
    value: "linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3))"
  - context: section
    kind: linear
    value: "linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%)"
  - context: section
    kind: linear
    value: "linear-gradient(230deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8) 100%)"
components:
  button-primary:
    typography: "{typography.label-sm}"
    textColor: "{colors.body}"
    border: "1px solid {colors.primary}"
    height: 55px
    padding: "0px 25px 0px 20px"
    boxShadow: "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.full}"
    backgroundColor: "{colors.primary}"
  button-filled:
    typography: "{typography.button-sm}"
    textColor: "{colors.body}"
    border: "1px solid {colors.canvas}"
    height: 45px
    padding: "15px 25px 15px 25px"
    rounded: 30px
    backgroundColor: "{colors.canvas}"
  button-secondary:
    typography: "{typography.label-sm}"
    textColor: "{colors.ink}"
    border: "1px solid rgba(255, 255, 255, 0.4)"
    height: 55px
    padding: "0px 25px 0px 25px"
    boxShadow: "rgba(0, 0, 0, 0.15) 0px 1px 0px 0px"
    rounded: "{rounded.full}"
    backgroundColor: "rgba(255, 255, 255, 0.4)"
  button-filled-lg:
    typography: "{typography.label-sm}"
    textColor: "{colors.surface-alt}"
    height: 55px
    padding: "0px 25px 0px 20px"
    boxShadow: "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.full}"
    backgroundColor: "{colors.on-primary}"
  button-primary-2:
    textColor: "{colors.body}"
    border: "1px solid {colors.primary}"
    height: 55px
    padding: "20px 25px 20px 25px"
    fontSize: 14px
    boxShadow: "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"
    fontFamily: GeneralSans
    fontWeight: 500
    lineHeight: 1.07
    rounded: 30px
    backgroundColor: "{colors.primary}"
  navigation:
    textColor: "{colors.muted}"
    height: 31px
    padding: "0px 0px 0px 20px"
    fontSize: 16px
    fontFamily: GeneralSans
    fontWeight: 400
    lineHeight: 1.5
  footer:
    textColor: "{colors.muted}"
    fontSize: 16px
    fontFamily: GeneralSans
    fontWeight: 400
    lineHeight: 1.5
    backgroundColor: "{colors.surface-alt}"
  link:
    textColor: "{colors.muted}"
    padding: "28px 28px 28px 28px"
    fontSize: 16px
    fontFamily: GeneralSans
    fontWeight: 400
    lineHeight: 1.5
  link-sm:
    typography: "{typography.caption-xs}"
    textColor: "{colors.body}"
    padding: "4px 10px 4px 10px"
    rounded: 30px
    backgroundColor: "{colors.primary}"
  badge-icon:
    textColor: "{colors.muted}"
    height: 20px
    fontSize: 16px
    fontFamily: GeneralSans
    fontWeight: 400
    lineHeight: 1.5
states:
  other-hover:
    target: other
    state: hover
    opacity: 0.6
  button-focus-visible:
    target: button
    state: focus-visible
    outline: "{colors.primary} solid 3px"
    outlineColor: "{colors.primary}"
    outlineWidth: 3px
  other-focus:
    target: other
    state: focus
    outline: "rgba(0, 0, 0, 0) solid 2px"
    outlineColor: "rgba(0, 0, 0, 0)"
    outlineWidth: 2px
  other-focus-visible:
    target: other
    state: focus-visible
    opacity: 0.85
  other-disabled:
    target: other
    state: disabled
    opacity: 0.3
  button-hover:
    target: button
    state: hover
    opacity: 1
breakpoints:
  - width: 375
    containerWidth: 335
    gridColumns: 4
    navLinksVisible: 24
    menuToggleVisible: true
    headingPx: 46
    bodyPx: 16
    sectionPaddingX: 20
  - width: 768
    containerWidth: 728
    gridColumns: 3
    navLinksVisible: 24
    menuToggleVisible: true
    headingPx: 60
    bodyPx: 16
    sectionPaddingX: 40
  - width: 1024
    containerWidth: 964
    gridColumns: 4
    navLinksVisible: 24
    menuToggleVisible: true
    headingPx: 60
    bodyPx: 16
    sectionPaddingX: 40
  - width: 1280
    containerWidth: 1220
    gridColumns: 4
    navLinksVisible: 24
    menuToggleVisible: true
    headingPx: 60
    bodyPx: 16
    sectionPaddingX: 120
  - width: 1440
    containerWidth: 1380
    gridColumns: 4
    navLinksVisible: 24
    menuToggleVisible: true
    headingPx: 60
    bodyPx: 16
    sectionPaddingX: 120
coverage:
  statesFound: 56
  gradientsFound: 12
  rolesUnassigned: 1
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: true
  semanticRampDeclared: false

Design System Inspired by Noovo

1. Visual Theme & Atmosphere

Noovo's design system embodies premium adventure and modern comfort, grounded in warm, approachable tones and clean geometric forms. The brand balances aspiration with accessibility—layered photography with dark overlays creates cinematic hero moments, while generous whitespace and soft neutrals prevent the aesthetic from feeling cold or corporate. Typography is deliberately generous and contemporary, favouring tight letter-spacing on large display sizes to convey sophistication. The system prioritizes the Noovo product (camper vans) as the hero, allowing photography and human storytelling to drive emotion, while UI elements remain restrained and functional. Depth is achieved through color blocking rather than heavy shadows, and the primary brand accent ({colors.primary} — #FFAC00) acts as a vital call-to-action signifier against the warm neutral palette.

Key Characteristics

Warm, light-neutral canvas with strong accent colour discipline
Pill-shaped buttons and form controls for approachable, modern feel
Large, tightly-tracked display typography (negative letter-spacing)
Layered dark gradients over imagery for depth and legibility
Color-blocking elevation strategy (no multi-tier shadow depth)
Generous spacing and breathing room throughout sections
Inclusive interactive states: focus rings, opacity changes, scale transforms
Photography-forward layouts with minimal chrome

2. Color Palette & Roles

Primary

Primary / Brand Accent ({colors.primary} — #FFAC00): Primary CTAs, active states, accent highlights, brand identity marks. Used on buttons, badges, and key interactive elements to signal call-to-action intent.

Neutral Scale

Canvas ({colors.canvas} — #F9F7F4): Default page background. Warm beige providing a soft, inviting foundation.
Surface Alt ({colors.surface-alt} — #FFFFFF): Alternating section backgrounds, cards, and contained surfaces. Pure white for contrast and content clarity.
Ink ({colors.ink} — #000000): Primary heading and display text. Maximum contrast for readability and hierarchy emphasis.
Body / On Primary ({colors.on-primary} — #131211): Body copy, labels, and text on brand surfaces. Near-black with minimal warmth to ensure legibility.
Muted ({colors.muted} — #333333): Secondary and caption text. Reduced contrast for visual hierarchy.
Faint ({colors.faint} — #6F6E6C): Tertiary text, placeholders, and disabled states. Significantly reduced contrast for supporting content.

Hairline & Borders

Hairline ({colors.hairline} — #E5E7EB): 1px borders and dividers. Delicate line weight for visual separation without weight.

Decorative / Unassigned

Neutral Decorative ({colors.neutral-1} — #B4B4B4): No measured semantic role; used as a neutral gray for decorative contexts only.

Semantic / Status Colors

The site does not declare error, success, or warning colour states. No semantic status ramp is exposed in the measured styles.

3. Typography Rules

Font Family

Primary Font: generalFont (fallback stack not measured)

Used for display sizes, body copy, and prominent headings
Measured across sizes from 14px to 70px

Secondary Font: GeneralSans (fallback stack not measured)

Used for navigation, labels, captions, and auxiliary text
Supports a lighter weight aesthetic with consistent negative letter-spacing

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display XL	generalFont	70px	400	0.9	-2.8px	Hero-level display; extreme negative tracking for impact
Display LG	generalFont	60px	400	1	-2.5px	Major section headings; consistent negative tracking
Display LG Strong	generalFont	60px	500	1	0px	Bold variant of display large
Display MD	generalFont	46px	400	1	-1.84px	Medium display; reduced tracking
Display SM	generalFont	40px	400	1.1	-2.5px	Smaller display variant with tighter line height
Heading XS	generalFont	30px	400	1	-1px	Section subheadings
Heading XS Strong	generalFont	30px	500	1	-1px	Bold heading variant
Heading MD	GeneralSans	36px	400	1	-1.44px	Medium heading; tighter tracking in sans variant
Heading MD Strong	generalFont	36px	500	1	-2.5px	Bold medium heading with serif tracking
Heading MD Tight	generalFont	36px	500	1.11	-1.8px	Compact medium heading variant
Body XL	generalFont	20px	400	1.3	0px / -1px	Large body text; slight negative tracking in some contexts
Body XL Strong	generalFont	20px	500	1.3	0px / -0.4px	Bold large body; mixed tracking contexts
Body XL Tight	generalFont	20px	400	1.3	-0.4px	Compact large body variant
Body LG	generalFont	16px	500	1.5	0px	Semi-bold body text; increased line height for scanning
Body MD	generalFont	14px	400	1.29	0px / -0.32px	Standard body copy; mixed tracking contexts
Body MD Strong	generalFont	14px	500	1.29	0px / -0.32px	Emphasis within body text
Label MD	generalFont	16px	400	1.5	0px	Input labels and form text
Label MD Strong	generalFont	16px	500	1.25	0px	Bold label variant
Label SM	GeneralSans	14px	400	1.5	-0.5px / -0.7px	Smaller labels with negative tracking
Button MD	generalFont	16px	500	1.31	-0.32px	Primary button text; bold with tight tracking
Button SM	generalFont	14px	500	1.07	-0.28px	Smaller button text; tighter line height
Caption MD	generalFont	12px	400	1.5	0px	Standard caption and helper text
Caption MD Strong	generalFont	12px	500	1.33	-0.24px	Bold caption with tight tracking
Caption MD Tight	generalFont	12px	500	1.33	0px	Compact caption variant
Caption SM	generalFont	11px	400	1.5	0px	Small captions and footnotes
Caption XS	GeneralSans	10px	400	1.5	-0.2px	Smallest caption level

Principles

Negative Letter-Spacing: Display and heading sizes employ tight tracking (-1px to -2.8px) to create a sophisticated, premium feel and maximize visual impact at large scales.
Weight Discipline: Regular (400) is default; semi-bold (500) is reserved for headings, buttons, and emphasis within body text. No weights above 500 are used.
Line Height Ratios: Display sizes compress to 0.9–1 for tightness; body copy expands to 1.29–1.5 for comfortable reading. Buttons sit at 1.07–1.31 for compact density.
Font Pairing: generalFont handles display, headings, and body (warm, generous); GeneralSans handles navigation, labels, and small utility text (clean, modern). Both support negative letter-spacing.
Sizing Strategy: Breakpoints do not change typography size dramatically; the system scales headings from 40px (mobile) to 70px (hero) while holding body at 14–16px consistently.

4. Component Stylings

Buttons

Primary Button

Background: {colors.primary} (#FFAC00)
Text Color: {colors.on-primary} (#131211)
Font: GeneralSans, 14px, weight 400, line-height 1.5
Padding: 0px 25px 0px 20px
Height: 55px
Border Radius: {rounded.full} (9999px — pill-shaped)
Border: 1px solid {colors.primary} (#FFAC00)
Box Shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px
Focus State: 3px solid outline in {colors.primary} (#FFAC00)

Primary Button (Variant 2)

Background: {colors.primary} (#FFAC00)
Text Color: {colors.on-primary} (#131211)
Font: GeneralSans, 14px, weight 500, line-height 1.29
Padding: 20px 25px 20px 25px
Height: 55px
Border Radius: 30px (rounded square)
Border: 1px solid {colors.primary} (#FFAC00)
Box Shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px

Secondary Button (Light / Hero Variant)

Background: rgba(255, 255, 255, 0.4) (translucent white)
Text Color: {colors.ink} (#000000)
Font: GeneralSans, 14px, weight 400, line-height 1.5
Padding: 0px 25px 0px 25px
Height: 55px
Border Radius: {rounded.full} (9999px)
Border: 1px solid rgba(255, 255, 255, 0.4)
Box Shadow: rgba(0, 0, 0, 0.15) 0px 1px 0px 0px

Filled Button (Light)

Background: {colors.canvas} (#F9F7F4)
Text Color: {colors.on-primary} (#131211)
Font: generalFont, 14px, weight 500, line-height 1.07
Padding: 15px 25px 15px 25px
Height: 45px
Border Radius: 30px
Border: 1px solid {colors.canvas} (#F9F7F4)
Box Shadow: none

Filled Button Large (Dark)

Background: {colors.on-primary} (#131211)
Text Color: {colors.surface-alt} (#FFFFFF)
Font: GeneralSans, 14px, weight 400, line-height 1.5
Padding: 0px 25px 0px 20px
Height: 55px
Border Radius: {rounded.full} (9999px)
Border: 0px
Box Shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px

All Button States

Hover: opacity 0.6–1 depending on variant; primary accent buttons typically lift to opacity 1
Disabled: opacity 0.3–0.5
Focus Visible: 3px solid outline in {colors.primary} (#FFAC00)

Cards & Containers

Standard Card

Background: {colors.surface-alt} (#FFFFFF)
Border Radius: {rounded.none} (0px — sharp corners)
Border: 0px or subtle {colors.hairline} (#E5E7EB) divider
Box Shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px (md elevation)
Padding: varies by context ({spacing.md} to {spacing.lg})
Hover State: subtle transform (scale/translate) with shadow increase

Section Container

Background: alternates {colors.canvas} (#F9F7F4) and {colors.surface-alt} (#FFFFFF)
Padding X: {spacing.xxxl} (40px) on tablet/desktop; {spacing.lg} (20px) on mobile
Padding Y: {spacing.band} (60px) between sections
Max Width: fluid to viewport or container constraint

Inputs & Forms

Text Input

Background: {colors.surface-alt} (#FFFFFF)
Border: 1px solid {colors.hairline} (#E5E7EB)
Border Radius: {rounded.md} (15px)
Font: generalFont, 16px, weight 400, line-height 1.5
Padding: {spacing.md} (16px)
Text Color: {colors.on-primary} (#131211)
Placeholder Color: {colors.faint} (#6F6E6C)
Focus State: border color shifts to {colors.primary} (#FFAC00); outline removed
Hover State: border color lightens or shifts based on context

Form Label

Font: generalFont, 16px, weight 400, line-height 1.5
Text Color: {colors.on-primary} (#131211)
Margin Bottom: {spacing.sm} (12px)

Navigation

Horizontal Navigation (Header)

Background: {colors.surface-alt} (#FFFFFF) with subtle shadow
Font: GeneralSans, 16px, weight 400, line-height 1.5
Text Color: {colors.muted} (#333333)
Link Spacing: {spacing.md} (16px) horizontal gap
Border Radius: {rounded.none} (0px)
Active/Focus Link: text color becomes {colors.ink} (#000000); optional underline or accent bar

Footer

Background: {colors.surface-alt} (#FFFFFF)
Font: GeneralSans, 16px, weight 400, line-height 1.5
Text Color: {colors.muted} (#333333)
Padding: {spacing.section} (52px) vertical; {spacing.xxxl} (40px) horizontal
Border Radius: {rounded.none} (0px)
Box Shadow: none

Badges

Badge (Icon Style)

Background: {colors.primary} (#FFAC00)
Text Color: {colors.on-primary} (#131211)
Font: GeneralSans, 10px, weight 400, line-height 1.5
Padding: {spacing.xs} (8px) horizontal; {spacing.xxs} (4px) vertical
Height: 20–24px
Border Radius: {rounded.xs} (2px) to {rounded.full} (9999px) depending on context
Border: 0px

5. Layout Principles

Spacing System

Base unit: 4px ({spacing.xxs})

Scale (measured tokens)

{spacing.xxs} = 4px — minimal margin between nested elements
{spacing.xs} = 8px — small gaps (button icon spacing, condensed lists)
{spacing.sm} = 12px — small section padding, form field spacing
{spacing.md} = 16px — standard element padding and margins
{spacing.lg} = 20px — medium section gaps
{spacing.xl} = 32px — large element spacing
{spacing.xxl} = 36px — section padding spacing
{spacing.xxxl} = 40px — major section horizontal padding (mobile/tablet)
{spacing.section} = 52px — vertical gap between major sections
{spacing.band} = 60px — hero and full-width section spacing

Usage Context

Button/input padding: {spacing.md} to {spacing.lg} (16–20px)
Card padding: {spacing.md} to {spacing.xl} (16–32px)
Section padding Y: {spacing.band} (60px) between major sections
Section padding X: {spacing.xxxl} (40px) on tablet/desktop; {spacing.lg} (20px) on mobile
Text line spacing: managed through typography line-height, not margin

Grid & Container

Measured Breakpoints and Content Columns

Viewport	Content Column	Grid Columns	Section Padding X	Max Container
375px (mobile)	335px	4	20px (`{spacing.lg}`)	375px
768px (tablet)	728px	3	40px (`{spacing.xxxl}`)	768px
1024px (laptop)	964px	4	40px (`{spacing.xxxl}`)	1024px
1280px (desktop)	1220px	4	120px (custom)	1280px
1440px (large)	1380px	4	120px (custom)	1440px

Grid Strategy: 4-column on desktop/large, 3-column on tablet, responsive to content on mobile
Content Centering: Horizontal padding applied symmetrically; sections expand to full viewport width with background colour/image bleed
Container Queries: No measured container query logic; breakpoints are viewport-based

Whitespace Philosophy

Noovo employs generous breathing room throughout. Large display headings are surrounded by significant vertical whitespace ({spacing.band} = 60px between sections). Cards and containers use {spacing.md} minimum internal padding. Navigation and hero sections are not cramped; interactive elements have ample touch targets ({spacing.lg} minimum). This approach creates a premium, unhurried aesthetic and aids content scanability on all screen sizes.

Border Radius Scale

{rounded.none} = 0px — sharp corners on cards, sections, and legacy components
{rounded.xs} = 2px — tiny radius on badges and accents
{rounded.sm} = 10px — subtle rounding on some decorative elements
{rounded.md} = 15px — moderate radius on input fields and contained elements
{rounded.lg} = 20px — substantial rounding on images and larger containers
{rounded.full} = 9999px — pill-shaped buttons, badges, and circular elements

Component Context

Buttons: {rounded.full} (9999px) or 30px (alternative rounded square)
Inputs: {rounded.md} (15px)
Cards: {rounded.none} (0px)
Images: {rounded.lg} (20px)
Badges: {rounded.xs} (2px) to {rounded.full} (9999px) depending on style
Navigation: {rounded.none} (0px)

Border Widths

Thin: 1px — applied to button borders, input borders, hairline dividers
Context: Primary and secondary buttons use 1px border; inputs use 1px border; cards use 0px

6. Depth & Elevation

Elevation Table

Level	Treatment	Use
Flat (Base)	No shadow, background color only	Page canvas, section backgrounds, text
Subtle (Small)	`rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`	Button shadows, subtle lift on interactive elements
Moderate (Medium)	`rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px`	Card containers, dropdown menus, modals

Shadow Philosophy The design system prioritizes color-blocking for depth rather than progressive shadow layering. Elevated surfaces are distinguished primarily by background colour changes (white on warm canvas, canvas on white) rather than shadow accumulation. When shadows are used, they are near-transparent and minimal, creating a "barely-there lift" effect. This layered-micro approach keeps the interface light and modern, avoiding heavy drop shadows that would conflict with the photography-forward aesthetic.

Opacity Levels

10% (0.10) — extremely faint overlays, minimal visual weight
40% (0.40) — moderate transparency; used for disabled or secondary states
60% (0.60) — common hover opacity; reduces brightness while maintaining visibility
70% (0.70) — substantial but readable transparency
80% (0.80) — high opacity, slight transparency only
90% (0.90) — near-opaque; used for hover states to signal interactivity

Z-index / Layering

Base: z-index 1–5 — page content, cards, standard sections
Dropdown: z-index 10, 19, 20 — navigation menus, select dropdowns, tooltips (progressive stacking)
Modal/Overlay: z-index 50+ (inferred, not measured) — assumed for dialogs and full-screen overlays

Stacking maintains predictable layering: base content at 1–5, navigation/dropdowns at 10–20, and modals/alerts above.

7. Do's and Don'ts

Do

Use {colors.primary} (#FFAC00) for all primary CTAs. Apply it to the most important button on each page to guide user focus.
Maintain pill-shaped button styling ({rounded.full} = 9999px). This is the defining button vocabulary; do not square off CTAs.
Apply negative letter-spacing to display and heading sizes. Heading sizes should not render with letter-spacing: 0; use the values from the hierarchy table (e.g., -2.8px for display XL, -1.84px for display MD).
Use generous section padding ({spacing.band} = 60px between sections). Whitespace is a design feature; do not compress sections.
Alternate section backgrounds between {colors.canvas} and {colors.surface-alt}. This creates visual rhythm and section boundaries without heavy borders.
Apply 1px subtle shadows to cards and buttons. Shadows should be barely perceptible; use the provided box-shadow values.
Pair GeneralSans with navigation and labels, generalFont with body and headings. Font pairing is deliberate; maintain consistency.
Use {colors.hairline} (#E5E7EB) for dividers and subtle borders. This hairline color provides visual separation without weight.
Ensure button height is minimum 45px (preferably 55px). Touch targets must meet accessibility standards.
Test focus states with 3px solid {colors.primary} outline. Keyboard navigation must be visually clear.

Don't

Do not invent new button colours. If a CTA is not primary brand accent, use a dark fill (secondary) or translucent light fill (hero overlay).
Do not apply multiple shadow layers. The system is flat with color-blocking depth; avoid layered drop shadows.
Do not remove letter-spacing from display/heading typography. Negative tracking is not a style option; it is required for brand consistency.
Do not use radius 0px on buttons or inputs. Pill-shaped and rounded-square styling is mandatory for interactive elements.
Do not compress vertical spacing between sections. Each major section should have {spacing.band} (60px) breathing room.
Do not create new font sizes. Use only the measured hierarchy; do not estimate intermediate sizes.
Do not use {colors.neutral-1} (#B4B4B4) as a primary functional color. It has no measured role; reserve it for decorative contexts only.
Do not apply opacity changes below 0.3 for disabled states. Disabled should be visible but clearly non-interactive (0.3–0.5 opacity range).
Do not stack buttons vertically without spacing. Each button needs {spacing.md} (16px) gap to the next element.
Do not override hover opacity rules. Use the measured opacity values (0.6–0.9) for consistency; custom hover states should reference this scale.

8. Responsive Behavior

Breakpoints

Breakpoint	Viewport Width	Content Column	Grid Cols	Section Padding X	Key Changes
Mobile	375px	335px	4	20px (`{spacing.lg}`)	Single-column layout; nav remains visible; display headings 40px; section spacing compressed proportionally
Tablet	768px	728px	3	40px (`{spacing.xxxl}`)	Multi-column grid emerges; display headings expand to 60px; padding-x doubles
Laptop	1024px	964px	4	40px (`{spacing.xxxl}`)	4-column grid; content column stable; nav remains consistent
Desktop	1280px	1220px	4	120px (custom)	Maximum padding-x; large hero displays (70px); whitespace maximized
Large (1440px+)	1440px	1380px	4	120px (custom)	Content column saturates; excess space managed via margin/padding, not column expansion

Breakpoint Strategy

Navigation links remain visible at all breakpoints (no collapse to hamburger menu detected in extraction).
Largest heading sizes: 40px on mobile, 60px on tablet/desktop, up to 70px for hero displays.
Body text remains 14–16px consistently across all sizes.
Section padding-x increases significantly from mobile (20px) to desktop (120px), prioritizing reading/breathing room.

Touch Targets

Minimum: 45px height for buttons, 16px minimum for clickable text links (increase to 24px preferred for fingertip accuracy)
Padding Rule: All interactive elements require {spacing.md} (16px) minimum padding; buttons extend to {spacing.lg} (20px) or more
Spacing Between: Interactive elements need {spacing.md} (16px) minimum gap to prevent accidental mis-taps
Mobile Considerations: On 375px viewport, button width may shrink but height remains ≥45px; text links benefit from extra padding around them

Collapsing Strategy

Typography: Heading sizes compress proportionally (display 70px desktop → 40px mobile); body text stable at 14–16px
Spacing: Section padding-x halves from desktop (120px) to mobile (20px); vertical spacing ({spacing.band} = 60px) remains proportional across breakpoints
Grid Columns: Desktop/laptop use 4 columns; tablet uses 3; mobile uses single column or 4-column micro grid
Images: Reduce image aspect ratios and expand to full width on mobile; desktop images maintain wider sidebars
Navigation: Remains horizontal and visible across all breakpoints (menu toggle not observed in extraction)
Buttons: Primary button width is content-constrained on mobile but maintains 45–55px height; font size stays 14px

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: Brand Accent ({colors.primary} — #FFAC00) — use on all primary buttons and call-to-action elements
Page Background: Canvas ({colors.canvas} — #F9F7F4) — warm beige default page backdrop
Card/Container Background: Surface Alt ({colors.surface-alt} — #FFFFFF) — white for contrast and content clarity
Heading/Display Text: Ink ({colors.ink} — #000000) — maximum contrast for primary headings
Body Text: Body / On Primary ({colors.on-primary} — #131211) — near-black body copy and labels
Secondary Text: Muted ({colors.muted} — #333333) — reduced contrast for captions and secondary content
Tertiary/Placeholder Text: Faint ({colors.faint} — #6F6E6C) — minimal contrast for supporting copy and disabled states
Borders/Dividers: Hairline ({colors.hairline} — #E5E7EB) — delicate 1px separator lines

Iteration Guide

Start with primary accent (#FFAC00) for all CTAs. Every call-to-action button should use {colors.primary}. Secondary buttons use dark fill (#131211) or translucent light (rgba(255, 255, 255, 0.4)).
Apply pill-shaped button styling (border-radius: 9999px). All interactive buttons must be pill-shaped; alternative is rounded-square (30px) for secondary variants.
Use letter-spacing exactly as specified in the typography hierarchy. Display sizes require negative tracking (-1 to -2.8px); do not omit or round to zero.
Alternate section backgrounds. Sections should toggle between canvas (#F9F7F4) and surface-alt (#FFFFFF) for rhythm; do not use a single background for entire page.
Maintain 60px vertical spacing between major sections. Use {spacing.band} (60px) as the base section gap; do not compress or eliminate.
Apply 1px border-radius to form inputs (15px). Inputs use border-radius: 15px ({rounded.md}); borders are 1px in hairline color (#E5E7EB).
Use GeneralSans for navigation/labels; generalFont for body/headings. Font pairing is intentional; maintain separation by context.
Ensure button height ≥45px (preferably 55px). Minimum height is 45px; primary buttons are 55px; smaller buttons are 45px.
Apply measured box-shadows only. Use rgba(0, 0, 0, 0.05) 0px 1px 2px 0px for subtle lift; rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px for moderate elevation. No custom shadows.
Test focus states with outline: 3px solid #FFAC00. Keyboard navigation requires visible 3px outline in brand accent colour.

10. Known Gaps

Interaction states not measured: The extraction captured hover, focus, and disabled states from stylesheets, but may not reflect all possible contexts (e.g., active menu states, multi-select interactions, error states on form validation). Assume states not listed under "Interaction States" do not exist in the measured extraction.
Error, success, warning semantic colours: The site does not declare a semantic colour ramp (error/success/warning/info). No such colours were measured. If UI requires status indication, these must be defined externally or sourced from a separate design decision.
Dark mode or alternate theme: The extraction measured one colour theme only. No dark-mode variant was observed. If dark mode is required, it must be designed separately.
Interaction animation details: Opacity changes, transforms, and scale states are recorded, but precise timing, easing curves, and duration values were not extracted. CSS transitions/animations will require separate specification.
Advanced form states: Input focus, invalid, and loading states were not explicitly measured. Only basic input styling (default, hover, focus outline) is documented.
Component variants beyond measured: Buttons, cards, inputs, and navigation are documented as measured. Other components (modals, popovers, tooltips, comboboxes) may exist but were not fully extracted; treat additional components as out of scope unless explicitly listed above.
Breakpoint collapse point for navigation: Menu toggle was not observed in the extraction; navigation appears visible across all measured breakpoints. If hamburger menu exists, its breakpoint and styling are not recorded.
Cross-origin stylesheets: Some stylesheet rules may have been inaccessible due to CORS policies, so vendored or third-party component styling may be incomplete.
Colour role for {colors.neutral-1} (#B4B4B4): This colour was measured but has no explicit semantic role in the design system. It is treated as decorative only; do not assume it serves a functional purpose.
Maximum container width at 1440px+: Extraction shows no further breakpoint beyond 1440px, so behaviour on ultra-wide displays (2560px+) is unspecified. Assume no responsive changes beyond 1440px.

Token Reference

colors:
  primary:
    value: "#FFAC00"
    role: Primary / Brand Accent
  canvas:
    value: "#F9F7F4"
    role: Canvas
  surface-alt:
    value: "#FFFFFF"
    role: Surface Alt
  ink:
    value: "#000000"
    role: Ink
  on-primary:
    value: "#131211"
    role: Body / On Primary
  muted:
    value: "#333333"
    role: Muted
  faint:
    value: "#6F6E6C"
    role: Faint
  hairline:
    value: "#E5E7EB"
    role: Hairline
  neutral-1:
    value: "#B4B4B4"
    role: Unassigned

typography:
  display-xl:
    font: generalFont
    size: 70px
    weight: 400
    lineHeight: 0.9
    letterSpacing: -2.8px
  display-lg:
    font: generalFont
    size: 60px
    weight: 400
    lineHeight: 1
    letterSpacing: -2.5px
  display-lg-strong:
    font: generalFont
    size: 60px
    weight: 500
    lineHeight: 1
    letterSpacing: 0px
  display-md:
    font: generalFont
    size: 46px
    weight: 400
    lineHeight: 1
    letterSpacing: -1.84px
  display-sm:
    font: generalFont
    size: 40px
    weight: 400
    lineHeight: 1.1
    letterSpacing: -2.5px
  heading-xs:
    font: generalFont
    size: 30px
    weight: 400
    lineHeight: 1
    letterSpacing: -1px
  heading-xs-strong:
    font: generalFont
    size: 30px
    weight: 500
    lineHeight: 1
    letterSpacing: -1px
  heading-md:
    font: GeneralSans
    size: 36px
    weight: 400
    lineHeight: 1
    letterSpacing: -1.44px
  heading-md-strong:
    font: generalFont
    size: 36px
    weight: 500
    lineHeight: 1
    letterSpacing: -2.5px
  heading-md-tight:
    font: generalFont
    size: 36px
    weight: 500
    lineHeight: 1.11
    letterSpacing: -1.8px
  heading-sm:
    font: generalFont
    size: 35px
    weight: 400
    lineHeight: 1.03
    letterSpacing: -1.75px
  body-xl:
    font: generalFont
    size: 20px
    weight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  body-xl-strong:
    font: generalFont
    size: 20px
    weight: 500
    lineHeight: 1.3
    letterSpacing: -0.4px
  body-xl-tight:
    font: generalFont
    size: 20px
    weight: 400
    lineHeight: 1.3
    letterSpacing: -0.4px
  body-lg:
    font: generalFont
    size: 16px
    weight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  body-md:
    font: generalFont
    size: 14px
    weight: 400
    lineHeight: 1.29
    letterSpacing: -0.32px
  body-md-strong:
    font: generalFont
    size: 14px
    weight: 500
    lineHeight: 1.29
    letterSpacing: -0.32px
  label-md:
    font: generalFont
    size: 16px
    weight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  label-md-strong:
    font: generalFont
    size: 16px
    weight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  label-sm:
    font: GeneralSans
    size: 14px
    weight: 400
    lineHeight: 1.5
    letterSpacing: -0.5px
  button-md:
    font: generalFont
    size: 16px
    weight: 500
    lineHeight: 1.31
    letterSpacing: -0.32px
  button-sm:
    font: generalFont
    size: 14px
    weight: 500
    lineHeight: 1.07
    letterSpacing: -0.28px
  caption-md:
    font: generalFont
    size: 12px
    weight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  caption-md-strong:
    font: generalFont
    size: 12px
    weight: 500
    lineHeight: 1.33
    letterSpacing: -0.24px
  caption-md-tight:
    font: generalFont
    size: 12px
    weight: 500
    lineHeight: 1.33
    letterSpacing: 0px
  caption-sm:
    font: generalFont
    size: 11px
    weight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  caption-xs:
    font: GeneralSans
    size: 10px
    weight: 400
    lineHeight: 1.5
    letterSpacing: -0.2px

spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 32px
  xxl: 36px
  xxxl: 40px
  section: 52px
  band: 60px

rounded:
  none: 0px
  xs: 2px
  sm: 10px
  md: 15px
  lg: 20px
  full: 9999px

shadows:
  sm:
    value: "rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
    usage: subtle button lift, minor elevation
  md:
    value: "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px"
    usage: card containers, moderate elevation

borders:
  thin: 1px

opacity:
  - 0.10
  - 0.40
  - 0.60
  - 0.70
  - 0.80
  - 0.90

zIndex:
  base: [1, 2, 3, 4, 5]
  dropdown: [10, 19, 20]

gradients:
  hero:
    - "linear-gradient(rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.7) 100%)"
    - "linear-gradient(45deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%)"
    - "linear-gradient(rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%)"
    - "linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0))"
    - "linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0))"
  section:
    - "linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3))"
    - "linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%)"
    - "linear-gradient(230deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8) 100%)"
    - "linear-gradient(130deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8) 100%)"
    - "linear-gradient(rgb(177, 194, 209), rgba(177, 194, 209, 0))"
    - "linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6))"
    - "linear-gradient(to top, rgba(0, 0, 0, 0), rgb(255, 255, 255))"

breakpoints:
  mobile: 375px
  tablet: 768px
  laptop: 1024px
  desktop: 1280px
  large: 1440px

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

Design tokens

Extracted from www.noovolife.com

Primary

#FFAC00

Primary CTA, brand accent, active state

Neutral

#F9F7F4

Default page background

#FFFFFF

Alternating section band

#000000

Headings / primary text

#131211

Body copy; label colour on brand surfaces

#333333

Captions, secondary text

#6F6E6C

Tertiary / placeholder text

#E5E7EB

1px borders and dividers

#B4B4B4

Neutral

Typography · generalFont

body14px · 500 · 18px

input16px · 400 · 24px

display40px · 400 · 44px

body14px · 400 · 18px

caption11px · 400 · 16.5px

button14px · 500 · 15px

body16px · 500 · 24px

body20px · 400 · 26px

caption12px · 400 · 18px

caption12px · 500 · 16px

body20px · 500 · 26px

h160px · 400 · 60px

h330px · 400 · 30px

body20px · 400 · 26px

button16px · 500 · 21px

h260px · 400 · 60px

display60px · 400 · 60px

body20px · 500 · 26px

hero-display70px · 400 · 63px

h160px · 400 · 60px

body20px · 400 · 28px

display46px · 400 · 46px

display60px · 400 · 60px

heading36px · 500 · 36px

body14px · 400 · 18px

body20px · 400 · 26px

display60px · 500 · 60px

label16px · 500 · 20px

body14px · 500 · 18px

heading30px · 500 · 30px

h330px · 500 · 30px

heading36px · 500 · 40px

button20px · 500 · 26px

caption12px · 500 · 16px

heading20px · 400 · 26px

h316px · 500 · 24px

heading30px · 400 · 30px

h1120px · 400 · 108px

h316px · 500 · 21px

h235px · 400 · 36px

Typography · GeneralSans

link16px · 400 · 24px

label14px · 400 · 21px

caption10px · 400 · 15px

body14px · 400 · 21px

button14px · 400 · 21px

heading36px · 400 · 36px

body15px · 500 · 22.5px

body14px · 500 · 15px

h136px · 400 · 36px

Spacing

12px

4px

20px

32px

100px

16px

40px

52px

Elevation

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

rgba(0, 0, 0, 0) 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 · 5

Remixes of www.noovolife.com

Latest remixes

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

Remix it