Momina Nadeem

Generated Oct 25, 2026

DESIGN.md for www.hellofresh.com

www.hellofresh.com13 colors4 componentsagrandir-tight-bold + roboto

Remix

12 screenshots captured· www.hellofresh.com

1 / 12 · HelloFresh® Meal Kits | Free Breakfast for Life + 10 Free Meals · Above the fold

Preview

the generated design system

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

Design tokens

version: alpha
name: Hellofresh
description: |
  HelloFresh's design system embodies a modern, accessible approach to meal-kit
  ordering with a focus on clarity and user trust. The visual identity blends
  sophisticated typography—mixing geometric sans-serif headings with humanist
  body text—to create a professional yet approachable feel. The system relies
  heavily on color-blocking and surface contrast rather than elaborate shadows,
  establishing depth through strategic use of warm neutrals, crisp blacks, and
  bold accent greens. The overall mood is warm, contemporary, and food-forward,
  reflecting the brand's commitment to bringing restaurant-quality meals to the
  home. Ample whitespace and a measured spacing system give the interface a
  breathing quality, while consistent border radii and interaction patterns
  signal a refined, intentional design maturity.
source:
  url: "https://www.hellofresh.com/"
  pagesAnalyzed: 6
  extractedAt: 2026-10-25
  tokensMeasured: true
colors:
  primary: "#232323"
  link: "#0000EE"
  canvas: "#FFFFFF"
  surface-alt: "#FAF8F3"
  on-primary: "#FFFFFF"
  ink: "#232323"
  body: "#343434"
  muted: "#656565"
  hairline: "#000000"
  accent-1: "#7D7561"
  accent-2: "#D2FA96"
  accent-3: "#009645"
  accent-4: "#96DC16"
  neutral-1: "#EFE9DE"
  neutral-2: "#ADADAD"
typography:
  display-lg:
    fontFamily: agrandir-tight-black
    fontSize: 56px
    fontWeight: 700
    lineHeight: 0.89
    letterSpacing: 0px
  display-md:
    fontFamily: agrandir-tight-bold
    fontSize: 50px
    fontWeight: 700
    letterSpacing: 0px
  display-sm:
    fontFamily: agrandir-tight-bold
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  display-sm-strong:
    fontFamily: roboto
    fontSize: 40px
    fontWeight: 700
    lineHeight: 0.8
    letterSpacing: 0px
  heading-md:
    fontFamily: agrandir-tight-bold
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  heading-sm:
    fontFamily: agrandir-tight-bold
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0px
  heading-xs:
    fontFamily: agrandir-tight-bold
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  body-xl:
    fontFamily: roboto
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-lg:
    fontFamily: roboto
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-lg-strong:
    fontFamily: roboto
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
  body-md:
    fontFamily: roboto
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  body-md-strong:
    fontFamily: roboto
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.43
    letterSpacing: 0px
  body-sm:
    fontFamily: roboto
    fontSize: 13.3333px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0px
  button-lg:
    fontFamily: Arial
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-md:
    fontFamily: agrandir-tight-bold
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.43
    letterSpacing: 0px
  button-sm:
    fontFamily: Arial
    fontSize: 13.3333px
    fontWeight: 400
    letterSpacing: 0px
  button-xs:
    fontFamily: roboto
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: 0px
  label-md:
    fontFamily: agrandir-tight-bold
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0px
  label-md-times-new-roman:
    fontFamily: "Times New Roman"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0px
  caption:
    fontFamily: roboto
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
rounded:
  none: 0px
  xs: 4px
  sm: 8px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 40px
  xxxl: 48px
  section: 56px
  band: 96px
borderWidths:
  thin: 1px
shadows:
  sm: "rgb(35, 35, 35) 0px 0px 0px 1px inset"
elevationStrategy: single-tier
themes:
  derived: dark   # the other theme is the site's measured palette
  light:
    bg: "#FFFFFF"
    surface: "#FAF8F3"
    surfaceRaised: "#F1EFEB"
    text: "#232323"
    textMuted: "#343434"
    border: "#000000"
    accent: "#0000EE"
    accentFg: "#FFFFFF"
    focusRing: "#0000EE"
    elevation: shadow
  dark:
    bg: "#090916"
    surface: "#181824"
    surfaceRaised: "#242430"
    text: "#F5F5FE"
    textMuted: "#9B9BA6"
    border: "#30303B"
    accent: "#6969FF"
    accentFg: "#090916"
    focusRing: "#4141FF"
    elevation: "border+surface"
