Wunderpar Brand

Wunderpar Brand Guidelines

Apply these design tokens when building Wunderpar web projects.

Colors

Primary Palette

Neutrals

Semantic

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

Font Weights

Spacing

Use 4px base unit:

Border Radii

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

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>