ภัควัฒน์ คําก้อน

Generated Oct 27, 2026

DESIGN.md for www.lovecoupons.com

www.lovecoupons.com12 colors5 componentsFraunces + DM Sans

Remix

2 screenshots captured· www.lovecoupons.com

1 / 2 · Love Coupons | US Coupon Codes and Promo Codes · Above the fold

Preview

the generated design system

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

Design tokens

version: alpha
name: Lovecoupons
description: |
  Love Coupons presents a warm, approachable design system centered on
  deal-hunting and savings discovery. The visual personality balances
  trust-building simplicity with energetic brand presence through a carefully
  controlled palette dominated by a vibrant coral primary accent. The system
  employs layered micro-elevation—subtle shadow depths and color-blocking—to
  create visual hierarchy without visual weight, reinforcing clarity and
  accessibility for deal browsing. Typography choices blend serif headlines
  (Fraunces) with clean sans-serif body text (DM Sans), creating a friendly yet
  credible tone. The overall atmosphere is action-oriented, with prominent CTAs
  and clear visual paths to coupon codes, while maintaining a calm, cream-toned
  canvas that reduces cognitive load for users scanning multiple offers.
source:
  url: "https://www.lovecoupons.com/"
  pagesAnalyzed: 1
  extractedAt: 2026-10-27
  tokensMeasured: true
colors:
  primary: "#FF6B3D"
  accent: "#486581"
  canvas: "#FDFBF7"
  on-primary: "#222222"
  hairline: "#D9E2EC"
  accent-1: "#334E68"
  accent-2: "#102A43"
  accent-3: "#829AB1"
  accent-4: "#627D98"
  accent-5: "#0A1929"
  neutral-1: "#000000"
  neutral-2: "#CCCCCC"
typography:
  display:
    fontFamily: Fraunces
    fontSize: 46px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -1.15px
  heading-xl:
    fontFamily: Fraunces
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: -0.55px
  heading-lg:
    fontFamily: Fraunces
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.38
    letterSpacing: 0px
  heading-lg-dm-sans:
    fontFamily: "DM Sans"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0px
  heading-md:
    fontFamily: Fraunces
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.56
    letterSpacing: 0px
  heading-sm:
    fontFamily: Fraunces
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.43
    letterSpacing: 0px
  heading-xs:
    fontFamily: "DM Sans"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0px
  body-md:
    fontFamily: "DM Sans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-sm:
    fontFamily: "DM Sans"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  body-sm-loose:
    fontFamily: "DM Sans"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-sm-strong:
    fontFamily: "DM Sans"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.43
    letterSpacing: 0px
  body-xs:
    fontFamily: "DM Sans"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-sm:
    fontFamily: "DM Sans"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  button-sm-strong:
    fontFamily: "DM Sans"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.43
    letterSpacing: 0px
  label:
    fontFamily: "DM Sans"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  caption-xs:
    fontFamily: "DM Sans"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.63
    letterSpacing: 0px
  caption-xs-tight:
    fontFamily: "DM Sans"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  caption-xs-2:
    fontFamily: "DM Sans"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.38
    letterSpacing: 0px
  caption-xs-strong:
    fontFamily: "DM Sans"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0px
  caption-xs-3:
    fontFamily: "DM Sans"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: 0px
  caption-xs-uppercase:
    fontFamily: "DM Sans"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: 0.6px
    textTransform: uppercase
  code:
    fontFamily: ui-monospace
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0.7px
rounded:
  none: 0px
  xs: 4px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 16px
  xxl: 20px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 32px
  xxxl: 40px
  section: 44px
  band: 48px
borderWidths:
  thin: 1px
  medium: 2px
shadows:
  sm: "rgba(0, 0, 0, 0.18) 0px 10px 12.3px 0px"
  md: "oklab(0 0 0 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px"
  lg: "oklab(0.278476 -0.0194971 -0.0528874 / 0.1) 0px 20px 25px -5px, oklab(0.278476 -0.0194971 -0.0528874 / 0.1) 0px 8px 10px -6px"
  xl: "rgba(16, 42, 67, 0.15) 0px 20px 40px -12px"
