A DesignMD user

Generated Nov 6, 2026

DESIGN.md for doedonnie.nl

doedonnie.nl12 colors6 componentsBaloo 2 Variable + Strawford

Remix

12 screenshots captured· doedonnie.nl

1 / 12 · Donnie · Above the fold

Preview

the generated design system

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

Design tokens

version: alpha
name: Doedonnie
description: |
  Donnie's design system radiates warmth, optimism, and approachability through
  a bold, modern visual language centered on vibrant purple and teal accents.
  The system uses generous contrast, playful rounded forms, and tactile shadow
  treatments to create an inviting, energetic brand presence that celebrates
  community action and charitable giving. The typography is uniformly bold and
  confident (all weights measured at 700), reinforcing a sense of empowerment
  and clarity. Decorative radial gradients with soft, layered purple tones float
  across hero sections, adding depth and movement without overwhelming the page.
  The overall aesthetic feels youthful and purposeful—a digital home for monthly
  givers who want their donations to feel meaningful and transparent.
source:
  url: "https://doedonnie.nl"
  pagesAnalyzed: 6
  extractedAt: 2026-11-06
  tokensMeasured: true
colors:
  primary: "#8E58FF"
  accent: "#6B44C2"
  canvas: "#FFFFFF"
  surface: "#F1EEF1"
  surface-alt: "#2B0038"
  on-primary: "#FFFFFF"
  ink: "#000000"
  hairline: "#6D5B7D"
  focus-ring: "#0064CD"
  accent-1: "#33BFB8"
  neutral-1: "#F7F4FB"
  neutral-2: "#949596"
  neutral-3: "#141414"
typography:
  display-lg:
    fontFamily: "Baloo 2 Variable"
    fontSize: 60px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0px
  display-md:
    fontFamily: "Baloo 2 Variable"
    fontSize: 52px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0px
  display-sm:
    fontFamily: "Baloo 2 Variable"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: 0px
  display-sm-tight:
    fontFamily: "Baloo 2 Variable"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0px
  display-sm-2:
    fontFamily: "Baloo 2 Variable"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.96px
  display-xs:
    fontFamily: "Baloo 2 Variable"
    fontSize: 46px
    fontWeight: 700
    lineHeight: 1.02
    letterSpacing: -1.38px
  heading-xl:
    fontFamily: "Baloo 2 Variable"
    fontSize: 37.6px
    fontWeight: 700
    lineHeight: 1.12
    letterSpacing: -0.38px
  heading-lg:
    fontFamily: "Baloo 2 Variable"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: 0px
  heading-lg-tight:
    fontFamily: "Baloo 2 Variable"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.11
    letterSpacing: 0px
  heading-md:
    fontFamily: "Baloo 2 Variable"
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sm:
    fontFamily: "Baloo 2 Variable"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0px
  heading-xs:
    fontFamily: "Baloo 2 Variable"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.38
    letterSpacing: 0px
  body-xl:
    fontFamily: "Baloo 2 Variable"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0px
  body-lg:
    fontFamily: "Baloo 2 Variable"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0px
  body-md:
    fontFamily: "Baloo 2 Variable"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.56
    letterSpacing: 0px
  body-sm:
    fontFamily: "Baloo 2 Variable"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
  body-xs:
    fontFamily: "Baloo 2 Variable"
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: 0px
  body-xs-2:
    fontFamily: "Baloo 2 Variable"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.43
    letterSpacing: 0.35px
    textTransform: uppercase
  nav:
    fontFamily: "Baloo 2 Variable"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.43
    letterSpacing: 0px
  button-xl:
    fontFamily: BalooThambi
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0px
  button-lg:
    fontFamily: BalooThambi
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0px
  button-md:
    fontFamily: Strawford
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.63
    letterSpacing: 0px
  button-sm:
    fontFamily: "Baloo 2 Variable"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0px
  button-xs:
    fontFamily: Strawford
    fontSize: 9px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0px
  label:
    fontFamily: Strawford
    fontSize: 10px
    fontWeight: 700
    letterSpacing: 0px
  caption-sm:
    fontFamily: Strawford
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  caption-sm-strong:
    fontFamily: "Baloo 2 Variable"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: 0px
  caption-sm-uppercase:
    fontFamily: "Baloo 2 Variable"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: 0.3px
    textTransform: uppercase
  caption-xs:
    fontFamily: Strawford
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0px
  caption-xs-strong:
    fontFamily: "Baloo 2 Variable"
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.88px
    textTransform: uppercase
  caption-xs-uppercase:
    fontFamily: "Baloo 2 Variable"
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.28px
    textTransform: uppercase
rounded:
  none: 0px
  xs: 10px
  sm: 12px
  md: 14px
  lg: 16px
  xl: 18px
  xxl: 20px
  r-24: 24px
  r-32: 32px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 28px
  xxxl: 32px
  section: 40px
  band: 56px
borderWidths:
  thin: 1px
  medium: 2px
  thick: 3px
  thicker: 4px
shadows:
  sm: "rgb(0, 0, 0) -6px 6px 0px 0px"
  md: "rgb(0, 0, 0) -10px 10px 0px 0px"
  lg: "rgba(18, 6, 40, 0.4) 0px 10px 22px 0px"
  xl: "rgb(0, 0, 0) -3px 3px 0px 0px"
