Synthèse
Institutional and clinical with a disciplined digital arts aesthetic. High-contrast white content cards with rich photography sit on a deep black canvas. Structured three-column grids and generative slash patterns reinforce a rigorous technical foundation.
Visit siteColour
Background#000000
Text#ffffff
Accent#ff6625
Surface#ffffff
Muted#999999
Typefaces
- Display
- Basis Grotesque Pro
- Body
- BasisGrotesquePro
- Mono
- —
- Source
- self_hosted
- Scale
- 12 · 16 · 18 · 20 · 22 · 28
Layout
- Grid
- —
- Container
- —
- Spacing base
- 4px
- Radius
- 0px · 4px
Capture
- Category
- education
- Sections
- 7
- Captured
- 2026-08-30
- Rhythm
- dark x7
Type rules
- display headlines set in bold sentence-case grotesk at 58px
- body text set at 16px with 1.5 line height across cards and metadata
Colour rules
- deep black background anchors all sections across the entire page
- pure white card surfaces contain all content items and photography
- orange and purple gradients reserved for pill buttons and footer dividing rules
Voice rules
- headlines state resource categories or service directories plainly
- call-to-actions follow a consistent view all pattern with directional arrows
Holds it together
- content cards must pair a crisp white top container with lower contextual photography
- repetitive 3-column grids organize news, services, and educational programs uniformly
- orange accents are restricted to section micro-links, footer dividers, and action buttons
Contrast
text on background21.0:1 AAA
muted text on background7.4:1 AAA
accent on background7.2:1 AAA
background on accent7.2:1 AAA
Type, measured
- Body
- 16px / 1.5
- Measure
- 87 characters
- Display
- 58px / 1.1
- Tracking
- 0em display
- Scale ratio
- 1.38
Voice
- Tone
- institutional, informative
- Sentences
- medium
- Person
- first
- Vocabulary
- technical
- Calls to action
- explore, view, learn
Built with
- Builder
- —
- Framework
- next
- Motion
- —
- WebGL
- —
- Nav
- sticky_top_bar, 1 items, sticky
- Length
- 5.4 screens
Sections in page order
3 marked strong · 7- 00
hero
Somber, dark-tinted architectural hero overlay announcing an organizational status with minimal typography and a subtle gradient CTA.
- Mood
- clinical + quiet
- Layout
- 1 col · full bleed · airy
- 01
hero
StrongAustere dark hero defined by stark grotesque typography set against a dynamic generative field of rotating tick marks.
- Mood
- clinical + raw
- Layout
- 12 col · split · airy
- 02
feature grid
StrongA structured grid of cards pairing clean sans-serif typography above workplace photography.
- Mood
- clinical + editorial
- Layout
- 3 col · grid · balanced
- 03
showcase
High-contrast editorial article cards featuring sharp documentary photography floating above a bold section headline on pure black.
- Mood
- editorial + clinical
- Layout
- 24 col · grid · balanced
- 04
showcase
Clean editorial cards with rounded corners rest above a high-contrast dark banner introducing featured options.
- Mood
- editorial + quiet
- Layout
- 24 col · grid · balanced
- 05
showcase
Structured three-card showcase displaying technical creative topics with stark typographic headers above rich cinematic imagery.
- Mood
- quiet + clinical
- Layout
- 24 col · grid · balanced
- 06
footer
StrongA dark compartmentalized footer divided by thin orange rules, anchoring social links, site navigation, and a bright white newsletter signup card.
- Mood
- clinical + quiet
- Layout
- 3 col · split · balanced