components:
  button-primary:
    typography: "{typography.button-lg}"
    textColor: "{colors.on-primary}"
    height: 48px
    padding: "12px 24px 12px 24px"
    rounded: "{rounded.sm}"
    backgroundColor: "{colors.primary}"
  button-filled:
    typography: "{typography.button-lg}"
    textColor: "{colors.on-primary}"
    height: 48px
    padding: "12px 24px 12px 24px"
    rounded: "{rounded.sm}"
    backgroundColor: "{colors.neutral-2}"
  button-icon:
    typography: "{typography.button-sm}"
    textColor: "{colors.hairline}"
    border: "1px solid {colors.primary}"
    height: 16px
    padding: "4px 4px 4px 4px"
    rounded: 999px
    backgroundColor: "{colors.primary}"
  button-icon-2:
    typography: "{typography.button-sm}"
    textColor: "{colors.hairline}"
    border: "1px solid {colors.primary}"
    height: 16px
    padding: "4px 4px 4px 4px"
    rounded: 999px
    backgroundColor: "{colors.surface-alt}"
  button-outline:
    textColor: "{colors.link}"
    border: "1px solid {colors.hairline}"
    height: 72px
    padding: "24px 32px 24px 32px"
    fontSize: 16px
    fontFamily: agrandir-tight-bold
    fontWeight: 400
    backgroundColor: "{colors.canvas}"
  navigation:
    textColor: "rgb(36, 36, 36)"
    height: 56px
    fontSize: 16px
    fontFamily: agrandir-tight-bold
    fontWeight: 400
  navigation-lg:
    textColor: "{colors.hairline}"
    height: 59px
    padding: "8px 0px 0px 0px"
    fontSize: 16px
    fontFamily: "Times New Roman"
    fontWeight: 400
    lineHeight: 1.15
  footer:
    textColor: "rgb(36, 36, 36)"
    fontSize: 16px
    fontFamily: agrandir-tight-bold
    fontWeight: 400
  footer-lg:
    textColor: "{colors.hairline}"
    fontSize: 16px
    fontFamily: "Times New Roman"
    fontWeight: 400
    lineHeight: 1.15
  link:
    textColor: "{colors.ink}"
    fontSize: 16px
    fontFamily: agrandir-tight-bold
    fontWeight: 400
    rounded: "{rounded.xs}"
  link-2:
    textColor: "{colors.ink}"
    padding: "8px 24px 8px 24px"
    fontSize: 16px
    boxShadow: "{colors.primary} 0px 0px 0px 1px inset"
    fontFamily: agrandir-tight-bold
    fontWeight: 400
    lineHeight: 1.5
    rounded: "{rounded.sm}"
    backgroundColor: "rgba(255, 255, 255, 0)"
states:
  other-hover:
    target: other
    state: hover
    textColor: "rgb(53, 53, 53)"
  other-active:
    target: other
    state: active
    textColor: "rgb(75, 75, 75)"
  other-focus-visible:
    target: other
    state: focus-visible
    outline: "{colors.primary} solid 0.125rem"
    outlineColor: "{colors.ink}"
    outlineWidth: 0.125rem
  other-disabled:
    target: other
    state: disabled
    textColor: "{colors.neutral-2}"
    backgroundColor: "rgba(255, 255, 255, 0)"
  input-focus:
    target: input
    state: focus
    textColor: "{colors.muted}"
  other-focus:
    target: other
    state: focus
    borderColor: "rgb(74, 70, 61)"
    borderWidth: 0.125rem
  link-hover:
    target: link
    state: hover
    textColor: "rgb(36, 36, 36)"
    textDecoration: none
breakpoints:
  - width: 375
    containerWidth: 343
    gridColumns: 1
    navLinksVisible: 1
    menuToggleVisible: true
    headingPx: 56
    bodyPx: 16
    sectionPaddingX: 16
  - width: 768
    containerWidth: 675
    gridColumns: 4
    navLinksVisible: 3
    menuToggleVisible: true
    headingPx: 40
    bodyPx: 16
    sectionPaddingX: 56
  - width: 1024
    containerWidth: 964
    gridColumns: 6
    navLinksVisible: 3
    menuToggleVisible: true
    headingPx: 56
    bodyPx: 16
    sectionPaddingX: 56
  - width: 1280
    containerWidth: 1200
    gridColumns: 8
    navLinksVisible: 3
    menuToggleVisible: true
    headingPx: 56
    bodyPx: 16
    sectionPaddingX: 56
  - width: 1440
    containerWidth: 1200
    gridColumns: 8
    navLinksVisible: 3
    menuToggleVisible: true
    headingPx: 56
    bodyPx: 16
    sectionPaddingX: 56
coverage:
  statesFound: 33
  gradientsFound: 0
  rolesUnassigned: 6
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: true
  semanticRampDeclared: false