elevationStrategy: layered-micro
themes:
  derived: dark   # the other theme is the site's measured palette
  light:
    bg: "#FFFFFF"
    surface: "#F1EEF1"
    surfaceRaised: "#E7E4E7"
    text: "#000000"
    textMuted: "#595959"
    border: "#6D5B7D"
    accent: "#8E58FF"
    accentFg: "#000000"
    focusRing: "#0064CD"
    elevation: shadow
  dark:
    bg: "#0E0B13"
    surface: "#1C1A21"
    surfaceRaised: "#29262D"
    text: "#FAF8FF"
    textMuted: "#A09EA5"
    border: "#353239"
    accent: "#8E58FF"
    accentFg: "#0B0B0C"
    focusRing: "#0064CD"
    elevation: "border+surface"
gradients:
  - context: hero
    kind: radial
    value: "radial-gradient(52% 62% at 100% -6%, rgba(190, 166, 255, 0.68) 0%, rgba(190, 166, 255, 0) 55%), radial-gradient(48% 55% at -6% 106%, rgba(156, 128, 246, 0.58) 0%, rgba(156, 128, 246, 0) 55%), radial-gradient(46% 52% at 3% -2%, rgba(26, 9, 54, 0.32) 0%, rgba(26, 9, 54, 0) 58%)"
  - context: section
    kind: linear
    value: "linear-gradient(to top, oklab(0 0 0 / 0.7) 0%, oklab(0 0 0 / 0.35) 50%, rgba(0, 0, 0, 0) 100%)"
  - context: section
    kind: radial
    value: "radial-gradient(52% 62% at 100% -6%, rgba(190, 166, 255, 0.68) 0%, rgba(190, 166, 255, 0) 55%), radial-gradient(48% 55% at -6% 106%, rgba(156, 128, 246, 0.58) 0%, rgba(156, 128, 246, 0) 55%), radial-gradient(46% 52% at 3% -2%, rgba(26, 9, 54, 0.32) 0%, rgba(26, 9, 54, 0) 58%)"
  - context: section
    kind: linear
    value: "linear-gradient(oklab(0 0 0 / 0.6) 0%, rgba(0, 0, 0, 0) 100%)"
  - context: section
    kind: linear
    value: "linear-gradient(to top, oklab(0 0 0 / 0.7) 0%, rgba(0, 0, 0, 0) 100%)"
  - context: section
    kind: radial
    value: "radial-gradient(75% 38% at 50% 100%, rgba(201, 176, 255, 0.55) 0%, rgba(201, 176, 255, 0) 60%), radial-gradient(34.72vw 34.72vw at 0px -12.85vw, rgba(190, 166, 255, 0.42) 0%, rgba(190, 166, 255, 0) 100%), radial-gradient(47.22vw 47.22vw at 100% -15.97vw, rgba(190, 166, 255, 0.55) 0%, rgba(190, 166, 255, 0) 100%)"
components:
  button-filled:
    textColor: "{colors.on-primary}"
    border: "4px solid {colors.ink}"
    height: 63px
    padding: "14px 36px 14px 36px"
    fontSize: 18px
    boxShadow: "{colors.ink} -6px 6px 0px 0px"
    fontFamily: "Baloo 2 Variable"
    fontWeight: 700
    lineHeight: 1.5
    rounded: "{rounded.lg}"
    backgroundColor: "{colors.accent-1}"
  button-filled-sm:
    typography: "{typography.body-md}"
    textColor: "{colors.on-primary}"
    border: "4px solid {colors.ink}"
    height: 60px
    padding: "12px 40px 12px 40px"
    boxShadow: "{colors.ink} -6px 6px 0px 0px"
    rounded: "{rounded.lg}"
    backgroundColor: "{colors.accent}"
  button-primary:
    typography: "{typography.button-xs}"
    textColor: "{colors.on-primary}"
    border: "1px solid {colors.ink}"
    height: 38px
    padding: "0px 10px 0px 10px"
    rounded: "{rounded.sm}"
    backgroundColor: "{colors.primary}"
  button-outline:
    typography: "{typography.body-md}"
    textColor: "{colors.surface-alt}"
    border: "2px solid {colors.surface-alt}"
    height: 64px
    padding: "12px 24px 12px 24px"
    rounded: "{rounded.lg}"
  card-featured:
    textColor: "{colors.on-primary}"
    border: "4px solid {colors.canvas}"
    fontSize: 16px
    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, rgba(18, 6, 40, 0.4) 0px 10px 22px 0px"
    fontFamily: Strawford
    fontWeight: 400
    lineHeight: 1.5
    rounded: "{rounded.lg}"
    backgroundColor: "{colors.surface-alt}"
  card:
    textColor: "{colors.surface-alt}"
    border: "1px solid {colors.surface-alt}"
    padding: "10px 10px 10px 10px"
    fontSize: 16px
    boxShadow: "{colors.ink} -3px 3px 0px 0px"
    fontFamily: Strawford
    fontWeight: 400
    lineHeight: 1.5
    rounded: "{rounded.lg}"
    backgroundColor: "{colors.neutral-1}"
  card-featured-lg:
    textColor: "{colors.surface-alt}"
    border: "4px solid {colors.canvas}"
    fontSize: 16px
    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, rgba(18, 6, 40, 0.4) 0px 10px 22px 0px"
    fontFamily: Strawford
    fontWeight: 400
    lineHeight: 1.5
    rounded: "{rounded.lg}"
    backgroundColor: "{colors.surface-alt}"
  card-lg:
    textColor: "{colors.surface-alt}"
    border: "4px solid {colors.ink}"
    fontSize: 16px
    fontFamily: Strawford
    fontWeight: 400
    lineHeight: 1.5
    backgroundColor: "{colors.surface}"
  navigation:
    textColor: "{colors.surface-alt}"
    height: 20px
    fontSize: 16px
    fontFamily: Strawford
    fontWeight: 400
    lineHeight: 1.5
  link:
    textColor: "{colors.surface-alt}"
    fontSize: 16px
    fontFamily: Strawford
    fontWeight: 400
    lineHeight: 1.5
    rounded: "{rounded.lg}"
  link-sm:
    typography: "{typography.body-sm}"
    textColor: "oklab(0.999994 0.0000455678 0.0000200868 / 0.9)"
    padding: "8px 8px 8px 8px"
    rounded: 8px
  badge-filled:
    textColor: "{colors.on-primary}"
    height: 18.0312px
    padding: "3.52px 9.92px 3.52px 9.92px"
    fontSize: 11px
    fontFamily: "Baloo 2"
    fontWeight: 700
    lineHeight: 1
    rounded: "{rounded.full}"
    backgroundColor: "rgb(109, 55, 216)"
  badge-outline:
    textColor: "rgb(109, 55, 216)"
    border: "2px solid rgb(139, 92, 246)"
    height: 22.0312px
    padding: "3.52px 9.92px 3.52px 9.92px"
    fontSize: 11px
    fontFamily: "Baloo 2"
    fontWeight: 700
    lineHeight: 1
    rounded: "{rounded.full}"
    backgroundColor: "{colors.canvas}"
