Phương Mai Võ Hồ

Generated Oct 18, 2026

DESIGN.md for blossomandrhyme.com

blossomandrhyme.com16 colors6 componentsIvy + Garamond

Remix

12 screenshots captured· blossomandrhyme.com

1 / 12 · Blossom & Rhyme | Floral Preservation – blossomandrhyme · Above the fold

Preview

the generated design system

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

Design tokens

version: alpha
name: Blossomandrhyme
description: |
  Blossom & Rhyme embodies a refined, timeless elegance rooted in luxury floral
  preservation and memorial craftsmanship. The design system channels
  sophistication through a restrained, nature-inspired palette anchored by soft,
  muted greens and warm neutrals—evoking pressed flowers, botanical
  preservation, and the quiet dignity of treasured memories. The visual language
  prioritizes legibility and contemplation over visual spectacle, with generous
  whitespace, serif typography for body copy, and elegant display faces that
  suggest formal floristry and heritage. The aesthetic is deliberately
  understated, positioning preserved flowers as the star while the interface
  recedes into a warm, calming backdrop. Subtle serif-to-sans-serif transitions,
  refined button treatments, and soft-edged badges reinforce the premium,
  artisanal positioning.
source:
  url: "https://blossomandrhyme.com/"
  pagesAnalyzed: 6
  extractedAt: 2026-10-18
  tokensMeasured: true
colors:
  primary: "#7E8A7C"
  accent: "#EA4335"
  canvas: "#FAF8F7"
  surface-alt: "#E6E3E3"
  ink: "#000000"
  body: "#161616"
  muted: "#212121"
  faint: "#626261"
  accent-1: "#4285F4"
  accent-2: "#FBBC05"
  accent-3: "#34A853"
  accent-4: "#8A79FA"
  accent-5: "#AB8C52"
  accent-6: "#526A4F"
  neutral-1: "#AAAAAA"
  neutral-2: "#777777"
typography:
  display-lg:
    fontFamily: ivypresto-display
    fontSize: 42px
    fontWeight: 100
    lineHeight: 1.1
    letterSpacing: 1px
  display-lg-strong:
    fontFamily: Ivy
    fontSize: 42px
    fontWeight: 200
    lineHeight: 1.1
    letterSpacing: 1px
  display-md:
    fontFamily: ivypresto-display
    fontSize: 40px
    fontWeight: 100
    lineHeight: 1.2
    letterSpacing: 1px
  display-md-strong:
    fontFamily: Ivy
    fontSize: 40px
    fontWeight: 200
    lineHeight: 1.2
    letterSpacing: 1px
  heading-xxl:
    fontFamily: Ivy
    fontSize: 36px
    fontWeight: 200
    lineHeight: 1.2
    letterSpacing: 1px
  heading-xl:
    fontFamily: Ivy
    fontSize: 32px
    fontWeight: 200
    lineHeight: 1.2
    letterSpacing: 1px
  heading-lg:
    fontFamily: Ivy
    fontSize: 30px
    fontWeight: 200
    lineHeight: 1.2
    letterSpacing: 1px
  heading-md:
    fontFamily: Ivy
    fontSize: 22px
    fontWeight: 200
    lineHeight: 1.3
    letterSpacing: 1px
  heading-sm:
    fontFamily: Ivy
    fontSize: 21.6px
    fontWeight: 200
    lineHeight: 1.2
    letterSpacing: 1px
  heading-xs:
    fontFamily: Ivy
    fontSize: 20px
    fontWeight: 200
    lineHeight: 1.2
    letterSpacing: 1px
  quote:
    fontFamily: "Gilda Display"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.24
    letterSpacing: 0px
  body-xl:
    fontFamily: Garamond
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  body-lg:
    fontFamily: Garamond
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  body-lg-strong:
    fontFamily: Garamond
    fontSize: 18px
    fontWeight: 700
    letterSpacing: 0px
  body-md:
    fontFamily: Garamond
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  body-sm:
    fontFamily: Garamond
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  body-xs:
    fontFamily: Garamond
    fontSize: 14px
    fontWeight: 400
    letterSpacing: 0px
  nav:
    fontFamily: Lato
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.6px
    textTransform: uppercase
  button-md:
    fontFamily: Lato
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.6px
    textTransform: uppercase
  button-md-strong:
    fontFamily: Manrope
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.45
    letterSpacing: 0px
  button-sm:
    fontFamily: Lato
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 1.3px
    textTransform: uppercase
  button-xs:
    fontFamily: Garamond
    fontSize: 12px
    fontWeight: 400
    letterSpacing: 1.2px
    textTransform: uppercase
  label:
    fontFamily: Lato
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.38
    letterSpacing: 1.3px
    textTransform: uppercase
  caption-lg:
    fontFamily: Garamond
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  caption-md:
    fontFamily: Garamond
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  caption-md-uppercase:
    fontFamily: Lato
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 1.3px
    textTransform: uppercase
  caption-md-gilda-display:
    fontFamily: "Gilda Display"
    fontSize: 12px
    fontWeight: 400
    letterSpacing: 2.4px
    textTransform: uppercase
  caption-sm:
    fontFamily: Lato
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 1.3px
    textTransform: uppercase
