José López

Generated Oct 30, 2026

DESIGN.md for umami-webflow-website-template.webflow.io

umami-webflow-website-template.webflow.io9 colors3 componentsRanchers + Nunito

Remix

2 screenshots captured· umami-webflow-website-template.webflow.io

1 / 2 · Umami - Webflow HTML website template · Above the fold

Preview

the generated design system

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

Design tokens

version: alpha
name: Umami-webflow-website-template
description: |
  Umami embodies bold, energetic warmth rooted in hospitality and culinary
  passion. The design system combines a striking deep red brand identity with a
  refined neutral palette, creating dramatic contrast that evokes appetite and
  celebration. Large-scale serif typography in Ranchers dominates hero moments,
  while refined sans-serif (Nunito) anchors supporting content. The system
  prioritizes generosity in whitespace and rhythm, layering vibrant accent
  colors over muted surfaces to guide focus toward calls-to-action and key
  messaging. Color-blocking—rather than subtle shadows—drives depth perception,
  reinforcing a modern, playful restaurant aesthetic suited to contemporary
  dining establishments.
source:
  url: "https://umami-webflow-website-template.webflow.io/"
  pagesAnalyzed: 1
  extractedAt: 2026-10-30
  tokensMeasured: true
colors:
  primary: "#DC1425"
  canvas: "#E2E2E2"
  surface-alt: "#111111"
  on-primary: "#FFFFFF"
  ink: "#111111"
  body: "#414141"
  muted: "#FFFFFF"
  faint: "#FFEFCB"
  accent-1: "#005416"
  neutral-1: "#C0C0C0"
  neutral-2: "#333333"
typography:
  display-xxl:
    fontFamily: Ranchers
    fontSize: 140px
    fontWeight: 400
    lineHeight: 0.9
    letterSpacing: 1px
  display-xxl-uppercase:
    fontFamily: Ranchers
    fontSize: 140px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 3px
    textTransform: uppercase
  display-xxl-tight:
    fontFamily: Ranchers
    fontSize: 140px
    fontWeight: 400
    lineHeight: 0.8
    letterSpacing: 0px
    textTransform: uppercase
  display-xl:
    fontFamily: Ranchers
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 2px
    textTransform: uppercase
  display-lg:
    fontFamily: Ranchers
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 2px
    textTransform: uppercase
  heading-md:
    fontFamily: Ranchers
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 1px
    textTransform: uppercase
  heading-md-tight:
    fontFamily: Ranchers
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 1px
    textTransform: uppercase
  heading-md-2:
    fontFamily: Ranchers
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 2px
    textTransform: uppercase
  heading-sm:
    fontFamily: Ranchers
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 1px
    textTransform: uppercase
  body-xl:
    fontFamily: Ranchers
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 1px
    textTransform: uppercase
  body-xl-2:
    fontFamily: Ranchers
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 2px
    textTransform: uppercase
  body-lg:
    fontFamily: Nunito
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body-lg-tight:
    fontFamily: Nunito
    fontSize: 20px
    fontWeight: 400
    lineHeight: 0.8
    letterSpacing: 0px
  body-lg-loose:
    fontFamily: Nunito
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-md:
    fontFamily: Nunito
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0px
  button-xl:
    fontFamily: Ranchers
    fontSize: 24px
    fontWeight: 400
    lineHeight: 0.67
    letterSpacing: 0px
  button-xl-strong:
    fontFamily: Nunito
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0px
    textTransform: uppercase
  label-xl:
    fontFamily: Nunito
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  label-lg:
    fontFamily: Nunito
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
rounded:
  none: 0px
  xs: 12px
  sm: 24px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 28px
  xxl: 32px
  xxxl: 40px
  section: 52px
  band: 60px
borderWidths:
  thin: 1px
  medium: 2px