states:
  other-hover:
    target: other
    state: hover
    textColor: "{colors.on-primary}"
    backgroundColor: "rgb(18, 18, 18)"
  other-focus-visible:
    target: other
    state: focus-visible
    outlineWidth: 2px
  other-focus:
    target: other
    state: focus
    borderWidth: 2px
  other-active:
    target: other
    state: active
    backgroundColor: "rgb(201, 163, 245)"
  other-disabled:
    target: other
    state: disabled
    borderColor: "rgba(0, 0, 0, 0)"
breakpoints:
  - width: 375
    containerWidth: 343
    gridColumns: 7
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 28
    bodyPx: 16
    sectionPaddingX: 16
  - width: 768
    containerWidth: 720
    gridColumns: 7
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 48
    bodyPx: 16
    sectionPaddingX: 32
  - width: 1024
    containerWidth: 896
    gridColumns: 7
    navLinksVisible: 5
    menuToggleVisible: false
    headingPx: 48
    bodyPx: 16
    sectionPaddingX: 64
  - width: 1280
    containerWidth: 1152
    gridColumns: 7
    navLinksVisible: 5
    menuToggleVisible: false
    headingPx: 48
    bodyPx: 16
    sectionPaddingX: 64
  - width: 1440
    containerWidth: 1152
    gridColumns: 7
    navLinksVisible: 5
    menuToggleVisible: false
    headingPx: 48
    bodyPx: 16
    sectionPaddingX: 64
coverage:
  statesFound: 62
  gradientsFound: 6
  rolesUnassigned: 4
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: true
  semanticRampDeclared: true

Design System Inspired by Donnie

1. Visual Theme & Atmosphere

Donnie's design system radiates warmth, optimism, and approachability through a bold, modern visual language centered on vibrant purple and teal accents. The system uses generous contrast, playful rounded forms, and tactile shadow treatments to create an inviting, energetic brand presence that celebrates community action and charitable giving. The typography is uniformly bold and confident (all weights measured at 700), reinforcing a sense of empowerment and clarity. Decorative radial gradients with soft, layered purple tones float across hero sections, adding depth and movement without overwhelming the page. The overall aesthetic feels youthful and purposeful—a digital home for monthly givers who want their donations to feel meaningful and transparent.

Key Characteristics

