# Maxknowledge Design System

> A corporate academic interface defined by high-contrast blue headers, semi-condensed display type, and a multi-chromatic categorization system.

**Source:** [https://maxknowledge.com](https://maxknowledge.com) | **Captured:** 2026-06-06  
**Brand layer:** parent | **Related brands:** None

## TL;DR
Maxknowledge employs a structured, institutional aesthetic that balances a deep corporate blue (`#3366ac`) with a functional multi-color system for product differentiation. The interface is anchored by **Acumin Pro Semi-Condensed** for headlines, providing a compact, authoritative feel, while **Open Sans** handles high-legibility body content. Layouts are strictly modular, utilizing white surfaces (`#ffffff`) and subtle gray borders (`#dadce3`) to organize dense information. Significant brand voltage is generated through high-saturation accent bars in green (`#45bb94`) and light blue (`#44b9dd`) used specifically for course and lesson categorization.

## Signature DNA
1. **The Category Header Bar** (High-saturation solid color bands—Blue `#0066cc`, Green `#45bb94`, Cyan `#44b9dd`—used to cap content sections and search results as seen on `/pricing` and `/about`).
2. **Semi-Condensed Typography** (Acumin Pro Semi-Condensed at weight 700 is the primary display move, creating a dense, professional "textbook" authority).
3. **The "Employee Platform" Blue Block** (A dominant `#3366ac` or `#0d6efd` header/hero section that establishes the primary brand presence across all analyzed pages).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--bs-body-bg` | `#ffffff` | Primary page background and card surface | 29 | 1 | Computed Style |
| `--bs-body-color` | `#212529` | Primary text and secondary navigation | 213 | 1 | CSS Variable |
| `--bs-gray-200` | `#eceef4` | Subtle section backgrounds and secondary surfaces | 3 | 1 | Computed Style |
| `--border-default` | `#dadce3` | Universal 1px divider and panel outline | 51 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--bs-primary` | `#0d6efd` | Links, focus states, and primary brand signals | 28 | 1 | CSS Variable |
| `--brand-corporate` | `#3366ac` | Primary hero backgrounds and button text | 44 | 0.8 | Computed Style |
| `--category-course` | `#0066cc` | Course-specific surface backgrounds | 3 | 0.6 | Computed Style |
| `--category-tutorial` | `#45bb94` | Tutorial-specific surface backgrounds | 4 | 0.6 | Computed Style |
| `--category-lesson` | `#44b9dd` | Lesson-specific surface backgrounds | 4 | 0.6 | Computed Style |
| `--brand-highlight` | `#ffff00` | Decorative brand accents (yellow) | 53 | 1 | Brand Page |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| acumin-pro-semi-condensed | 500, 600, 700 | Primary Headings | Archivo Narrow | Adobe Fonts |
| open-sans | 400, 600, 700 | Body, UI Labels, CTAs | Open Sans | Google Fonts |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.h1}` | 36px | 43.2px | normal | 700 | Page Hero | `h1` |
| `{type.h2}` | 26px | 31.2px | normal | 700 | Section Head | `h2` |
| `{type.h3}` | 26px | 31.2px | normal | 500 | Sub-section Head | `h3#courses` |
| `{type.label-lg}` | 24px | 36px | normal | 600 | Large UI Labels | `div.label` |
| `{type.h4}` | 22px | 26.4px | normal | 700 | Minor Headings | `h4` |
| `{type.body-lg}` | 20px | 30px | normal | 600 | Card Titles / Links | `a.title` |
| `{type.body}` | 18px | 27px | normal | 400 | Standard Body | `header` |
| `{type.badge}` | 14px | 13.5px | normal | 700 | Category Badges | `div.badge.courses` |

### Principles
1. **Condensed for Authority:** All major headings use semi-condensed tracking to maximize horizontal space and mimic academic publishing.
2. **Standardized Body:** Open Sans is used exclusively for long-form content at 18px to ensure high legibility on white backgrounds.
3. **Bold Badging:** Small labels (14px) are always weight 700 to maintain visibility against high-saturation background colors.

