THEALTERNATIVESCHOOL / DESIGN SYSTEM
Design System
A living reference for TheAlternativeSchool: colours, typography, components, and page layouts across desktop, tablet, and phone.
01 / COLOURS
Project palette
Use the project colour styles, not manually copied hex values.
Black
Gray
Golden
Gray White
White
Border
Text Secundary
Red Fill
Red
02 / TYPOGRAPHY
A clear voice, at every scale
Inter is the project font. Reuse named text styles by role. Specimen values below describe desktop; tablet and phone use each style’s responsive settings.
DISPLAY / HERO · 42 / 105
The page title above demonstrates the /Display/Hero text style.
DISPLAY / SECTION · 34 / 110
Creative Futures
HEADING / H3 · 28 / 116
The people behind the ideas
HEADING / H4 · 22 / 122
Learning across disciplines
HEADING / CARD TITLE · 20 / 122
A Brief A Month
BODY / LARGE · 18 / 155
A global learning experience for creative people who want to see further.
BODY / DEFAULT · 16 / 160
Ideas, craft and cultural insight come together through talks, workshops and real briefs.
BODY / SMALL · 14 / 150
Additional information appears in a quieter rhythm.
UI / NAVIGATION · 16 / 120
THE SCHOOL FOR TALENTS EVENTS NEWS
UI / BUTTON · 15 / 15
Explore the program
UI / LABEL · 12 / 120
NEWS · 24 SEPTEMBER 2026
03 / COMPONENTS
Components in use
Linked examples from the project catalog. Use each component's controls and variants when building new pages.
Buttons and actions
Editorial and program cards
URSUS Cooler Daytime Promotion Campaign
Aurora Duo
05 / SITE ELEMENTS
Shared interface
Navigation and Footer belong to the shared site shell. The examples below stay linked to the same component catalog used across TheAlternativeSchool.
100 scholarships. 4 briefs. Apply by 5.11. 5 weeks. 44 speakers. 25 countries. Learn at quantum speed. The world at your fingertips.
THANK YOU, PARTNERS
06 / LAYOUT
The page grid
The content container is fluid up to 1440 px. Desktop page gutters are 32 px. Major sections use a 56 px vertical rhythm, while content groups use 24 px or 32 px according to the reference section.
DESKTOP / 1200
Three or four content columns where the card width permits. Keep generous page gutters and bounded text.
TABLET / 810
Reduce column count. Preserve heading hierarchy, media relationships, and the primary action.
PHONE / 390
Stack cards into one readable column. Keep content order, forms, and important links visible.
07 / SPACING
A measured rhythm
Use the nearest matching section as the reference. These values describe the established spacing relationships in this project.
8 px · Tight pairing
16 px · Within compact groups
24 px · Card and section content
32 px · Columns and grids
56 px · Major section rhythm
08 / CATALOG
The complete component catalog
Site shell: Nav, Footer, Announcement, Hero Carousel, Sidebar, Partners, Share.
Content: Card News, Card Speaker, Card Program, Card Brief, Card Work, Card Alumni, Card Newsletter.
Actions and forms: Button, Submit Button, Newsletter Form, Forms Briefs, All Components, Icons.
09 / USAGE
Rules for new pages
Use linked components and their controls. Keep unique editorial wrappers local. Change shared defaults only for a site-wide update.
Write TheAlternativeSchool as one word. Choose text styles by content role, keep one H1, and bind CMS lists to their collection fields.
Use relevant project or supplied imagery, meaningful alternative text, and working interactions. Check desktop, tablet, phone, and widths between them.
10 / PAGE PATTERNS
Reference pages
Hero, editorial grids, speakers, partners, and sidebar.
Long-form sections, text and media, briefs, and work.
CMS list and article patterns.
Event indexes and detail-page composition.