Clever Design System Deep Dive

1. Brand Overview

Clever’s design system feels like it’s built for clarity and trust — exactly what you’d expect from a platform that connects schools, teachers, and educational tools. The name says it all, but the execution is restrained. This isn’t a brand trying to be flashy; it’s trying to be reliable. Every design choice points toward accessibility, legibility, and a calm confidence.

The vibe: clean blue-driven UI, lots of white space, generous padding, and typography that mixes friendliness with authority. The blue is bright without being neon, grounded by deep navy accents. You get the sense they want to be approachable to educators but also serious enough to be trusted with sensitive student data.

Typography choices reinforce this — ABC Arizona Mix for headings gives a slightly humanist, approachable feel, while Messina Sans in links and buttons adds crispness. Font weights are balanced; nothing is screaming for attention. Even in CTAs, the weight is 600, never bold to the point of being loud.

The spacing scale is predictable — mostly multiples of 8px, with occasional deviations (7px, 13px) that suggest fine-tuning for specific components. Breakpoints are plentiful, covering almost every common device width from 300px up to 1600px. This means the design is not just responsive; it’s been tested across granular screen sizes.

The overall philosophy:

Consistency over novelty — every component follows core color and radius rules.
Function-first — buttons, links, and hover states are clear and purposeful.
Education-safe — colors meet contrast needs, typography is readable across devices, and the system feels stable.

This is a brand that values familiarity. It’s not reinventing UI patterns, but it’s executing them with discipline. That’s exactly what an education platform needs — teachers shouldn’t have to relearn UI every time they log in. Clever’s design system delivers UI you trust because it doesn’t surprise you.

2. Color System

2.1 Primary Colors

