# Schooldata Design System

> A clean, data-centric canvas utilizing high-contrast typography and a spectrum of functional accent colors to organize complex educational insights.

**Source:** https://schooldata.net | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Schooldata employs a monochrome foundation of pure white (#ffffff) and deep grays (#707070, #161e2e) to maintain a professional, utility-first atmosphere. The system relies on Montserrat for its typographic hierarchy, using heavy weights (700) and negative letter-spacing (-1.36px) for high-impact headlines. While the core is achromatic, a diverse palette of secondary colors (Gold #efb626, Rose #e43b5e, Blue #467cbb) is used functionally to categorize different data modules and product features. UI elements are characterized by a mix of sharp corners and generous 8px control radii, often supported by soft, wide-spread shadows (16px blur).

## Signature DNA
1. **Functional Color Coding** (The use of specific hex codes like #efb626 and #4bb252 to distinguish product modules like "Homeroom" or "Intervention Plans" across the homepage and about pages).
2. **High-Impact Montserrat Display** (Bold 700 weight headlines at 39px with aggressive -1.36px tracking to create a modern, authoritative data-brand feel).
3. **Soft-Depth Surfaces** (White cards floating on white backgrounds using `rgba(196, 196, 196, 0.35) 0px 0px 8px 0px` shadows to define boundaries without heavy borders).

## Family Map
Not captured in source (Single-brand topology).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.canvas}` | #ffffff | Page background and primary surface | 40 | 0.8 | computed_style |
| `{colors.ink-muted}` | #707070 | Primary body text and secondary labels | 203 | 0.8 | computed_style |
| `{colors.ink-deep}` | #161e2e | Dark section backgrounds and high-contrast text | 3 | 0.6 | computed_style |
| `{colors.ink-solid}` | #000000 | Primary headings (About page) | 3 | 0.6 | computed_style |
| `{colors.border-light}` | #d2d6dc | Subtle dividers and card outlines | 13 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.accent-gold}` | #efb626 | Primary CTA background, "Homeroom" module color | 21 | 0.8 | computed_style |
| `{colors.accent-rose}` | #e43b5e | "Early Warning" module accent | 5 | 0.6 | computed_style |
| `{colors.accent-blue}` | #467cbb | "Intervention" module accent | 4 | 0.6 | computed_style |
| `{colors.accent-orange}` | #ea653d | "Risk Indicators" module accent | 3 | 0.6 | computed_style |
| `{colors.accent-lime}` | #afb731 | "Alternative Learning" module accent | 3 | 0.6 | computed_style |
| `{colors.accent-green}` | #4bb252 | "Performance Analytics" module accent | 3 | 0.6 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Montserrat | 400, 500, 600, 700 | Display, Headings, UI | Montserrat (Google Fonts) | OFL |
| Lato | 800 | Specialized body emphasis | Lato (Google Fonts) | OFL |
| Verdana | 400, 700 | Captions, legacy UI | System Font | Pre-installed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display-1}` | 39px | 39px | -1.36px | 700 | Hero Headlines | `h1.text-display-1` |
| `{type.heading-lg}` | 22px | 24.75px | normal | 600 | Section Headers | `h2.text-22.font-semibold` |
| `{type.body-lg}` | 19px | 28.5px | normal | 400 | Feature Descriptions | `p.mt-3.flex-auto` |
| `{type.body-md}` | 17px | 19.125px | normal | 600 | Emphasized Body | `p.text-17.font-semibold` |
| `{type.body-base}` | 16px | 24px | normal | 400 | Standard Body | `section:nth-of-type(1)` |
| `{type.subheading}` | 16px | 18px | normal | 700 | Small Headings | `h4.font-bold.text-16` |
| `{type.body-sm}` | 15px | 20.625px | normal | 400 | Small Labels | `span.text-15.block` |
| `{type.caption}` | 11px | normal | normal | 400 | Legal/Fine Print | `div.content-container` |

### Principles
1. **Aggressive Display Tracking:** Large headlines (39px) must use negative letter-spacing (-1.36px) to maintain visual density.
2. **Weight-Based Hierarchy:** Use Montserrat 700 for structural headings and 400 for descriptive prose; avoid 500/600 for long-form text.
3. **Functional Color Pairing:** Text accents (e.g., "Learn More >>") must match the specific module's accent color (e.g., Gold #efb626 for Homeroom).

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.1}` | 4px | 28 |
| `{space.2}` | 8px | 4 |
| `{space.3}` | 12px | 24 |
| `{space.4}` | 16px | 4 |
| `{space.10}` | 40px | 25 |
| `{space.section}` | 96px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Main page sections, footer | 204 occurrences |
| `{radius.sm}` | 2px | Small UI cards / inputs | Card component |
| `{radius.md}` | 8px | Standard feature cards | Card component |
| `{radius.pill}` | 9999px | Primary CTA buttons | Gold button component |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.soft}` | `rgba(196, 196, 196, 0.35) 0px 0px 8px 0px` | Feature cards, module blocks | Observed on 7 elements |
| `{shadow.deep}` | `rgba(196, 196, 196, 0.8) 0px 0px 16px 0px` | Hover states, prominent cards | Observed on 25 elements |

## Components
### Tier 1: Foundational
#### Primary Button (Gold)
**Role:** Main site actions (Schedule a Demo, Get a Tour)
**Pages observed:** https://schooldata.net
**Spec:** Background `{colors.accent-gold}` (#efb626) / Text `{colors.canvas}` (#ffffff) / Radius `{radius.pill}` (9999px) / Typography `{type.body-lg}` (19px, 700)
**States observed:** Default | Hover: captured

#### Ghost Button (Accent)
**Role:** Secondary module actions (Learn More)
**Pages observed:** https://schooldata.net
**Spec:** Background transparent / Text `{colors.accent-gold}` (#efb626) / Border 1px solid `{colors.accent-gold}` / Radius 4px / Padding 14px 28px
**States observed:** Default | Hover: captured

### Tier 2: Patterns
#### Feature Card
**Role:** Displaying product modules or benefits
**Pages observed:** https://schooldata.net
**Spec:** Background `{colors.canvas}` (#ffffff) / Text `{colors.ink-muted}` (#707070) / Radius `{radius.md}` (8px) / Shadow `{shadow.soft}`
**States observed:** Default | Hover: captured

#### Module Badge
**Role:** Icon container for product categories
**Pages observed:** https://schooldata.net
**Spec:** Background (Variable Accent) / Text `{colors.canvas}` (#ffffff) / Radius 4px / Size 40px x 40px
**States observed:** Default: captured

### Tier 3: Surface-specific
#### Testimonial Card
**Role:** Customer quotes and social proof
**Pages observed:** https://schooldata.net
**Spec:** Background `{colors.canvas}` (#ffffff) / Border 1px solid `{colors.border-light}` (#d2d6dc) / Radius `{radius.md}` (8px) / Padding 32px
**States observed:** Default: captured

#### Navigation Bar
**Role:** Global site header
**Pages observed:** https://schooldata.net, https://schooldata.net/about
**Spec:** Background `{colors.canvas}` (#ffffff) / Height 86px / Text `{colors.ink-muted}` (#707070) / Typography 14px 600
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max-width | 1280px |
| Section Padding | 96px (Vertical) |
| Grid | 12-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; Hero text aligns center; 1-column grid |
| Desktop | 1440px | Full horizontal navigation; Multi-column feature grids (3-up or 4-up) |

## Imagery & decoration
Schooldata uses high-fidelity software screenshots inside device mockups (laptops/monitors) to demonstrate product value. Decorative elements include small "sparkle" icons and functional color-coded bars (2px height) above feature descriptions.

## Do's
- Use Montserrat 700 with -1.36px tracking for all H1 headlines.
- Maintain a 96px vertical gap between major content sections.
- Apply `{shadow.soft}` to all white cards sitting on white backgrounds.
- Match "Learn More" link colors to the specific module's accent color (e.g., #4bb252 for Analytics).
- Use 8px border radius for interactive cards and 9999px for primary action buttons.

## Don'ts
- **Wrong:** Using #efb626 as the primary text color for long-form body copy. **Right:** Use #707070. **Reason:** Legibility and brand hierarchy.
- **Wrong:** Using a sub-brand accent color (like #e43b5e) for a global site button. **Right:** Use the parent Gold (#efb626). **Reason:** Parent primary must remain dominant for global actions.
- **Wrong:** Applying shadows to dark-background sections. **Right:** Keep dark sections flat. **Reason:** Elevation is only visible on light surfaces in this system.
- Do not use Montserrat weights below 400 for UI elements.
- Do not mix different border radii (e.g., 20px) that are not in the validated scale.

## Similar brands
- PowerSchool
- Frontline Education
- Clever
- Tableau (Public Sector)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-gold: #efb626;
  --color-ink-muted: #707070;
  --color-ink-deep: #161e2e;
  --color-canvas: #ffffff;
  --font-main: 'Montserrat', sans-serif;
  --radius-md: 8px;
  --shadow-soft: 0px 0px 8px 0px rgba(196, 196, 196, 0.35);
}
```

```javascript
// Tailwind v4 @theme
@theme {
  --color-primary: #efb626;
  --color-surface: #ffffff;
  --font-display: "Montserrat";
  --tracking-tightest: -1.36px;
  --shadow-card: 0 0 8px 0 rgba(196, 196, 196, 0.35);
}
```

## Agent prompt examples
- "Create a feature card with an 8px border radius, a soft #c4c4c4 shadow, and a Montserrat 700 heading using -1.36px letter spacing."
- "Design a primary CTA button using #efb626 background, white text, and a 9999px pill radius."
- "Generate a 3-column grid of module blocks, each with a 40px colored badge using accent colors #e43b5e, #467cbb, and #ea653d."

## Known gaps
- Hover and Active states for secondary navigation items were not fully captured.
- Specific mobile breakpoint transitions for the "A trusted partner" section were not detailed.
- Form validation error states (semantic colors) were not observed in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://schooldata.net | Desktop 1440 | 2026-06-06 |
| About | https://schooldata.net/about | Desktop 1440 | 2026-06-06 |
| Mobile Home | https://schooldata.net | Mobile 390 | 2026-06-06 |