ClassLink Brand Design System Deep Dive

1. Brand Overview

ClassLink’s visual language is functional tech for education. It’s not trying to be lifestyle or luxury. The vibe is: “We’re here to help schools and students get things done.” The brand leans into a clear, approachable interface with just enough polish to feel trustworthy in an institutional context.

The homepage tells you immediately: this is a platform for managing access to digital tools in schools. The design reflects that — bright blues for action, cool neutrals for background stability, and a typography system that’s direct, sans-serif, and slightly condensed for efficiency.

There’s no over-engineering of gradients or ornamental flourishes. Instead, it’s solid blocks of color, crisp typography, and consistent spacing. You can see the underlying grid everywhere — buttons, cards, nav elements all respect the same rhythm.

What stands out: ClassLink embraces condensed typefaces for headings (Helvetica Neue Condensed), which is unusual for education brands — most go with friendly rounded sans. This choice makes the brand feel more “enterprise” than “playful.” Combined with Lato for body content, it’s a balance between accessibility and professional seriousness.

Hover states have a distinctive lift-and-shadow effect, especially on buttons — a small translateY and a drop shadow in rgb(48, 79, 110). This adds tactility without going full skeuomorphic. It’s a little unexpected in a world of flat design.

Overall: The system is grid-driven, blue-accented, enterprise-friendly, with just enough motion to feel interactive without distracting. It’s designed for educators, administrators, and students — but with a heavier nod towards the admin audience.

2. Color System

2.1 Primary Colors

The primary action color is #4e95cc (rgb(78, 149, 204)) — a medium blue. Blue is a safe choice for education tech: it communicates trust, stability, and professionalism. The hue is bright enough to stand out against white backgrounds but not so saturated as to feel childish.

There’s also a darker blue #0a4d7f (rgb(10, 77, 127)) used for headings and certain link states — this reinforces the hierarchy and keeps primary blue reserved for actions.

A secondary accent appears in #53a9ff (rgb(83, 169, 255)), a lighter sky blue. It’s sparingly used — likely for highlights or gradients.