elevationStrategy: layered-micro
themes:
  derived: dark   # the other theme is the site's measured palette
  light:
    bg: "#FDFBF7"
    surface: "#F5F3F0"
    surfaceRaised: "#ECEAE7"
    text: "#111111"
    textMuted: "#646362"
    border: "#D9E2EC"
    accent: "#FF4C14"
    accentFg: "#000000"
    focusRing: "#FF6B3D"
    elevation: shadow
  dark:
    bg: "#130D0B"
    surface: "#211C1A"
    surfaceRaised: "#2D2826"
    text: "#FFF9F7"
    textMuted: "#A59F9D"
    border: "#393432"
    accent: "#FF6B3D"
    accentFg: "#0B0B0C"
    focusRing: "#FF6B3D"
    elevation: "border+surface"
gradients:
  - context: hero
    kind: mixed
    value: "radial-gradient(80% 50% at 50% -20%, rgba(255, 107, 61, 0.15) 0%, rgba(0, 0, 0, 0) 50%), radial-gradient(60% 40% at 80% 80%, rgba(255, 143, 109, 0.1) 0%, rgba(0, 0, 0, 0) 40%), linear-gradient(rgb(253, 251, 247) 0%, rgb(255, 245, 242) 100%)"
  - context: section
    kind: linear
    value: "linear-gradient(to right in oklab, rgb(255, 107, 61) 0%, rgb(237, 74, 28) 100%)"
components:
  button-primary:
    typography: "{typography.button-sm-strong}"
    textColor: "rgb(255, 255, 255)"
    height: 40px
    padding: "10px 16px 10px 16px"
    rounded: "{rounded.md}"
    backgroundColor: "{colors.primary}"
  button-outline:
    typography: "{typography.caption-xs-3}"
    textColor: "rgb(255, 255, 255)"
    border: "1px solid oklab(0.999994 0.0000455678 0.0000200868 / 0.4)"
    height: 34px
    padding: "8px 20px 8px 20px"
    rounded: "{rounded.lg}"
    backgroundColor: "oklab(0.999994 0.0000455678 0.0000200868 / 0.2)"
  button-filled:
    typography: "{typography.body-sm}"
    textColor: "rgb(255, 255, 255)"
    border: "2px solid rgb(16, 185, 129)"
    height: 44px
    padding: "10px 16px 10px 16px"
    rounded: "{rounded.md}"
    backgroundColor: "rgb(16, 185, 129)"
  button-filled-sm:
    typography: "{typography.body-xs}"
    textColor: "{colors.accent-1}"
    border: "1px solid {colors.hairline}"
    height: 38px
    padding: "0px 14px 0px 6px"
    rounded: "3.35544e+07px"
    backgroundColor: "rgb(255, 255, 255)"
  button-icon:
    typography: "{typography.body-md}"
    textColor: "rgb(255, 255, 255)"
    height: 44px
    boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.705231 0.151359 0.116 / 0.25) 0px 10px 15px -3px, oklab(0.705231 0.151359 0.116 / 0.25) 0px 4px 6px -4px"
    rounded: "3.35544e+07px"
    backgroundColor: "{colors.primary}"
  card:
    typography: "{typography.body-md}"
    textColor: "{colors.neutral-1}"
    border: "1px solid {colors.hairline}"
    rounded: "{rounded.xl}"
    backgroundColor: "rgb(255, 255, 255)"
  card-sm:
    typography: "{typography.body-md}"
    textColor: "{colors.neutral-1}"
    border: "1px solid {colors.hairline}"
    padding: "8px 8px 8px 8px"
    rounded: "{rounded.lg}"
    backgroundColor: "rgb(255, 255, 255)"
  navigation:
    typography: "{typography.body-md}"
    textColor: "{colors.neutral-1}"
    height: 36px
  footer:
    typography: "{typography.body-md}"
    textColor: "{colors.neutral-1}"
    backgroundColor: "{colors.accent-5}"
  link:
    typography: "{typography.body-md}"
    textColor: "{colors.neutral-1}"
  link-2:
    typography: "{typography.caption-xs-tight}"
    textColor: "{colors.accent}"
    border: "1px solid {colors.hairline}"
    padding: "0px 11px 0px 11px"
    rounded: "3.35544e+07px"
states:
  input-focus:
    target: input
    state: focus
    outline: "rgba(0, 0, 0, 0) solid 2px"
    borderColor: "oklch(0.546 0.245 262.881)"
    outlineColor: "rgba(0, 0, 0, 0)"
    outlineWidth: 2px
  input-hover:
    target: input
    state: hover
    borderColor: "rgba(0, 0, 0, 0)"
    backgroundColor: currentcolor
  other-hover:
    target: other
    state: hover
    opacity: 0.75
