Design System

ECSESS Branding

This page documents the visual language of the ECSESS website — colours, typography, spacing, border-radius, rings, and UI patterns — so contributors can build with consistency.

01

Colour Palette

All colours live under the --color-ecsess-* CSS custom-property namespace. Click any swatch to copy the hex value.

Light Shades

Backgrounds & Cards

Mid-Light Shades

Borders & Hover States

Mid Shades

Accents & Interactive Elements

Mid-Dark Shades

Text on Light Backgrounds

Dark Shades

Text & Dark Backgrounds

Black Variants

UI Surfaces & Navigation

02

Typography

The site uses a single font family: Saira (weights 100 – 900) with Noto Sans Symbols as a fallback for special characters.

Saira — Alphabet & Numerals

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( ) — « »

Heading Scale

Page Title

.page-title — 3xl / 4xl / 6xl • font-bold

Heading 1

h1 — 2xl / 3xl • font-bold

Heading 2

h2 — xl / 2xl • font-bold

Heading 3 (in .typography)

.typography h3 — xl • font-bold • leading-relaxed

Font Weights

Thin

font-thin (100)

Light

font-light (300)

Medium

font-medium (500)

Semibold

font-semibold (600)

Bold

font-bold (700)

Extrabold

font-extrabold (800)

Black

font-black (900)

Text Size Scale

The quick brown fox

text-xs — 12px / 0.75rem

The quick brown fox

text-sm — 14px / 0.875rem

The quick brown fox

text-base — 16px / 1rem

The quick brown fox

text-lg — 18px / 1.125rem

The quick brown fox

text-xl — 20px / 1.25rem

The quick brown fox

text-2xl — 24px / 1.5rem

The quick brown fox

text-3xl — 30px / 1.875rem

ECSESS

text-4xl — 36px / 2.25rem

ECSESS

text-6xl — 60px / 3.75rem

Letter Spacing & Line Height

McGill University ECSESS

tracking-tight — Compact headings

McGill University ECSESS

tracking-normal — Default body text

McGill University ECSESS

tracking-wide — Subtle spread

ECSESS DESIGN SYSTEM

tracking-widest — Label & eyebrow text

03

Spacing

The Tailwind spacing scale is used throughout. Gaps and paddings are always expressed as Tailwind utility classes — never arbitrary values.

p-1 / gap-1

0.25rem / 4px

p-2 / gap-2

0.5rem / 8px

p-3 / gap-3

0.75rem / 12px

p-4 / gap-4

1rem / 16px

p-6 / gap-6

1.5rem / 24px

p-8 / gap-8

2rem / 32px

p-12 / gap-12

3rem / 48px

p-16 / gap-16

4rem / 64px

Common Margin & Padding Patterns

mx-auto

Centre block horizontally — used on every section container

p-4

Base component padding — buttons, cards, nav items

px-6 py-3

Button padding (horizontal 24 px, vertical 12 px)

gap-4 / gap-3

Card grid gutters & nav spacing

py-6

Section inner vertical breathing room

max-w-5xl / max-w-7xl

Content width constraint on wide screens

04

Border Radius

Rounded corners are used consistently across components — from tiny badges to large section cards.

rounded-none

0px

rounded-sm

2px

rounded-md

6px

rounded-lg

8px

rounded-xl

12px

rounded-2xl

16px

rounded-full

9999px

05

Rings & Focus States

Rings replace traditional borders for interactive elements. They layer cleanly over any background without shifting layout.

ring-1

Subtle border-like outline

ring-2

Focus / hover state outline

ring-offset-2

Focus ring with offset

Pulse-ring animation (animate-pulse-ring)

Used on mobile council cards to indicate interactivity — the ring pulses in opacity on a 1.5 s loop.

06

UI Component Patterns

Living examples of recurring UI elements — buttons, badges, cards, nav links, blockquotes, and code snippets — rendered exactly as they appear on the site.

Buttons

Badges & Pills

Upcoming Technical Past Event Tag / Role

Card Variants

Resource Card

Light background card used in the resources listing.

Council Card

Vice-President, Technology

VP

Dev Card

VP Tech Dev

U3

“Building the site one PR at a time.”

Blockquote

“Empowering every ECSE student at McGill — academically, technically, socially, and professionally.”

Code & Keyboard Tokens

--color-ecsess-600 .typography ⌘ K

Section Gradient Patterns

Each page section uses a directional gradient constructed with three Tailwind classes passed as props to the <Section> component.

Hero

from-ecsess-black

via-ecsess-950

to-ecsess-900

Office Hours

from-ecsess-900

via-ecsess-650

to-ecsess-700

Sponsors

from-ecsess-700

via-ecsess-750

to-ecsess-800

Footer / Close

from-ecsess-800

via-ecsess-850

to-ecsess-black

07

Animations

Two custom keyframe animations are defined in the theme — hover them to trigger.

E

animate-wiggle

Hover to trigger

rotateY ±2.4° / 0.5 s ease-in-out

E

animate-pulse-ring

Always running

opacity 0.5 → 1 / 1.5 s infinite