## Spacing
**Base unit:** 5px (derived from 5/10/15/20/30/50 scale)
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 5px | 6 |
| `{space.sm}` | 10px | 8 |
| `{space.md}` | 15px | 146 |
| `{space.lg}` | 20px | 7 |
| `{space.xl}` | 30px | 6 |
| `{space.xxl}` | 50px | 4 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Default for sections and headers | 302 occurrences |
| `{radius.sm}` | 5px | Standard surface rounding | Observed on `/` |
| `{radius.md}` | 6px | Card and input rounding | 10 occurrences |
| `{radius.pill}` | 50px | Primary Action Buttons | Observed on `/` |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary site-wide CTA
**Pages observed:** `https://maxknowledge.com`
**Spec:** Background transparent / Text `#3366ac` / Border 1px `#3366ac` / Radius 50px / Padding 10px 50px 10px 30px
**States observed:** Default: Captured | Hover: Not captured

### Tier 2: Patterns
#### Category Card
**Role:** Product and course differentiation
**Pages observed:** `https://maxknowledge.com/pricing`, `https://maxknowledge.com/about`
**Spec:** Background `#0066cc` (Course) or `#45bb94` (Tutorial) / Text `#ffffff` / Radius 6px / Padding 4.7px 8.7px / Font 13.5px
**States observed:** Default: Captured

### Tier 3: Surface-specific
#### Content Surface
**Role:** Main content containers
**Pages observed:** `https://maxknowledge.com/pricing`, `https://maxknowledge.com/about`
**Spec:** Background `#ffffff` / Text `#212529` / Border 0px / Radius 0px / Padding 20px / Font 18px
**States observed:** Default: Captured

#### Outlined Panel
**Role:** Information grouping on secondary pages
**Pages observed:** `https://maxknowledge.com/about`
**Spec:** Background transparent / Text `#212529` / Border 1px `#dadce3` / Radius 0px / Padding 15px
**States observed:** Default: Captured

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | 1200px (estimated from 1440px viewports) |
| Vertical Rhythm | 50px between major sections |
| Card Grid | 2-up or 3-up responsive grid |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Navigation collapses to hamburger; padding reduces to 15px; 1-column stack |
| Desktop | 1440px | Multi-column layouts; horizontal navigation visible; 50px section spacing |

## Imagery & decoration
Maxknowledge utilizes a "Digital Matrix" background pattern in the hero section—a blue gradient with binary/data-point overlays. It avoids organic shapes, preferring strict rectangles and 0px radius headers.

## Do's
- Use **Acumin Pro Semi-Condensed** for all headers to maintain institutional authority.
- Apply `#3366ac` for primary brand hero backgrounds.
- Use `#ffffff` for all primary content surfaces to ensure 4.5:1 contrast with body text.
- Differentiate content types (Courses, Tutorials, Lessons) using the specific green and cyan tokens.
- Maintain a 15px (`{space.md}`) internal padding for standard UI panels.

## Don'ts
- Do not use rounded corners on primary section headers; keep them `{radius.none}`.
- Do not use the sub-brand green (`#45bb94`) as a primary brand replacement for the corporate blue.
- Avoid using the yellow accent (`#ffff00`) for text; it is reserved for decorative brand marks only.
- Do not exceed 18px for standard body copy.

## Similar brands
- LinkedIn Learning
- Coursera
- Blackboard
- Pearson

## Quick start

```css
/* CSS Custom Properties */
:root {
  --max-blue-corporate: #3366ac;
  --max-blue-primary: #0d6efd;
  --max-green-accent: #45bb94;
  --max-cyan-accent: #44b9dd;
  --max-gray-border: #dadce3;
  --max-font-heading: "acumin-pro-semi-condensed", sans-serif;
  --max-font-body: "open-sans", sans-serif;
  --max-radius-card: 6px;
  --max-space-md: 15px;
}
```

## Agent prompt examples
- "Generate a content card for Maxknowledge using a white background, 6px border radius, and a `#45bb94` header bar with Acumin Pro Semi-Condensed text."
- "Create a primary button using a 50px pill radius, `#3366ac` border, and 18px Open Sans text."
- "Design a section header with a solid `#3366ac` background, no border radius, and 36px bold semi-condensed white text."

## Known gaps
- Hover and Active states for the primary buttons were not explicitly captured in the computed style evidence.
- The exact transition timing for the "Digital Matrix" background was not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | `https://maxknowledge.com` | 1440x900 | 2026-06-06 |
| Pricing | `https://maxknowledge.com/pricing` | 1440x900 | 2026-06-06 |
| About | `https://maxknowledge.com/about` | 1440x900 | 2026-06-06 |