Wunderfan Brand Guidelines

Apply these design tokens when building Wunderfan web projects.

Colors

Primary Palette

| Token | Hex | Usage | |-------|-----|-------| | primary | #007AFF | Primary brand blue, CTAs, links | | primaryLight | #4DA1FF | Hover states, accents | | primaryDark | #0051A8 | Active states | | secondary | #50D8DD | Teal accent, highlights |

Neutrals

| Token | Hex | Usage | |-------|-----|-------| | white | #FFFFFF | Cards, surfaces | | black | #000000 | Primary text, dark surfaces | | background | #F6F7FB | Page background | | gray100 | #F8F9FA | Subtle backgrounds | | gray500 | #ADB5BD | Disabled states | | gray600 | #6C757D | Muted text | | gray800 | #343A40 | Secondary text |

Semantic

| Token | Hex | |-------|-----| | success | #007AFF | | warning | #D088F2 | | error | #FFC5AE | | info | #88DEFB |

Typography

Font Family

Poppins — Use Google Fonts:

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

font-family: 'Poppins', sans-serif;

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 | | medium | 500 | | 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: #007AFF;
  color: #FFFFFF;
  border-radius: 28px;
  padding: 16px 24px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

Outline Button

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

Logo

Local Assets

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

Remote URLs

If assets are unavailable locally, reference from GitHub:

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

SVG Color Customization

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

CSS Variables Template

:root {
  /* Colors */
  --color-primary: #007AFF;
  --color-primary-light: #4DA1FF;
  --color-primary-dark: #0051A8;
  --color-secondary: #50D8DD;
  --color-background: #F6F7FB;
  --color-surface: #FFFFFF;
  --color-text: #000000;
  --color-text-muted: #6C757D;
  
  /* Typography */
  --font-family: 'Poppins', sans-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: '#007AFF',
        'primary-light': '#4DA1FF',
        'primary-dark': '#0051A8',
        secondary: '#50D8DD',
        background: '#F6F7FB',
      },
      fontFamily: {
        sans: ['Poppins', 'sans-serif'],
      },
      borderRadius: {
        container: '24px',
        button: '28px',
        input: '50px',
        modal: '12px',
      },
    },
  },
}