Green (#44d185) is rare and seems to be a hover/focus accent on certain elements. This is unusual — most brands keep hover states in the same family as the primary color, but here green is used selectively.

2.2 Complete Palette

2.3 Color Relationships

The primary blue (#4e95cc) on white easily passes WCAG AA for normal text and AAA for large text. White text on primary blue also passes AA. The dark blue (#0a4d7f) on white is high-contrast and safe everywhere.

The gray palette is well-chosen: #666666 for secondary text is readable against white, and #525252 for nav menus is even stronger.

Dark mode is not implemented here — colors are tuned for a light UI. The navy (#082336) is used in the footer against lighter text for inverse contrast.

2.4 Usage Guide

• Use #4e95cc for buttons and links that require action.
• Reserve #0a4d7f for headings or static links.
• Avoid using green (#44d185) except for hover/focus states — it’s not a brand color.
• Do not mix #53a9ff and #4e95cc in the same element — they’re too close in hue and will clash.
• Keep white backgrounds to maintain clarity — avoid putting primary blue on navy.

3. Typography

3.1 Font Families

• Headings: Helvetica Neue Condensed, fallback Tahoma. Adobe Fonts source.
• Body/Text: Lato (Google Fonts).
• Special display: gala (custom?).
• Icons: Fa Classic, Fa Brands.

Helvetica Neue Condensed gives headings a tall, narrow presence — ideal for fitting more characters in limited space. Lato is a humanist sans with good readability, balancing the condensed headings.

3.2 Type Scale

3.3 Hierarchy

They rely heavily on weight and size to create hierarchy — condensed fonts make headings stand out even when smaller. Body text is lighter (Lato 400) with generous line heights for readability. Display sizes like 120px are rare — probably hero text. The condensed family ensures large headings don’t break layouts.

4. Spacing & Layout

4.1 Spacing Scale

Base scale is 8px. Common values:

4.2 Layout

Breakpoints:

• 360px (mobile min)
• 479px
• 768px (tablet)
• 991px
• 992px (desktop min)
• 1130px, 1150px (large desktop)

This is a mobile-first, responsive grid. Likely 12-column at desktop, collapsing progressively.

5. Visual Elements

Border Radius System

Shadows

• rgba(0,0,0,0.11) 0px -5px 9px -3px inset
• rgba(0,0,0,0.2) 0px 0px 10px 1px
• rgba(0,0,0,0.12) 4px 4px 12px 2px
• rgba(15,50,76,0.3) 1px 1px 30px 4px
• rgba(0,0,0,0.08) 8px 13px 25px 3px
• rgb(48,79,110) 6.9px 6.9px 0px 0px (distinctive button shadow)

These shadows are subtle but present — not a pure flat design. They use them mainly for hover states.

Borders

Mostly 1px solid in light grays (#dfdfdf, #b6b6b6) for dividers. Tabs have bottom borders in brand colors.

6. Components

6.1 Buttons

Top Button

• Default: bg #26c06e, white text, radius 7px, opacity 0.46877, font 22px, weight 900.
• Hover: bg #0baec0, shadow rgb(48,79,110) 0.25em 0.3em, translateY(-0.2em).
• Focus: outline none.

General Button

• Default: bg #4e95cc, white text, padding 10px 16px, radius 7px, font 17px, weight 500.
• Hover: bg #0baec0, same shadow/translate.
• Focus: outline none.

Slider Dot

• Default: bg rgba(243,243,243,0.4), circle (100%), color #525252.
• Hover: bg rgba(243,243,243,0.55).

Footer Button

• Default: bg white, text #0691a1, padding 12px 30px, no radius, shadow rgb(48,79,110) 6.9px 6.9px, font 23px, weight 700.
• Hover: bg #0baec0, shadow change, translateY(-0.2em).

6.2 Links

Colors vary:

• White (#ffffff), weight 900 in nav
• Dark gray (#333333) for body links
• Dark blue (#0a4d7f), weight 600
• Gray (#b6b6b6), weight 500 for disabled
• Light blue (#4e95cc) for interactive
• Teal (#0691a1) for footer links

No underline; hover states not specified.

6.3 Forms

Search Input

• bg rgba(255,255,255,0.15), white text, radius 4px, padding 5px 30px 5px 10px, no border.

6.4 Cards

Not explicitly stated, but based on border radius (10px) and shadows, likely using subtle elevation and consistent padding.

7. Design Tokens

:root {
  /* Colors */
  --color-dark-gray: #525252;
  --color-medium-gray: #666666;
  --color-white: #ffffff;
  --color-primary-blue: #4e95cc;
  --color-dark-blue: #0a4d7f;
  --color-light-blue: #53a9ff;
  --color-light-gray: #dfdfdf;
  --color-black: #000000;
  --color-navy: #082336;
  --color-gray-182: #b6b6b6;
  --color-dark-gray-34: #222222;
  --color-green-accent: #44d185;
  --color-light-blue-hover: #67ade4;
  --color-gray-110: #6e6e6e;
  --color-light-bg: #eef5fb;

  /* Typography */
  --font-heading: "Helvetica Neue Condensed", Tahoma;
  --font-body: "Lato";
  --font-display: gala;
  --font-icon-classic: "Fa Classic";
  --font-icon-brands: "Fa Brands";

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-15: 15px;
  --space-17: 17px;
  --space-18: 18px;
  --space-20: 20px;
  --space-20-25: 20.25px;
  --space-24-7: 24.7px;
  --space-25: 25px;
  --space-25-5: 25.5px;
  --space-85: 85px;
  --space-134-391: 134.391px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 7px;
  --radius-lg: 10px;
  --radius-circle: 50%;
  --radius-pill: 100%;

  /* Shadows */
  --shadow-inset-light: rgba(0,0,0,0.11) 0px -5px 9px -3px inset;
  --shadow-default: rgba(0,0,0,0.2) 0px 0px 10px 1px;
  --shadow-medium: rgba(0,0,0,0.12) 4px 4px 12px 2px;
  --shadow-deep: rgba(15,50,76,0.3) 1px 1px 30px 4px;
  --shadow-hover: rgb(48,79,110) 0.25em 0.3em;
  --shadow-static-button: rgb(48,79,110) 6.9px 6.9px 0px 0px;
}

8. AI Coding Assistant Prompt

# ClassLink Design System Specification

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

## Brand Context
ClassLink is a functional, grid-driven design system for education technology. It uses condensed headings for efficiency, blue accents for trust, and subtle motion for interactivity. It balances professional seriousness with approachable clarity.

## Color Palette
- Dark Gray: #525252 — Navigation menus, dropdown links
- Medium Gray: #666666 — Secondary text, dropdown blocks
- White: #ffffff — Backgrounds, text on dark
- Primary Blue: #4e95cc — Buttons, interactive links
- Dark Blue: #0a4d7f — Headings, product links
- Light Blue: #53a9ff — Accent highlights
- Light Gray: #dfdfdf — Dividers, borders
- Black: #000000 — Minimal icons/text
- Navy: #082336 — Footer text
- Gray-182: #b6b6b6 — Disabled text, tab borders
- Dark Gray-34: #222222 — Rare text
- Green Accent: #44d185 — Hover/focus accent (rare)
- Light Blue Hover: #67ade4 — Hover/focus accent (rare)
- Gray-110: #6e6e6e — Hover/focus accent (rare)
- Light Background: #eef5fb — Hover/focus background

## Typography
- Headings: "Helvetica Neue Condensed", Tahoma
- Body: "Lato"
- Display: gala
- Icons: "Fa Classic", "Fa Brands"

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 Hero | 120px | 900 | 1.00 | Main hero titles |
| H1 Medium | 50px | 600 | 1.00 | Page titles |
| ... | ... | ... | ... | ... |

## Spacing & Grid
Base: 8px. Scale: 1px, 2px, 5px, 6px, 7px, 8px, 9px, 10px, 12px, 13px, 15px, 17px, 18px, 20px, 20.25px, 24.7px, 25px, 25.5px, 85px, 134.391px.

## Border Radius
- none: 0px — nav, square corners
- sm: 4px — inputs
- md: 7px — buttons
- lg: 10px — cards
- circle: 50% — avatars
- pill: 100% — pill buttons

## Shadows & Depth
- Inset light: rgba(0,0,0,0.11) 0px -5px 9px -3px inset
- Default: rgba(0,0,0,0.2) 0px 0px 10px 1px
- Medium: rgba(0,0,0,0.12) 4px 4px 12px 2px
- Deep: rgba(15,50,76,0.3) 1px 1px 30px 4px
- Hover: rgb(48,79,110) 0.25em 0.3em
- Static Button: rgb(48,79,110) 6.9px 6.9px 0px 0px

## Component Specifications

### Primary Button
```css
.btn-primary {
  background: #4e95cc;
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 7px;
  border: none;
  font-weight: 500;
  font-size: 17px;
  transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.btn-primary:hover {
  background: #0baec0;
  box-shadow: rgb(48,79,110) 0.25em 0.3em;
  transform: translateY(-0.2em);
}
.btn-primary:focus { outline: none; }

Secondary Button

.btn-secondary {
  background: #26c06e;
  color: #ffffff;
  border-radius: 7px;
  font-weight: 900;
  font-size: 22px;
  opacity: 0.46877;
}
.btn-secondary:hover {
  background: #0baec0;
  box-shadow: rgb(48,79,110) 0.25em 0.3em;
  transform: translateY(-0.2em);
}

Input Field

.input-search {
  background: rgba(255,255,255,0.15);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 5px 30px 5px 10px;
}
.input-search:focus { outline: none; }

Card

.card {
  background: #ffffff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: rgba(0,0,0,0.2) 0px 0px 10px 1px;
}

Layout & Responsive Rules

• Breakpoints: 360px, 479px, 768px, 991px, 992px, 1130px, 1150px.
• Mobile-first grid.

Interaction Rules

• Hover: translateY(-0.2em), shadow change.
• Focus: outline none.
• Transition: 150ms ease.

DO

• Use only palette colors.
• Maintain 8px grid.
• Use Helvetica Neue Condensed for headings, Lato for body.
• Keep hover lift consistent.
• Reserve green accent for hover/focus states only.

DON'T

• Invent new colors.
• Mix sharp and rounded corners inconsistently.
• Remove hover motion from buttons.
• Use condensed font for body text.

Code Examples

Primary Button:

.btn-primary { ... }

Card:

.card { ... }

Input:

.input-search { ... }

---

## 9. Summary

**TL;DR** – ClassLink’s system is a disciplined, blue-driven grid with condensed headings, Lato body text, and subtle hover motion. It’s built for clarity and trust in an education tech context.

**Brand Keywords**: enterprise-education, grid-disciplined, blue-trust, condensed-efficiency, motion-subtle