Brand Style Guide

This comprehensive guide defines the visual identity and design system for Extra Nerds. Use these guidelines to ensure consistency across all digital products and interfaces.

Design Philosophy: Sophisticated, calm, understated — with a focus on clarity and professionalism.

Color Palette

Our color palette balances professionalism with approachability. Primary cyan conveys trust and technology, while the accent red adds energy and warmth.

Primary

#2a8f96

Main actions, links

Accent

#c9493a

Highlights, CTAs

Dark

#1e2f31

Text, headers

Light

#f7f9f9

Backgrounds

White

#ffffff

Cards, containers

Accessibility

All color combinations meet WCAG 2.1 AA standards with a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.

Typography

Fonts

Headings: Poppins (weights: 400, 600, 700)
Body: Open Sans (weights: 300, 400, 600)

Type Scale

h1 - 2.5em / 40px - Poppins Bold

The quick brown fox jumps over the lazy dog

h2 - 2em / 32px - Poppins SemiBold

The quick brown fox jumps over the lazy dog

h3 - 1.5em / 24px - Poppins SemiBold

The quick brown fox jumps over the lazy dog

h4 - 1.25em / 20px - Poppins SemiBold

The quick brown fox jumps over the lazy dog

body - 1em / 16px - Open Sans Regular

The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

small - 0.875em / 14px - Open Sans Regular

The quick brown fox jumps over the lazy dog. Fine print and secondary information.

Spacing System

Use the 8px base spacing system for consistent layouts. All spacing should be multiples of 8px.

--space-1: 8px

--space-2: 16px

--space-3: 24px

--space-4: 32px

--space-5: 40px

--space-6: 48px

Buttons

Primary Button

Use for the main action on a page or form.

Secondary Button

Use for secondary actions or when multiple options are presented.

Ghost/Text Button

Use for tertiary actions or subtle interactions.

Danger Button

Use for destructive actions like delete or remove.

Code Example

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-ghost">Ghost Button</button>
<button class="btn btn-danger">Delete</button>

Form Elements

Text Input

Label

Select Dropdown

Choose an option

Textarea

Message

Checkboxes

Checkbox option 1 Checkbox option 2 Checkbox option 3

Radio Buttons

Radio option 1 Radio option 2 Radio option 3

Focus States

All form elements use a 2px solid border with primary color on focus. Remove default outline and use border-color transition for smooth interaction.

Logo Guidelines

Minimum Size

The logo should never be displayed smaller than 60px in height to maintain legibility.

60px minimum

Clear Space

Maintain clear space around the logo equal to half the logo's height. This ensures the logo has proper breathing room and isn't crowded by other elements.

Border Radius

Consistent rounded corners create a friendly, modern feel.

--radius-sm: 4px

Small elements

--radius-md: 6px

Buttons, inputs

--radius-lg: 8px

Cards, panels

Shadows & Elevation

Use shadows sparingly to create depth and hierarchy.

--shadow-sm

Subtle elevation

--shadow-md

Cards, dropdowns

--shadow-lg

Modals, popovers

Transitions & Animation

Use consistent timing for smooth, predictable interactions.

--transition-fast: 0.15s ease - Quick state changes (hover, focus)
--transition-base: 0.2s ease - Standard transitions (most UI elements)
--transition-slow: 0.3s ease - Dramatic movements (modals, slides)

Always use ease timing function for natural motion.

CSS Variables (Design Tokens)

All design decisions are captured as CSS custom properties for easy maintenance and theming.

:root {
    /* Colors */
    --color-primary: #2a8f96;
    --color-accent: #c9493a;
    --color-dark: #1e2f31;
    --color-light: #f7f9f9;

    /* Spacing */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 40px;
    --space-6: 48px;

    /* Typography */
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Open Sans', sans-serif;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;

    /* Transitions */
    --transition-base: 0.2s ease;
}