Design System Inspired by HelloFresh

1. Visual Theme & Atmosphere

HelloFresh's design system embodies a modern, accessible approach to meal-kit ordering with a focus on clarity and user trust. The visual identity blends sophisticated typography—mixing geometric sans-serif headings with humanist body text—to create a professional yet approachable feel. The system relies heavily on color-blocking and surface contrast rather than elaborate shadows, establishing depth through strategic use of warm neutrals, crisp blacks, and bold accent greens. The overall mood is warm, contemporary, and food-forward, reflecting the brand's commitment to bringing restaurant-quality meals to the home. Ample whitespace and a measured spacing system give the interface a breathing quality, while consistent border radii and interaction patterns signal a refined, intentional design maturity.

Key Characteristics

Modern, sans-serif-driven typography with display serif flourishes
Color-blocking approach to depth (surface changes rather than shadows)
Warm neutral palette anchored by {colors.primary} (#232323) for primary interactions
Generous whitespace and structured spacing grid
Rounded corner treatments on interactive elements ({rounded.sm} — 8px)
High-contrast text for accessibility and legibility
Functional, minimal aesthetic with food imagery as primary visual narrative
Clear visual hierarchy via typography scale and weight variation

2. Color Palette & Roles

Primary

Primary / Brand ({colors.primary} — #232323): Primary call-to-action buttons, brand accent, headings, and active states. Conveys trust and authority.
Link ({colors.link} — #0000EE): Inline hyperlinks and linked text throughout the site.

Neutral Scale

Canvas ({colors.canvas} — #FFFFFF): Default page background and primary surface for content; label text color on branded backgrounds.
Surface Alt ({colors.surface-alt} — #FAF8F3): Alternating section bands and secondary surfaces for visual rhythm.
Body ({colors.body} — #343434): Primary body copy and standard text content.
Muted ({colors.muted} — #656565): Captions, secondary text, and de-emphasized content.
Hairline ({colors.hairline} — #000000): 1px borders, dividers, and fine-line accents.

Decorative / Accent Colors

Accent 1 ({colors.accent-1} — #7D7561): Decorative warm brown tone; no assigned functional role.
Accent 2 ({colors.accent-2} — #D2FA96): Bright lime accent; no assigned functional role; used for visual interest.
Accent 3 ({colors.accent-3} — #009645): Deep green accent; no assigned functional role.
Accent 4 ({colors.accent-4} — #96DC16): Bright yellow-green; no assigned functional role.

Neutral Supporting Colors

Neutral 1 ({colors.neutral-1} — #EFE9DE): Subtle warm neutral for secondary surfaces and subtle contrast.
Neutral 2 ({colors.neutral-2} — #ADADAD): Mid-gray for disabled states and secondary interactions.

3. Typography Rules

Font Family

Primary: Agrandir Tight Geometric sans-serif with condensed proportions. Used for headings, display, and high-impact text. Fallback: Helvetica, Arial, sans-serif

Secondary: Roboto Humanist sans-serif with warm proportions. Used for body copy, form labels, and standard interface text. Fallback: 'Helvetica Neue', Helvetica, Arial, sans-serif

Tertiary: Times New Roman (Label contexts only) Classical serif for specific label roles. Fallback: Georgia, serif

Quaternary: Arial (Button contexts) Neutral sans-serif for button text. Fallback: Helvetica, sans-serif

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display Large	Agrandir Tight Black	56px	700	0.89	0px	Hero-scale headings; extreme compaction for impact
Display Medium	Agrandir Tight Bold	50px	700	Not measured	0px	Major section headings
Display Small	Agrandir Tight Bold	40px	500	1.2	0px	High-level page sections
Display Small Strong	Roboto	40px	700	0.8	0px	Alternate display weight
Heading Medium	Agrandir Tight Bold	32px	500	1.25	0px	Primary heading tier
Heading Small	Agrandir Tight Bold	24px	500	1.33	0px	Subsection headings
Heading Extra Small	Agrandir Tight Bold	20px	500	1.2	0px	Minor headings and card titles
Body Large	Roboto	16px	400	1.5	0px	Primary body text
Body Large Strong	Roboto	16px	700	1.5	0px	Emphasized body text
Body Extra Large	Roboto	20px	400	1.6	0px	Callouts and highlighted body copy
Body Medium	Roboto	14px	400	1.43	0px	Secondary body; descriptions
Body Medium Strong	Roboto	14px	700	1.43	0px	Emphasized secondary text
Body Small	Roboto	13.3333px	400	1.8	0px	Fine text; disclaimers
Label Medium	Agrandir Tight Bold	16px	400	1	0px	Form labels
Label Medium (Times New Roman)	Times New Roman	16px	400	1	0px	Semantic label variant
Button Medium	Agrandir Tight Bold	14px	700	1.43	0px	Primary button text
Button Large	Arial	16px	400	1.5	0px	Large button text
Button Small	Arial	13.3333px	400	Not measured	0px	Small button text
Button Extra Small	Roboto	12px	700	1.33	0px	Compact button text
Caption	Roboto	12px	400	1.33	0px	Image captions; fine print

Principles

Contrast through scale & weight: Headings employ heavier weights and larger sizes to establish clear hierarchy; body remains lean and open.
Roboto for efficiency: Body text and labels use Roboto for legibility across screen sizes and font rendering engines.
Agrandir for personality: Display and heading tiers use the geometric Agrandir Tight family to inject brand character while maintaining readability.
Line height for breathing: Tighter line heights (0.89–1.2) on display and headings; looser heights (1.5–1.8) on body for comfort.
Letter spacing uniform: No letter-spacing variations in the system; all set to 0px for consistency.
Button text hierarchy: Buttons vary by size and weight context, not always by font family, allowing flexibility in button-scale scenarios.

4. Component Stylings

Buttons

Primary Button

Background: {colors.primary} (#232323)
Text Color: {colors.canvas} (#FFFFFF)
Padding: {spacing.sm} (12px) vertical × {spacing.md} (24px) horizontal
Font: Arial, {typography.button-lg} (16px, weight 400, line-height 24px)
Border Radius: {rounded.sm} (8px)
Border: None
Box Shadow: None
Width: Full (360px in measured context)
Height: 48px
Hover State: Background becomes #353535; text color becomes #353535
Active State: Background becomes #4B4B4B; text color becomes #4B4B4B
Focus-Visible State: Outline {colors.primary} solid 0.125rem (2px)
Disabled State: Text color {colors.neutral-2} (#ADADAD); background transparent

Filled Button (Secondary / Muted)

Background: {colors.neutral-2} (#ADADAD)
Text Color: {colors.canvas} (#FFFFFF)
Padding: {spacing.sm} (12px) vertical × {spacing.md} (24px) horizontal
Font: Arial, {typography.button-lg} (16px, weight 400, line-height 24px)
Border Radius: {rounded.sm} (8px)
Border: 0px with rgba(118, 118, 118, 0.3)
Box Shadow: None
Width: 102px (measured context)
Height: 48px
Hover State: Background becomes #E3E3E3
Active State: Background becomes #D2D2D2
Focus-Visible State: Outline {colors.primary} solid 0.125rem
Disabled State: Text color {colors.neutral-2} (#ADADAD); background transparent

Outline Button

Background: {colors.canvas} (#FFFFFF)
Text Color: {colors.link} (#0000EE)
Padding: {spacing.lg} (24px) vertical × {spacing.xl} (32px) horizontal
Font: Agrandir Tight Bold, {typography.button-md} (14px, weight 700, line-height 1.43)
Border Radius: {rounded.none} (0px)
Border: 1px solid {colors.hairline} (#000000)
Box Shadow: None
Width: 197px (measured context)
Height: 72px
Hover State: Border color {colors.primary} (#232323); background #E0D9CB
Active State: Border color {colors.primary}; background #D8C9B7
Focus-Visible State: Outline {colors.primary} solid 0.125rem
Disabled State: Border color {colors.neutral-2}; background {colors.canvas}

Icon Button

Background: {colors.primary} (#232323)
Text Color: {colors.hairline} (#000000)
Padding: {spacing.xxs} (4px)
Width & Height: 16px
Border Radius: {rounded.full} (9999px)
Border: 1px solid {colors.primary}
Font: Arial, {typography.button-sm} (13.3333px, weight 400)
Box Shadow: None
Hover State: Background becomes #353535
Active State: Background becomes #4B4B4B
Disabled State: Border transparent; background transparent; text color {colors.neutral-2}

Icon Button (Inverted)

Background: {colors.surface-alt} (#FAF8F3)
Text Color: {colors.hairline} (#000000)
Padding: {spacing.xxs} (4px)
Width & Height: 16px
Border Radius: {rounded.full} (9999px)
Border: 1px solid {colors.primary}
Font: Arial, {typography.button-sm} (13.3333px, weight 400)
Box Shadow: None
Hover State: Background becomes #E0D9CB
Active State: Background becomes #D8C9B7

Cards & Containers

Background: {colors.canvas} (#FFFFFF)
Border Radius: {rounded.sm} (8px)
Padding: {spacing.lg} (24px) to {spacing.xl} (32px)
Border: None or 1px solid {colors.hairline} for definition
Box Shadow: None (color-blocking approach; no elevation shadows)
Hover State: Background may shift to {colors.surface-alt}; subtle interaction cues

Inputs & Forms

Text Input

Background: {colors.canvas} (#FFFFFF)
Text Color: {colors.body} (#343434)
Placeholder Color: {colors.muted} (#656565)
Border: 1px solid soft neutral (measured as #615C50 in hover; base: hairline light)
Border Radius: {rounded.sm} (8px)
Padding: {spacing.md} (16px)
Font: Roboto, {typography.body-lg} (16px, weight 400)
Line Height: 1.5
Focus State: Border color becomes {colors.primary} (#232323); border width tightens to 0.125rem
Hover State: Border color becomes #615C50
Disabled State: Text color {colors.neutral-2} (#ADADAD); background transparent; border transparent

Label

Text Color: {colors.body} (#343434)
Font: Agrandir Tight Bold, {typography.label-md} (16px, weight 400, line-height 1)
Margin Bottom: {spacing.sm} (12px)

Navigation

Default Navigation (Desktop)

Background: Transparent
Text Color: #242424 (dark near-black)
Font: Agrandir Tight Bold, 16px, weight 400
Height: 56px
Padding: None specified
Border: None
Link Color: #242424
Link Hover: Text color becomes #353535; text-decoration removed
Hover State: Subtle underline or color shift; no background change

Navigation Large Variant

Background: Transparent
Text Color: {colors.hairline} (#000000)
Font: Times New Roman, 16px, weight 400, line-height 18.4px
Height: 59px
Padding: 8px 0px top/bottom

5. Layout Principles

Spacing System

HelloFresh employs a modular spacing scale in increments of {spacing.xxs} (4px), establishing rhythm and consistency across all whitespace decisions.

Spacing Scale:

{spacing.xxs} — 4px (micro-spacing; icon padding)
{spacing.xs} — 8px (tight spacing; small gaps)
{spacing.sm} — 12px (compact spacing; button padding vertical)
{spacing.md} — 16px (standard spacing; button padding horizontal; body line-height)
{spacing.lg} — 24px (comfortable spacing; section content padding)
{spacing.xl} — 32px (generous spacing; large button padding; container padding)
{spacing.xxl} — 40px (large section padding)
{spacing.xxxl} — 48px (major section spacing)
{spacing.section} — 56px (large vertical rhythm between sections)
{spacing.band} — 96px (full-width band padding; hero sections)

Usage Context:

Component Internal: {spacing.sm} to {spacing.md} for button/input padding
Card/Container: {spacing.lg} to {spacing.xl} for internal padding
Section Vertical: {spacing.section} for gap between major content blocks
Hero/Band: {spacing.band} for large vertical sections with full-width background

Grid & Container

Max Width: 1200px (measured at 1280px, 1440px breakpoints; content constrained)
Column Strategy: 6–8 CSS Grid columns on desktop; responsive reduction at smaller breakpoints
Mobile Content Column: 343px at 375px viewport (accounting for {spacing.md} gutters on each side)
Tablet Content Column: 675px at 768px viewport
Desktop Content Column: 964px at 1024px viewport, 1200px at 1280px+
Gutter Width: {spacing.md} (16px) horizontal padding per side on mobile; {spacing.lg} (24px) to {spacing.xl} (32px) on tablet/desktop
Section Padding: {spacing.md} (16px) on mobile; {spacing.lg} (24px) to {spacing.xl} (32px) on tablet/desktop

Whitespace Philosophy

Generous whitespace creates breathing room and visual clarity. The design prioritizes legibility and focus by wrapping content in ample margins and internal padding. Large headings sit atop generous top margins; body paragraphs are separated by vertical spacing at least {spacing.lg} (24px). Empty space is not treated as wasted real estate but as a design tool that elevates content hierarchy and reduces cognitive load.

Border Radius Scale

{rounded.none} — 0px (outline buttons; sharp modernism)
{rounded.xs} — 4px (links; minor interactive elements)
{rounded.sm} — 8px (buttons; cards; inputs; primary interactive role)
{rounded.full} — 9999px (icon buttons; pill-shaped toggles)

Component Mapping:

Buttons (primary, filled, outline secondary): {rounded.sm} (8px)
Icon buttons: {rounded.full} (9999px)
Cards and containers: {rounded.sm} (8px)
Input fields: {rounded.sm} (8px)
Outline buttons (special variant): {rounded.none} (0px)

Border Widths

Thin: 1px (standard border weight for inputs, outlines, dividers)
Focus Ring: 0.125rem (approximately 2px at 16px base font; strong focus indication)

Applied Roles:

Form input borders: 1px (thin)
Inset button borders: 1px inset (thin)
Icon button borders: 1px solid (thin)
Focus outline: 0.125rem (thin ring; clear but not intrusive)

6. Depth & Elevation

Elevation Strategy

HelloFresh employs a color-blocking approach to depth. Rather than relying on layered shadows, the system uses surface color changes and strategic contrast to establish visual hierarchy. There is one measured shadow type: a subtle 1px inset border shadow on linked buttons.

Level	Treatment	Use
Flat	No shadow; solid `{colors.canvas}` background	Default cards, buttons, inputs
Single Inset	`{colors.primary} 0px 0px 0px 1px inset` (`rgb(35, 35, 35)`)	Linked buttons; badge-like elements
Hover Lift	Background color shift to `{colors.neutral-1}` (`#EFE9DE`) or `{colors.surface-alt}`	Interactive element affordance without shadow

Shadow Philosophy: The system forgoes drop shadows and prefers flat design with high contrast. Elevation is communicated through color hierarchy, border definition, and hover state changes. This approach keeps the interface clean and modern while maintaining clear visual separation between interactive and static elements.

Opacity Levels

Full Opacity: 1 (default; all text, primary elements)
High Opacity: 0.90 (90%) (secondary emphasis; slightly reduced visual weight)

Applied Roles:

Primary interactive elements: Full opacity
Secondary or decorative overlays: 90% opacity for subtle de-emphasis
Disabled states: Reduced opacity (text color via {colors.neutral-2}, not opacity flag)

Z-index / Layering

Layer	Z-index	Use
Base Content	1	Standard page content; default stacking context
Standard Elements	2	Cards, containers in normal flow
Floating Elements	4	Fixed buttons, temporary floating UI
Sticky Elements (Low)	5	Sticky navigation bars; below modals
Sticky Elements (High)	9	Primary sticky headers; persistent navigation
Dropdown Menus	99	Navigation dropdowns; contextual menus
Sticky Navigation (Floating)	101	Sticky header that floats above most content
Modal / Overlay (High)	115	Modal dialogs, full-screen overlays, topmost layer

Stacking Context Notes: The system reserves high z-index values (99+) for modals and overlays. Sticky navigation sits between standard content and dropdowns. Dropdowns (z-index: 99) rise above most interactive elements but sit beneath modal layers (z-index: 115).

7. Do's and Don'ts

Do

Use the spacing scale consistently: Choose padding and margins from the defined scale ({spacing.xxs} through {spacing.band}). Never introduce arbitrary pixel values.
Prioritize high contrast text: Body text should be {colors.body} (#343434) on {colors.canvas} (#FFFFFF); maintain at least WCAG AA contrast ratios.
Apply {rounded.sm} to interactive elements: Buttons, inputs, and cards should use 8px border radius for consistency.
Use Roboto for body and Agrandir for headings: This split reinforces hierarchy and readability.
Layer surfaces via color blocking: Use {colors.surface-alt} or {colors.neutral-1} to create visual separation; avoid drop shadows.
Hover states shift background color: Interactive elements should show affordance via color change, not opacity or shadow.
Maintain 16px minimum touch target: Buttons, links, and form controls should be at least 16px tall on mobile.
Test form states thoroughly: Focus, hover, active, and disabled states must all be visually distinct.

Don't

Don't invent spacing values: Never use 15px, 30px, or other one-off measurements. Stick to the scale.
Don't apply shadows for depth: The system uses color contrast, not drop shadows. Inset borders and background shifts communicate layers.
Don't mix heading fonts: Display and heading tiers use Agrandir Tight; body uses Roboto. Don't substitute arbitrarily.
Don't use opacity for disabled states: Instead, use {colors.neutral-2} text color and transparent background.
Don't exceed {rounded.sm} on general components: Icon buttons are {rounded.full} (pills); everything else defaults to 8px.
Don't set line-height greater than 1.8 on body: The system caps line-height at 1.8 for body copy; respect this ceiling to avoid excessive vertical stretch.
Don't combine multiple border weights: Use 1px consistently; focus rings use 0.125rem only where explicitly needed.
Don't forget focus-visible states: All interactive elements must show a {colors.primary} outline on keyboard focus.
Don't apply the {colors.accent-*} colors to interactive states: Accent colors are decorative only; CTAs use {colors.primary}.

8. Responsive Behavior

Breakpoints

Breakpoint	Viewport Width	Grid Columns	Nav Links Visible	Menu Toggle	Largest Heading	Body Font Size	Content Padding
Mobile	375px	1	1	Yes	56px	16px	16px
Tablet	768px	4	3	Yes	40px	16px	56px
Desktop	1024px	6	3	Yes	56px	16px	56px
Desktop Large	1280px	8	3	Yes	56px	16px	56px
Desktop XL	1440px	8	3	Yes	56px	16px	56px

Key Changes:

Mobile (375px): Single-column layout; full-width content; reduced horizontal padding (16px); hamburger menu active; {typography.display-lg} shrinks to 56px (no reduction from desktop).
Tablet (768px): 4-column grid; 3 navigation links visible; horizontal padding increases to 56px; display heading remains 40px.
Desktop+ (1024px+): 6–8 column grid; 3 navigation links remain visible; full max-width (1200px) content; display heading returns to 56px.

Specific Adaptations:

Hero headlines: 56px at mobile; 40px at 768px; 56px at 1024px+
Button widths: Full-width on mobile; constrained width on desktop
Image aspect ratios: Adjusted for viewport (e.g., wider hero images on desktop; taller on mobile)
Section spacing: {spacing.lg} vertical on mobile; {spacing.section} on tablet+

Touch Targets

Minimum Height: 48px for all clickable elements (buttons, form controls, links)
Minimum Width: 44px for icon buttons (16px interior + {spacing.sm} padding per side = 28px; but measured buttons are 16px wide; recommend 40px+ for real-world compliance)
Padding Around Targets: {spacing.sm} (12px) internal padding on buttons; {spacing.md} (16px) internal padding on inputs
Mobile-Optimized Spacing: Links in navigation and footer should sit at least {spacing.md} apart to avoid accidental taps

Collapsing Strategy

Mobile (Single Column):
- Stack all card/content sections vertically
- Full-width buttons and inputs (width: 100%)
- Navigation collapses to hamburger menu; single visible link or icon
- Images scale to viewport width minus {spacing.md} gutters
Tablet (4 Columns):
- 2-column card grids where applicable
- Navigation shows 3 primary links; secondary menu may still collapse
- Content width increases; font sizes remain stable
- Images occupy 2–4 columns depending on layout
Desktop (6–8 Columns):
- 3-column and wider layouts available
- Full navigation bar visible; no hamburger
- Content centers within max-width (1200px) container
- Large hero images; ample whitespace around content

Specific Component Behavior:

Hero Headlines: Reduce from {typography.display-lg} (56px) to {typography.display-sm} (40px) at 768px breakpoint; restore to 56px at 1024px+
Buttons: Full width ({spacing.md} margin on mobile; constrained width on desktop)
Inputs: Full width with {spacing.md} horizontal padding on mobile; constrained width on desktop
Navigation Links: Inline on desktop; collapsed behind toggle on mobile/tablet

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: Primary / Brand ({colors.primary} — #232323)
Canvas / Background: Canvas ({colors.canvas} — #FFFFFF)
Body Text: Body ({colors.body} — #343434)
Secondary Surface: Surface Alt ({colors.surface-alt} — #FAF8F3)
Muted / Secondary Text: Muted ({colors.muted} — #656565)
Hyperlinks: Link ({colors.link} — #0000EE)
Borders / Dividers: Hairline ({colors.hairline} — #000000)
Decorative Accents: Accent 1 (#7D7561), Accent 2 (#D2FA96), Accent 3 (#009645), Accent 4 (#96DC16)
Disabled / Secondary: Neutral 2 ({colors.neutral-2} — #ADADAD)

Iteration Guide

All interactive elements default to {rounded.sm} (8px)—buttons, inputs, cards—unless explicitly an icon button ({rounded.full}) or special variant ({rounded.none}).
Primary buttons are always {colors.primary} (#232323) background with {colors.canvas} text; secondary/filled buttons use {colors.neutral-2} (#ADADAD).
Hover states change background color, not opacity: Primary button hover → #353535; secondary → #E3E3E3. Never use opacity for affordance.
Typography hierarchy is strict: Display/headings use Agrandir Tight; body/labels use Roboto. Don't mix.
Spacing only comes from the scale: 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px, 56px, 96px. No other values.
Focus states are {colors.primary} outline at 0.125rem (2px equivalent): Every interactive element must respond to :focus-visible.
Color-blocking creates depth, not shadows: Use {colors.surface-alt} (#FAF8F3) or {colors.neutral-1} (#EFE9DE) to layer surfaces.
Border radius is never inverted: 0px is reserved for sharp outline buttons; standard interactive radius is 8px.
Touch targets are minimum 48px tall; width varies (buttons can be flexible, but ensure comfortable tapping).
Disabled states use {colors.neutral-2} text on transparent background; never gray-out an entire component with opacity.

10. Known Gaps

Semantic color ramp absent: The site does not declare error, success, or warning colors. No semantic status palette was extracted.
Interaction states incomplete: Only states explicitly captured in stylesheets are documented. Interaction states not present in the extraction (e.g., custom :visited link colors, form validation feedback) are not included.
Gradients not measured: No gradient overlays or meshes were detected in the extraction. If gradients exist on authenticated surfaces or off-page flows, they are not reflected here.
Dark mode not confirmed: The extraction captured a single theme. If a dark-mode variant exists, it was not measured or was derived algorithmically and is not presented as an officially shipped theme.
6 accent colors undefined: {colors.accent-1} through {colors.accent-4} have no assigned functional role. They appear in the palette but are treated as decorative; their exact use-cases may vary by page or context.
Cross-origin stylesheets unread: Some external stylesheets may not have been fully accessible during extraction, so CSS-declared micro-interactions or advanced animations may be missing.
Authenticated surfaces not visited: Pages behind login, account settings, and personalized flows were not extracted. Design patterns on those surfaces are unknown.
Animation / micro-interactions minimal: The extraction does not capture timing functions, transitions, or detailed keyframe animations. Hover/active states are color shifts only; motion design is not documented.
Advanced form states incomplete: Patterns for multi-step forms, field validation feedback, and error messaging are not fully specified in the component data.
Breakpoint fine-tuning limited: While 5 breakpoints were measured, intermediate responsive adjustments (e.g., changes at 480px, 600px, 900px) were not captured.

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

Design tokens

Extracted from www.hellofresh.com

Primary

#232323

Primary CTA, brand accent, active state; Headings / primary text

#0000EE

Inline link colour

#7D7561

Accent / decorative

#D2FA96

Accent / decorative

#009645

Accent / decorative

#96DC16

Accent / decorative

Neutral

#FFFFFF

Default page background; label colour on brand surfaces

#FAF8F3

Alternating section band

#343434

Body copy

#656565

Captions, secondary text

#000000

1px borders and dividers

#EFE9DE

Neutral

#ADADAD

Neutral

Typography · roboto

body16px · 400 · 24px

body16px · 700 · 24px

body14px · 400 · 20px

body14px · 700 · 20px

input16px · 400

button12px · 700 · 16px

body20px · 400 · 32px

caption12px · 400 · 16px

body13.3333px · 400 · 24px

table-header16px · 700

display40px · 700 · 32px

body20px · 700 · 32px

Typography · agrandir-tight-bold

h420px · 500 · 24px

h232px · 500 · 40px

link16px · 400

label16px · 400 · 16px

button14px · 700 · 20px

display40px · 500 · 48px

h250px · 700

h324px · 500 · 32px

heading32px · 500 · 40px

Typography · agrandir-tight-black

h156px · 700 · 50px

Typography · Times New Roman

link16px · 400 · 18.4px

label16px · 400 · 16px

Typography · Arial

button16px · 400 · 24px

button13.3333px · 400

Spacing

16px

8px

12px

4px

32px

24px

152px

48px

Elevation

rgb(35, 35, 35) 0px 0px 0px 1px inset

Components · 4

Remixes of www.hellofresh.com

Latest remixes

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

Remix it

DESIGN.md for www.hellofresh.com

Preview

Design System Inspired by HelloFresh

1. Visual Theme & Atmosphere

2. Color Palette & Roles

Primary

Neutral Scale

Decorative / Accent Colors

Neutral Supporting Colors

3. Typography Rules

Font Family

Hierarchy

Principles

4. Component Stylings

Buttons

Primary Button

Filled Button (Secondary / Muted)

Outline Button

Icon Button

Icon Button (Inverted)

Cards & Containers

Inputs & Forms

Text Input

Label

Navigation

Default Navigation (Desktop)

Navigation Large Variant

Links

Default Link

Link with Inset Border (Button-like Link)

5. Layout Principles

Spacing System

Grid & Container

Whitespace Philosophy

Border Radius Scale

Border Widths

6. Depth & Elevation

Elevation Strategy

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 www.hellofresh.com

Preview

Design System Inspired by HelloFresh

1. Visual Theme & Atmosphere

2. Color Palette & Roles

Primary

Neutral Scale

Decorative / Accent Colors

Neutral Supporting Colors

3. Typography Rules

Font Family

Hierarchy

Principles

4. Component Stylings

Buttons

Primary Button

Filled Button (Secondary / Muted)

Outline Button

Icon Button

Icon Button (Inverted)

Cards & Containers

Inputs & Forms

Text Input

Label

Navigation

Default Navigation (Desktop)

Navigation Large Variant

Links

Default Link