elevationStrategy: color-blocking
themes:
  derived: dark   # the other theme is the site's measured palette
  light:
    bg: "#E2E2E2"
    surface: "#111111"
    surfaceRaised: "#111111"
    text: "#111111"
    textMuted: "#414141"
    border: "#C9C9C9"
    accent: "#DC1425"
    accentFg: "#FFFFFF"
    focusRing: "#DC1425"
    elevation: shadow
  dark:
    bg: "#140A0C"
    surface: "#22191B"
    surfaceRaised: "#2E2527"
    text: "#FEF6F6"
    textMuted: "#A59C9D"
    border: "#3A3133"
    accent: "#EC2D3D"
    accentFg: "#0B0B0C"
    focusRing: "#DC1425"
    elevation: "border+surface"
  contrastFailures:
    - "light: text on surface = 1:1 (needs 4.5:1)"
components:
  button-primary:
    typography: "{typography.body-md}"
    textColor: "{colors.muted}"
    border: "2px solid {colors.on-primary}"
    height: 48px
    padding: "17px 20px 17px 20px"
    boxShadow: "{colors.on-primary} 2px 2px 0px 0px"
    rounded: 30px
    backgroundColor: "{colors.primary}"
  button-primary-2:
    typography: "{typography.body-md}"
    textColor: "{colors.muted}"
    border: "2px solid {colors.surface-alt}"
    height: 48px
    padding: "20px 20px 17px 20px"
    boxShadow: "{colors.surface-alt} 2px 2px 0px 0px"
    rounded: 30px
    backgroundColor: "{colors.primary}"
  button-text:
    typography: "{typography.button-xl}"
    textColor: "{colors.ink}"
    height: 48px
  button-icon:
    textColor: "{colors.muted}"
    border: "1px solid {colors.on-primary}"
    height: 72px
    fontSize: 40px
    fontFamily: Ranchers
    fontWeight: 400
    lineHeight: 0.4
    rounded: "{rounded.sm}"
  badge-text:
    textColor: "{colors.ink}"
    height: 38.4062px
    fontSize: 16px
    fontFamily: Nunito
    fontWeight: 400
    lineHeight: 1.2
  link:
    typography: "{typography.body-xl}"
    textColor: "{colors.primary}"
    border: "1px solid {colors.primary}"
    padding: "28px 28px 28px 28px"
    rounded: "{rounded.xs}"
  link-2:
    typography: "{typography.body-xl}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.surface-alt}"
    padding: "28px 28px 28px 28px"
    rounded: "{rounded.xs}"
states:
  other-focus:
    target: other
    state: focus
    outline: none
  input-focus:
    target: input
    state: focus
    borderColor: "rgb(56, 152, 236)"
  other-hover:
    target: other
    state: hover
    opacity: 1
  nav-hover:
    target: nav
    state: hover
    boxShadow: "{colors.surface-alt} 2px 2px"
breakpoints:
  - width: 375
    containerWidth: 375
    gridColumns: 3
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 52
    bodyPx: 16
    sectionPaddingX: 0
  - width: 768
    containerWidth: 768
    gridColumns: 3
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 98
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1024
    containerWidth: 1024
    gridColumns: 3
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 140
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1280
    containerWidth: 1280
    gridColumns: 3
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 140
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1440
    containerWidth: 1380
    gridColumns: 3
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 140
    bodyPx: 16
    sectionPaddingX: 0
coverage:
  statesFound: 15
  gradientsFound: 0
  rolesUnassigned: 3
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: true
  semanticRampDeclared: false

Design System Inspired by Umami

1. Visual Theme & Atmosphere

Umami embodies bold, energetic warmth rooted in hospitality and culinary passion. The design system combines a striking deep red brand identity with a refined neutral palette, creating dramatic contrast that evokes appetite and celebration. Large-scale serif typography in Ranchers dominates hero moments, while refined sans-serif (Nunito) anchors supporting content. The system prioritizes generosity in whitespace and rhythm, layering vibrant accent colors over muted surfaces to guide focus toward calls-to-action and key messaging. Color-blocking—rather than subtle shadows—drives depth perception, reinforcing a modern, playful restaurant aesthetic suited to contemporary dining establishments.