breakpoints:
  - width: 375
    containerWidth: 343
    gridColumns: 8
    navLinksVisible: 46
    menuToggleVisible: true
    headingPx: 30
    bodyPx: 16
    sectionPaddingX: 0
  - width: 768
    containerWidth: 768
    gridColumns: 8
    navLinksVisible: 46
    menuToggleVisible: true
    headingPx: 36
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1024
    containerWidth: 1024
    gridColumns: 8
    navLinksVisible: 46
    menuToggleVisible: true
    headingPx: 42
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1280
    containerWidth: 1280
    gridColumns: 8
    navLinksVisible: 12
    menuToggleVisible: true
    headingPx: 46
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1440
    containerWidth: 1280
    gridColumns: 8
    navLinksVisible: 12
    menuToggleVisible: true
    headingPx: 46
    bodyPx: 16
    sectionPaddingX: 0
coverage:
  statesFound: 62
  gradientsFound: 2
  rolesUnassigned: 7
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: true
  semanticRampDeclared: false

Design System Inspired by Love Coupons

1. Visual Theme & Atmosphere

Love Coupons presents a warm, approachable design system centered on deal-hunting and savings discovery. The visual personality balances trust-building simplicity with energetic brand presence through a carefully controlled palette dominated by a vibrant coral primary accent. The system employs layered micro-elevation—subtle shadow depths and color-blocking—to create visual hierarchy without visual weight, reinforcing clarity and accessibility for deal browsing. Typography choices blend serif headlines (Fraunces) with clean sans-serif body text (DM Sans), creating a friendly yet credible tone. The overall atmosphere is action-oriented, with prominent CTAs and clear visual paths to coupon codes, while maintaining a calm, cream-toned canvas that reduces cognitive load for users scanning multiple offers.

Key Characteristics

