Color Palette
This color system is structured around semantic groups — Primary, Secondary, Accent, Text, Background, and Shadows — each serving a distinct role in the visual hierarchy. Designed for contrast accessibility, semantic clarity, and scalability.
Primary Colors
Built on a bold blue (#0378B8) that anchors the brand identity. It scales across five stops to cover interactive UI components through near-white background washes — all communicating trust and action.
Secondary Colors
A vibrant green (#23CE6B) serves as the primary call-to-action color, communicating positivity, progress, and confirmation — used wherever a user needs to take a key action.
Accent Colors
A coral-orange (#FC7C53) providing warmth and visual energy against the cooler primary and secondary palettes. Used for illustrations, highlights, and drawing attention to important UI moments.
Text Colors
Purpose-built for legibility across different contexts. Each stop serves a specific typographic role — from headlines to helper text — ensuring clear visual hierarchy.
Background Colors
Two neutral backgrounds provide surface options without competing with content — one with a branded blue tint, one with a clean warm gray.
Shadows and Overlays
A deep blue-black used for drop shadows, overlay backdrops, and modal scrims. Its blue undertone keeps it harmonious with the cool-primary palette.
Typography
Two typefaces define the system: Raleway (Bold) for all headings and display text, and Lato for body, UI labels, buttons, and captions. Toggle between desktop and mobile specs below.
| Style | Specs | Specimen |
|---|---|---|
| Title / Header (H1) | Family: RalewayWeight: BoldSize: 64pxLetter Spacing: -2%Line height: 120% | Title / Header (H1) |
| Header 2 (H2) | Family: RalewayWeight: BoldSize: 40pxLetter Spacing: -2%Line height: 130% | Header 2 (H2) |
| Header 3 (H3) | Family: RalewayWeight: BoldSize: 28pxLetter Spacing: -2%Line height: 130% | Header 3 (H3) |
| Subtitle | Family: LatoWeight: BoldSize: 24pxLetter Spacing: 0%Line height: 160% | Subtitle |
| Body Large | Family: LatoWeight: RegularSize: 20pxLetter Spacing: 0%Line height: 160% | Body Large |
| Body Regular | Family: LatoWeight: RegularSize: 16pxLetter Spacing: 0%Line height: 160% | Body Regular |
| Body Small | Family: LatoWeight: RegularSize: 14pxLetter Spacing: 0%Line height: 160% | Body Small |
| Button | Family: LatoWeight: BoldSize: 16pxLetter Spacing: 3%Line height: 160%Case: Uppercase | BUTTON |
| Overline (pre text) | Family: LatoWeight: BoldSize: 14pxLetter Spacing: 3%Line height: 160%Case: Uppercase | OVERLINE (PRE TEXT) |
| Caption | Family: LatoWeight: RegularSize: 14pxLetter Spacing: 0%Line height: 160% | Caption |
| Link | Family: LatoWeight: BoldSize: 16pxLetter Spacing: 0%Line height: 160%Decoration: Underline | Link |
| Style | Specs | Specimen |
|---|---|---|
| Title / Header (H1) | Family: RalewayWeight: BoldSize: 32pxLetter Spacing: -2%Line height: 120% | Title / Header (H1) |
| Header 2 (H2) | Family: RalewayWeight: BoldSize: 24pxLetter Spacing: -2%Line height: 130% | Header 2 (H2) |
| Header 3 (H3) | Family: RalewayWeight: BoldSize: 22pxLetter Spacing: -2%Line height: 130% | Header 3 (H3) |
| Subtitle | Family: LatoWeight: BoldSize: 20pxLetter Spacing: 0%Line height: 160% | Subtitle |
| Body Large | Family: LatoWeight: RegularSize: 18pxLetter Spacing: 0%Line height: 160% | Body Large |
| Body Regular | Family: LatoWeight: RegularSize: 15pxLetter Spacing: 0%Line height: 160% | Body Regular |
| Body Small | Family: LatoWeight: RegularSize: 14pxLetter Spacing: 0%Line height: 160% | Body Small |
| Button | Family: LatoWeight: BoldSize: 16pxLetter Spacing: 3%Line height: 160%Case: Uppercase | BUTTON |
| Overline (pre text) | Family: LatoWeight: BoldSize: 14pxLetter Spacing: 3%Line height: 160%Case: Uppercase | OVERLINE (PRE TEXT) |
| Caption | Family: LatoWeight: RegularSize: 14pxLetter Spacing: 0%Line height: 160% | Caption |
| Link | Family: LatoWeight: BoldSize: 16pxLetter Spacing: 0%Line height: 160%Decoration: Underline | Link |
Typography System
The type system uses two typefaces — Raleway for headings and Lato for all body and UI text — creating a clear distinction between structural hierarchy and readable content. Both scale predictably across desktop and mobile breakpoints.
Typeface Roles
Raleway is used exclusively for display and heading levels (H1-H3). Its geometric letterforms and tight letter spacing give headlines authority and brand personality without sacrificing legibility at large sizes.
Lato handles everything below the heading level — subtitles, body copy, buttons, labels, captions, and links. Its neutral, humanist character makes it highly readable across sizes.
Heading Scale
The heading scale uses negative letter spacing (-2%) across all three levels, which tightens the rhythm of large text and gives headlines a polished, editorial feel. Line heights are consistent at 120% for H1 and 130% for H2 and H3, keeping multi-line headings compact.
Title / Header (H1)
The largest typographic element on the page — 64px on desktop, scaling to 32px on mobile. Used for page titles, hero headlines, and any primary section header that needs to command immediate attention.
Header 2 (H2)
40px desktop / 24px mobile. Used for major section titles and content groupings within a page.
Header 3 (H3)
28px desktop / 22px mobile. Used for subsections, card titles, and content blocks that need hierarchy without the weight of an H1 or H2.
Body and Content Scale
The body scale is built on Lato Regular and Bold, with 0% letter spacing and a generous 160% line height throughout — a deliberate choice that improves readability for longer content and gives the layout breathing room.
Subtitle
Lato Bold at 24px (desktop) / 20px (mobile). Sits between headings and body text, used for introductory statements, section lead-ins, and supporting context beneath a heading.
Body Large
Lato Regular at 20px (desktop) / 18px (mobile). Appropriate for lead paragraphs, feature descriptions, and any body copy that needs slightly more visual weight.
Body Regular
16px (desktop) / 15px (mobile) is the default text size for all standard paragraph content across the site.
Body Small
14px on both desktop and mobile handles secondary content — metadata, supplementary descriptions, and sidebar text.
UI Text
Button
Lato Bold at 16px with 3% letter spacing and uppercase casing. Wide tracking and uppercase treatment ensure buttons are scannable and feel distinct from surrounding body text, even at small sizes.
Overline (Pre Text)
Lato Bold at 14px, also uppercase with 3% letter spacing. Used as a label that appears above a heading or content block to provide category context.
Caption
Lato Regular at 14px with standard spacing. Used for image captions, footnotes, helper text beneath form fields, and any supporting detail that needs to be present but visually subordinate.
Link
Lato Bold at 16px with underline decoration, matching Body Regular in size so it sits naturally within body copy. Bold weight and underline together ensure links are accessible and distinguishable without relying on color alone.
Desktop vs. Mobile
The type scale reduces proportionally on mobile, with headings seeing the largest reductions (H1 drops from 64px to 32px) while body and UI styles remain mostly unchanged. Letter spacing, line heights, and font weights remain identical across breakpoints, keeping the system consistent and predictable.
Buttons
Four button tiers organized by interaction priority. Green-filled buttons use #23CE6B background with #1E212C dark text. Hover any button to see the live interaction state.
Buttons
Action Button / CTA
Tier 1Profit button — what the business wants.
Example: buy now, sign up
Primary Action
Tier 2Helps user complete their journey — highlights the most important actions.
Example: next, accept cookies, send
Secondary Action
Tier 3Alternative to the primary action.
Example: go back, skip, cancel
Tertiary Action / Plain Button / Chips
Tier 4Less important or miscellaneous actions.
Example: edit, add & other badges
Button States
| Button | Default | Hover | Disabled |
|---|---|---|---|
| Read MoreT4 — Text link | |||
| Text GreenT3 — Text green | |||
| Text LabelT3 — Text dark | |||
| Learn MoreT3 — Outlined blue | |||
| Next (CTA)T2 — Primary green | |||
| Buy NowT1 — CTA | |||
| Accept CookiesT2 — Primary navy | |||
| Cookies SettingsT3 — Outlined green | |||
| BadgesT4 — Chips |
Button System
Buttons are organized into a three-tier hierarchy based on their role in the user journey, plus a badge/chip component for non-navigational labels. Every button variant is defined across three interaction states: Default, Hover, and Disabled.
Button Hierarchy
Action Button / CTA
The highest-priority button in the system. It represents the action the business most wants the user to take — a conversion moment. CTA buttons use the Secondary Color (#23CE6B) filled background with #1E212C dark text, making them the most visually dominant interactive element on any screen.
Use for: Buy Now, Sign Up, Get Started, Subscribe. Only one CTA button should appear in a given visual context to avoid competing calls to action.
Primary Action
Primary action buttons help users complete the core task of their current journey. This tier includes two visual styles — the green filled variant (#23CE6B, used for forward-progression actions like Next) and the dark navy filled variant (#004D88, used for consent and confirmation actions like Accept Cookies).
Use for: Next, Accept Cookies, Send, Submit, Confirm.
Secondary Action
Secondary actions provide an alternative path — they support the user without competing with the primary or CTA button. This tier uses outlined or text-only styles to deliberately carry less visual weight. Outlined Blue: #0492E0 border and text. Outlined Green: #23CE6B border / #1FB45E text. Text Dark: #1E212C. Text Green: #1FB45E. All four communicate optionality — the user can take these actions, but they are not the expected or preferred path.
Use for: Learn More, Go Back, Skip, Cancel, Cookies Settings, secondary navigation links.
Tertiary Action / Plain Button / Chips
The lowest tier handles miscellaneous, contextual, or filtering actions. Badge Blue: #D7F1FE bg / #004D88 text. Badge Orange: #FFEFEA bg / #FB5D2A text. Badge Green: #E2FAEC bg / #1FB45E text. Read More: #0492E0 text.
Use for: Category tags, status indicators, content chips, edit/add actions, inline read more links.
Button States
Default
The resting state. Filled buttons show their full background color. Outlined show border and colored text. Text buttons show the colored label with no container.
Hover
A background wash appears on text and outlined buttons. Filled buttons shift to their Secondary Medium or Primary Medium hover color, providing a clear but non-jarring response to cursor interaction.
Disabled
Fill, border, and text reduce to muted, low-opacity versions of the default state. Communicates unavailability while preserving the button's visual footprint so the layout doesn't reflow.
Usage Principles
Header and Footer Navigation
Super Purposes navigation system — desktop header, mobile closed and open drawer states, and full footer with newsletter, link columns, and social icons.
Desktop header
Mobile navigation
Get the best of Super Purposes with our Newsletter!
Let's Connect
Get the best of Super Purposes with our Newsletter!
Footer navigation
Get the best of Super Purposes with our Newsletter!
Let's Connect!
UI Elements
Quick-reference for all interactive and form components used across the product.
Button quick reference
Chips and links
Semantic badges
Form Inputs
Form Design
The Super Purposes contact form follows a consistent field structure using Primary Light 2 (#F0FAFF) as the form background, white input fields with a #0492E0 Primary Medium border, and the green CTA Submit button to close the interaction.
Field Types
Text Input
First Name, Last Name, Email, Phone Number (optional). White fill, rounded corners (8px), #0492E0 border, Lato Regular 16px placeholder.
Select Dropdown
Subject field. White fill with chevron-down icon, same border treatment as text inputs. Placeholder: "Please Select" in #828799 Subtle Text.
Textarea
Message field. Taller multi-line variant matching the same border, radius, and fill as text inputs. Resizable vertically.
Checkboxes
Two consent checkboxes: "Please send me Newsletters" and "I have read and received the privacy policy". Labels in Lato Bold 14px, #1E212C Dark text.
Labels and Layout
Field Labels
Lato Bold 16px, #1E212C Dark. Positioned above each input with 6px gap. Two-column layout for First Name and Last Name; single-column full-width for all other fields.
Form Container
Background: Primary Light 2 #F0FAFF. Border: 1.5px solid #0492E0. Padding: 28px. Border-radius: 12px. Fields stacked with 20px vertical gap.
Submit Button
Full-width Tier 1 CTA button. Background: #23CE6B Secondary Color. Text: #1E212C Dark. Lato Bold 16px Uppercase. Hover: #1FB45E.
Color Tokens
Testimonial Cards
Testimonial Card
The Super Client Success Stories component uses full-bleed portrait photography with a semi-transparent dark overlay at the bottom of each card. Quote, name, role, company, and star rating are layered over the image — keeping the person as the visual focus while surfacing the social proof details beneath.
Card Anatomy
Portrait Image
Full-bleed vertical photo fills the entire card. Aspect ratio approximately 3:4 (portrait). Border-radius: 8px on the card container. Image covers 100% width and height — object-fit: cover.
Overlay Panel
Semi-transparent dark panel at the card bottom. Background: #1E212C Dark at ~85% opacity. Padding: 16px. Contains the quote, name, role, company, and rating — all in white text.
Quote Mark
Large decorative opening quotation mark in #23CE6B Secondary Color. Positioned before the quote text — adds brand personality and visual hierarchy to the testimonial.
Typography in Card
Quote Text
Lato Regular 14px, #FFFFFF White. Line height 160%. Displayed in 2–3 lines. Italic style optional for emphasis.
Name
Lato Bold 14px, #FFFFFF White. Displayed above role and company.
Role and Company
Lato Regular 13px, #FFFFFF White. Two lines: job title on line one, company name on line two.
Star Rating
Numeric score and filled star icon displayed inline at the bottom-right of the overlay panel. Number in Lato Bold 16px White. Star icon in #F5A623 Amber — the single accent outside the brand palette used for rating systems.
Section Header
Section title "Super Client Success Stories" uses Raleway Bold H2 style — 40px desktop / 24px mobile, Title Text color #04669C. Cards sit in a 3-column equal-width grid with 20px gap. White page background.
Color Tokens
Countdown Hero Banner
Countdown Hero Banner
The countdown hero uses a full-bleed editorial photograph as a background, with a semi-transparent white-bordered overlay panel centered over the image. Inside the panel, a headline and four time-unit tiles (Days, Hours, Minutes, Seconds) create urgency and visual rhythm. The combination of #004D88 Primary Dark numbers and #FB5D2A Accent Dark unit labels reflects the brand's primary and accent palette in action.
Background and Overlay
Hero Image
Full-bleed editorial photo spanning 100% width. object-fit: cover, fixed height ~480px desktop. The photo provides atmospheric depth and contrast for the white overlay panel placed on top.
Overlay Panel
Centered transparent panel with a white border (1.5px solid #FFFFFF). Padding: 32px 40px. No fill — allows the photo to show through while framing the countdown content. Border-radius: 4px.
Headline
"Countdown to Launch Your Career Changer Journey!" — Raleway Bold, H2 scale (40px desktop). Color: #FFFFFF White for high contrast against the dark photo background. Centered alignment. Sentence case with trailing exclamation.
Timer Tiles
Tile Container
White card (#FFFFFF fill), border-radius 8px, padding 16px 20px, drop shadow for lift. Four tiles displayed in a horizontal row with equal spacing.
Number
Raleway Bold ~64px, color #004D88 Primary Dark. Large and bold to command immediate attention and communicate urgency.
Unit Label
Lato Bold, Overline style — 14px, uppercase, 3% letter spacing. Color: #FB5D2A Accent Dark. Sits below the number within the tile.
Separator
Two vertically stacked bullet dots (•) in #FFFFFF White sit between each timer tile as separators, providing rhythm without visual weight.
Live Tile Preview
Color Tokens
Pull Quote Card
Pull Quote Card
The pull quote card is a horizontal two-column component — a portrait photo on the left and a large text quote with attribution on the right. It uses a light bordered container (#F0FAFF or white fill with a subtle border), large decorative curly quotation marks in #004D88 Primary Dark, and centered body text with bold name and regular role attribution below.
Card Structure
Card Container
White or #F0FAFF fill. Border: 1px solid rgba(0,0,0,0.08). Border-radius: 12px. Horizontal two-column layout — portrait left (~35% width), quote right (~65% width). Padding: 24px on the quote side.
Portrait Image
Square or portrait crop filling the left column. Border-radius applied to the left side only (12px on top-left and bottom-left corners). object-fit: cover, full column height.
Quotation Marks
Large decorative curly opening “ and closing ” quote marks in #004D88 Primary Dark. Font-size ~48–64px. The opening mark precedes the quote text; the closing mark follows the last word inline. They anchor the quote visually within the white right panel.
Typography
Quote Text
Lato Regular, Body Large — 20px desktop, 160% line height. Color: #424551 Body Text. Center-aligned within the quote panel. Multi-line, spanning 3–5 lines for readability.
Name
Lato Bold 18px. Color: #1E212C Dark. Centered below the quote. Displayed without a title prefix.
Role / Title
Lato Regular 15px. Color: #828799 Subtle Text. Centered directly below the name. One line — job title only, no company.
Live Preview
I went through the process, got an offer which was more than I ever made in my entire life. If I didn’t do this program, I would have none of this. I firmly believe that.”
Marlie
Customer Goals Coach
Color Tokens
Timeline with Cards
Timeline with Cards
The "How Did We Get Here?" timeline is a vertical alternating layout — milestone cards flip left and right across a central vertical stem. A teal line (#0492E0 Primary Medium) runs the full height, punctuated by #23CE6B Secondary green dot nodes at each date marker. Cards may contain an image, a title, and a body description — all framed with a green border to keep them visually tied to the timeline accent color.
Stem and Nodes
Vertical Stem
A centered vertical line, 3–4px wide, color #0492E0 Primary Medium. Runs the full height of the timeline section. Acts as the structural spine connecting all milestone nodes.
Date Nodes
Filled circles on the stem at each milestone date. Fill: #23CE6B Secondary Color. Diameter ~16–20px. The date label (e.g. "Aug 2018") sits beside the node — Raleway Bold H3 scale, color #0378B8 Primary Color.
Milestone Cards
Card Container
White fill, border: 2px solid #23CE6B Secondary Color. Border-radius: 8px. Width ~45% of section. Alternates left and right of the stem for each successive milestone. Drop shadow optional for depth.
Card Image (optional)
Full-width image inside the card at the top, with the same 8px radius on top corners. object-fit: cover. Height ~140px. Some cards use a logo or branded image instead of a photo (e.g. Super Purposes inception card uses the brand logo).
Card Title
Lato Bold 16px, color #1E212C Dark. Centered within the card body. Separated from the image by 12px padding.
Card Body Text
Lato Regular 14px, color #424551 Body Text. Center-aligned, 160% line height. 2–4 lines describing the milestone. Padding: 12px 16px around body text.
Section Heading
"How Did We Get Here?" — Raleway Bold H2 (40px desktop). Color: #0378B8 Primary Color. Centered above the timeline stem. Provides a narrative anchor for the chronological content below.
Live Node + Card Preview
Super Purposes’ Inception
Superinterns.com became Super Purposes. The company was officially launched!
Color Tokens
Webinar Hero Section
Webinar Hero Section
The webinar hero combines a centered page title, a date subheading, and a two-column body — a green-bordered video thumbnail on the left and a feature list with a CTA on the right. The layout uses Primary Dark (#004D88) for headings, Secondary Green (#23CE6B) for borders, numbered badges, and the CTA button, with a light gray page background.
Page Header
Page Title
"Welcome to Your New Career Adventure!" — Raleway Bold H1 scale (64px desktop). Color: #1E212C Dark. Center-aligned. Full-width above the two-column content area.
Webinar Date Subheading
"Next Webinar: August 23, 11:30am PST" — Lato Bold Subtitle (24px). Color: #004D88 Primary Dark. Center-aligned below the title. Creates urgency and specificity for the event.
Video Thumbnail
Thumbnail Frame
Photo or video still image in the left column. Border: 3px solid #23CE6B Secondary Color. Border-radius: 8px. Width: ~50% of section. object-fit: cover to fill the frame.
Play Button Overlay
Centered circular play icon overlaid on the thumbnail. White circle fill, #FFFFFF background at ~70% opacity, with a filled white play triangle. Diameter ~56px. Triggers video playback on click.
Feature List
Section Subheading
"Exclusive training for Career Changers" — Raleway Bold H2 (40px desktop). Color: #004D88 Primary Dark. Left-aligned above the numbered list items.
Numbered Badges
Small square badge with rounded corners. Border: 2px solid #23CE6B Secondary Color. White fill. Number inside in Lato Bold 13px, color #1E212C Dark. Badge size ~24×24px.
List Item Text
Lato Regular 16px, color #424551 Body Text. Each item is a single line aligned beside its numbered badge. 16px vertical gap between items.
CTA Button
Tier 1 CTA — "RESERVE YOUR SPOT NOW!". Background: #23CE6B Secondary Color. Text: #1E212C Dark. Lato Bold 14px Uppercase, letter-spacing 3%. Wide pill-shaped button aligned right within the content column. Hover: #1FB45E.
Live Feature List Preview
Exclusive training for Career Changers
Color Tokens
Blog Card Grid
Blog Card Grid
The blog card grid displays article previews in a 2-column equal-width layout on a light blue-gray background (#F0FAFF). Each card features a top image, optional caption overlay, an article title in Primary Dark blue, a body excerpt, and a metadata row showing the publication date and reader count. A centered green "View More" CTA sits below the grid.
Section Heading
"Get Career Savvy With Our Insider Tips & Tricks" — Raleway Bold H2 (40px desktop). Color: #004D88 Primary Dark. Left-aligned above the card grid.
Card Container
Card Shell
White fill (#FFFFFF). Border: 0.5px solid rgba(0,0,0,0.08). Border-radius: 12px. Subtle drop shadow for lift. Padding: 0 on image, 16px 20px on text body. Equal-width columns with ~24px gap.
Hero Image
Full-width image at the card top. Border-radius 12px on top corners only. Height ~200–240px. object-fit: cover. No padding — image bleeds edge-to-edge within the card.
Image Caption Overlay
Optional pill-shaped caption badge overlaid at the bottom of the image. Background: #0378B8 Primary Color. Text: #FFFFFF White, Lato Regular 13px, center-aligned. Border-radius: 6px. Padding: 8px 14px. Positioned absolute over the image.
Card Content
Article Title
Lato Bold 18px. Color: #004D88 Primary Dark. 2–3 lines. 160% line height. Margin-top 12px below the image.
Body Excerpt
Lato Regular 15px. Color: #424551 Body Text. 3–4 lines maximum, with text clamped via -webkit-line-clamp: 4. 160% line height. Margin-top 8px below the title.
Metadata Row
Publication Date
Lato Regular 14px. Color: #0378B8 Primary Color. Left-aligned in the metadata row. Format: "Month DD, YYYY" (e.g. May 27, 2024).
Reader Count
Person icon + numeric count. Icon in #0378B8 Primary Color, Lato Regular 14px number beside it. Right-aligned in the metadata row. Metadata row sits at the card bottom with a top border separator.
Live Card Preview
View More CTA
Tier 1 CTA — "VIEW MORE". Background: #23CE6B Secondary Color. Text: #1E212C Dark. Lato Bold 14px Uppercase. Wide pill-shaped, center-aligned below the grid. Hover: #1FB45E.
Color Tokens
Icons and Grid Guidelines
Tabler outline icons and system graphic assets used throughout the design system.
Grid
DESKTOP GRID
Specs:
Columns
Count: 12
Type: Stretch
Width: Auto
Margin: 120
Gutter: 32
MOBILE GRID
Specs:
Columns
Count: 4
Type: Stretch
Width: Auto
Margin: 16
Gutter: 16
Layout
The Super Purposes layout system defines two primary frame widths — a 1440px desktop canvas and a 320px mobile canvas — both with auto height that expands to fit content. The frames below demonstrate how the grid, margins, and gutters sit within each viewport.
Desktop Layout
1440px width • auto height • 12 columns • margin 120px • gutter 32pxMobile Layout
320px width • auto height • 4 columns • margin 16px • gutter 16pxCommon icons
Graphics
The Super Purposes graphic system uses circular bubble cards arranged in a radial layout to present numbered process steps. Each bubble pair consists of an outer colored ring and an inner content circle — a numbered badge overlapping the top-left of each bubble anchors the sequence. Two CTA buttons sit at the center of the arrangement.
Bubble Card Anatomy
Outer Ring
A large filled circle forming the coloured border of the bubble. Each step has a unique accent color — green, navy, orange-red, blue, salmon. Diameter ~260px desktop. The inner content circle sits offset inside it, creating a thick ring effect on the visible edges.
Inner Content Circle
A slightly smaller white-fill circle (~220px) inset within the outer ring. Contains the step title and body text. Border: none. Background: #F0FAFF or near-white. Text is left-aligned with generous internal padding.
Number Badge
A small circle (~36px) overlapping the top-left junction of the outer and inner rings. Fill: #F0FAFF near-white. Border: 1.5px solid the matching step color. Number inside in Lato Bold 18px, color matching the step ring. Positions the sequence visually without cluttering the content area.
Radial Layout
Five bubbles arranged clockwise around a central axis: top center (1), top right (2), bottom right (3), bottom left (4), left (5). Two CTA buttons (Schedule a Meeting Now / Need More Info) sit at the center. Background: #EBF4FB light blue-gray.
Step Color Palette
Sourcing & Recruitment
#23CE6B — Secondary Color
Onboarding & Initiation
#004D88 — Primary Dark
Internship Program Dev.
#FC7C53 — Accent Color
Internship Management
#0492E0 — Primary Medium
Talent Pipeline
#FDA488 — Accent Medium
Typography Inside Bubbles
Step Title
Lato Bold 16–18px. Color: #1E212C Dark. Left-aligned inside the inner circle. 2 lines max.
Body Description
Lato Regular 13–14px. Color: #424551 Body Text. 160% line height. Max 4 lines to fit within the circular container.
Center CTA Buttons
Two buttons sit at the center of the radial layout. The primary CTA uses Tier 1 green fill. The secondary uses Tier 3 outlined style with #23CE6B border and dark text.
Color Tokens
Logo
The Super Purposes logo appears in two approved color versions — the Full Color version for use on white and light backgrounds, and the White Reversed version for use on dark, colored, or photographic backgrounds. Both versions maintain the same lockup structure: wordmark, logo mark, gradient line with dot, and trademark symbol.
Usage Rules
✓ Full Color — Use when
Background is white, off-white, or light gray. Sufficient contrast exists for #0378B8 blue. Print materials, letterheads, presentations on white slides.
✓ White Reversed — Use when
Background is dark, saturated, or photographic. Social media cover images, dark-theme UIs, event banners with imagery, merchandise on dark substrates.
✗ Never Do
Never place the full color logo on a dark or colored background. Never place the white logo on white or very light backgrounds. Never recolor either version in unauthorized colors.
✗ Never Modify
Do not stretch, rotate, or skew either version. Do not remove the trademark symbol. Do not apply opacity or transparency effects to the logo itself — use background overlays instead.
Accessibility
Super Purposes targets WCAG 2.1 AA compliance across all digital surfaces. This section documents how the design system's colors, typography, interactive components, and layout patterns meet or exceed accessibility requirements — and where elevated care is needed.
Color Contrast Ratios
WCAG AA requires a minimum 4.5:1 contrast ratio for normal text and 3:1 for large text (18px+ regular or 14px+ bold). WCAG AAA requires 7:1 for normal text. All text pairings below are verified at their intended usage sizes.
Primary palette contrast
| Pairing | Ratio | Level | Usage context |
|---|---|---|---|
Aa #004D88 on #FFFFFF |
9.73:1 | AAA ✓ | Primary Dark — badge text, high-contrast headings |
Aa #0378B8 on #FFFFFF |
5.39:1 | AA ✓ | Primary Color — nav borders, icons, UI elements |
Aa #0492E0 on #FFFFFF |
4.56:1 | AA ✓ | Primary Medium — link text, outlined button text & border |
Aa #FFFFFF on #004D88 |
9.73:1 | AAA ✓ | Primary Navy button — white text on dark navy fill |
Secondary & accent palette contrast
| Pairing | Ratio | Level | Usage context |
|---|---|---|---|
Aa #1E212C on #23CE6B |
8.04:1 | AAA ✓ | CTA & Primary Green button — dark text on green fill |
Aa #FFFFFF on #1FB45E |
3.27:1 | Large text only ⚠ | Secondary Dark — use white text only at 18px+ or bold 14px+ |
Aa #1E212C on #1FB45E |
6.40:1 | AA ✓ | Dark text on Secondary Dark — preferred pairing for green surfaces |
Aa #FFFFFF on #FB5D2A |
3.49:1 | Large text only ⚠ | Accent Dark — white text acceptable at large sizes only; prefer dark text |
Aa #FB5D2A on #FFEFEA |
4.76:1 | AA ✓ | Accent badge — orange text on light orange fill |
Text color contrast
| Pairing | Ratio | Level | Usage context |
|---|---|---|---|
Aa #424551 on #FFFFFF |
8.58:1 | AAA ✓ | Body Text — all paragraph content |
Aa #04669C on #FFFFFF |
7.13:1 | AAA ✓ | Title Text — H1/H2/H3 headings on white |
Aa #828799 on #FFFFFF |
3.79:1 | Large text only ⚠ | Subtle Text — captions & helper text; use only at 14px+ on white |
⚠ Subtle Text (#828799) — Use with care
Subtle Text (#828799) on white falls at 3.79:1, meeting AA only for large text (18px+ regular or 14px+ bold). Never use it for body copy under 14px or for any text conveying critical information. Apply only to captions, helper text, and metadata where it supplements — not replaces — accessible primary text.
Typography Accessibility
Font choices, sizes, weights, and spacing choices directly impact readability for users with low vision, dyslexia, or cognitive differences. The system's type decisions are documented here alongside their accessibility rationale.
Minimum Font Sizes
Body Regular (16px desktop / 15px mobile) and Body Small (14px) meet the widely recommended minimum of 14px for readable body text. No text in the system goes below 10px — token labels and metadata use 10–11px only for non-essential decorative or supplementary context.
Line Height & Readability
All body and UI styles use a 160% line height — matching WCAG SC 1.4.12 (Text Spacing) guidance of at least 1.5× line height for body text. Heading levels use tighter 120–130% line heights, which is appropriate for short multi-line headlines.
Humanist Typeface (Lato)
Lato's humanist letterforms with distinct character shapes (e.g. differentiated lowercase l, uppercase I, and numeral 1) reduce ambiguity for users with dyslexia or low vision compared to grotesque typefaces. Avoid using Lato in all-caps at body sizes below 16px — uppercase tracking at small sizes reduces legibility.
Links — Not Color Alone
The Link style (Lato Bold 16px, underline) uses both color (#0492E0) and underline decoration to distinguish links from surrounding body text. This satisfies WCAG SC 1.4.1, which prohibits relying on color alone to convey information. Never remove the underline from inline links.
✓ Uppercase Button Text — When it's acceptable
Button and Overline styles use uppercase (text-transform: uppercase). Uppercase is permissible for short interactive labels (1–4 words) because the bold weight and generous letter spacing (3%) preserve readability. Do not use uppercase on body copy, captions, or any text longer than 4–5 words — studies link extended uppercase body text to reduced reading speed.
Interactive Component Accessibility
Buttons, form inputs, navigation, and other interactive elements must meet both visual contrast requirements and keyboard/assistive-technology operability standards.
Button accessibility
✓ Click/Tap Target Size
All button variants use a minimum vertical padding of 11px plus their 13px font size, producing a rendered height of ≥ 37px. WCAG 2.1 SC 2.5.5 (AAA) recommends 44×44px targets; aim for 44px height in production implementations by increasing padding where needed. Chip/badge buttons (currently ~30px) should be reviewed at AA level — use padding to reach at least 32px height per WCAG 2.5.8 (AA, WCAG 2.2).
✓ Disabled State Visibility
Disabled buttons use muted background and text colors. Contrast between the disabled state and surrounding background need not meet 4.5:1 per WCAG exception for inactive UI components — but the disabled button must remain visually distinct from enabled states. Always pair disabled state with a tooltip or helper text explaining why the action is unavailable, especially for form submission buttons.
✓ Focus Indicator
All buttons must have a visible keyboard focus ring in production. Recommended implementation: outline: 3px solid #0492E0; outline-offset: 2px. The design system does not define CSS :focus styles in this document — ensure they are implemented in the product codebase. WCAG SC 2.4.11 (AA, WCAG 2.2) requires focus appearance to have a minimum contrast of 3:1 against adjacent colors.
✗ Icon-only buttons need aria-label
The shopping cart icon button in the header navigation has no visible text label. In production, this element must include aria-label="Shopping cart" (or equivalent) so screen reader users understand its purpose. This applies to all icon-only interactive elements.
Navigation accessibility
Landmark Roles
The desktop header must be wrapped in <header>, the nav links in <nav aria-label="Main">, and the footer in <footer>. These semantic HTML landmarks allow screen reader users to jump directly to navigation regions via a landmarks list.
Dropdown Menus (About, Courses, Services, Resources)
Navigation items with dropdowns (indicated by chevron icons) must use aria-expanded="false/true" on the trigger and aria-haspopup="true". Dropdown content should be in a <ul> with role navigation. The Escape key must close any open dropdown and return focus to the trigger.
Mobile Drawer
The mobile navigation drawer must trap focus while open (focus loop within the drawer). The hamburger icon button requires aria-label="Open menu" and aria-expanded. The back/close button needs aria-label="Close menu". When the drawer closes, focus must return to the hamburger trigger.
Form input accessibility
Visible Labels
Every input — including the newsletter email field in the header, mobile drawer, and footer — must have a visible <label> element (not placeholder text alone). Placeholder text disappears on entry and cannot substitute for a label; it fails WCAG SC 1.3.1. Use aria-label only when a visible label is genuinely impractical — for example, a standalone inline search field with an adjacent button that visually implies context.
Input Border Contrast
Input borders must have at least 3:1 contrast against the adjacent background (WCAG SC 1.4.11 — Non-text Contrast). The border-md token (rgba(0,0,0,0.14) on white ≈ #D9D9D9) falls below 3:1. In production, use a border of at least #767676 or darken to rgba(0,0,0,0.40) for form input borders.
Error & Validation States
Form validation messages must not rely on color alone. Use an icon (e.g. ti-alert-circle) plus descriptive text alongside any color change. Associate error messages with the input using aria-describedby so screen readers announce the error on focus. The Accent palette (orange) is appropriate for warning states if paired with text and icon.
Motion & Animation
Transitions in the button system (background, color, padding) must respect users who prefer reduced motion. Some users experience vestibular disorders where motion causes nausea or disorientation.
✓ Prefers-Reduced-Motion
Wrap all CSS transitions and animations in a media query so motion is disabled for users who have set their OS preference. This is required for WCAG SC 2.3.3 (AAA) and strongly recommended at AA. Example:
*, *::before, *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
✗ Expanding padding transitions on text buttons
Text Dark and Text Green buttons expand their padding on hover (from 11px 6px → 11px 14px), causing a layout shift. This can be disorienting for users with vestibular conditions. Consider using a non-shifting hover effect (e.g. background fill only) or ensure the prefers-reduced-motion query disables the padding transition entirely.
WCAG 2.1 Compliance Summary
A quick-reference overview of how the Super Purposes design system maps to key WCAG 2.1 success criteria at AA level.
| SC | Criterion | Status | Notes |
|---|---|---|---|
| 1.4.1 | Use of Color | Meets ✓ | Links use underline + color. Buttons use shape + label + color. |
| 1.4.3 | Contrast (Minimum) | Partial ⚠ | Subtle Text (#828799) and some accent pairings need care at small sizes. See contrast table above. |
| 1.4.11 | Non-text Contrast | Action needed ⚠ | Form input border tokens must be darkened to meet 3:1 in production. |
| 1.4.12 | Text Spacing | Meets ✓ | 160% line height on body text exceeds the 1.5× requirement. |
| 2.1.1 | Keyboard Accessible | Action needed ⚠ | Navigation dropdowns and mobile drawer require keyboard trap and Escape behavior implemented in code. |
| 2.4.7 | Focus Visible | Action needed ⚠ | Focus rings are not defined in this document. Must be implemented in product CSS using #0492E0 or #004D88 at 3px offset. |
| 2.5.8 | Target Size (WCAG 2.2) | Partial ⚠ | Primary and CTA buttons meet minimum. Chip/badge and icon-only buttons should be padded to 32px height minimum. |
| 4.1.2 | Name, Role, Value | Action needed ⚠ | Icon-only buttons (cart, hamburger, close) need aria-label. Dropdowns need aria-expanded + aria-haspopup. Form inputs need associated labels. |
Inclusive Design Principles for Super Purposes
Beyond WCAG compliance, these principles guide how the system grows and how new components should be designed.
Design for permanence, situational, and temporary limitations
A user squinting in sunlight benefits from the same high-contrast text ratios as a user with low vision. Design decisions that help one group tend to improve the experience for everyone.
Communicate status, not just color
Every semantic badge (Primary, Success, Accent) should pair its colored pill with an icon or text label in contexts where the badge conveys state — never rely on green = success or orange = warning for users with color-vision deficiencies.
One CTA per screen respects cognitive load
The button hierarchy's one-CTA-per-context rule is also an accessibility decision — users with cognitive or attention differences benefit from a clear single action, reducing decision fatigue and error rate.
Test with assistive technology
Automated tools (Axe, WAVE, Lighthouse) catch ~30–40% of accessibility issues. Manual testing with VoiceOver (macOS/iOS), NVDA (Windows), and TalkBack (Android) is required before any major component ships.