rounded:
  none: 0px
  xs: 3px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 32px
  xxxl: 44px
  section: 52px
  band: 84px
borderWidths:
  thin: 1px
elevationStrategy: color-blocking
themes:
  derived: dark   # the other theme is the site's measured palette
  light:
    bg: "#FAF8F7"
    surface: "#E6E3E3"
    surfaceRaised: "#DDDADA"
    text: "#000000"
    textMuted: "#161616"
    border: "#DCDAD9"
    accent: "#EA4335"
    accentFg: "#000000"
    focusRing: "#EA4335"
    elevation: shadow
  dark:
    bg: "#130B0B"
    surface: "#211A1A"
    surfaceRaised: "#2D2626"
    text: "#FEF7F7"
    textMuted: "#A59D9D"
    border: "#393232"
    accent: "#EA4335"
    accentFg: "#0B0B0C"
    focusRing: "#EA4335"
    elevation: "border+surface"
components:
  button-filled:
    typography: "{typography.label}"
    textColor: "{colors.ink}"
    border: "1px solid rgb(255, 255, 255)"
    height: 43.875px
    padding: "12px 21.6px 12px 21.6px"
    rounded: "{rounded.xs}"
    backgroundColor: "rgb(255, 255, 255)"
  button-filled-sm:
    textColor: "{colors.ink}"
    border: "1px solid rgb(255, 255, 255)"
    height: 37.25px
    padding: "8px 32px 8px 32px"
    fontSize: 14px
    fontFamily: Lato
    fontWeight: 400
    lineHeight: 1.38
    rounded: "{rounded.xs}"
    backgroundColor: "rgb(255, 255, 255)"
  button-primary:
    typography: "{typography.label}"
    textColor: "rgb(255, 255, 255)"
    height: 41.875px
    padding: "12px 21.6px 12px 21.6px"
    rounded: "{rounded.xs}"
    backgroundColor: "{colors.primary}"
  button-primary-2:
    typography: "{typography.label}"
    textColor: "{colors.muted}"
    height: 41.875px
    padding: "12px 21.6px 12px 21.6px"
    rounded: "{rounded.xs}"
    backgroundColor: "{colors.primary}"
  button-text:
    typography: "{typography.button-xs}"
    textColor: "{colors.muted}"
    height: 48.7969px
  card:
    textColor: "{colors.muted}"
    fontSize: 16px
    fontFamily: Garamond
    fontWeight: 400
    backgroundColor: "rgb(255, 255, 255)"
  card-sm:
    textColor: "{colors.muted}"
    fontSize: 14px
    fontFamily: Manrope
    fontWeight: 500
  badge-filled:
    textColor: "rgb(175, 123, 136)"
    height: 33px
    padding: "7.008px 15px 7.008px 15px"
    fontSize: 16px
    fontFamily: Lato
    fontWeight: 400
    rounded: "{rounded.xs}"
    backgroundColor: "rgb(249, 222, 229)"
  badge-text:
    textColor: "{colors.muted}"
    height: 43px
    padding: "5px 5px 5px 5px"
    fontSize: 16px
    fontFamily: Garamond
    fontWeight: 400
  badge-icon:
    textColor: "{colors.muted}"
    height: 20px
    fontSize: 16px
    fontFamily: Garamond
    fontWeight: 400
  footer:
    textColor: "{colors.muted}"
    fontSize: 16px
    fontFamily: Garamond
    fontWeight: 400
  footer-lg:
    textColor: "{colors.muted}"
    padding: "0px 0px 80px 0px"
    fontSize: 16px
    fontFamily: Garamond
    fontWeight: 400
  link:
    textColor: "{colors.ink}"
    fontSize: 16px
    fontFamily: Garamond
    fontWeight: 400
  link-lg:
    textColor: "{colors.accent-6}"
    fontSize: 16px
    fontFamily: Garamond
    fontWeight: 400
states:
  other-focus:
    target: other
    state: focus
    outline: none
  button-focus:
    target: button
    state: focus
    outline: none
  button-active:
    target: button
    state: active
    opacity: 1
  button-disabled:
    target: button
    state: disabled
    opacity: 0
  button-hover:
    target: button
    state: hover
    transform: "translateZ(0px)"
  other-hover:
    target: other
    state: hover
    opacity: 0.45
  other-active:
    target: other
    state: active
    textColor: "rgba(0, 0, 0, 0.55)"
    backgroundColor: "rgba(0, 0, 0, 0.05)"
  input-focus:
    target: input
    state: focus
    outlineWidth: 5px
  other-disabled:
    target: other
    state: disabled
    opacity: 0
  nav-hover:
    target: nav
    state: hover
    transform: "translate3d(5px, 0px, 0px)"
  input-active:
    target: input
    state: active
    boxShadow: none
    borderColor: currentcolor
    borderWidth: medium
  link-hover:
    target: link
    state: hover
    transform: "scale(1.06)"
  input-disabled:
    target: input
    state: disabled
    backgroundColor: "rgb(255, 255, 255)"
  link-focus:
    target: link
    state: focus
    opacity: 1