Warm, coral-driven brand accent ({colors.primary} — #FF6B3D) deployed consistently across primary actions
Layered micro-elevation strategy: depth from color shifts and barely-there shadows, not dramatic drops
Serif display headlines (Fraunces, 700 weight) paired with sans-serif body (DM Sans, 400–600)
Cream canvas ({colors.canvas} — #FDFBF7) reduces visual strain during deal research
Hairline borders ({colors.hairline} — #D9E2EC) define cards and containers without heaviness
Generous spacing system (4px–48px) enabling breathing room and scannable layouts
Sharp button corners ({rounded.none}) contrast with pill-shaped inputs ({rounded.full}), signaling different interaction intent

2. Color Palette & Roles

Primary

Primary / Brand ({colors.primary} — #FF6B3D): Primary CTA buttons, active states, brand mark, hero accents, focus indicators. High-contrast orange-red conveys urgency and savings energy.

Accent Colors

Accent / Hero Band ({colors.accent} — #486581): Secondary accent for promotional banners, hero sections, and thematic blocks.
Accent / Decorative ({colors.accent-1} — #334E68): Decorative use only; no measured interaction role.
Accent / Decorative ({colors.accent-2} — #102A43): Decorative use only; no measured interaction role.
Accent / Decorative ({colors.accent-3} — #829AB1): Decorative use only; no measured interaction role.
Accent / Decorative ({colors.accent-4} — #627D98): Decorative use only; no measured interaction role.
Accent / Decorative ({colors.accent-5} — #0A1929): Decorative use only; no measured interaction role.

Neutral Scale

Canvas ({colors.canvas} — #FDFBF7): Default page background; off-white cream tone reducing visual fatigue.
On Primary ({colors.on-primary} — #222222): Label color on brand surfaces; near-black for dark text on coral.
Hairline ({colors.hairline} — #D9E2EC): 1px borders, card dividers, subtle definition.
Neutral ({colors.neutral-1} — #000000): Deep black for primary text and critical UI elements.
Neutral ({colors.neutral-2} — #CCCCCC): Medium gray for secondary UI and disabled states.

Semantic / Status

No error, success, or warning colors are declared by the site. See Known Gaps.

3. Typography Rules

Font Family

Primary (Display & Headings): Fraunces (serif, 700 weight) Fallback: Georgia, serif

Secondary (Body & UI): DM Sans (sans-serif, 400–700 weight) Fallback: 'Segoe UI', Tahoma, sans-serif

Monospace (Code): ui-monospace Fallback: 'Courier New', monospace

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display	Fraunces	46px	700	1.1	-1.15px	Hero headlines; tight tracking for drama
Heading XL	Fraunces	22px	700	1.4	-0.55px	Section titles; subordinate to display
Heading LG (DM Sans)	DM Sans	20px	700	1.4	0px	Subsection titles
Heading LG (Fraunces)	Fraunces	20px	700	1.38	0px	Alternate subsection styling
Heading MD	Fraunces	18px	700	1.56	0px	Card titles; label headers
Heading SM	Fraunces	14px	700	1.43	0px	Small heading variant
Heading XS	DM Sans	13px	600	1.5	0px	Mini labels and badges
Body MD	DM Sans	16px	400	1.5	0px	Standard body text; links
Body SM	DM Sans	14px	400	1.43	0px	Secondary body; fine print
Body SM (Loose)	DM Sans	14px	400	1.5	0px	Body with relaxed line height
Body SM (Strong)	DM Sans	14px	700	1.43	0px	Emphasized body text
Body XS	DM Sans	13px	500	1.5	0px	Small body variant
Label	DM Sans	15px	400	1.6	0px	Form labels; input hints
Button SM	DM Sans	14px	500	1.43	0px	Standard button text
Button SM (Strong)	DM Sans	14px	600	1.43	0px	Emphasized button text
Caption XS	DM Sans	12px	400	1.63	0px	Fine caption; metadata
Caption XS (Tight)	DM Sans	12px	400	1.33	0px	Compact caption
Caption XS (Strong)	DM Sans	12px	500	1.33	0px	Emphasized caption
Caption XS (3)	DM Sans	12px	600	1.33	0px	Strong caption variant
Caption XS (2)	DM Sans	12px	400	1.38	0px	Alternative caption
Caption XS (Uppercase)	DM Sans	12px	700	1.33	0.6px	All-caps labels (e.g., "COUPON")
Code	ui-monospace	14px	400	1.43	0.7px	Monospace for promo codes; loose letter spacing

Principles

Negative tracking on display: The 46px hero heading uses -1.15px letter-spacing, creating visual tightness and energy befitting promotional messaging.
Clear hierarchy through weight, not size alone: Body uses 400 weight; captions and labels employ 500–700 to signal importance within smaller sizes.
Serif for headlines, sans for body: Fraunces (serif) establishes editorial credibility; DM Sans (sans) ensures scannability in body and UI.
Generous line height on body: 1.5 line height in body text supports readability during extended coupon scanning.
All-caps micro labels: Uppercase caption variant (0.6px tracking) emphasizes category labels and metadata hierarchy.

4. Component Stylings

Buttons

Primary Button

Background: {colors.primary} (#FF6B3D)
Text Color: rgb(255, 255, 255) (white)
Font: {typography.button-sm-strong} (DM Sans, 14px, 600 weight, 1.43 line height)
Padding: 10px 16px
Border: 0px solid
Border Radius: {rounded.md} (8px)
Box Shadow: none
Width: 420px (measured full-width variant)
Height: 40px

Outline Button

Background: oklab(0.999994 0.0000455678 0.0000200868 / 0.2) (near-transparent white)
Text Color: rgb(255, 255, 255) (white)
Font: {typography.caption-xs-3} (DM Sans, 12px, 600 weight)
Padding: 8px 20px
Border: 1px solid oklab(0.999994 0.0000455678 0.0000200868 / 0.4) (translucent white border)
Border Radius: {rounded.lg} (12px)
Box Shadow: none
Width: 200px
Height: 34px

Filled Button (Green CTA)

Background: rgb(16, 185, 129) (emerald green)
Text Color: rgb(255, 255, 255) (white)
Font: {typography.body-md} (DM Sans, 16px, 400 weight)
Padding: 10px 16px
Border: 2px solid rgb(16, 185, 129) (emerald border matching background)
Border Radius: {rounded.md} (8px)
Box Shadow: none
Width: 208px
Height: 44px

Filled Small Button (White with Navy Text)

Background: rgb(255, 255, 255) (white)
Text Color: rgb(51, 78, 104) (navy blue)
Font: {typography.body-xs} (DM Sans, 13px, 500 weight)
Padding: 0px 14px 0px 6px
Border: 1px solid {colors.hairline} (#D9E2EC)
Border Radius: {rounded.full} (9999px / pill shape)
Box Shadow: none
Width: 168px
Height: 38px

Icon Button (Coral)

Background: {colors.primary} (#FF6B3D)
Text Color: rgb(255, 255, 255) (white)
Font Size: 16px, 400 weight, DM Sans
Padding: 0px
Border: 0px solid
Border Radius: {rounded.full} (9999px / circular)
Box Shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.705231 0.151359 0.116 / 0.25) 0px 10px 15px -3px, oklab(0.705231 0.151359 0.116 / 0.25) 0px 4px 6px -4px
Width: 44px
Height: 44px

Cards & Containers

Default Card

Background: rgb(255, 255, 255) (white)
Text Color: rgb(0, 0, 0) (black)
Font: {typography.body-md} (DM Sans, 16px, 400 weight)
Padding: 0px (content padding handled within card)
Border: 1px solid {colors.hairline} (#D9E2EC)
Border Radius: {rounded.xl} (16px)
Box Shadow: none (flat card)
Width: 832px
Height: 206.5px
Hover State: border shifts to coral tint, subtle text color lift

Default Small Card

Background: rgb(255, 255, 255) (white)
Text Color: rgb(0, 0, 0) (black)
Font: {typography.body-md} (DM Sans, 16px, 400 weight)
Padding: 8px
Border: 1px solid {colors.hairline} (#D9E2EC)
Border Radius: {rounded.lg} (12px)
Box Shadow: none
Width: 105.453px (measured thumbnail size)
Height: 127.953px

Inputs & Forms

Text Input (Focus State)

Background: rgb(255, 255, 255) (white)
Text Color: rgb(0, 0, 0) (black)
Font: {typography.label} (DM Sans, 15px, 400 weight)
Padding: varies by context
Border: 1px solid — default {colors.hairline} (#D9E2EC), focus state shifts to blue
Border Radius: {rounded.full} (9999px / pill shape)
Box Shadow (Focus): var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) (custom focus ring)
Outline Color (Focus): rgba(0, 0, 0, 0) (transparent outline, shadow handles focus)
Outline Width: 2px

Input Hover State

Border Color: rgba(0, 0, 0, 0) (transparent, allowing background shine)
Background Color: currentcolor (inherits text color; minimal visual shift)

Navigation

Default Navigation (Horizontal Menu)

Background: rgba(0, 0, 0, 0) (transparent)
Text Color: rgb(0, 0, 0) (black)
Font: {typography.body-md} (DM Sans, 16px, 400 weight)
Padding: 0px
Border: 0px solid
Border Radius: {rounded.none} (0px / sharp corners)
Box Shadow: none
Height: 36px
Display: flex or similar for horizontal layout

Footer

Default Footer

Background: rgb(10, 25, 41) (deep navy)
Text Color: rgb(0, 0, 0) (black, likely overridden for light text in implementation)
Font: {typography.body-md} (DM Sans, 16px, 400 weight)
Padding: 0px
Border: 0px solid
Border Radius: {rounded.none} (0px)
Box Shadow: none
Width: 1440px
Height: 398px

5. Layout Principles

Spacing System

The spacing system is built on a base unit of 4px, scaled linearly and deployed contextually across layout, component interiors, and semantic gaps:

{spacing.xxs} — 4px: Micro-gaps (icon-text spacing, tight component padding)
{spacing.xs} — 8px: Extra-small gaps (input-label spacing, compact button padding)
{spacing.sm} — 12px: Small gaps (component padding, minor section breaks)
{spacing.md} — 16px: Medium gaps (standard component padding, intra-section spacing)
{spacing.lg} — 20px: Large gaps (prominent section breaks, card padding)
{spacing.xl} — 24px: Extra-large gaps (major content divisions)
{spacing.xxl} — 32px: Double extra-large gaps (between major sections)
{spacing.xxxl} — 40px: Triple extra-large gaps (dramatic separation)
{spacing.section} — 44px: Section rhythm; primary grid gutters
{spacing.band} — 48px: Hero and promotional bands; largest container gaps

Grid & Container

Max Width (Large): 1280px (constant from 1024px and above)
Max Width (Small): 343px–768px (responsive per viewport)
Grid Columns: 8 columns across all breakpoints (measured and consistent)
Gutter / Column Gap: Derived from section padding; typically 16px on desktop, 0px at edges
Section Padding (Horizontal): 0px — content fills viewport edge to edge with internal margins managing whitespace

Whitespace Philosophy

Love Coupons employs breathing-room spacing: gaps are never tight, and generous whitespace surrounds content modules to reduce cognitive load during deal browsing. Card-to-card separation uses {spacing.lg} (20px) and above; intra-component gaps default to {spacing.md} (16px). Large promotional sections ({spacing.band} — 48px) create visual rest points, signaling thematic shifts (e.g., hero to coupon list). Vertical rhythm is maintained through multiples of 4px, ensuring alignment to the underlying grid.

Border Radius Scale

{rounded.none} — 0px: Sharp corners on buttons, navigation, and primary UI (high-confidence actionable elements)
{rounded.xs} — 4px: Minimal rounding on overlays and micro-components
{rounded.sm} — 6px: Overlay shapes; subtle softness
{rounded.md} — 8px: Standard component rounding (buttons, small cards, 8px-specific elements)
{rounded.lg} — 12px: Card images and medium containers
{rounded.xl} — 16px: Primary card containers (default card role)
{rounded.xxl} — 20px: Larger cards and hero sections
{rounded.full} — 9999px: Pill-shaped buttons, inputs, and badge links; circular icon buttons

Pattern: Interactive form inputs (text fields) use {rounded.full} to signal "friendly, forgiving entry." Buttons default to sharp ({rounded.none}) or moderately rounded ({rounded.md}) to denote confident action. Cards and images scale rounding from {rounded.lg} to {rounded.xl} for visual warmth without loss of structure.

Border Widths

Thin — 1px: Default card borders ({colors.hairline}), input outlines, and link underlines
Medium — 2px: Filled button borders (emphasis); focus rings

6. Depth & Elevation

Level	Treatment	Use
Flat	No shadow, flat color	Default cards, navigation, footer
Micro-Lift (Dropdown)	`rgba(0, 0, 0, 0.18) 0px 10px 12.3px 0px`	Dropdown menus, tooltips
Card / Custom (MD)	`oklab(0 0 0 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`	Interactive overlays, form validation states
Elevated (LG)	`oklab(0.278476 -0.0194971 -0.0528874 / 0.1) 0px 20px 25px -5px, oklab(0.278476 -0.0194971 -0.0528874 / 0.1) 0px 8px 10px -6px`	Prominent modals, emphasized sections
Highest (XL)	`rgba(16, 42, 67, 0.15) 0px 20px 40px -12px`	Full-page overlays, floating action zones

Elevation Philosophy: Love Coupons employs a layered micro-elevation strategy. Rather than dramatic shadow jumps, the system stacks barely-transparent layers—often built with oklab color space for perceptually even falloff. Most UI floats on a flat canvas ({colors.canvas}); shadows appear only when interaction or emphasis demands depth (dropdowns, modals). This keeps the interface calm while ensuring clickable elements breathe visually away from the background.

Opacity Levels

0.03 (3%): Ultra-subtle overlays or disabled states
0.06 (6%): Slightly stronger overlay; faint interaction indication
0.54 (54%): Moderate transparency for secondary content
0.60 (60%): Semi-transparent backgrounds for modals or dimmed sections
0.70 (70%): High-opacity hover or focus states; primary interaction feedback

Z-index / Layering

Base: z-index: 1, 5 — Default component stacking (cards, text)
Dropdown: z-index: 10, 40, 50, 60 — Menus and popover content; layered for complex nested interactions
Sticky: z-index: 100 — Sticky headers, persistent navigation
Modal/Overlay: z-index: 99 (or higher per context) — Full-page modals and dimming layers

7. Do's and Don'ts

Do

Use {colors.primary} (#FF6B3D) for primary CTAs. This brand orange signals savings urgency and ensures every "Get Code" button stands out.
Apply {rounded.full} to all text inputs. Pill-shaped inputs signal "friendly data entry" and differentiate them from buttons.
Maintain hairline borders on cards and containers. Use {colors.hairline} (#D9E2EC) consistently; it defines structure without visual weight.
Pair serif (Fraunces) headlines with sans-serif (DM Sans) body. This contrast reinforces hierarchy and establishes credibility while keeping body text scannable.
Deploy generous spacing ({spacing.lg} and {spacing.xl} between sections). Whitespace is a feature; it reduces decision fatigue during deal browsing.
Use the 8-column grid consistently. All viewport sizes employ 8 columns; this maintains proportional rhythm across breakpoints.
Layer micro-shadows (not dramatic drops). Depth comes from barely-there shadow layers and color shifts, not CSS-heavy elevation.
Leverage negative letter-spacing on display headlines. The -1.15px tracking on 46px text creates energy and brand presence.
Highlight active coupon codes with green (rgb(16, 185, 129)). Green filled buttons convey action-ready codes and success.

Don't

Do not use sharp corners ({rounded.none}) on text inputs. Sharp inputs confuse users; {rounded.full} is required for form fields.
Do not introduce new colors outside the defined palette. The 12-color set is intentional; adding arbitrary hues dilutes brand recognition.
Do not apply dramatic shadows to every component. Shadows are reserved for dropdowns, overlays, and elevated modals; flat is the default.
Do not mix serif and sans in body text. Headlines may use Fraunces, but body paragraphs must use DM Sans for readability.
Do not collapse spacing below {spacing.md} (16px) in primary content areas. Tight spacing creates visual stress; maintain breathing room.
Do not set font-size below 14px ({typography.body-sm} or {typography.button-sm}) for interactive elements. Touch targets and readability demand minimum 14px for actionable text.
Do not ignore letter-spacing on captions. The all-caps label variant uses 0.6px tracking; respect this detail for visual hierarchy.
Do not override button border-radius values per button instance. Use {rounded.none} for primary/secondary buttons and {rounded.full} for icon buttons; consistency builds confidence.
Do not lighten text below rgb(51, 78, 104) (navy) on light backgrounds. Contrast ratios must remain WCAG AA or higher for accessibility.

8. Responsive Behavior

Breakpoints

Viewport	Content Width	Grid Columns	Nav Links Visible	Menu Toggle	Display Size	Body Size	Section Padding-X
375px (Mobile)	343px	8	4–6 (collapsed)	Yes	30px	16px	0px
768px (Tablet)	768px	8	4–6 (collapsed)	Yes	36px	16px	0px
1024px (Landscape Tablet / Small Desktop)	1024px	8	8–10 visible	Yes	42px	16px	0px
1280px (Desktop)	1280px	8	12 visible (no collapse)	Yes	46px	16px	0px
1440px (Large Desktop)	1280px (capped)	8	12 visible	Yes	46px	16px	0px

Key Changes:

Content width grows linearly from 343px (mobile) to 768px (tablet) to 1024px (landscape) to 1280px (desktop), then caps.
Display headline size scales from 30px (mobile) → 36px (768px) → 42px (1024px) → 46px (1280px+).
Navigation collapses under ~1024px, revealing a menu toggle; desktop (1280px+) shows full nav permanently.
Grid columns remain 8 across all breakpoints (no switch to 12 or 4 columns).
Section padding-x stays 0px, allowing content to fill edge-to-edge; internal gutters and component padding handle rhythm.

Touch Targets

Minimum tap size: 44px × 44px (icon buttons, standard buttons)
Minimum text link size: 40px height (default links within list contexts)
Form input height: 38px–40px (small-filled button model)
Spacing between clickable elements: {spacing.md} (16px) minimum to prevent mis-taps

Collapsing Strategy

Typography: Display and heading sizes scale down on smaller viewports (linear reduction); body text remains 16px on mobile for legibility.
Navigation: Full horizontal menu on desktop (1024px+); collapses to hamburger toggle and stacked menu below 1024px.
Cards and grids: Stay full-width on mobile (single column implied by 343px container); no column wrapping measured below 768px.
Spacing: Section gaps ({spacing.section} and {spacing.band}) reduce proportionally on small screens but never below {spacing.lg} (20px).
Buttons: Primary buttons may shrink padding and font size on mobile (e.g., 14px → 13px) but maintain minimum 40px height for touch.

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: Primary ({colors.primary} — #FF6B3D) — every "Get Code" button, primary brand accent
Secondary CTA: Emerald Green (rgb(16, 185, 129)) — active coupon codes, confirmations
Card / Container Background: White (rgb(255, 255, 255)) on cream canvas ({colors.canvas} — #FDFBF7)
Card Border / Dividers: Hairline ({colors.hairline} — #D9E2EC)
Heading / Primary Text: Near-black ({colors.neutral-1} — #000000)
Label / Accent Text: Navy blue (rgb(72, 101, 129), used on pill-shaped links)
Footer Background: Deep navy (rgb(10, 25, 41))
Decorative Accents (hero bands, gradients): Navy shades ({colors.accent} — #486581, and accent-1 through -5 variants)

Iteration Guide

Start with the 8-column grid. All layouts flow from 8 equal columns; ensure no layout breaks this rhythm.
Apply {rounded.full} to every text input. This is non-negotiable; pills signal "friendly form entry."
Use {colors.primary} (#FF6B3D) for primary CTAs; emerald green (rgb(16, 185, 129)) for active codes. No other CTA colors exist; stick to this binary.
Maintain {spacing.md} (16px) as the default intra-component gap; scale to {spacing.lg} (20px) or higher between sections. Never go tighter than 12px in primary content.
Layer typography: Fraunces for headlines (46px display down to 14px), DM Sans for body and UI (16px body down to 12px captions). Weight shifts (400 → 600 → 700) signal hierarchy within each size.
Deploy micro-shadows (dropdowns, overlays) via the provided shadow tokens; default to flat (no shadow). Depth is subtle, never dramatic.
Ensure minimum touch target of 44px × 44px for interactive elements. Form inputs 38px–40px height, buttons 40px+.
Respect negative letter-spacing on display text (-1.15px on 46px headline). This tightness is a brand marker; do not round to 0.
Use hairline borders ({colors.hairline} #D9E2EC) for all card and container edges. This 1px definition is consistent across the system.
Scale responsive typographic sizes linearly from mobile (30px display) to desktop (46px display); body text stays 16px across all viewports.

10. Known Gaps

Semantic status colors (error / success / warning): The site does not declare error red, success green, or warning amber in its extracted styles. No semantic ramp exists; all interactive feedback relies on primary brand orange or emerald green contextually.
Interaction states not captured: Hover and focus states were partially extracted but not all interactive paths (e.g., disabled button styling, field-level error states, loading spinners). Implement these based on common patterns: hover typically shifts color by ±10% or adds micro-shadow; focus adds a 2px outline or ring.
Dark mode / theme variants: Only one theme (light) was analyzed. The site may ship a dark mode, but it was not measured here.
Animations and transitions: No duration, easing, or animation specs were extracted. UI likely employs subtle fade-in and slide transitions (common in coupon sites), but no details are available.
Component behaviors beyond CSS: Dropdowns, modals, tooltips, and menu toggle mechanics are not defined here; the extracted data covers styling only, not interaction logic.
Cross-origin stylesheet limitations: Some stylesheets may be unreadable due to CORS restrictions, meaning edge-case CSS details (complex media queries, CSS variables in animations) may be absent.
7 accent colors (accent-1 through -5, plus accent-5) have no measured interaction role: These are used decoratively (hero gradients, banners) but do not map to a defined UI function. Treat as decorative only; do not invent new use cases for them.
Touch and mobile interaction details: No swipe, pinch, or gesture specs were extracted. Assume standard mobile patterns (tap to open, swipe to navigate carousels).
Print and PDF export styling: Not measured; assume defaults.
Authenticated surfaces and paywalled content: Analysis covered public pages only. Logged-in or premium sections may employ different styling.

Document Version: 1.0
Analysis Date: Extracted from https://www.lovecoupons.com/ (home and coupon listing pages)
Coverage: 1 public page; desktop, tablet, and mobile viewports (375px–1440px) measured.

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

Design tokens

Extracted from www.lovecoupons.com

Primary

#FF6B3D

Primary CTA, brand accent, active state

#486581

Secondary accent / hero band

#334E68

Accent / decorative

#102A43

Accent / decorative

#829AB1

Accent / decorative

#627D98

Accent / decorative

#0A1929

Accent / decorative

Neutral

#FDFBF7

Default page background

#222222

Label colour on brand surfaces

#D9E2EC

1px borders and dividers

#000000

Neutral

#CCCCCC

Neutral

Typography · FrauncesGoogle Fonts

h146px · 700 · 50.6px

h222px · 700 · 30.8px

h320px · 700 · 27.5px

heading18px · 700 · 28px

heading14px · 700 · 20px

Typography · DM SansGoogle Fonts

body14px · 400 · 20px

link16px · 400 · 24px

input15px · 400 · 24px

caption12px · 400 · 19.5px

body14px · 400 · 21px

caption12px · 700 · 16px

caption12px · 400 · 16px

body13px · 500 · 19.5px

caption12px · 600 · 16px

button14px · 600 · 20px

caption12px · 400 · 16.5px

heading13px · 600 · 19.5px

body14px · 700 · 20px

caption12px · 500 · 16px

caption11px · 400 · 16.5px

caption10px · 700 · 15px

button14px · 500 · 20px

caption11px · 500 · 16.5px

heading20px · 700 · 28px

heading18px · 700 · 28px

Typography · ui-monospaceGoogle Fonts

code14px · 400 · 20px

Spacing

4px

8px

12px

16px

20px

24px

32px

40px

Elevation

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.18) 0px 10px 12.3px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.278476 -0.0194971 -0.0528874 / 0.1) 0px 20px 25px -5px, oklab(0.278476 -0.0194971 -0.0528874 / 0.1) 0px 8px 10px -6px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(16, 42, 67, 0.15) 0px 20px 40px -12px

Components · 5

Remixes of www.lovecoupons.com

Latest remixes

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

Remix it