SelexIQ Impact
Phase 1 · Foundation

The SelexIQ Impact Design System

A bespoke foundation — brand tokens, fluid typography, premium navigation and reusable components — built for a world-class, internationally competitive platform. This page previews every primitive before Phase 2 applies them to the homepage.

View live foundationBook a Fit Review
Colour Architecture
Verified contrast

Navy for authority, teal for innovation, gold sparingly

Every pairing meets WCAG 2.2 AA. Teal is reserved for graphical elements and buttons — never body text on white.

Midnight Navy#071D49

Authority, backgrounds

Deep Blue#142D55

Gradients, depth

Impact Teal#00A9A1

Innovation, actions

Gold Accent#F5B400

Verified seals, sparingly

Soft White#F7F9FC

Content canvas

Pure White#FFFFFF

Cards, surfaces

Fluid Typography
Display · Sora

Headings

Hero · clamp(34–76px)

Lead with impact

Section · clamp(28–56px)

Verified, student-led work

Sub · clamp(22–32px)

A pathway from idea to legacy

Body · Manrope

Text

Standard body — 18px / 1.6 line-height. SelexIQ Impact helps students design, lead and document authentic community projects.

Small body — 16px / 1.5. Used for supporting copy, captions and dense layouts.

Eyebrow · DM Sans · 13px tracked

font-mono — code & metrics

Buttons
Interactive primitives

Primary, navy, gold, ghost & link

Status & States
Status indicators

Badges

VerifiedCompleteIn progressNeeds attentionConsent required
Async feedback

Loading · Empty · Error

Loading…

No projects

Projects appear here once approved.

Failed to load

Card System
Portfolio of impact

Programme & project cards

4:5 programme pathways and 16:10 project showcases, each with an optional verified-impact seal.

Verified
Step 02·2 weeks

Design Sprint

Shape a real project idea with structure, mentors and an NGO brief.

Explore pathway
Step 04·8–12 weeks

Impact Builder

Sustain, document and verify the project's real community impact.

Explore pathway
Verified impact
WaterAid Partner

Clean Water Access Initiative

A student-led partnership delivering verified water access in a partner community, documented with NGO sign-offs.

Partner communityView project
Verified Impact
Evidence, not claims

Impact statistics

The gold seal appears only when supporting evidence exists. No invented numbers ship to production.

120+
Student-led projectsDocumented with NGO partners
48
NGO partnersAcross 6 regions
—
Admissions guaranteedNone. Ever.
100%
Consent & safeguardingBuilt into every pathway

Sample figures shown for layout preview only — real metrics arrive with verified evidence in Phase 5.

Verification Timeline
The evidence engine

Interactive project lifecycle

Nodes expand to reveal evidence. Completed milestones use gold; in-progress use teal.

  1. 01

    A guided conversation confirms SelexIQ is the right pathway for the student.

    Evidence: Fit summary signed by family
  2. 02

    The student shapes a real project idea with structure, mentors and an NGO brief.

    Evidence: Project brief + mentor sign-off
  3. 03

    The project launches with mentor checkpoints and safeguarding in place.

    Evidence: Pending — milestone review
  4. 04

    Sustain, document and verify the project's real community impact.

Overlays & Wayfinding
Modals

Dialog component

Accessible, portal-rendered, escape-to-close, scroll-locked.

Breadcrumbs

Wayfinding

Foundation complete.

Design tokens, typography, navigation, layouts and reusable components are ready. Phase 2 builds the cinematic homepage on top of this system.

Back to site