breakpoints:
  - width: 375
    containerWidth: 173
    gridColumns: 5
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 32
    bodyPx: 16
    sectionPaddingX: 0
  - width: 768
    containerWidth: 285
    gridColumns: 5
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 38
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1024
    containerWidth: 285
    gridColumns: 5
    navLinksVisible: 6
    menuToggleVisible: false
    headingPx: 40
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1280
    containerWidth: 285
    gridColumns: 5
    navLinksVisible: 6
    menuToggleVisible: false
    headingPx: 42
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1440
    containerWidth: 285
    gridColumns: 5
    navLinksVisible: 6
    menuToggleVisible: false
    headingPx: 42
    bodyPx: 16
    sectionPaddingX: 0
coverage:
  statesFound: 61
  gradientsFound: 0
  rolesUnassigned: 8
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: true
  semanticRampDeclared: false

Design System Inspired by Blossom & Rhyme

1. Visual Theme & Atmosphere

Blossom & Rhyme embodies a refined, timeless elegance rooted in luxury floral preservation and memorial craftsmanship. The design system channels sophistication through a restrained, nature-inspired palette anchored by soft, muted greens and warm neutrals—evoking pressed flowers, botanical preservation, and the quiet dignity of treasured memories. The visual language prioritizes legibility and contemplation over visual spectacle, with generous whitespace, serif typography for body copy, and elegant display faces that suggest formal floristry and heritage. The aesthetic is deliberately understated, positioning preserved flowers as the star while the interface recedes into a warm, calming backdrop. Subtle serif-to-sans-serif transitions, refined button treatments, and soft-edged badges reinforce the premium, artisanal positioning.

Key Characteristics