The semantic primary color is rgb(20, 100, 255) (#1464ff). This is a saturated, bright blue — somewhere between standard web blue and a tech-forward azure. It’s used in CTAs, buttons, and interactive elements.

Why this works: Blue in edtech signals reliability and calm, but a slightly brighter hue keeps it feeling modern. Compared to competitors like Google Classroom (more green-heavy) or Canvas (red-accented), Clever’s blue positions it as clean and tech-centric. The blue is neither too dark (which could feel corporate) nor too light (which could feel washed-out). It’s punchy enough for contrast but still comfortable for daily use.

2.2 Complete Palette

Color Name	Hex	Role	Usage
Black	#000000	Text, icons	Headers, menus, body copy
Bright Blue	#2775ff	Secondary link/CTA	Links, hover accents
Primary Blue	#1464ff	Primary brand color	Buttons, primary actions
White	#ffffff	Background, text on dark	Page background, button text
Deep Blue	#0044cc	Link/CTA variant	Links, emphasis states
Light Blue BG	#edf5ff	Background surface	Panels, cards
Navy Hover	#0e3787	Hover/focus state	Button hover backgrounds
Navy Hover 2	#0e3b92	Hover/focus state	Alternate hover backgrounds
Navy Hover 3	#0e3b91	Hover/focus state	Alternate hover backgrounds
Navy Hover 4	#0e3789	Hover/focus state	Alternate hover backgrounds
Navy Hover 5	#0e3a91	Hover/focus state	Alternate hover backgrounds
Navy Hover 6	#0e3d98	Hover/focus state	Alternate hover backgrounds
Navy Hover 7	#0e3d99	Hover/focus state	Alternate hover backgrounds
Navy Hover 8	#0e388b	Hover/focus state	Alternate hover backgrounds

2.3 Color Relationships

Primary blue (#1464ff) with white text has excellent contrast — roughly 6.9:1, passing WCAG AAA for normal text. Black-on-white is ~21:1, perfect for accessibility. Light backgrounds like #edf5ff paired with black or navy text keep readability high.

Dark mode isn’t evident in the extracted data — the palette is clearly optimized for light mode. Many hover/focus colors are deep navy variants, which will still work in darker contexts, but the brand’s current implementation is light-first.

2.4 Usage Guide

Works well:

Primary blue background (#1464ff) with white text.
White background with black text for body copy.
Light blue (#edf5ff) background with navy text for subtle sections.
Bright blue (#2775ff) links with hover to navy for clarity.

Avoid:

Navy hover colors as text backgrounds — they’re too dark for subtlety and too similar to deep blue link color.
Mixing bright blue (#2775ff) with primary blue (#1464ff) in the same element — they compete rather than complement.
Using light blue (#edf5ff) behind bright blue text — low contrast.

3. Typography

3.1 Font Families

Two primary families:

ABCArizonaMix — Custom or licensed sans with humanist touches. Used for headings and some link contexts. Fallback stack to system UI fonts.
MessinaSans — Clean geometric sans. Used for links, buttons, and smaller headings.

Sources: Google Fonts include Montserrat and Mulish, but these aren’t the primary UI fonts — likely used in marketing or secondary contexts. Variable fonts are supported.

3.2 Type Scale

Element	Font	Size	Weight	Line Height
H1	ABCArizonaMix	65px	400	1.08
H1	ABCArizonaMix	53px	400	1.20
H1	ABCArizonaMix	40px	400	1.13
Link	MessinaSans	30px	500	1.00
Link	ABCArizonaMix	28px	400	1.29
H1	ABCArizonaMix	28px	400	1.29
Link	MessinaSans	24px	600	1.00
Link	MessinaSans	24px	500	1.25
Link	ABCArizonaMix	20px	400	1.50
H1	ABCArizonaMix	20px	400	1.50
H1	MessinaSans	18px	500	1.67
Button	MessinaSans	16px	600	1.50
H1	MessinaSans	16px	600	1.50
H1	ABCArizonaMix	16px	400	1.50
Link	ABCArizonaMix	16px	400	1.50
Link	MessinaSans	16px	600	1.50
Button	ABCArizonaMix	16px	400	1.50
Link	MessinaSans	16px	500	2.00
H1	MessinaSans	16px	500	1.88
Link	MessinaSans	14px	500	1.75
Caption	MessinaSans	14px	500	1.50

3.3 Hierarchy

Large H1s (65px, 53px, 40px) set strong page hierarchy. Links at 30px in MessinaSans feel like navigation anchors — big enough to be tappable. Body and smaller headings at 16px keep content readable, with captions at 14px for secondary info. Line heights are tight for large headings, looser for small text to aid readability.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid with custom adjustments. Common values:

Value	Count
4px	16
7px	9
8px	26
10px	14
12px	47
13px	12
15px	14
20px	3
25px	8
30px	15
34px	22
35px	6
40px	38
44px	4
50px	11
55px	4
60px	8
67px	2
105px	4
150px	3

4.2 Layout

Breakpoints are exhaustive — 300px to 1600px, covering mobile, tablet, laptop, desktop, and large screens. This is a mobile-first responsive system but with granular tuning for small variations (374px vs 375px, 768px vs 769px). This level of breakpoint granularity suggests pixel-perfect control over layout shifts.

5. Visual Elements

Border Radius

Value	Elements	Count
2px	Badge	1
10px	Button, ul, a	12
20px	ul, image, div	8
30px	div	8

10px is the workhorse — most buttons and links use it. Larger radii (20px, 30px) are for containers and hero sections. 2px is rare, reserved for small badges.

Shadows

Four styles:

rgba(10, 30, 70, 0.1) 0px 10px 20px 0px — soft, large drop
rgba(0, 78, 228, 0.3) 0px 1px 10px 0px — colored shadow for emphasis
rgba(20, 100, 255, 0.1) 0px 4px 10px 0px — subtle brand-colored shadow
rgb(128, 128, 128) 0px 0px 5px 0px — neutral small shadow

Borders and Dividers

Frequent 1px solid borders in light blue (#edf5ff) for lists. Black 1px bottom borders for dividers. Occasional deep blue (#1464ff) borders for emphasis.

6. Components

6.1 Buttons

Primary (`cle-btn_primary`)

Default: bg #1464ff, white text, padding 13px 24px 13px 32px, radius 10px, no border.
Hover: bg #004ee4, text black, border 2px solid #1464ff, scale(1.1).
Active: bg #0a1e46, text #004ee4, scale(1.1).
Focus: transparent bg, black text, box-shadow rgba(0,0,0,0.6) 0px 0px 2px 2px, rotate(-135deg) — odd choice, likely animated icon.

Secondary (`cle-brand-cta-section__bg`)

Default: bg #0a1e46, black text, radius 20px.
No hover/active/focus defined.

6.2 Links

Five variants:

White text, hover to #0a1e46.
Bright blue (#2775ff), hover to #0a1e46.
Navy (#0a1e46), hover same.
Deep blue (#0044cc), hover same.
Primary blue (#1464ff), hover same.

No underlines; hover changes color only.

6.3 Forms

Minimal data — text inputs have 1px solid #c1c1c1 borders.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-black: #000000;
  --color-bright-blue: #2775ff;
  --color-primary-blue: #1464ff;
  --color-white: #ffffff;
  --color-deep-blue: #0044cc;
  --color-light-blue-bg: #edf5ff;
  --color-navy-hover-1: #0e3787;
  --color-navy-hover-2: #0e3b92;
  --color-navy-hover-3: #0e3b91;
  --color-navy-hover-4: #0e3789;
  --color-navy-hover-5: #0e3a91;
  --color-navy-hover-6: #0e3d98;
  --color-navy-hover-7: #0e3d99;
  --color-navy-hover-8: #0e388b;
  
  /* Typography */
  --font-abc-arizona-mix: "ABCArizonaMix", system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  --font-messina-sans: "MessinaSans";
  
  /* Spacing */
  --space-4: 4px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-15: 15px;
  --space-20: 20px;
  --space-25: 25px;
  --space-30: 30px;
  --space-34: 34px;
  --space-35: 35px;
  --space-40: 40px;
  --space-44: 44px;
  --space-50: 50px;
  --space-55: 55px;
  --space-60: 60px;
  --space-67: 67px;
  --space-105: 105px;
  --space-150: 150px;
  
  /* Radius */
  --radius-2: 2px;
  --radius-10: 10px;
  --radius-20: 20px;
  --radius-30: 30px;
  
  /* Shadows */
  --shadow-soft: rgba(10, 30, 70, 0.1) 0px 10px 20px 0px;
  --shadow-colored: rgba(0, 78, 228, 0.3) 0px 1px 10px 0px;
  --shadow-brand-subtle: rgba(20, 100, 255, 0.1) 0px 4px 10px 0px;
  --shadow-neutral: rgb(128, 128, 128) 0px 0px 5px 0px;
}

8. AI Coding Assistant Prompt

# Clever Design System Specification

You are a Clever design expert. Build UIs matching their visual language exactly.

## Brand Context
Clever’s design system prioritizes clarity, trust, and accessibility. Bright blue primary, deep navy accents, and clean sans-serif typography make it approachable yet professional. It's built for educators — stable, predictable, and readable.

## Color Palette
- Black: #000000 — Body text, icons
- Bright Blue: #2775ff — Secondary links, hover accents
- Primary Blue: #1464ff — CTAs, primary buttons, key actions
- White: #ffffff — Page background, text on dark
- Deep Blue: #0044cc — Link variant, emphasis
- Light Blue BG: #edf5ff — Background panels, cards
- Navy Hover 1: #0e3787 — Hover/focus states
- Navy Hover 2: #0e3b92 — Hover/focus
- Navy Hover 3: #0e3b91 — Hover/focus
- Navy Hover 4: #0e3789 — Hover/focus
- Navy Hover 5: #0e3a91 — Hover/focus
- Navy Hover 6: #0e3d98 — Hover/focus
- Navy Hover 7: #0e3d99 — Hover/focus
- Navy Hover 8: #0e388b — Hover/focus

## Typography
- Headings: ABCArizonaMix, fallback to system fonts
- UI Text: MessinaSans
- Sizes:
| Level | Font | Size | Weight | Line Height | Use For |
|-------|------|------|--------|-------------|---------|
| H1-lg | ABCArizonaMix | 65px | 400 | 1.08 | Page hero titles |
| H1-md | ABCArizonaMix | 53px | 400 | 1.20 | Section titles |
| H1-sm | ABCArizonaMix | 40px | 400 | 1.13 | Smaller headings |
| Link-xl | MessinaSans | 30px | 500 | 1.00 | Main nav |
| Link-lg | ABCArizonaMix | 28px | 400 | 1.29 | Secondary nav |
| Link-md | MessinaSans | 24px | 600 | 1.00 | Buttons |
| Link-md2 | MessinaSans | 24px | 500 | 1.25 | Secondary buttons |
| Body-lg | ABCArizonaMix | 20px | 400 | 1.50 | Large body text |
| Body-sm | MessinaSans | 16px | 500-600 | 1.50-2.00 | UI labels |
| Caption | MessinaSans | 14px | 500 | 1.50-1.75 | Meta info

## Spacing & Grid
Base: 8px. Scale includes: 4px, 7px, 8px, 10px, 12px, 13px, 15px, 20px, 25px, 30px, 34px, 35px, 40px, 44px, 50px, 55px, 60px, 67px, 105px, 150px.

Map to components:
- Buttons: padding ~13px vertical, 24-32px horizontal
- Cards: min 20px padding
- Sections: 40px+
- Hero: 105px+ top/bottom

## Border Radius
- sm: 2px — badges
- md: 10px — buttons, links
- lg: 20px — containers
- xl: 30px — large sections

## Shadows & Depth
- Soft: rgba(10, 30, 70, 0.1) 0px 10px 20px
- Colored: rgba(0, 78, 228, 0.3) 0px 1px 10px
- Brand-subtle: rgba(20, 100, 255, 0.1) 0px 4px 10px
- Neutral: rgb(128, 128, 128) 0px 0px 5px

## Component Specifications

### Primary Button
Default: bg #1464ff, color #ffffff, padding 13px 24px 13px 32px, radius 10px, font MessinaSans 16px/600.  
Hover: bg #004ee4, color #000000, border 2px solid #1464ff, scale(1.1).  
Active: bg #0a1e46, color #004ee4, scale(1.1).  
Focus: transparent bg, color #000000, box-shadow rgba(0,0,0,0.6) 0px 0px 2px 2px.

### Secondary Button
Default: bg #0a1e46, color #000000, radius 20px, font ABCArizonaMix 16px/400.

### Navigation Links
No underline, color varies by variant. Hover changes color to #0a1e46.

### Input Fields
Border: 1px solid #c1c1c1, radius 10px (assume consistent with other form elements), font-size 16px.

### Card
Background #ffffff or #edf5ff, radius 20px-30px, padding 20px+, shadow soft or brand-subtle.

## Layout & Responsive Rules
Max content width: variable, breakpoints at 300, 374, 375, 575, 576, 600, 640, 660, 767, 768, 769, 781, 782, 800, 900, 991, 992, 1024, 1100, 1199, 1200, 1300, 1366, 1399, 1400, 1440, 1441, 1599, 1600.

## Interaction Rules
- Transition: 150ms ease for hover/focus changes
- Focus indicators: Box-shadow or border change
- Hover scale: 1.1 on primary buttons

## DO List
- Use ONLY palette colors.
- Maintain 8px grid — spacing must be multiples of base.
- Use ABCArizonaMix for headings, MessinaSans for UI.
- Keep button radii at 10px.
- Test contrast — aim for WCAG AA minimum.

## DON'T List
- Don't invent new blues.
- Don't mix sharp and rounded corners in same component.
- Don't remove hover/focus styles.
- Don't apply shadows where borders are intended.

## Code Examples

```css
.btn-primary {
  background: #1464ff;
  color: #ffffff;
  padding: 13px 24px 13px 32px;
  border-radius: 10px;
  font-family: "MessinaSans";
  font-weight: 600;
  font-size: 16px;
  border: none;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #004ee4;
  color: #000000;
  border: 2px solid #1464ff;
  transform: scale(1.1);
}
.btn-primary:focus {
  background: transparent;
  box-shadow: rgba(0,0,0,0.6) 0px 0px 2px 2px;
}

.card {
  background: #edf5ff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: rgba(10,30,70,0.1) 0px 10px 20px;
}

.input {
  border: 1px solid #c1c1c1;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 16px;
}
.input:focus {
  border-color: #1464ff;
  outline: none;
}


---

## 9. Summary

**TL;DR** — Clever’s design system is disciplined, light-first, and blue-driven. It’s built for educators, with predictable spacing, accessible colors, and typography that balances warmth and professionalism.

**Brand Keywords**:  
- education-trust  
- blue-minimalist  
- accessible-clarity  
- tech-friendly  
- predictable-ui

Clever Design System: Accessible Blue-Driven UI

Brand Identity

Color Palette

Typography

Design Style

Full Analysis

Clever Design System Deep Dive

1. Brand Overview

2. Color System

2.1 Primary Colors

2.2 Complete Palette

2.3 Color Relationships

2.4 Usage Guide

3. Typography

3.1 Font Families

3.2 Type Scale

3.3 Hierarchy

4. Spacing & Layout

4.1 Spacing Scale

4.2 Layout

5. Visual Elements

Border Radius

Shadows

Borders and Dividers

6. Components

6.1 Buttons

Primary (`cle-btn_primary`)

Secondary (`cle-brand-cta-section__bg`)

6.2 Links

6.3 Forms

7. Design Tokens (CSS Custom Properties)

8. AI Coding Assistant Prompt

Brand Identity

Color Palette

Typography

Design Style

Full Analysis

Clever Design System Deep Dive

1. Brand Overview

2. Color System

2.1 Primary Colors

2.2 Complete Palette

2.3 Color Relationships

2.4 Usage Guide

3. Typography

3.1 Font Families

3.2 Type Scale

3.3 Hierarchy

4. Spacing & Layout

4.1 Spacing Scale

4.2 Layout

5. Visual Elements

Border Radius

Shadows

Borders and Dividers

6. Components

6.1 Buttons

Primary (cle-btn_primary)

Secondary (cle-brand-cta-section__bg)

6.2 Links

6.3 Forms

7. Design Tokens (CSS Custom Properties)

8. AI Coding Assistant Prompt

Primary (`cle-btn_primary`)

Secondary (`cle-brand-cta-section__bg`)