Wunderpar Brand Guidelines

Apply these design tokens when building Wunderpar web projects.

Colors

Primary Palette

| Token | Hex | Usage | |-------|-----|-------| | primary | #40452F | Primary olive green, CTAs, links | | secondary | #E3C895 | Gold accent, highlights, dark surface accents |

Neutrals

| Token | Hex | Usage | |-------|-----|-------| | white | #FFFFFF | Cards, surfaces | | black | #000000 | Primary text | | background | #FFFEF3 | Page background (warm cream) | | surfaceLight | #FFFEF3 | Light surfaces | | surfaceDark | #40452F | Dark surfaces, headers | | gray500 | #ADB5BD | Disabled states | | gray600 | #6C757D | Muted text |

Semantic

| Token | Hex | |-------|-----| | success | #40452F | | warning | #D088F2 | | error | #FFC5AE | | info | #E3C895 |

Typography

Dual Font System

Wunderpar uses two fonts:

• Poppins (F1) — Primary body text
• Fraunces (F2) — Display/highlight font for titles and emphasis

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Fraunces:wght@400;600;700&display=swap" rel="stylesheet">

/* Primary font */
font-family: 'Poppins', sans-serif;

/* Display font for titles */
font-family: 'Fraunces', serif;

When to Use Fraunces

• Hero headings
• Section titles
• Feature highlights
• Promotional text
• Any text that needs to "pop"

Font Sizes

| Token | Size | Usage | |-------|------|-------| | xs | 12px | Captions, labels | | s | 14px | Body small | | m | 16px | Body default | | m2 | 18px | Body large | | l | 24px | Subheadings | | l2 | 28px | Section headings | | xl | 42px | Page titles | | xxl | 72px | Hero text |

Font Weights

| Token | Weight | |-------|--------| | regular | 400 | | semiBold | 600 | | bold | 700 |

Spacing

Use 4px base unit:

| Token | Value | |-------|-------| | xs | 4px | | s | 8px | | m | 16px | | l | 24px | | xl | 32px | | xxl | 40px |

Border Radii

| Token | Value | Usage | |-------|-------|-------| | container | 24px | Cards, sections | | button | 28px | Buttons (pill-shaped) | | input | 50px | Input fields (fully rounded) | | modal | 12px | Dialogs, modals |

Button Styles

Primary Button

.btn-primary {
  background-color: #40452F;
  color: #FFFEF3;
  border-radius: 28px;
  padding: 16px 24px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

Outline Button

.btn-outline {
  background-color: transparent;
  color: #40452F;
  border: 1px solid #40452F;
  border-radius: 28px;
  padding: 16px 24px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

Accent Button (Gold)

.btn-accent {
  background-color: #E3C895;
  color: #40452F;
  border-radius: 28px;
  padding: 16px 24px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

Logo

Local Assets

| Asset | Path | |-------|------| | Logo only | assets/wunderpar-logo.svg | | Logo + name | assets/wunderpar-name-and-logo.svg |

Remote URLs

If assets are unavailable locally, reference from GitHub:

https://raw.githubusercontent.com/Kingly-Clark/skills/main/skills/wunderpar-brand/assets/wunderpar-logo.svg
https://raw.githubusercontent.com/Kingly-Clark/skills/main/skills/wunderpar-brand/assets/wunderpar-name-and-logo.svg

SVG Color Customization

SVGs are provided with default colors (#FFFEF3 stroke/fill). Update fill and stroke attributes to match your background/foreground requirements.

CSS Variables Template

:root {
  /* Colors */
  --color-primary: #40452F;
  --color-secondary: #E3C895;
  --color-background: #FFFEF3;
  --color-surface: #FFFFFF;
  --color-surface-dark: #40452F;
  --color-text: #000000;
  --color-text-muted: #6C757D;
  --color-text-inverted: #FFFEF3;
  
  /* Typography */
  --font-family: 'Poppins', sans-serif;
  --font-family-display: 'Fraunces', serif;
  --font-size-xs: 12px;
  --font-size-s: 14px;
  --font-size-m: 16px;
  --font-size-l: 24px;
  --font-size-xl: 42px;
  
  /* Spacing */
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 32px;
  
  /* Border Radii */
  --radius-container: 24px;
  --radius-button: 28px;
  --radius-input: 50px;
  --radius-modal: 12px;
}

Tailwind Config

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#40452F',
        secondary: '#E3C895',
        background: '#FFFEF3',
        'surface-dark': '#40452F',
      },
      fontFamily: {
        sans: ['Poppins', 'sans-serif'],
        display: ['Fraunces', 'serif'],
      },
      borderRadius: {
        container: '24px',
        button: '28px',
        input: '50px',
        modal: '12px',
      },
    },
  },
}

Tailwind Typography Example

<h1 class="font-display text-4xl">Hero Title in Fraunces</h1>
<p class="font-sans text-base">Body text in Poppins</p>