Key Characteristics:

Bold serif display typography — all-uppercase Ranchers at 140px anchors visual hierarchy
Deep red brand accent (#DC1425) as the primary interactive and accent element
Strong neutral grounding — dark surfaces (#111111) paired with warm light backgrounds (#E2E2E2)
Pill-shaped buttons — 9999px border radius softens call-to-action forms
Color-blocking depth strategy — surface color changes convey elevation, not shadows
Hospitality-forward messaging — generous whitespace, warm tones, human-scale sizing
Decorative motifs — unused green accent (#005416) available for tertiary highlights

2. Color Palette & Roles

Primary

Primary / Brand ({colors.primary} — #DC1425): Dominates CTAs, brand mark (logo), active interactive states, and key accent moments. High-contrast white border and shadow treatment reinforces energy.

Neutral Scale

Canvas ({colors.canvas} — #E2E2E2): Default page background, providing a warm, light foundation.
Surface Alt ({colors.surface-alt} — #111111): Deep black used for alternating section bands and as the primary heading color; creates strong text contrast against light backgrounds.
Body ({colors.body} — #414141): Standard body copy color, mid-tone gray for comfortable reading.
On Primary ({colors.on-primary} — #FFFFFF): White text and labels on brand surfaces; also used for captions and secondary text.
Muted / Faint ({colors.faint} — #FFEFCB): Tertiary background or placeholder text; a warm, barely-there cream.
Neutral Decorative ({colors.neutral-1} — #C0C0C0): Light gray; no assigned semantic role.
Neutral Decorative ({colors.neutral-2} — #333333): Dark gray; no assigned semantic role.

Accent Colors

Decorative Accent ({colors.accent-1} — #005416): Deep green; measured but not assigned a role. Available for tertiary highlights, badges, or future brand extensions.

Interactive

Link Color ({colors.primary} — #DC1425): Links adopt the brand red on hover; no dedicated link or visited state was measured.

3. Typography Rules

Font Family

Primary (Display & Headings): Ranchers (https://fonts.googleapis.com/), serif, all-weight 400 (normal). Fallback stack: Ranchers, Georgia, serif

Secondary (Body, Buttons, Labels): Nunito (https://fonts.googleapis.com/), sans-serif, weights 400 and 700. Fallback stack: Nunito, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display XXL Tight	Ranchers	140px	400	0.8	0px	Uppercase, compact hero text
Display XXL	Ranchers	140px	400	0.9	1px	Uppercase, primary hero
Display XXL Uppercase	Ranchers	140px	400	1.1	3px	Uppercase, widest tracking
Display XL	Ranchers	64px	400	1.2	2px	Uppercase, section heading
Display LG	Ranchers	48px	400	1.2	2px	Uppercase, subsection
Heading MD	Ranchers	32px	400	1.2	1px	Uppercase, standard heading
Heading MD Tight	Ranchers	32px	400	1.1	1px	Uppercase, compact heading
Heading MD 2	Ranchers	32px	400	1.2	2px	Uppercase, wider tracking
Heading SM	Ranchers	28px	400	1	1px	Uppercase, small heading
Body XL	Ranchers	24px	400	1.2	1px	Uppercase, large display text
Body XL 2	Ranchers	24px	400	1.2	2px	Uppercase, wide-tracked body
Button XL	Ranchers	24px	400	0.67	0px	Uppercase button label (secondary)
Button XL Strong	Nunito	24px	700	1	0px	Uppercase, bold primary button
Body LG	Nunito	20px	400	1.4	0px	Comfortable reading, standard paragraphs
Body LG Loose	Nunito	20px	400	1.5	0px	Extra-loose line height, accessibility
Body LG Tight	Nunito	20px	400	0.8	0px	Compact line height, list items
Label XL	Nunito	20px	600	1.2	0px	Form labels, medium-weight
Body MD	Nunito	16px	700	1	0px	Bold link text, emphasis
Label LG	Nunito	14px	400	1.43	0px	Input placeholders, helper text

Principles

Serif dominates display: Ranchers at 140px anchors all hero moments; its generous letterspacing (up to 3px on {typography.display-xxl-uppercase}) creates rhythm and breathability.
Uppercase emphasis: All Ranchers text is text-transform: uppercase; Nunito supports mixed case for body readability.
Tracking variation: Display sizes employ letterspacing from 0px to 3px to modulate visual weight and hierarchy.
Line-height rhythm: Display text uses tighter ratios (0.8–1.1); body text uses comfortable 1.4–1.5 for readability.
Weight discipline: Ranchers is always weight 400; Nunito steps between 400 (regular) and 700 (bold) for emphasis.

4. Component Stylings

Buttons

Primary Button

Background: {colors.primary} (#DC1425)
Text Color: {colors.on-primary} (#FFFFFF)
Font: {typography.button-xl-strong} (Nunito, 24px, weight 700, uppercase)
Padding: 20px (top/bottom), 20px (left/right)
Height: 48px
Border: 2px solid {colors.surface-alt} (#111111)
Border Radius: {rounded.full} (9999px — pill shape)
Box Shadow: #111111 2px 2px 0px 0px (hard-edged offset shadow)
Hover State: backgroundColor changes to dark secondary (extracted: var(--dark-color))

Primary Button (Alternate)

Background: {colors.primary} (#DC1425)
Text Color: {colors.on-primary} (#FFFFFF)
Font: {typography.button-xl-strong} (Nunito, 24px, weight 700, uppercase)
Padding: 17px (top/bottom), 20px (left/right)
Height: 48px
Width: 204px
Border: 2px solid {colors.on-primary} (#FFFFFF)
Border Radius: {rounded.full} (9999px)
Box Shadow: #FFFFFF 2px 2px 0px 0px
Hover State: backgroundColor changes to secondary (extracted: var(--secondary-color))

Text Button

Background: transparent
Text Color: {colors.surface-alt} (#111111)
Font: {typography.button-xl} (Ranchers, 24px, weight 400, line-height 0.67)
Padding: 0px
Border: none
Border Radius: {rounded.none} (0px)
Box Shadow: none
Height: 48px
Hover State: outline: 0px (focus state removes outline)

Icon Button

Background: transparent
Text Color: {colors.on-primary} (#FFFFFF)
Font: Ranchers, 40px, weight 400
Width: 72px
Height: 72px
Border: 1px solid {colors.on-primary} (#FFFFFF)
Border Radius: {rounded.sm} (24px)
Padding: 0px
Box Shadow: none

Cards & Containers

Link Card (Default)

Background: transparent
Border: 1px solid {colors.primary} (#DC1425)
Border Radius: {rounded.xs} (12px)
Padding: 28px
Height: 84px
Font: Ranchers, 24px, weight 400, line-height 1.2
Text Color: {colors.primary} (#DC1425)
Box Shadow: none

Link Card (Dark Variant)

Background: transparent
Border: 1px solid {colors.surface-alt} (#111111)
Border Radius: {rounded.xs} (12px)
Padding: 28px
Height: 84px
Font: Ranchers, 24px, weight 400
Text Color: {colors.surface-alt} (#111111)
Box Shadow: none
Hover State: borderColor: transparent, backgroundColor: {colors.primary} (#DC1425)

Inputs & Forms

Input Field

Font: Nunito, 14px, weight 400, line-height 1.43
Border: 1px or 2px solid (thin or medium as measured)
Border Radius: {rounded.xs} (12px)
Focus State: outline: 0px, borderColor: #3898EC (blue focus ring via border)

Badge / Label

Background: transparent
Font: Nunito, 16px, weight 400
Text Color: {colors.surface-alt} (#111111)
Padding: 0px
Border: none
Border Radius: {rounded.none} (0px)
Height: auto
Box Shadow: none

Navigation

Nav Item (Hover State)

Text Color: {colors.on-primary} (#FFFFFF)
Background: {colors.primary} (#DC1425)
Box Shadow: #111111 2px 2px 0px 0px

Menu Toggle

Visible on all measured viewport sizes (375px–1440px); no nav links collapse to menu until breakpoint data shows otherwise

5. Layout Principles

Spacing System

Base unit: {spacing.xxs} = 4px

Scale (multiples of 4px):

{spacing.xxs} = 4px — micro-adjustments, dividers
{spacing.xs} = 8px — tight component spacing
{spacing.sm} = 12px — internal padding
{spacing.md} = 16px — standard padding, body text margins
{spacing.lg} = 24px — component separation
{spacing.xl} = 28px — card padding, medium rhythm
{spacing.xxl} = 32px — section padding
{spacing.xxxl} = 40px — large gaps
{spacing.section} = 52px — section block padding
{spacing.band} = 60px — full-width section spacing

Usage:

Button padding: {spacing.md} to {spacing.lg}
Card padding: {spacing.xl} (28px)
Section vertical padding: {spacing.band} (60px)
Body text margins: {spacing.md} (16px)

Grid & Container

Max Width (1440px): Content column constrained to 1380px at 1440px viewport; collapses to full width below.
Column Strategy: 3-column grid measured across all breakpoints (375px–1440px).
Section Padding Horizontal: 0px (full-width sections); content centers within max-width constraint.
Breakpoint Handling: Headings, body text, and spacing scale responsively; 3-column layout persists across all sizes.

Whitespace Philosophy

The system embraces generous vertical rhythm and breathing room. Section bands ({spacing.band} — 60px) separate major content blocks, creating deliberate pause between hero imagery and text. Internal padding ({spacing.xl} — 28px) within cards and containers maintains the hospitality-forward aesthetic of comfort and space. Horizontal sections collapse to edge-to-edge at mobile, then expand into centered max-width at desktop, maximizing screen real estate on large viewports while maintaining readability.

Border Radius Scale

{rounded.none} (0px): Badges, overlays, text buttons — sharp, minimal aesthetic.
{rounded.xs} (12px): Input fields, link cards — slight softness for interactive elements.
{rounded.sm} (24px): Icon buttons — moderate roundness for accent interactive targets.
{rounded.full} (9999px): Primary and secondary buttons — full pill shape, emphasizing action and warmth.

Border Widths

Thin (1px): Input field default state, link card borders, icon button frame.
Medium (2px): Primary button border, hard-edged offset shadow treatment (acts as visual weight reinforcement).

6. Depth & Elevation

Elevation Strategy

Umami employs color-blocking rather than layered shadows. Depth perception derives from surface color changes and hard-edged offset shadows (2px 2px 0px 0px), not from subtle gradual shadows. This approach reinforces the bold, playful restaurant aesthetic and maintains strong readability across light and dark surfaces.

Level	Treatment	Use
Flat (Base)	No shadow, transparent or canvas background	Body text, link cards on light backgrounds
Elevated (Primary)	2px 2px offset shadow in dark border color (`#111111` or white)	Primary buttons, accent navigation items
Overlay	No shadow; color change or border change	Darkened backgrounds, surface-alt (`#111111`) sections

Shadow Philosophy: Hard shadows (2px 2px 0px 0px) create a tactile, playful impression—reminiscent of digital print or bold graphic design. This stands in contrast to soft, diffuse shadows, emphasizing the system's modern, energetic character.

Opacity Levels

100% (1.00): All measured elements render at full opacity; no transparency gradients or reduced-opacity states were extracted.

Z-index / Layering

Base Layer (z-index: 1): Standard page content, body text, images.
Elevated (z-index: 2–5): Component overlays, cards, buttons.
High (z-index: 9): Modal backdrops, overlays.
Sticky (z-index: 999): Navigation headers, sticky positioning.
Modal (z-index: 1000): Top-most layer; dialog windows, modals, toasts.

7. Do's and Don'ts

Do

Use the brand red (#DC1425) sparingly. Reserve it for primary CTAs and key interactive moments; it commands attention and should guide focus.
Maintain pill-shaped button radius ({rounded.full} — 9999px). This softness is distinctive and reinforces the hospitality brand tone.
Apply hard-edged offset shadows (2px 2px 0px 0px) to emphasized elements. This tactile treatment differentiates CTAs and navigation items.
Employ uppercase Ranchers on all display and heading typography. The serif's boldness and consistent capitalization define the visual voice.
Layer generous whitespace ({spacing.band} — 60px between sections, {spacing.xl} — 28px within cards) to reinforce comfort and breathability.
Contrast dark surfaces (#111111) against light backgrounds (#E2E2E2). This creates dramatic focus and ensures accessibility.
Use {typography.body-lg} (20px, 1.4 line-height) for long-form body copy to maintain readability and comfort.

Don't

Mix serif and sans-serif typefaces in the same visual block. Ranchers for headings; Nunito for supporting copy maintains clarity.
Use color alone to convey status or interaction state. Pair color changes with border, shadow, or scale adjustments.
Apply the accent green (#005416) to primary interactive elements. It is decorative; reserve #DC1425 for calls-to-action.
Reduce button padding below {spacing.md} (16px). Buttons require comfortable touch targets and visual prominence.
Invent new border-radius values. Only use {rounded.none} (0px), {rounded.xs} (12px), {rounded.sm} (24px), and {rounded.full} (9999px).
Overlay text directly on images without a dark scrim or surface layer. Preserve readability with a surface-alt (#111111) band or semi-transparent layer.
Use off-palette colors for accents or CTAs. Stick to the measured palette; the system is intentionally limited for visual coherence.

8. Responsive Behavior

Breakpoints

Breakpoint	Viewport Width	Max Content Width	Grid Columns	Menu Toggle	Display Heading Size	Body Text	Section Padding X
Mobile	375px	375px	3	Visible	52px	16px	0px
Tablet	768px	768px	3	Visible	98px	16px	0px
Desktop (MD)	1024px	1024px	3	Visible	140px	16px	0px
Desktop (LG)	1280px	1280px	3	Visible	140px	16px	0px
Desktop (XL)	1440px	1380px	3	Visible	140px	16px	0px

Key Observations:

No responsive collapse: Menu toggle remains visible across all breakpoints; no visible nav links exist in the measured data.
Heading size steps: Display headings grow from 52px (mobile) → 98px (tablet) → 140px (desktop).
Constant grid: 3-column layout persists across all sizes; grid changes content distribution, not column count.
Content centering: Section padding stays 0px horizontally; max-width container centers content on large viewports.

Touch Targets

Primary buttons: 48px height minimum, 204px width on primary CTAs; adequate for finger taps (WCAG minimum 44–48px).
Icon buttons: 72px width × height, exceeding minimum touch target size.
Link cards: 84px height with 28px padding provides ample touch zone.
Input fields: 12px border radius, 14px font size with 1.43 line height; tap-friendly without excessive height.

Collapsing Strategy

The measured site does not collapse to a single-column mobile layout. Instead:

All breakpoints maintain a 3-column grid structure.
Display typography scales down but remains uppercase and serif-driven.
Section padding collapses to 0px horizontally on all sizes; content relies on max-width centering.
Menu toggle is always visible; no breakpoint reveals a horizontal nav menu.
Body text remains 16px across mobile and desktop, prioritizing readability over size reduction.

Adaptation Approach:

Headings shrink proportionally (52px → 140px from mobile to desktop).
Spacing and padding scale with viewport (though section padding-x stays 0px).
Button sizing and card padding remain consistent; touch targets are adequate across all sizes.

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: Primary (#DC1425) — button fill, brand accent, active state
Secondary CTA Border: White (#FFFFFF) or Dark (#111111) — button outline, nav hover background
Background (Light): Canvas (#E2E2E2) — default page background
Background (Dark): Surface Alt (#111111) — heading color, alternating section bands
Body Text: Body (#414141) — standard copy color
Label / Secondary Text: On Primary (#FFFFFF) — captions, labels on brand surfaces
Placeholder / Tertiary: Faint (#FFEFCB) — subtle backgrounds, placeholder text
Decorative Accents: Accent 1 (#005416) — unassigned; available for future use

Iteration Guide

All display headings use Ranchers at 140px maximum ({typography.display-xxl}), uppercase, with 0.9 line-height. Scale down to 52–98px on mobile and tablet; maintain serif family.
Primary buttons are 48px height, {rounded.full} (pill), brand red (#DC1425) fill, white text, 2px hard shadow (2px 2px 0px). Apply button-hover state to a darker secondary color on interaction.
Body copy uses Nunito 20px, weight 400, 1.4 line-height ({typography.body-lg}) for comfortable reading. Headings and labels switch to Ranchers or Nunito bold as appropriate.
Spacing follows the scale: {spacing.band} (60px) between sections, {spacing.xl} (28px) within cards, {spacing.md} (16px) for margins and button padding.
Link cards have 12px border-radius ({rounded.xs}), 1px border, 28px padding, and are transparent unless hovered (then fill with #DC1425). Text color is red or dark depending on variant.
Input fields use 12px border-radius, 1px–2px border, 14px Nunito label text, and turn blue (#3898EC) on focus.
No responsive nav collapse observed; menu toggle stays visible. Adjust heading sizes and section padding as viewport widens; grid columns remain 3 across all sizes.
Color-blocking (not shadows) drives visual hierarchy. Use surface-alt (#111111) sections and hard-edged offset shadows (2px 2px 0px 0px in white or dark) to emphasize key moments.

10. Known Gaps

Interaction states are incomplete. Only basic :hover and :focus states were extracted; disabled, active, visited, and error states are not documented here. Test implementation against live site for full state coverage.
No semantic color ramp (error, success, warning). The site does not declare status colors in its CSS; use status colors only if custom-defined for your implementation.
No gradient or mesh effects measured. All fills are solid colors; decorative gradients (if any) are not included in this system.
Three colors measured but unassigned: Neutral 1 (#C0C0C0), Neutral 2 (#333333), and Accent 1 (#005416) have no documented role. The accent green may be reserved for future use.
Dark mode not extracted. Only a single light theme was measured; no dark-mode variant or system-wide theme toggle was observed.
Animation and transition timing not captured. No CSS transition durations, easing functions, or animation keyframes were extracted.
Micro-interactions not documented. Scroll behavior, parallax, lazy-load effects, and other dynamic states are outside the scope of this extraction.
Only 1 page analyzed. Surfaces behind authentication, form confirmation screens, and other user flows were not visited.
Component variants may exist beyond those extracted. Only measured button, badge, link, and input variants are documented; other component types (modals, dropdowns, tooltips) are not specified.
Typography sizes on very small breakpoints (< 375px) not measured. Behavior on ultra-mobile devices (iPhone SE, etc.) may require additional refinement.

YAML Tokens (reference for inline citations)

colors:
  primary: "#DC1425"
  accent-1: "#005416"
  canvas: "#E2E2E2"
  surface-alt: "#111111"
  body: "#414141"
  on-primary: "#FFFFFF"
  faint: "#FFEFCB"
  neutral-1: "#C0C0C0"
  neutral-2: "#333333"

typography:
  display-xxl-uppercase:
    size: 140px
    weight: 400
    line-height: 1.1
    letter-spacing: 3px
    family: Ranchers
    text-transform: uppercase
  display-xl:
    size: 64px
    weight: 400
    line-height: 1.2
    letter-spacing: 2px
    family: Ranchers
    text-transform: uppercase
  display-lg:
    size: 48px
    weight: 400
    line-height: 1.2
    letter-spacing: 2px
    family: Ranchers
    text-transform: uppercase
  button-xl:
    size: 24px
    weight: 400
    line-height: 0.67
    letter-spacing: 0px
    family: Ranchers
  heading-md:
    size: 32px
    weight: 400
    line-height: 1.2
    letter-spacing: 1px
    family: Ranchers
    text-transform: uppercase
  display-xxl-tight:
    size: 140px
    weight: 400
    line-height: 0.8
    letter-spacing: 0px
    family: Ranchers
    text-transform: uppercase
  display-xxl:
    size: 140px
    weight: 400
    line-height: 0.9
    letter-spacing: 1px
    family: Ranchers
  heading-md-tight:
    size: 32px
    weight: 400
    line-height: 1.1
    letter-spacing: 1px
    family: Ranchers
    text-transform: uppercase
  body-xl:
    size: 24px
    weight: 400
    line-height: 1.2
    letter-spacing: 1px
    family: Ranchers
    text-transform: uppercase
  heading-sm:
    size: 28px
    weight: 400
    line-height: 1
    letter-spacing: 1px
    family: Ranchers
    text-transform: uppercase
  heading-md-2:
    size: 32px
    weight: 400
    line-height: 1.2
    letter-spacing: 2px
    family: Ranchers
    text-transform: uppercase
  body-xl-2:
    size: 24px
    weight: 400
    line-height: 1.2
    letter-spacing: 2px
    family: Ranchers
    text-transform: uppercase
  body-lg:
    size: 20px
    weight: 400
    line-height: 1.4
    letter-spacing: 0px
    family: Nunito
  body-md:
    size: 16px
    weight: 700
    line-height: 1
    letter-spacing: 0px
    family: Nunito
  label-xl:
    size: 20px
    weight: 600
    line-height: 1.2
    letter-spacing: 0px
    family: Nunito
  label-lg:
    size: 14px
    weight: 400
    line-height: 1.43
    letter-spacing: 0px
    family: Nunito
  body-lg-tight:
    size: 20px
    weight: 400
    line-height: 0.8
    letter-spacing: 0px
    family: Nunito
  body-lg-loose:
    size: 20px
    weight: 400
    line-height: 1.5
    letter-spacing: 0px
    family: Nunito
  button-xl-strong:
    size: 24px
    weight: 700
    line-height: 1
    letter-spacing: 0px
    family: Nunito
    text-transform: uppercase

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

rounded:
  none: 0px
  xs: 12px
  sm: 24px
  full: 9999px

z-index:
  base-1: 1
  base-2: 2
  base-3: 3
  base-4: 4
  base-5: 5
  base-9: 9
  sticky: 999
  modal: 1000

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

Design tokens

Extracted from umami-webflow-website-template.webflow.io

Primary

#DC1425

Primary CTA, brand accent, active state

#005416

Accent / decorative

Neutral

#E2E2E2

Default page background

#111111

Alternating section band; Headings / primary text

#414141

Body copy

#FFFFFF

Captions, secondary text; label colour on brand surfaces

#FFEFCB

Tertiary / placeholder text

#C0C0C0

Neutral

#333333

Neutral

Typography · RanchersGoogle Fonts

h1140px · 400 · 154px

h264px · 400 · 76.8px

h348px · 400 · 57.6px

button24px · 400 · 16px

heading32px · 400 · 38.4px

display140px · 400 · 112px

display140px · 400 · 126px

heading32px · 400 · 35.2px

body24px · 400 · 28.8px

heading28px · 400 · 28px

heading32px · 400 · 38.4px

body24px · 400 · 28.8px

Typography · NunitoGoogle Fonts

body20px · 400 · 28px

link16px · 700 · 16px

label20px · 600 · 24px

input14px · 400 · 20px

list-item20px · 400 · 16px

body20px · 400 · 30px

body20px · 600 · 28px

body16px · 400 · 22.4px

body20px · 600 · 30px

body16px · 400 · 19.2px

body20px · 400 · 24px

body16px · 400 · 20.8px

body16px · 700 · 19.2px

button24px · 700 · 24px

body16px · 400 · 24px

Spacing

4px

8px

12px

16px

24px

28px

32px

40px

Components · 3

Remixes of umami-webflow-website-template.webflow.io

Latest remixes

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

Remix it