Remixes of www.purplecarrot.com
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Purplecarrot
description: |
Purple Carrot's design system embodies a warm, accessible, and health-forward
aesthetic rooted in natural food culture. The palette combines earthy neutrals
with a confident dark ink and sophisticated forest-green accent, creating an
inviting yet professional environment. Typography plays a commanding role,
with expansive display sizes and generous line heights that breathe confidence
and ease. The overall mood is optimistic and grounded—emphasizing that eating
well is neither intimidating nor complicated, but rather a natural extension
of a balanced lifestyle. Every element from colour blocking to component
styling reinforces the brand's core promise: nutrient-rich meals that fit
seamlessly into real life.
source:
url: "https://www.purplecarrot.com/"
pagesAnalyzed: 1
extractedAt: 2026-10-25
tokensMeasured: true
colors:
primary: "#000000"
accent: "#31544E"
canvas: "#FFFFFF"
surface-alt: "#F8F1E8"
on-primary: "#FFFFFF"
ink: "#000000"
body: "#3A2821"
typography:
display-xl:
fontFamily: "Neue Haas Unica W1G Medium"
fontSize: 68px
fontWeight: 400
lineHeight: 1.03
letterSpacing: -1px
display-lg:
fontFamily: "Neue Haas Unica W1G Medium"
fontSize: 50px
fontWeight: 400
lineHeight: 1.1
letterSpacing: 0px
display-md:
fontFamily: "Neue Haas Unica W1G Medium"
fontSize: 46px
fontWeight: 400
letterSpacing: 0px
display-sm:
fontFamily: "Neue Haas Unica W1G Medium"
fontSize: 40px
fontWeight: 400
lineHeight: 1.25
letterSpacing: 0px
display-sm-strong:
fontFamily: "Neue Haas Unica W1G Medium"
fontSize: 40px
fontWeight: 500
lineHeight: 1.25
letterSpacing: -1px
display-sm-tight:
fontFamily: "Neue Haas Unica W1G Medium"
fontSize: 40px
fontWeight: 500
lineHeight: 0.65
letterSpacing: -0.5px
body-xl:
fontFamily: "Neue Haas Unica W1G Regular"
fontSize: 20px
fontWeight: 400
letterSpacing: 0px
body-xl-strong:
fontFamily: "Neue Haas Unica W1G Regular"
fontSize: 20px
fontWeight: 600
lineHeight: 1.1
letterSpacing: 0px
body-lg:
fontFamily: "Neue Haas Unica W1G Regular"
fontSize: 16px
fontWeight: 400
lineHeight: 1.88
letterSpacing: 0px
body-lg-strong:
fontFamily: "Neue Haas Unica W1G Regular"
fontSize: 16px
fontWeight: 700
lineHeight: 1.88
letterSpacing: 0px
body-md:
fontFamily: "Open Sans"
fontSize: 14px
fontWeight: 500
lineHeight: 1.29
letterSpacing: 0px
body-sm:
fontFamily: "Open Sans"
fontSize: 12px
fontWeight: 400
lineHeight: 2.17
letterSpacing: 0px
nav:
fontFamily: Mabry
fontSize: 14px
fontWeight: 500
lineHeight: 1.43
letterSpacing: 0px
button:
fontFamily: Mabry
fontSize: 0px
fontWeight: 500
lineHeight: 0px
letterSpacing: 0px
label:
fontFamily: "Open Sans"
fontSize: 14px
fontWeight: 400
lineHeight: 1.71
letterSpacing: 0px
caption-xs:
fontFamily: "Open Sans"
fontSize: 12px
fontWeight: 400
lineHeight: 1.83
letterSpacing: 0px
caption-xs-strong:
fontFamily: "Open Sans"
fontSize: 12px
fontWeight: 600
lineHeight: 1.83
letterSpacing: 0px
caption-xs-mabry:
fontFamily: Mabry
fontSize: 12px
fontWeight: 700
letterSpacing: 0px
rounded:
none: 0px
xs: 6px
sm: 8px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 28px
xxxl: 32px
section: 36px
band: 52px
borderWidths:
thin: 1px
medium: 2px
elevationStrategy: color-blocking
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FFFFFF"
surface: "#F8F1E8"
surfaceRaised: "#EEE7DF"
text: "#000000"
textMuted: "#3A2821"
border: "#E0E0E0"
accent: "#31544E"
accentFg: "#FFFFFF"
focusRing: "#31544E"
elevation: shadow
dark:
bg: "#0E1011"
surface: "#1C1E1F"
surfaceRaised: "#292A2B"
text: "#F7F8F8"
textMuted: "#9EA0A0"
border: "#353637"
accent: "#4F887E"
accentFg: "#0B0B0C"
focusRing: "#406E66"
elevation: "border+surface"
components:
button-filled:
textColor: "{colors.on-primary}"
height: 36.7969px
padding: "10px 25px 10px 25px"
fontSize: 16px
boxShadow: "rgba(58, 40, 33, 0.2) 0px 0px 3px 0px"
fontFamily: "Mabry Medium"
fontWeight: 600
lineHeight: 1.05
rounded: 12px
backgroundColor: "rgb(66, 130, 39)"
button-filled-lg:
textColor: "{colors.on-primary}"
height: 38.9062px
padding: "10px 25px 10px 25px"
fontSize: 18px
boxShadow: "rgba(58, 40, 33, 0.2) 0px 0px 3px 0px"
fontFamily: "Mabry Medium"
fontWeight: 600
lineHeight: 1.05
rounded: 12px
backgroundColor: "rgb(66, 130, 39)"
button-icon:
textColor: "{colors.on-primary}"
height: 60px
padding: "16px 16px 16px 16px"
fontSize: 18px
fontFamily: Mabry
fontWeight: 500
lineHeight: 1.44
rounded: "50%"
backgroundColor: "{colors.primary}"
button-primary:
textColor: "{colors.ink}"
height: 40px
padding: "10px 22px 10px 22px"
fontSize: 18px
fontFamily: Mabry
fontWeight: 500
lineHeight: 1.44
rounded: "{rounded.sm}"
backgroundColor: "{colors.primary}"
button-outline:
textColor: "{colors.ink}"
border: "2px solid {colors.primary}"
height: 42px
padding: "6px 20px 6px 20px"
fontSize: 14px
fontFamily: Mabry
fontWeight: 500
lineHeight: 1.86
rounded: "{rounded.sm}"
backgroundColor: "{colors.canvas}"
button-text:
typography: "{typography.button}"
height: 20px
padding: "5px 5px 5px 5px"
rounded: "{rounded.sm}"
navigation:
textColor: "{colors.ink}"
height: 90px
fontSize: 16px
fontFamily: Mabry
fontWeight: 400
lineHeight: 1.63
footer:
textColor: "{colors.ink}"
border: "1px solid rgb(222, 226, 230)"
padding: "48px 124px 48px 124px"
fontSize: 16px
fontFamily: "Open Sans"
fontWeight: 400
lineHeight: 1.63
backgroundColor: "rgb(248, 240, 232)"
link:
textColor: "{colors.accent}"
padding: "0px 15px 0px 15px"
fontSize: 16px
fontFamily: "Open Sans"
fontWeight: 500
lineHeight: 1.63
link-2:
typography: "{typography.nav}"
textColor: "{colors.ink}"
padding: "0px 20px 0px 20px"
states:
link-hover:
target: link
state: hover
textColor: "{colors.ink}"
textDecoration: underline
link-focus:
target: link
state: focus
borderColor: currentcolor
borderWidth: medium
link-focus-visible:
target: link
state: focus-visible
boxShadow: "{colors.canvas} 0px 0px 0px 2px, {colors.primary} 0px 0px 0px 3px"
backgroundColor: "{colors.canvas}"
button-focus:
target: button
state: focus
outline: none
borderColor: "{colors.ink}"
button-focus-visible:
target: button
state: focus-visible
boxShadow: none
button-disabled:
target: button
state: disabled
textColor: "rgb(115, 115, 115)"
opacity: 1
backgroundColor: "rgb(248, 248, 248)"
input-focus:
target: input
state: focus
outline: none
borderColor: "{colors.ink}"
input-focus-visible:
target: input
state: focus-visible
boxShadow: none
input-disabled:
target: input
state: disabled
textColor: "rgb(115, 115, 115)"
opacity: 1
backgroundColor: "rgb(248, 248, 248)"
button-hover:
target: button
state: hover
textColor: "{colors.on-primary}"
borderColor: "rgb(51, 51, 51)"
borderWidth: 2px
textDecoration: none
backgroundColor: "rgb(51, 51, 51)"
button-active:
target: button
state: active
textColor: "{colors.on-primary}"
borderColor: "rgb(51, 51, 51)"
borderWidth: 2px
textDecoration: none
backgroundColor: "rgb(51, 51, 51)"
other-hover:
target: other
state: hover
textColor: "rgb(152, 216, 115)"
input-hover:
target: input
state: hover
borderColor: "rgb(115, 115, 115)"
other-focus:
target: other
state: focus
outline: none
other-focus-visible:
target: other
state: focus-visible
outline: none
boxShadow: "{colors.canvas} 0px 0px 0px 2px, {colors.primary} 0px 0px 0px 4px"
nav-hover:
target: nav
state: hover
textColor: "rgb(51, 51, 51)"
breakpoints:
- width: 375
containerWidth: 350
gridColumns: 7
navLinksVisible: 0
menuToggleVisible: true
headingPx: 0
bodyPx: 16
sectionPaddingX: 0
- width: 768
containerWidth: 728
gridColumns: 7
navLinksVisible: 0
menuToggleVisible: true
headingPx: 0
bodyPx: 16
sectionPaddingX: 0
- width: 1024
containerWidth: 984
gridColumns: 7
navLinksVisible: 0
menuToggleVisible: true
headingPx: 0
bodyPx: 16
sectionPaddingX: 0
- width: 1280
containerWidth: 1220
gridColumns: 7
navLinksVisible: 4
menuToggleVisible: false
headingPx: 0
bodyPx: 16
sectionPaddingX: 0
- width: 1440
containerWidth: 1380
gridColumns: 7
navLinksVisible: 4
menuToggleVisible: false
headingPx: 0
bodyPx: 16
sectionPaddingX: 0
coverage:
statesFound: 62
gradientsFound: 0
rolesUnassigned: 0
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
Purple Carrot's design system embodies a warm, accessible, and health-forward aesthetic rooted in natural food culture. The palette combines earthy neutrals with a confident dark ink and sophisticated forest-green accent, creating an inviting yet professional environment. Typography plays a commanding role, with expansive display sizes and generous line heights that breathe confidence and ease. The overall mood is optimistic and grounded—emphasizing that eating well is neither intimidating nor complicated, but rather a natural extension of a balanced lifestyle. Every element from colour blocking to component styling reinforces the brand's core promise: nutrient-rich meals that fit seamlessly into real life.
Key Characteristics
{colors.primary} — #000000): Primary CTA backgrounds, headings, and active states. Establishes visual hierarchy and focuses user attention on key actions and messaging.{colors.accent} — #31544E): Forest-green secondary accent used sparingly for links, alternative CTAs, and brand differentiation alongside the primary black.{colors.canvas} — #FFFFFF): Default page background and label text colour when placed on brand surfaces. Provides clean, open space for content.{colors.surface-alt} — #F8F1E8): Warm beige alternating section band, used to create visual rhythm and section separation without introducing new hues.{colors.body} — #3A2821): Body copy text colour. Rich brown-black that maintains excellent contrast and readability while feeling warmer than pure black.Primary Display & Headings: Neue Haas Unica W1G (Medium for larger sizes)
Body & UI Text: Open Sans
Buttons & Navigation: Mabry (Regular and Medium weights)
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XL | Neue Haas Unica W1G | 68px | 400 | 1.03 | -1px | Hero headlines; extreme scale with tight tracking |
| Display LG | Neue Haas Unica W1G | 50px | 400 | 1.1 | 0px | Major section headings |
| Display MD | Neue Haas Unica W1G | 46px | 400 | Not measured | 0px | Large headings |
| Display SM Strong | Neue Haas Unica W1G | 40px | 500 | 1.25 | -1px | Prominent headings with slight tightness |
| Display SM Tight | Neue Haas Unica W1G | 40px | 500 | 0.65 | -0.5px | Extremely condensed heading variant |
| Display SM | Neue Haas Unica W1G | 40px | 400 | 1.25 | 0px | Standard large heading |
| Body XL Strong | Neue Haas Unica W1G | 20px | 600 | 1.1 | 0px | Emphasized body paragraphs |
| Body XL | Neue Haas Unica W1G | 20px | 400 | Not measured | 0px | Large body text |
| Body LG Strong | Neue Haas Unica W1G | 16px | 700 | 1.88 | 0px | Bold body emphasis |
| Body LG | Neue Haas Unica W1G | 16px | 400 | 1.88 | 0px | Standard body copy |
| Body MD | Open Sans | 14px | 500 | 1.29 | 0px | Medium body text, medium weight |
| Label | Open Sans | 14px | 400 | 1.71 | 0px | Form labels |
| Nav | Mabry | 14px | 500 | 1.43 | 0px | Navigation link text |
| Body SM | Open Sans | 12px | 400 | 2.17 | 0px | Small body text, links |
| Caption XS | Open Sans | 12px | 400 | 1.83 | 0px | Captions, fine print |
| Caption XS Strong | Open Sans | 12px | 600 | 1.83 | 0px | Bold captions |
| Caption XS Mabry | Mabry | 12px | 700 | Not measured | 0px | Bold caption in Mabry |
| Button | Mabry | 0px (varies by component) | 500 | 0px (varies by component) | 0px | Button text inherits component sizing |
-1px and -0.5px) to enhance visual impact and brand personality at the largest scales.{typography.body-sm} at 2.17) to maximize readability and whitespace in detailed content.Filled Primary (CTA-dominant variant)
#428227 (deep plant green)#FFFFFF{rounded.sm} (8px)rgba(58, 40, 33, 0.2) 0px 0px 3px 0px2px outer ring, black 4px outer ring (outline style)#737373, background #F8F8F8, opacity 1Filled Large
#428227#FFFFFF{rounded.sm} (8px)rgba(58, 40, 33, 0.2) 0px 0px 3px 0px2px ring, black 4px ringOutline (Secondary CTA)
#FFFFFF#000000#000000{rounded.sm} (8px)#FFFFFF, text #000000, border #3333332px ring, black 4px ringPrimary (Minimal)
#000000#000000 (rendered as transparent or icon-only in many cases){rounded.sm} (8px)#FFFFFF, text #000000, border #333333#000000 1pxIcon Button (Circular)
#000000#FFFFFF{rounded.full} (50% / 60px rendered as circle)Text Button (Ghost / Minimal variant)
#000000Feature Card
#FFFFFF or #F8F1E8 (alternating){rounded.none} (0px){spacing.lg} to {spacing.xl} internal{colors.primary} (#000000){colors.body} (#3A2821)Section Band (Alternating Background)
#F8F1E8 for alternating rhythm, #FFFFFF for primary{spacing.band} (52px) vertical, contextual horizontalText Input (Focus state)
#FFFFFF#000000#DDDDDD (default){rounded.xs} (6px){spacing.md} (16px)#000000, box-shadow rgb(255, 255, 255) 0px 0px 0px 2px, rgb(0, 0, 0) 0px 0px 0px 4px#737373#DDDDDD, text #737373, border #DDDDDDLabel
{colors.body} (#3A2821){spacing.xs} (8px)Header Navigation
#FFFFFF#DEDEDE (hairline){colors.primary} (#000000)#333333, background #F7F1E9 (warm light beige)#000000, underline or accent colourFooter Navigation
{colors.surface-alt} (#F8F1E8)#DED2C8{colors.accent} (#31544E) for primary links{colors.primary} (#000000), boldBase Unit: 4px ({spacing.xxs})
Scale:
{spacing.xxs} = 4px — Micro gaps, icon spacing{spacing.xs} = 8px — Tight padding, label gaps{spacing.sm} = 12px — Small component padding{spacing.md} = 16px — Standard padding, body margins{spacing.lg} = 20px — Larger spacing, section spacing{spacing.xl} = 24px — Card padding{spacing.xxl} = 28px — Generous spacing{spacing.xxxl} = 32px — Large section gaps{spacing.section} = 36px — Section vertical spacing{spacing.band} = 52px — Full-bleed band vertical padding#FFFFFF and #F8F1E8), creating visual rhythm and section breaks without bordersThe design system prioritizes abundant whitespace as a core principle. Large display headings sit within generous vertical breathing room; body paragraphs enjoy expanded line heights (up to 2.17 at smaller sizes) and margins between sections of {spacing.band} (52px). This openness reinforces the brand's approachability and reduces cognitive load, making content feel curated rather than crowded. Horizontal padding remains consistent ({spacing.xl} to {spacing.section}) even as the viewport contracts, ensuring readability and visual coherence on all devices.
{rounded.none} = 0px — Cards, images, large containers{rounded.xs} = 6px — Form inputs{rounded.sm} = 8px — Buttons, small interactive elements{rounded.full} = 9999px — Icon buttons, circular badgesThe design system employs colour-blocking as its primary elevation mechanism. Depth is communicated through strategic shifts in surface colour (e.g., alternating white and beige sections) rather than layered shadow effects. When shadows do appear, they are minimal and highly contextual—typically a single soft shadow on interactive buttons (rgba(58, 40, 33, 0.2) 0px 0px 3px 0px) to create a gentle lift without visual clutter.
| Level | Treatment | Use |
|---|---|---|
| Flat / Base | No shadow, solid background colour | Cards, default surfaces, most text content |
| Lifted | Single soft shadow: rgba(58, 40, 33, 0.2) 0px 0px 3px 0px | Primary filled buttons, icon buttons |
| Interactive Focus | Dual-ring focus indicator: white 2px + black 4px | Buttons, inputs, links with keyboard focus |
| Overlay | Implied via colour or opacity shift | Modal backgrounds, overlays (exact values not measured) |
Shadow Philosophy: Shadows are sparingly deployed to avoid visual noise. The warm brown shadow tone (rgba(58, 40, 33, 0.2)) on buttons ties to the brand's earthy palette and feels organic rather than technical. Most elevation comes from surface colour contrast and whitespace, making the interface feel modern and uncluttered.
{colors.primary} / #000000) for all primary CTAs and headings to establish clear hierarchy and visual weight.{colors.surface-alt} / #F8F1E8) for section band backgrounds to create visual rhythm and breathing room between content blocks.rgba(58, 40, 33, 0.2) 0px 0px 3px 0px) consistently to all filled button variants to signal interactivity without visual heaviness.{rounded.sm} (8px) for interactive buttons to convey friendliness and accessibility.{colors.accent} / #31544E) sparingly for secondary links, badge accents, or brand emphasis—it reads as a premium detail alongside the primary black.{typography.body-lg} (16px, 1.88 line-height) or larger for legibility across all devices.#F8F8F8 background, #737373 text).{typography.body-sm} (12px) for body content; captions should remain at 12px with generous line-height (1.83).{colors.accent}) to primary CTAs. Reserve it for secondary UI and brand accents only; primary actions are always black.#FFFFFF on #428227 or #000000) or black on light fills (#000000 on #FFFFFF).outline: none and apply the dual-ring treatment via box-shadow.| Viewport | Content Column | Grid Columns | Nav Links Visible | Menu Toggle | Body Font | Section Padding X |
|---|---|---|---|---|---|---|
| 375px | 350px | 7 | 0 | Yes | 16px | 12px |
| 768px | 728px | 7 | 0 | Yes | 16px | 12px |
| 1024px | 984px | 7 | 0 | Yes | 16px | 12px |
| 1280px | 1220px | 7 | 4 | No | 16px | 16px |
| 1440px | 1380px | 7 | 4 | No | 16px | 16px |
Key Breakpoint at 1280px: The primary responsive shift occurs when the viewport reaches 1280px, at which point the hamburger menu toggle disappears and 4 navigation links become visible. Below 1280px, all viewports display the menu toggle; header navigation is hidden except for the logo and toggle button. Section padding increases slightly from 12px to 16px at 1280px and above to maintain proportional breathing room at larger scales.
{spacing.md} = 16px) to exceed 40px width{rounded.xs} border radius at 6px){spacing.md} to {spacing.band} scale to preserve readability. Hero headlines scale down proportionally but maintain negative letter-spacing for brand consistency.{colors.primary} — #000000){colors.accent} — #31544E){colors.canvas} — #FFFFFF){colors.surface-alt} — #F8F1E8){colors.body} — #3A2821){colors.primary} (#000000). No exceptions. This colour drives hierarchy and focus.#428227 background with #FFFFFF text; apply the warm shadow rgba(58, 40, 33, 0.2) 0px 0px 3px 0px consistently. Outline buttons reverse to #FFFFFF background with #000000 text and 2px solid #000000 border.10px 25px (height ~37–42px). Icon buttons are exceptions: 60px × 60px with 16px internal padding and {rounded.full} radius.{rounded.sm} (8px border-radius) except icon buttons (which use {rounded.full}) and inputs (which use {rounded.xs} at 6px).2px + black 4px via box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px, rgb(0, 0, 0) 0px 0px 0px 4px. Remove browser outline with outline: none.{typography.body-lg} (16px, weight 400, line-height 1.88). Display headings scale up from {typography.display-sm} (40px) to {typography.display-xl} (68px) with negative letter-spacing (-0.5px to -1px).#FFFFFF and #F8F1E8 (Surface Alt). Vertical padding is {spacing.band} (52px); horizontal padding scales from 12px (mobile) to 16px (desktop+).#F8F8F8, text #737373, opacity 1.0. No shadow. Form inputs: background #DDDDDD, text #737373, border #DDDDDD.#333333, background becomes #F7F1E9 (warm light beige). No underline unless specified in link styles.{typography.button} token measured 0px size and line-height, indicating it is a computed/inherited value. Button text inherits from the Mabry font family at the component level; reference specific button component sizes (16px for filled, 18px for filled-lg, etc.) rather than a universal "button" size.