--color-primary
Buttons, links, key actions
bg-primary · text-primary
Design system
ECSESS brand & UI
Single source of truth for this site: semantic greens in app.css, Saira for type, and shared
primitives (Button, Chip). No numbered color ramps—only named tokens.
Color palette
All tokens are opaque hex values in @theme. Pair
foreground to background using the rules in app.css (e.g. text-base-content on bg-base).
--color-primary-content
Text on primary & highlights
bg-primary-content · text-primary-content
--color-primary-background
Deepest chrome (nav, footer)
bg-primary-background · text-primary-background
--color-primary-hover
Hover / pressed
bg-primary-hover · text-primary-hover
--color-primary-soft
Cards & panels
bg-primary-soft · text-primary-soft
--color-accent
Highlights
bg-accent · text-accent
--color-accent-content
Text on accent
bg-accent-content · text-accent-content
--color-base
Default page surface
bg-base · text-base
--color-base-content
Body text on dark surfaces
bg-base-content · text-base-content
--color-muted
Badges, secondary fills
bg-muted · text-muted
--color-border
Hairlines & dividers
bg-border · text-border
--color-ring
Focus-visible rings
bg-ring · text-ring
Quick pairs
primary / primary-content
accent / accent-content
base / base-content
muted / accent-content
Logo marks
Placeholder lockups for documentation. Use the official ECSESS assets in production.
E
Primary
ECSESS
Default full mark + word context.
ECS
Compact
ECSESS Council
Tight spaces, nav, or small UI.
E
Monochrome
Single-ink
Print / one-color constraints.
Typography
Saira for UI and headings; Noto Sans Symbols as fallback. Weights 500–800 are used across the site.
Display
ECSESS
H1
Page title
H2
Section title
H3
Subsection
Body
Body copy for descriptions and longform content.
Small
Captions & metadata
Output
Electrical, Computer & Software Engineering Students Society
Components
Primitives used across routes. Variants follow the same tokens as the rest of the system.
Buttons
Chips
Announcements Workshops Resources
Example card
Featured
Mentorship office hours
Weekly drop-in sessions for coursework and career questions.
Range (forms)
Layout & motion
Radius and focus tokens are defined in @theme. Motion
respects prefers-reduced-motion globally.
Radius
rounded-control— 8px, controls & inputsrounded-panel— 12px, cards & panels
Focus
Use ring-ring or ring-muted with ring-offset-base or ring-offset-primary-background on dark bars.