Bold, all-caps typography with consistent 700-weight across body, heading, and button sizes
Primary purple accent ({colors.primary} — #8E58FF) paired with teal CTAs ({colors.accent-1} — #33BFB8)
Pill-shaped buttons and badges ({rounded.full} — 9999px radius) with blocky black borders and hard-drop shadows
Tactile depth through 4px thick borders and negative offset shadows (offset -3px to -10px)
Light, spacious layouts anchored by a pale purple surface ({colors.surface} — #F1EEF1)
High contrast text on brand surfaces; label text always rendered in {colors.canvas} (#FFFFFF) on dark overlays
Decorative purple-tinted gradients layered across hero and section backgrounds
Discrete, accessible focus states using blue focus rings ({colors.focus-ring} — #0064CD)

2. Color Palette & Roles

Primary

Primary / Brand ({colors.primary} — #8E58FF): Primary CTA fills, brand mark, active and hover states; defines the core identity
Accent ({colors.accent} — #6B44C2): Secondary accent, hero band overlays; creates depth within the purple family

Accent Colors

Accent / Decorative ({colors.accent-1} — #33BFB8): Teal CTA button fills and accent highlights; no semantic status role assigned
Decorative ({colors.neutral-1} — #F7F4FB): Light neutral background; used sparingly for subtle surface variation

Interactive

Focus Ring ({colors.focus-ring} — #0064CD): Keyboard focus indicator; high-contrast blue for accessibility

Neutral Scale

Canvas / On Primary ({colors.canvas} — #FFFFFF): Default page background; label text on brand surfaces
Surface ({colors.surface} — #F1EEF1): Card and panel backgrounds; light, inviting secondary surfaces
Surface Alt ({colors.surface-alt} — #2B0038): Alternating section band overlay; very dark purple for contrast
Ink / Primary Text ({colors.ink} — #000000): Headings and primary body text; highest contrast
Hairline / Borders ({colors.hairline} — #6D5B7D): 1px borders, dividers, and subtle lines; muted purple-grey

Semantic / Neutral

Neutral Secondary ({colors.neutral-2} — #949596): Unassigned; may appear in disabled or secondary text contexts
Neutral Deep ({colors.neutral-3} — #141414): Unassigned; very dark, near-black tone

3. Typography Rules

Font Family

Primary: Baloo 2 Variable — https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:ital,wght@0,400;0,700&display=swap

Fallback stack: Baloo 2, Baloo Thambi 2, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif

Secondary: Strawford — Used for captions, labels, and smaller button variants

Fallback stack: Strawford, system-ui, -apple-system, "Segoe UI", sans-serif

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display Large	Baloo 2 Variable	60px	700	1.0	0px	Largest display heading
Display Medium	Baloo 2 Variable	52px	700	1.0	0px	Large hero display
Display Small	Baloo 2 Variable	48px	700	1.05	-0.96px	Tight leading, negative tracking
Display Small Tight	Baloo 2 Variable	48px	700	1.0	0px	Alternative tight variant
Display Extra Small	Baloo 2 Variable	46px	700	1.02	-1.38px	Measured on h3; strong letter-spacing reduction
Heading Extra Large	Baloo 2 Variable	37.6px	700	1.12	-0.38px	Measured on h1; subtle tracking tightening
Heading Large	Baloo 2 Variable	36px	700	1.15	0px	Measured on heading; loose line height
Heading Large Tight	Baloo 2 Variable	36px	700	1.11	0px	Measured on h2; tighter variant
Heading Medium	Baloo 2 Variable	30px	700	1.2	0px	Section heading size
Heading Small	Baloo 2 Variable	20px	700	1.25	0px	Subsection, card title
Heading Extra Small	Baloo 2 Variable	18px	700	1.38	0px	Measured on heading; dense form
Body Large	Baloo 2 Variable	24px	700	1.0	0px	Large body text; measured as display variant
Body Medium	Baloo 2 Variable	18px	700	1.56	0px	Primary body text; generous line height
Body Small	Baloo 2 Variable	16px	700	1.5	0px	Measured on body; button text
Body Extra Small	Baloo 2 Variable	15px	700	1.15	0px	Smaller body variant
Body Extra Small Uppercase	Baloo 2 Variable	14px	700	1.43	0.35px	Small caps text; increased letter-spacing
Navigation	Baloo 2 Variable	14px	700	1.43	0px	Nav link; measured on nav element
Button Large	BalooThambi	18px	700	1.0	0px	Large button text
Button Extra Large	BalooThambi	24px	700	1.0	0px	Extra-large button variant
Button Medium	Strawford	15px	700	1.63	0px	Mid-size button; loose leading
Button Small	Baloo 2 Variable	12px	700	1.0	0px	Small button variant
Button Extra Small	Strawford	9px	700	1.0	0px	Minimal button size
Caption Small	Strawford	12px	400	1.33	0px	Body caption; regular weight
Caption Small Strong	Strawford	12px	700	1.33	0px	Emphasized caption
Caption Small Uppercase	Baloo 2 Variable	12px	700	1.33	0.3px	Small uppercase label; tight letter-spacing
Caption Extra Small	Strawford	11px	600	1.25	0px	Tiny caption; medium weight
Caption Extra Small Uppercase	Baloo 2 Variable	11px	700	1.5	0.28px	Ultra-small uppercase; tracked out
Caption Extra Small Strong	Baloo 2 Variable	11px	700	1.5	0.88px	Strongest uppercase caption; heavy letter-spacing
Label	Strawford	10px	700	—	0px	Form input label

Principles

All text is bold (weight 700) except for specific captions (weight 400 or 600), reinforcing confidence and clarity
Letter-spacing tightens dramatically at display sizes (−0.96px to −1.38px), creating a premium, condensed feel
Line heights are consistently generous (1.0 to 1.56), ensuring readability and modern spacing
Uppercase small-caps use increased letter-spacing (0.28px to 0.88px) to maintain proportion and legibility
Fonts are served from Google Fonts, ensuring consistent rendering across devices

4. Component Stylings

Buttons

Primary Button (Small)

Background: {colors.primary} (#8E58FF)
Text Color: {colors.canvas} (#FFFFFF)
Padding: 0px 10px
Height: 38px
Font Size: {typography.button-xs} (9px)
Font Weight: 700
Border: 1px solid {colors.ink} (1px solid #000000)
Border Radius: {rounded.sm} (12px)
Box Shadow: None
Font Family: Strawford

Filled Button (Large Teal)

Background: {colors.accent-1} (#33BFB8)
Text Color: {colors.canvas} (#FFFFFF)
Padding: 14px 36px
Height: 63px
Font Size: {typography.body-md} (18px)
Font Weight: 700
Border: 4px solid {colors.ink} (4px solid #000000)
Border Radius: {rounded.lg} (16px)
Box Shadow: {colors.ink} -6px 6px 0px 0px (hard drop, offset)
Font Family: Baloo 2 Variable
Width: 384px

Filled Button (Medium Purple)

Background: {colors.accent} (#6B44C2)
Text Color: {colors.canvas} (#FFFFFF)
Padding: 12px 40px
Height: 60px
Font Size: {typography.body-md} (18px)
Font Weight: 700
Border: 4px solid {colors.ink} (4px solid #000000)
Border Radius: {rounded.lg} (16px)
Box Shadow: {colors.ink} -6px 6px 0px 0px
Font Family: Baloo 2 Variable
Width: 294px

Outline Button

Background: Transparent (rgba(0, 0, 0, 0))
Text Color: {colors.surface-alt} (#2B0038)
Padding: 12px 24px
Height: 64px
Font Size: {typography.body-md} (18px)
Font Weight: 700
Border: 2px solid {colors.surface-alt} (2px solid #2B0038)
Border Radius: {rounded.lg} (16px)
Box Shadow: None
Font Family: Baloo 2 Variable
Width: 105px

Cards & Containers

Featured Card (Dark, Small)

Background: {colors.surface-alt} (#2B0038)
Text Color: {colors.canvas} (#FFFFFF)
Border: 4px solid {colors.canvas} (4px solid #FFFFFF)
Border Radius: {rounded.lg} (16px)
Padding: 0px (full-bleed image)
Width: 264px
Height: 290.391px
Font Size: {typography.caption-sm} (12px)
Font Weight: 400
Box Shadow: rgba(18, 6, 40, 0.4) 0px 10px 22px 0px (soft elevation)
Font Family: Strawford

Featured Card (Dark, Large)

Background: {colors.surface-alt} (#2B0038)
Text Color: {colors.ink} (#000000)
Border: 4px solid {colors.canvas} (4px solid #FFFFFF)
Border Radius: {rounded.lg} (16px)
Padding: 0px
Width: 264px
Height: 316.797px
Font Size: {typography.caption-sm} (12px)
Font Weight: 400
Box Shadow: rgba(18, 6, 40, 0.4) 0px 10px 22px 0px
Font Family: Strawford

Default Card (Light, Small)

Background: {colors.surface} (#F1EEF1)
Text Color: {colors.surface-alt} (#2B0038)
Border: 1px solid {colors.surface-alt} (1px solid #2B0038)
Border Radius: {rounded.lg} (16px)
Padding: 10px
Width: 229px
Height: 312px
Font Size: {typography.caption-sm} (12px)
Font Weight: 400
Box Shadow: {colors.ink} -3px 3px 0px 0px (hard micro-shadow)
Font Family: Strawford

Default Card (Full-Width Section)

Background: {colors.surface} (#F1EEF1)
Text Color: {colors.surface-alt} (#2B0038)
Border: 4px solid {colors.ink} (4px solid #000000)
Border Radius: {rounded.none} (0px — sharp corners)
Padding: 0px
Width: 1440px
Height: 478px
Font Size: {typography.caption-sm} (12px)
Font Weight: 400
Box Shadow: None
Font Family: Strawford

Inputs & Forms

Label

Font Size: {typography.label} (10px)
Font Weight: 700
Font Family: Strawford
Letter Spacing: 0px
Color: Inferred from context, typically {colors.ink} (#000000)

Navigation

Link (Small Light)

Text Color: oklab(0.999994 0.0000455678 0.0000200868 / 0.9) (near-white, 90% opacity)
Font Size: {typography.body-sm} (16px)
Font Weight: 700
Font Family: Baloo 2 Variable
Background: Transparent
Border: None
Padding: 8px
Border Radius: {rounded.xs} (10px)
Height: 44px
Width: 145px

Badges

Badge Filled

Background: #6D37D8 (brand purple, measured mid-tone)
Text Color: {colors.canvas} (#FFFFFF)
Padding: 3.52px 9.92px
Font Size: {typography.caption-xs-strong} (11px)
Font Weight: 700
Font Family: Baloo 2
Border: None
Border Radius: {rounded.full} (9999px — pill)
Height: 18.0312px
Width: 87.2812px

Badge Outline

Background: {colors.canvas} (#FFFFFF)
Text Color: #6D37D8 (brand purple)
Border: 2px solid {colors.primary} (2px solid #8E58FF)
Padding: 3.52px 9.92px
Font Size: {typography.caption-xs-strong} (11px)
Font Weight: 700
Font Family: Baloo 2
Border Radius: {rounded.full} (9999px — pill)
Height: 22.0312px
Width: 82.6719px

5. Layout Principles

Spacing System

The spacing system follows an 8-base scale, extending into multiples for section-level spacing. All measurements use consistent px values to maintain pixel-perfect alignment and predictable rhythm.

{spacing.xxs} = 4px — micro adjustments, internal padding
{spacing.xs} = 8px — tight spacing, icon padding
{spacing.sm} = 12px — button padding, small gaps
{spacing.md} = 16px — standard paragraph margins, card padding
{spacing.lg} = 20px — medium section spacing
{spacing.xl} = 24px — card title and heading spacing
{spacing.xxl} = 28px — large section breaks
{spacing.xxxl} = 32px — major spacing between sections
{spacing.section} = 40px — half-section vertical rhythm
{spacing.band} = 56px — full-height section padding, hero band spacing

Grid & Container

Base grid columns: 7 columns measured across all breakpoints
Mobile (375px): Content column 343px wide; section padding-x {spacing.md} (16px)
Tablet (768px): Content column 720px wide; section padding-x {spacing.xxxl} (32px)
Desktop (1024px+): Content column 896px–1152px; section padding-x {spacing.section} (64px) (capped at 1152px max-width)

Whitespace Philosophy

Donnie uses generous whitespace to create breathing room around content and hierarchy. Sections are separated by large vertical gaps ({spacing.band} — 56px), emphasizing modular design. Cards float in light, open space; buttons sit with ample padding. This spacious approach aligns with the approachability and confidence of the brand—clarity through clarity, not density.

Border Radius Scale

{rounded.none} = 0px — Full-width section containers (sharp, no softening)
{rounded.xs} = 10px — Small interactive elements, secondary links
{rounded.sm} = 12px — Small button variants, badge components
{rounded.md} = 14px — Mid-size form elements
{rounded.lg} = 16px — Cards, medium buttons, primary containers
{rounded.xl} = 18px — Larger interactive elements
{rounded.xxl} = 20px — Generous rounding, decorative surfaces
{rounded.r-24} = 24px — Extra-large containers
{rounded.r-32} = 32px — Oversized elements, gallery frames
{rounded.full} = 9999px — Pill-shaped buttons, badges, circular media

Border Widths

Thin: 1px — Hairline borders on light cards and subtle dividers
Medium: 2px — Outline button borders, secondary emphasis
Thick: 3px — Reserved for accent emphasis (rarely used in measured components)
Thicker: 4px — Primary button and card borders; creates bold visual weight and tactile presence

6. Depth & Elevation

Elevation Strategy

Donnie employs a layered-micro elevation approach, combining hard-edged offset shadows with soft diffusion shadows. Primary buttons and cards use negative offset shadows (−3px to −6px with solid black) for a playful, tactile feel, while featured cards layer a soft rgba(18, 6, 40, 0.4) shadow for subtle depth. This creates a sense of physicality without mimicking real-world lighting.

Level	Treatment	Use
Flat / Base	No shadow	Background surfaces, body text, full-width sections
Micro (Offset)	`rgb(0, 0, 0) -3px 3px 0px 0px`	Default light cards; subtle tactile lift
Small (Offset)	`rgb(0, 0, 0) -6px 6px 0px 0px`	Primary filled buttons; CTA emphasis
Medium (Offset)	`rgb(0, 0, 0) -10px 10px 0px 0px`	(Reserved; custom elevation)
Large (Soft)	`rgba(18, 6, 40, 0.4) 0px 10px 22px 0px`	Featured cards; diffuse depth layer

Opacity Levels

15% (0.15) — Very subtle overlay or disabled state
55% (0.55) — Moderate transparency, secondary content
67% (0.67) — Strong semi-transparency, hover overlays
72% (0.72) — High contrast semi-transparent state

Z-index / Layering

Base layer: z-index 1–6 — Content, cards, standard sections
Dropdown / Overlay: z-index 10 — Nav dropdowns, tooltips
Modal / Sticky: z-index 40–50 — Modal overlays, fixed headers, toast notifications

7. Do's and Don'ts

Do

Use pill-shaped buttons ({rounded.full} — 9999px) for all primary CTAs; pair with 4px black borders and hard drop shadows
Leverage the purple-to-teal color gradient as the brand's visual signature; primary (#8E58FF) for secondary CTAs, teal (#33BFB8) for primary actions
Apply negative offset shadows (−3px to −10px) to create tactile depth; avoid soft shadows except on featured dark cards
Bold all body and heading text to 700-weight; maintain visual confidence across every font size
Tighten letter-spacing on display sizes (−0.96px to −1.38px) for premium, modern typography
Stack spacing in multiples of 8px ({spacing.md} — 16px, {spacing.xxxl} — 32px, {spacing.band} — 56px)
Use the light surface ({colors.surface} — #F1EEF1) for card and panel backgrounds; reserve dark surface ({colors.surface-alt} — #2B0038) for featured, image-led content
Test focus states on keyboard navigation using the blue focus ring ({colors.focus-ring} — #0064CD)
Keep full-width sections sharp ({rounded.none} — 0px) to anchor the layout and create visual breaks

Don't

Do not use thin or medium borders on primary buttons; Donnie buttons always have 4px thicker borders for bold emphasis
Do not soften large display headings with reduced line-height; maintain at least 1.0 line-height to preserve readability at scale
Do not round corners on full-width container sections; use sharp 0px radius to define distinct layout zones
Do not mix font families within a single UI component; commit to Baloo 2 Variable for body/heading, Strawford for captions/labels
Do not suppress focus indicators for keyboard users; always render the blue {colors.focus-ring} on interactive elements
Do not use soft shadows on utility buttons and smaller components; reserve diffuse elevation only for featured card galleries
Do not invent new colors; the palette is fixed at 12 named tokens—use only mapped semantic roles
Do not use opacity for disabled states alone; pair with background or border color changes for sufficient contrast
Do not compress button padding below {spacing.sm} (12px); maintain touch-friendly sizing across all breakpoints
Do not override letter-spacing on captions and labels; maintain the precise tracked values (0.28px–0.88px) for visual balance

8. Responsive Behavior

Breakpoints

Breakpoint	Viewport	Content Column	Grid Columns	Nav Links Visible	Menu Toggle	Largest Heading	Body Font	Section Padding X
Mobile	375px	343px	7	0	Yes	28px	16px	16px
Tablet	768px	720px	7	0	Yes	48px	16px	32px
Desktop	1024px	896px	7	5	No	48px	16px	64px
Large Desktop	1280px	1152px	7	5	No	48px	16px	64px
Extra Large	1440px	1152px	7	5	No	48px	16px	64px

Key changes across breakpoints:

375px → 768px: Section padding-x doubles (16px → 32px); heading scales to 48px
768px → 1024px: Content column expands from 720px to 896px; nav menu toggle disappears, 5 links become visible
1024px+: Content column maxes at 1152px; section padding-x increases to 64px; layout remains stable

Touch Targets

Minimum interactive size: 44px × 44px (measured on small link variant, {typography.button-md} with {spacing.md} padding)
Button heights: 38px–63px depending on variant; always pair with adequate horizontal padding ({spacing.sm} to {spacing.lg})
Card tap zones: Full card surface (264px–1440px width) to maximize interaction area

Collapsing Strategy

Mobile-first: Start with single-column layout; hide nav menu behind hamburger toggle
Tablet transition (768px): Double horizontal padding to {spacing.xxxl} (32px); stack cards in single column or early grid
Desktop activation (1024px): Expand to full-width grid; reveal nav bar with 5 links; increase section padding to {spacing.section} (64px)
Content column: Capped at 1152px max-width; never exceeds this on extra-large viewports
Heading sizes: Stay at 28px on mobile; scale to 48px at 768px and above (no further scaling)

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: Purple ({colors.primary} — #8E58FF)
Secondary CTA: Dark Purple ({colors.accent} — #6B44C2)
Accent / Action Button: Teal ({colors.accent-1} — #33BFB8)
Page Background: White ({colors.canvas} — #FFFFFF)
Card Surface: Light Purple ({colors.surface} — #F1EEF1)
Dark Featured Surface: Deep Purple ({colors.surface-alt} — #2B0038)
Body & Heading Text: Black ({colors.ink} — #000000)
Borders & Dividers: Muted Purple ({colors.hairline} — #6D5B7D)
Keyboard Focus: Blue ({colors.focus-ring} — #0064CD)

Iteration Guide

All buttons are bold and pill-shaped with {rounded.full} (9999px); primary CTAs use 4px solid black borders and -6px 6px 0px 0px hard offset shadows
Typography is uniformly weight 700; letter-spacing tightens on display sizes (−0.96px to −1.38px for maximum visual impact)
Cards use light surface (#F1EEF1) with 1px dark borders and micro shadows, or dark surface (#2B0038) with 4px white borders and soft elevation shadows
Spacing is always an 8px multiple: {spacing.md} (16px), {spacing.xxxl} (32px), {spacing.band} (56px) for consistent rhythm
Focus states are mandatory on all interactive elements; use {colors.focus-ring} (#0064CD) with 2px outline or ring style
Section containers are sharp ({rounded.none} — 0px) to create visual hierarchy; only cards and buttons get rounded corners
Gradients are decorative-only and appear on hero/section backgrounds; do not apply to interactive elements
Mobile nav hides behind toggle at breakpoints below 1024px; max-width caps all layouts at 1152px content column
All text on dark surfaces ({colors.surface-alt}) renders in {colors.canvas} (#FFFFFF) for maximum contrast
Never invent new colors or spacing; reference only the 12 color tokens and 10 spacing values provided; if a need arises, use the closest mapped role

10. Known Gaps

Interaction states for form inputs: Form field focus, error, and success states were not explicitly extracted; assume standard blue focus ring ({colors.focus-ring} — #0064CD) with 2px outline
Hover and active states on navigation links: The nav component shows no explicit state variants; apply primary color ({colors.primary} — #8E58FF) or border-bottom on active/hover states as inferred from CTA patterns
Disabled button treatment: The extraction notes opacity changes (0.15) but does not specify which disabled components use this; assume a combination of opacity reduction and muted background (e.g., rgba(43, 0, 56, 0.1))
Modal and overlay surfaces: No modal or drawer component was measured; surfaces behind authentication (login, dashboard) were not visited
Icon colors and sizing: Icons are mentioned in badge and button contexts but no specific sizing or color mapping was extracted
Animation and transition timing: No CSS transition or animation properties were captured; assume reduced-motion-friendly defaults (no auto-play animations)
Dark mode or theme variant: The palette is single-theme only; no derived dark-mode stylesheet was extracted or verified
Semantic status colors: No error, warning, or success colors were discovered; the system does not expose a status ramp
Typography for right-to-left (RTL) scripts: All measured fonts and letter-spacing assume left-to-right layout; RTL behavior is not documented
Print styles: No print media queries or print-specific styling was extracted
Some stylesheets were cross-origin and may not have been fully readable; additional micro-interactions or edge-case states may exist but were not captured
Coverage: 6 pages were analysed; any surfaces or features not present on those pages (e.g., product recommendations, checkout flows) are not represented

Design tokens compiled from 6 page(s) of https://doedonnie.nl
Last updated from extraction covering: Homepage, Mission page, Contact page, and internal sections

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

Design tokens

Extracted from doedonnie.nl

Primary

#8E58FF

Primary CTA, brand accent, active state

#6B44C2

Secondary accent / hero band

#33BFB8

Accent / decorative

Neutral

#FFFFFF

Default page background; label colour on brand surfaces

#F1EEF1

Card / panel background

#2B0038

Alternating section band

#000000

Headings / primary text

#6D5B7D

1px borders and dividers

#F7F4FB

Neutral

#949596

Neutral

#141414

Neutral

Semantic

#0064CD

Focus Ring

Typography · Baloo 2 VariableGoogle Fonts

body16px · 700 · 24px

body24px · 700 · 24px

body18px · 700 · 28px

h148px · 700 · 50.4px

heading36px · 700 · 41.4px

nav-link14px · 700 · 20px

body14px · 700 · 20px

body20px · 700 · 28px

body15px · 700 · 17.25px

body14px · 700 · 19.25px

heading18px · 700 · 24.75px

h236px · 700 · 40px

body16px · 600 · 24px

display48px · 700 · 48px

h137.6px · 700 · 42.112px

h248px · 700 · 50.4px

h320px · 700 · 25px

link14px · 700 · 20px

heading30px · 700 · 36px

caption11px · 700 · 16.5px

display52px · 700 · 52px

body13px · 700 · 19.5px

h330px · 700 · 41.25px

caption12px · 700 · 16px

display60px · 700 · 60px

h224px · 700 · 32px

h346px · 700 · 46.92px

heading38.64px · 700 · 39.4128px

display44.16px · 700 · 45.0432px

caption12px · 700 · 16px

caption11px · 700 · 16.5px

button12px · 700 · 12px

button16px · 700 · 24px

Typography · StrawfordGoogle Fonts

body18px · 400 · 29.25px

input10px · 700

body14px · 400 · 18.9px

caption12px · 400 · 16px

button9px · 700 · 9px

body16px · 400 · 26px

body15px · 400 · 24.375px

link14px · 400 · 20px

list-item16px · 400 · 24px

body20px · 400

caption11px · 600 · 13.75px

caption10px · 600 · 12.5px

link16px · 400 · 24px

button16px · 400 · 24px

body13px · 400 · 17.55px

caption12px · 700 · 16px

body18px · 700 · 29.25px

heading30px · 400 · 36px

body17px · 600 · 24.65px

body16px · 600 · 24px

body14px · 500 · 20px

caption12px · 500 · 16px

quote18px · 400 · 29.25px

body14px · 600 · 20px

body15px · 500 · 24.375px

button15px · 700 · 24.375px

body24px · 400 · 24px

Typography · BalooThambiGoogle Fonts

button24px · 700 · 24px

heading36px · 700 · 39.6px

button18px · 700 · 18px

Typography · Baloo 2Google Fonts

h318.4px · 700 · 21.16px

caption11.52px · 700 · 11.52px

body12.8px · 700 · 19.2px

caption11px · 700 · 11px

body21.6px · 700 · 21.6px

Spacing

12px

8px

16px

24px

32px

40px

4px

20px

Elevation

rgb(0, 0, 0) -6px 6px 0px 0px

rgb(0, 0, 0) -10px 10px 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) 0px 0px 0px 0px, rgba(18, 6, 40, 0.4) 0px 10px 22px 0px

rgb(0, 0, 0) -3px 3px 0px 0px

Components · 6

Remixes of doedonnie.nl

Latest remixes

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

Remix it

DESIGN.md for doedonnie.nl

Preview

Design System Inspired by Donnie

1. Visual Theme & Atmosphere

2. Color Palette & Roles

Primary

Accent Colors

Interactive

Neutral Scale

Semantic / Neutral

3. Typography Rules

Font Family

Hierarchy

Principles

4. Component Stylings

Buttons

Primary Button (Small)

Filled Button (Large Teal)

Filled Button (Medium Purple)

Outline Button

Cards & Containers

Featured Card (Dark, Small)

Featured Card (Dark, Large)

Default Card (Light, Small)

Default Card (Full-Width Section)

Inputs & Forms

Label

Navigation

Navigation Link (Default)

Link (Small Light)

Badges

Badge Filled

Badge Outline

5. Layout Principles

Spacing System

Grid & Container

Whitespace Philosophy

Border Radius Scale

Border Widths

6. Depth & Elevation

Elevation Strategy

Opacity Levels

Z-index / Layering

7. Do's and Don'ts

Do

Don't

8. Responsive Behavior

Breakpoints

Touch Targets

Collapsing Strategy

9. Agent Prompt Guide

Quick Color Reference

Iteration Guide

10. Known Gaps

Remixes of doedonnie.nl

Preview

Design System Inspired by Donnie

1. Visual Theme & Atmosphere

2. Color Palette & Roles

Primary

Accent Colors

Interactive

Neutral Scale

Semantic / Neutral

3. Typography Rules

Font Family

Hierarchy

Principles

4. Component Stylings

Buttons

Primary Button (Small)

Filled Button (Large Teal)

Filled Button (Medium Purple)

Outline Button

Cards & Containers

Featured Card (Dark, Small)

Featured Card (Dark, Large)

Default Card (Light, Small)

Default Card (Full-Width Section)

Inputs & Forms