AlgoSoc Brand Guidelines

Single source of truth for colours, typography, and visual identity across all AlgoSoc and ICWiT materials. Defined in src/styles/globals.css.

Colours

Core

#2B2B2B

Primary

--color-brand-primary

Dark backgrounds, heading text on light surfaces

#1E293B

Slate

--color-brand-slate

Gradient endpoints, secondary dark

#F59E0B

Accent

--color-brand-accent

CTAs, awards, premium accents

#10B981

Highlight

--color-brand-highlight

Success states, data highlights

Purple Accent

#6B46C1

Purple

--color-brand-purple

Accent colour

#553C9A

Purple Dark

--color-brand-purple-dark

Hover states

#8B5CF6

Purple Light

--color-brand-purple-light

Badges, secondary highlights

ICWiT (Women in Trading)

#93C572

Pistachio

--color-brand-pistachio

ICWiT primary brand colour

#E91E63

Pink

--color-brand-wit-pink

ICWiT secondary / accent

Neutrals

#F8FAFC

Surface

--color-brand-surface

Section backgrounds

#64748B

Muted

--color-brand-muted

Body text on light backgrounds

#E1E8EF

Foreground

--color-brand-foreground

Primary text on dark surfaces

#9CA3AF

Foreground Muted

--color-brand-foreground-muted

Muted text on dark surfaces

Typography

Display


Archivo

Headings (h1, h2). Loaded via Google Fonts.

The quick brown fox jumps over the lazy dog

Sans


Albert Sans

Body text and UI elements. Loaded via Google Fonts.

The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Mono


System Monospace

Code snippets, data, and technical content. Uses system monospace fonts.

The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Component Examples

Buttons

Cards

Light Card

Standard card on white background with subtle border.

Dark Card

Inverted card for hero sections and dark backgrounds.

Hero Section (Dark)

Heading on dark background

Body text on dark background uses gray-300 for comfortable reading contrast.

How This Works

Brand values are defined in CSS custom properties. To change a colour, edit src/styles/globals.css and rebuild.

Source of truth: src/styles/globals.css
Consumed via: Tailwind classes (e.g. bg-brand-primary, text-brand-accent)
Never: hardcode hex values in components