Refined colour palette anchored by sage green ({colors.primary} — #7E8A7C) and warm beige canvas ({colors.canvas} — #FAF8F7)
Mixed typography system: serif for body copy and storytelling, structured sans-serif for navigation and labels
Sharp corner treatments ({rounded.none} on most elements) contrast with subtle radii ({rounded.xs} — 3px) on badges
Generous whitespace and section-scale spacing ({spacing.section} — 52px, {spacing.band} — 84px) convey luxury
Minimal shadow depth—design relies on surface colour blocking rather than elevation
Interaction subtly shifts opacity and transform rather than dramatic colour changes
Uppercase, letter-spaced labels and navigation maintain formality
No visible semantic status colours (error/warning/success) in current implementation

2. Color Palette & Roles

Primary

Primary / Brand ({colors.primary} — #7E8A7C): Sage green used for primary CTAs, brand accents, and active states; anchors the visual identity
Brand Accent ({colors.accent} — #EA4335): Red—appears alongside primary in brand contexts but no dominant CTA role observed

Accent Colors (Decorative)

Accent Decorative 1 ({colors.accent-1} — #4285F4): Blue; no measured role—treat as decorative
Accent Decorative 2 ({colors.accent-2} — #FBBC05): Gold; no measured role—treat as decorative
Accent Decorative 3 ({colors.accent-3} — #34A853): Green; no measured role—treat as decorative
Accent Decorative 4 ({colors.accent-4} — #8A79FA): Purple; no measured role—treat as decorative
Accent Decorative 5 ({colors.accent-5} — #AB8C52): Bronze; no measured role—treat as decorative
Accent Decorative 6 ({colors.accent-6} — #526A4F): Dark forest green; no measured role—treat as decorative

Neutral Scale

Canvas ({colors.canvas} — #FAF8F7): Default page background; soft, warm off-white
Surface Alt ({colors.surface-alt} — #E6E3E3): Alternating section bands; light grey for section breaks
Ink ({colors.ink} — #000000): Headings and primary text; pure black for contrast
Body ({colors.body} — #161616): Body copy; near-black for readability
Muted ({colors.muted} — #212121): Captions and secondary text; darkened grey
Faint ({colors.faint} — #626261): Tertiary text, placeholders, and metadata; mid-grey
Neutral 1 ({colors.neutral-1} — #AAAAAA): Light grey; no specific role observed—treat as neutral filler
Neutral 2 ({colors.neutral-2} — #777777): Medium grey; no specific role observed—treat as neutral filler

3. Typography Rules

Font Family

Primary: Garamond (serif)
Fallback: Georgia, serif

Garamond is the dominant face for body copy, display, and narrative text—it conveys elegance and heritage.

Secondary: Lato (sans-serif)
Fallback: -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

Lato handles navigation, buttons, labels, and captions—bringing structure and clarity to interface elements.

Tertiary: Ivy / Ivy Presto Display (serif display)
Fallback: Georgia, serif

Reserved for headings; delivers formal, elegant presence at large scales.

Quaternary: Manrope (geometric sans-serif)
Fallback: -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

Used sparingly for button-strength accents where contemporary weight and structure matter.

Accent: Gilda Display (serif display)
Fallback: Georgia, serif

Applied to special captions and quotations for refined, decorative emphasis.

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display Large	Ivy Presto Display	42px	100	1.1	1px	Hero headline; maximum visual impact
Display Medium	Ivy Presto Display	40px	100	1.2	1px	Large display; page titles
Display Medium Strong	Ivy	40px	200	1.2	1px	Heavy heading variant
Display Large Strong	Ivy	42px	200	1.1	1px	Full-weight hero
Heading XXL	Ivy	36px	200	1.2	1px	Large section header
Heading XL	Ivy	32px	200	1.2	1px	Section header
Heading Large	Ivy	30px	200	1.2	1px	Subsection header
Heading Medium	Ivy	22px	200	1.3	1px	Card/block title
Heading Small	Ivy	21.6px	200	1.2	1px	Minor heading
Heading XSmall	Ivy	20px	200	1.2	1px	Metadata heading
Body XLarge	Garamond	22px	400	1.3	0px	Large body; lead paragraph
Body Large	Garamond	18px	400	1.3	0px	Standard body; narrative
Body Large Strong	Garamond	18px	700	—	0px	Emphasized body text
Body Medium	Garamond	17px	400	1.3	0px	Standard body copy
Body Small	Garamond	16px	400	1.3	0px	Default body; paragraphs
Body XSmall	Garamond	14px	400	—	0px	Fine print; tertiary content
Caption Large	Gilda Display	18px	400	1.4	0px	Quote or featured caption
Caption Medium	Gilda Display	12px	400	—	2.4px	Fine print; all-caps annotation
Caption Medium Uppercase	Lato	12px	400	1.5	1.3px	All-caps label
Caption Small	Lato	11px	400	1.1	1.3px	All-caps micro label
Caption XSmall	Garamond	12px	400	1.3	0px	Small annotation
Button Medium	Lato	14px	400	1.2	0.6px	Standard button; all-caps
Button Medium Strong	Manrope	14px	500	1.45	0px	Button accent; modern weight
Button Small	Lato	13px	400	1	1.3px	Small button; all-caps
Button XSmall	Lato	12px	400	—	1.2px	Micro button; all-caps
Label	Lato	13px	400	1.38	1.3px	Form label; all-caps
Navigation	Lato	12px	400	1.2	0.6px	Nav link; all-caps
Quote	Gilda Display	20px	400	1.24	0px	Quoted passage

Principles

Serif-driven narrative: Garamond bodies and display faces create editorial sophistication and invite unhurried reading—fitting for a brand centred on preserving memories.
Sans-serif infrastructure: Lato and Manrope handle UI chrome, buttons, and labels, separating interface clarity from content elegance.
Letter spacing as formality: Uppercase navigation, labels, and captions are consistently letter-spaced (0.6px to 1.3px), reinforcing structured, deliberate tone.
Weight restraint: Most headings use weight 200 (light); body weight 400. Heavy weights (700, 500) reserved for emphasis and button accents—never default.
Line height consistency: Most text rides at 1.2–1.3, supporting readability without excess white; captions drop to 1.0–1.1 for density.
Display tracking: Large display faces carry 1px letter spacing, a hallmark of luxury typography.

4. Component Stylings

Buttons

Primary Button

Background: {colors.primary} (#7E8A7C)
Text Color: #FFFFFF
Padding: 12px 21.6px
Height: 41.875px
Width: 311px
Border: None
Border Radius: {rounded.xs} (3px)
Font: Lato, 13px, weight 400, line-height 1.5, letter-spacing 1.3px, uppercase
Hover: transform: translateZ(0px), opacity: 1
Active: opacity: 1, transform: translateY(1px), underline text-decoration
Disabled: opacity: 0.7

Primary Button Variant 2

Background: {colors.primary} (#7E8A7C)
Text Color: #212121
Padding: 12px 21.6px
Height: 41.875px
Width: 188px
Border: None
Border Radius: {rounded.xs} (3px)
Font: Lato, 13px, weight 400, line-height 1.5, letter-spacing 1.3px, uppercase
Hover: transform: translateZ(0px), opacity: 1
Active: opacity: 1, transform: translateY(1px), underline
Disabled: opacity: 0.7

Secondary Button (Filled White)

Background: #FFFFFF
Text Color: #000000
Padding: 12px 21.6px
Height: 43.875px
Width: 188px
Border: 1px solid #FFFFFF
Border Radius: {rounded.xs} (3px)
Font: Lato, 13px, weight 400, line-height 1.5, letter-spacing 1.3px, uppercase
Hover: transform: translateZ(0px), opacity: 1
Active: opacity: 1, transform: translateY(1px), underline
Disabled: opacity: 0.7

Secondary Button Small (Filled White)

Background: #FFFFFF
Text Color: #000000
Padding: 8px 32px
Height: 37.25px
Width: 156.203px
Border: 1px solid #FFFFFF
Border Radius: {rounded.xs} (3px)
Font: Lato, 14px, weight 400, line-height 1.15, letter-spacing 0.6px, uppercase
Hover: transform: translateZ(0px), opacity: 1
Active: opacity: 1, transform: translateY(1px), underline
Disabled: opacity: 0.7

Text Button

Background: Transparent
Text Color: #212121
Padding: 0px
Border: None
Border Radius: {rounded.none} (0px)
Font: Garamond, 12px, weight 400, uppercase
Hover: opacity: 0.75
Focus: outline: none
Active: transform: translateY(1px), underline

Cards & Containers

Default Card

Background: #FFFFFF
Text Color: {colors.body} (#161616)
Padding: 0px
Width: 470px
Height: 589.594px
Border: None
Border Radius: {rounded.none} (0px)
Font: Garamond, 16px, weight 400

Small Card (Product/Content)

Background: Transparent
Text Color: {colors.body} (#161616)
Padding: 0px
Width: 325.5px
Height: 234.078px
Border: None
Border Radius: {rounded.none} (0px)
Font: Manrope, 14px, weight 500

Badges

Badge Filled

Background: #F9DDE5
Text Color: #AF7B88
Padding: 7.008px 15px
Height: 33px
Width: 98px
Border: None
Border Radius: {rounded.xs} (3px)
Font: Lato, 16px, weight 400

Badge Text (Unfilled)

Background: Transparent
Text Color: {colors.body} (#161616)
Padding: 5px
Height: 43px
Width: 108px
Border: None
Border Radius: {rounded.none} (0px)
Font: Garamond, 16px, weight 400

Badge Icon

Background: Transparent
Text Color: {colors.body} (#161616)
Padding: 0px
Height: 20px
Width: 20px
Border: None
Border Radius: {rounded.none} (0px)
Font: Garamond, 16px, weight 400
Hover: transform: scale(1.1)

Inputs & Forms

Input Field (Base)

Background: Default or white
Border: Minimal; role not fully extracted
Border Radius: {rounded.none} (0px)
Text Color: {colors.body} (#161616)
Font: Garamond, 16px, weight 400
Focus: outline-color: var(--accent), outline-width: 5px, border-width: 3px, box-shadow: 0 0 0 4px var(--accent)
Disabled: color: var(--text-a35), border-color: var(--text-a35), background-color: var(--text-a5)
Hover: color: var(--text)

Label

Font: Lato, 13px, weight 400, line-height 1.38, letter-spacing 1.3px, uppercase
Text Color: {colors.body} (#161616)

Navigation

Navigation Link (Header)

Background: Transparent
Text Color: {colors.body} (#161616)
Font: Lato, 12px, weight 400, line-height 1.2, letter-spacing 0.6px, uppercase
Padding: 0px
Border: None
Border Radius: {rounded.none} (0px)
Hover: transform: translate3d(5px, 0px, 0px), opacity: 1, color: var(--link-hover) if defined
Active: color: var(--text-a50) or link-active state
Focus: outline: none

Navigation Default (Full Nav Bar)

Background: Transparent
Text Color: {colors.body} (#161616)
Padding: 0px
Width: 890.438px
Height: 48.7969px
Border: None
Border Radius: {rounded.none} (0px)
Font: Lato, 12px, weight 400, line-height 1.2, letter-spacing 0.6px, uppercase

5. Layout Principles

Spacing System

The spacing system is built on a base unit of 4px and scales in deliberate increments:

XXSmall ({spacing.xxs} — 4px): Micro gaps; rarely visible, used for internal element padding
XSmall ({spacing.xs} — 8px): Tight clusters; form field spacing, small icon gaps
Small ({spacing.sm} — 12px): Compact grouping; label-to-input distance
Medium ({spacing.md} — 16px): Default rhythm; most text-to-button gaps, section padding within cards
Large ({spacing.lg} — 20px): Generous internal spacing; card headers to body
XLarge ({spacing.xl} — 24px): Breathing room; component-to-component
XXLarge ({spacing.xxl} — 32px): Section breaks; footer to next element
XXXLarge ({spacing.xxxl} — 44px): Visual pause; between major sections
Section ({spacing.section} — 52px): Inter-section spacing on full-width bands
Band ({spacing.band} — 84px): Large hero-to-section gaps; sets rhythm for full-page layouts

Usage Context: Content within cards uses {spacing.md} and {spacing.lg}. Hero sections to following sections use {spacing.band} (84px). Form elements cluster with {spacing.sm} between label and input.

Grid & Container

Maximum Content Width: Approximately 285px content column at desktop (1024px+); measured across all breakpoints
Grid Columns: 5-column system measured at all breakpoints; no multi-column mobile layout
Section Horizontal Padding: 0px measured across all breakpoints (full bleed or internal margin management)
Container Strategy: Full-width sections with internal flex/grid; no fixed max-width wrapper observed—content appears to flow edge-to-edge, with padding managed per section
Section Patterns: Alternating background bands (canvas {colors.canvas} and surface-alt {colors.surface-alt} — #E6E3E3) create visual rhythm without heavy spacing

Whitespace Philosophy

Whitespace is treated as a primary design material. Large gaps ({spacing.band} — 84px) between major sections create contemplation and hierarchy. Within cards and components, moderate spacing ({spacing.md} — 16px to {spacing.lg} — 20px) maintains breathing room without clutter. The overall aesthetic avoids density; generous line-height on body copy and sparse navigation reinforce the premium, unhurried tone. Vertical rhythm is privileged over horizontal—sections stack clearly; sidebars and multi-column layouts are rare.

Border Radius Scale

None ({rounded.none} — 0px): Cards, images, most containers, and link blocks; sharp corners are the default
Small ({rounded.xs} — 3px): Buttons, filled badges, and form controls; a subtle softness without pill shape

The system defaults to sharp corners, using small radius only on interactive elements (buttons, badges) where slight rounding prevents a jarring appearance.

Border Widths

Thin (1px): Button borders (secondary/filled buttons only); used sparingly, never on primary buttons

Most components have no visible border; depth is achieved through colour blocking and subtle opacity shifts rather than strokes.

6. Depth & Elevation

The Blossom & Rhyme design system employs colour blocking rather than layered shadows. Elevation is suggested through surface colour shifts—the canvas ({colors.canvas} — #FAF8F7) is the base; section-alt bands ({colors.surface-alt} — #E6E3E3) recede; white cards and overlays advance. No multi-level shadow system was measured on this site.

Level	Treatment	Use
Flat (Base)	No shadow; colour blocking only	Cards on canvas, body text, default state
Lifted	Colour contrast only (white on canvas, alt on white)	Card surfaces, section breaks
Overlay	No shadow; opacity and z-index layering	Modals, dropdowns (when present)

Shadow Philosophy: The site does not employ visible box-shadows for elevation. Depth is communicated through:

Background colour shifts (canvas → surface-alt → white)
Opacity changes (see Opacity Levels below)
Z-index layering (see Z-index / Layering below)

This flattened, colour-based approach aligns with the brand's emphasis on clarity, timelessness, and visual restraint.

Opacity Levels

Opacity is used subtly to suggest state and depth:

0% (0.00): Invisible; disabled or hidden state
45% (0.45): Hover opacity on certain interactive elements; faint feedback
82% (0.82): Slightly reduced opacity; tertiary or inactive element
92% (0.92): Near-full opacity; subtle dimming
94% (0.94): Barely perceptible reduction; minimal state change
97% (0.97): Almost full opacity; slight hover or focus feedback
98% (0.98): Maximum visibility without 100%; default state

Disabled buttons and hidden elements use opacity: 0.7 or opacity: 0 to signal unavailability.

Z-index / Layering

Z-index values are kept minimal and predictable:

Base Layer (1–6): Page content, cards, default sections
Dropdown Layer (10–11): Navigation dropdowns, popovers (when present)

All z-index values remain low and sparse; no deep stacking hierarchy is required. The layout is primarily vertical, so layering complexity is minimal.

7. Do's and Don'ts

Do

Use the primary sage green ({colors.primary} — #7E8A7C) for all primary calls-to-action (Add to Cart, Start Preserving, CTAs in hero). It is the brand accent and carries weight.
Leverage serif typography (Garamond) for body copy, product descriptions, and narrative passages; it conveys the artisanal, premium identity.
Employ generous spacing ({spacing.section} — 52px, {spacing.band} — 84px) between sections and hero elements; whitespace is a luxury marker.
Keep buttons sharp or lightly rounded ({rounded.xs} — 3px); no pills or excessive softness.
Use uppercase, letter-spaced labels (Lato, 12px, letter-spacing 0.6–1.3px) for navigation and form fields; it maintains formality.
Apply opacity shifts and subtle transforms (e.g., translate3d(5px, 0px, 0px) on hover) for interaction feedback rather than bold colour changes.
Default to the neutral scale ({colors.canvas}, {colors.surface-alt}, {colors.body}) for most UI; reserve brand colours for emphasis.
Pair sans-serif buttons (Lato, Manrope) with serif body copy to create clear hierarchy between interface and content.
Validate inputs with focus states that include outline-color: var(--accent) and box-shadow: 0 0 0 4px var(--accent) for accessibility.

Don't

Avoid pill-shaped buttons (border-radius: 9999px); this brand uses sharp corners by default.
Never use heavy weights for body copy; Garamond and display faces default to weight 200–400. Weight 700 is reserved for occasional emphasis.
Don't invent semantic colours (error red, success green, warning amber) unless explicitly measured; the site does not expose a status ramp.
Avoid dropping opacity to 0 on interactive elements unless they are truly disabled; use opacity: 0.7 to suggest disabled state.
Don't use harsh shadows or deep elevation; rely on colour blocking and opacity instead.
Avoid mixing serif and sans-serif within the same sentence or paragraph; keep them compartmentalized (serif for narrative, sans-serif for UI).
Don't centre-align body text; left-align for readability. Centre only headlines and hero copy.
Avoid tight line-heights on body copy; default to 1.3 to maintain the spacious, contemplative mood.
Don't override hover states with solid colour fills; use opacity shifts, transforms (translate3d, scale), or subtle colour adjustments.
Avoid cluttering cards with borders or excessive shadows; white background and minimal padding convey containment clearly.

8. Responsive Behavior

Breakpoints

Breakpoint	Viewport Width	Content Column	Heading Size	Body Size	Nav Links Visible	Menu Toggle	Key Changes
Mobile	375px	173px	32px	16px	0	Yes	Hamburger menu; full-width sections; single-column layout
Tablet	768px	285px	38px	16px	0	Yes	Hamburger persists; wider content; increased padding
Desktop	1024px	285px	40px	16px	6	No	Horizontal nav appears; content column stabilizes
Desktop (Large)	1280px	285px	42px	16px	6	No	Heading size increases slightly; no further layout change
Desktop (XL)	1440px	285px	42px	16px	6	No	Maximum heading size; stable layout

Key Observations:

Navigation collapse occurs between tablet (768px) and desktop (1024px); at 1024px+, 6 nav links appear and hamburger menu is removed.
Content column stabilizes at 285px from tablet onward; mobile is narrower at 173px.
Heading sizes scale from 32px (mobile) to 42px (desktop XL), following the Ivy display hierarchy.
Body size remains constant at 16px across all breakpoints.
Section padding is 0px measured across all breakpoints; full-bleed sections with internal spacing management.

Touch Targets

Minimum button height: 37.25px (small buttons); standard buttons are 41.875px or taller
Minimum button width: 156.203px (secondary button, small variant); primary buttons are typically 188px–311px
Navigation link spacing: Measured at 48.7969px tall for full nav bar; individual links inherit touch-safe sizing from Lato label styling
Form inputs: Not fully extracted, but focus states indicate accessible targeting; outline and box-shadow provide ample visual feedback
Icon buttons: 20px × 20px observed for badge icons; recommend minimum 44px × 44px for mobile touch safety (not confirmed in extraction)

Collapsing Strategy

Mobile (375px)
- Navigation collapses to hamburger menu; primary nav hidden
- Full-width, single-column layout
- Headings scale to 32px
- Section spacing maintained via {spacing.band} (84px) and {spacing.section} (52px)
- Cards stack vertically; product grids collapse to 1 column
Tablet (768px)
- Hamburger menu persists
- Content column widens to 285px
- Headings scale to 38px
- Layout remains single-column or begins 2-column grids (not fully observed)
- Touch targets remain generous
Desktop (1024px and above)
- Hamburger menu hidden; horizontal navigation appears (6 links visible)
- Content column stays at 285px; page uses flex or grid for multi-column layouts
- Headings scale to 40px (1024px) and up to 42px (1280px+)
- Multi-column product grids and side-by-side layouts become possible
- No further layout changes observed beyond 1024px

9. Agent Prompt Guide

Quick Color Reference

Use these mappings when building UI components:

Primary CTA (buttons, active states): Primary ({colors.primary} — #7E8A7C)
Page Background: Canvas ({colors.canvas} — #FAF8F7)
Alternating Section Bands: Surface Alt ({colors.surface-alt} — #E6E3E3)
Heading Text: Ink ({colors.ink} — #000000)
Body Text: Body ({colors.body} — #161616)
Secondary / Muted Text: Muted ({colors.muted} — #212121)
Tertiary / Placeholder Text: Faint ({colors.faint} — #626261)
Card Background: White (#FFFFFF)
Button Border (secondary buttons only): White (#FFFFFF)

Iteration Guide

Start with the neutral foundation: Build all sections on {colors.canvas} (#FAF8F7). Alternate bands with {colors.surface-alt} (#E6E3E3) for rhythm.
Apply typography by role, not by tag: Use Garamond for body copy and narrative (regardless of <p>, <span>, <div>). Use Lato for buttons, labels, and navigation. Use Ivy or Ivy Presto for headings. Never mix serif and sans within a logical content block.
Default all button text to uppercase and letter-spaced: Apply text-transform: uppercase and letter-spacing: 0.6px (navigation), 1.3px (labels/captions), or 1.2px (button text) via Lato.
Colour primary buttons with {colors.primary} and white text. Secondary buttons are white background with black text and a 1px white border. Both use {rounded.xs} (3px) border-radius.
Manage elevation via colour, not shadows: Use opacity shifts, transform: translateZ(0px) or translate3d() on hover, and background colour changes. Do not add box-shadow unless explicitly required for accessibility (focus states on inputs).
Space sections generously: Use {spacing.band} (84px) between major hero/section pairs. Use {spacing.section} (52px) for medium separations. Reserve {spacing.lg} (20px) and {spacing.md} (16px) for component-internal spacing.
Keep corners sharp by default: Apply border-radius: 0px to cards, containers, and images. Use {rounded.xs} (3px) only on interactive elements (buttons, badges).
Focus states must include visual feedback: For buttons, use outline: var(--accent) or opacity shift. For inputs, use outline-color: var(--accent), outline-width: 5px, border-width: 3px, and box-shadow: 0 0 0 4px var(--accent).
Test responsiveness at 375px, 768px, and 1024px breakpoints: Navigation collapses at the 768px→1024px transition. Headings scale from 32px → 42px across the range. Content column is 173px (mobile), 285px (tablet+).
Never invent states or colours not in this document: If a colour, state, or spacing value is not listed, check "Known Gaps" and ask before implementing.

10. Known Gaps

No semantic status colours: The site does not declare error, success, warning, or info state colours in its extracted stylesheets. Any form validation UI requires custom specification or use of the primary brand colour.
Interaction states partially incomplete: Extracted hover/focus/active states cover buttons, links, inputs, and general elements, but some edge cases (e.g., disabled link styles, focus-visible distinction) were not measured and should be validated against WCAG 2.1 guidelines.
No gradient or decorative mesh observed: The design uses solid colours and opacity only; no CSS gradients, backdrop-filters, or mesh patterns were found.
8 decorative colours with no measured role: {colors.accent-1} through {colors.accent-6} plus {colors.neutral-1} and {colors.neutral-2} appear in the token set but have no clear CTA, status, or semantic function. They may be used in image overlays, product photography, or sections not fully captured in the 6-page extraction.
Shadow system unexpressed: No box-shadow values were measured on live components; elevation is entirely colour-based. If shadows are needed for accessibility or browser compatibility, they were not prescribed by the brand and must be added cautiously.
Cross-origin stylesheets unreadable: Some stylesheets may have been blocked by CORS policy; micro-interactions, animations, or dynamic states on certain pages may not be fully represented.
Authentication-gated surfaces not visited: The extraction covered the public storefront only. Logged-in account pages, order history, and checkout flows may have additional typography, spacing, or colour roles not captured here.
Line-height not measured on all roles: Several button and caption variants show line-height: — (not measured) in the token data. Implement based on measured siblings (e.g., buttons with measured line-height 1.5) and test for tight/loose appearance.
Container max-width behaviour: Measured content columns are ~285px at desktop, but the overall page container behaviour (flexbox, grid, margin: auto) was not fully decomposed. Assume flex or grid layout with section-level full-bleed and internal padding management.
Precise dropdown and modal styling: Navigation dropdowns and modal overlays, if present, were not directly measured. Apply z-index values 10–11 and opacity shifts (0.98 for visible, 0 for hidden) based on pattern.
Custom font loading and fallbacks: Google Fonts URLs are declared in the extraction; ensure fonts load gracefully with serif (Georgia) and sans-serif (-apple-system, Segoe UI) fallbacks on all font-family stacks.

This Design System document was generated from systematic extraction across 6 pages of https://blossomandrhyme.com/. All colour, typography, spacing, and component values are measured directly from the live site. Use this document as the source of truth for implementing new features and maintaining visual consistency.

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

Design tokens

Extracted from blossomandrhyme.com

Primary

#7E8A7C

Primary CTA, brand accent, active state

#EA4335

Brand hue used alongside the achromatic primary

#4285F4

Accent / decorative

#FBBC05

Accent / decorative

#34A853

Accent / decorative

#8A79FA

Accent / decorative

#AB8C52

Accent / decorative

#526A4F

Accent / decorative

Neutral

#FAF8F7

Default page background

#E6E3E3

Alternating section band

#000000

Headings / primary text

#161616

Body copy

#212121

Captions, secondary text

#626261

Tertiary / placeholder text

#AAAAAA

Neutral

#777777

Neutral

Typography · GaramondGoogle Fonts

caption12px · 400 · 15.6px

body16px · 400 · 20.8px

body18px · 400 · 23.4px

caption18px · 400 · 25.2px

body18px · 700

button12px · 400

body17px · 400 · 22.1px

body14px · 400

link16px · 400

link18px · 400

input16px · 400

body22px · 400 · 28.6px

body16.8px · 400 · 21.84px

body20px · 100 · 26px

body20px · 400 · 26px

body17.4px · 400 · 22.62px

body16px · 700

Typography · LatoGoogle Fonts

nav-link12px · 400 · 14.4px

body13px · 400

button14px · 400 · 16.8px

button13px · 400 · 13px

caption11px · 400 · 12.1px

body16px · 400

label13px · 400 · 17.875px

body16px · 400 · 20.8px

caption12px · 400 · 18px

body13px · 400 · 16.9px

body16px · 400 · 22px

Typography · IvyGoogle Fonts

heading30px · 200 · 36px

heading20px · 200 · 24px

h322px · 200 · 28.6px

display40px · 200 · 48px

heading36px · 200 · 43.2px

h140px · 200 · 48px

h232px · 200 · 38.4px

h321.6px · 200 · 25.92px

body16px · 200 · 19.2px

h240px · 200 · 48px

h242px · 200 · 46.2px

heading21.6px · 200 · 25.92px

heading32px · 200 · 38.4px

body20px · 200

body24px · 200 · 31.2px

heading28.8px · 200 · 34.56px

heading38px · 200 · 45.6px

h130px · 200 · 36px

Typography · ManropeGoogle Fonts

button14px · 500 · 20.3px

body14px · 400 · 19.6px

body14px · 600 · 20.3px

body14px · 700 · 22px

Typography · ivypresto-displayGoogle Fonts

display40px · 100 · 48px

heading38px · 100 · 45.6px

display42px · 100 · 46.2px

heading30px · 100 · 36px

Typography · Gilda DisplayGoogle Fonts

quote20px · 400 · 24.8px

caption12px · 400

Spacing

16px

4px

52px

20px

12px

24px

32px

44px

Components · 6

Remixes of blossomandrhyme.com

Latest remixes

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

Remix it