# Schoolblocks Design System

> A structured, blue-anchored educational canvas utilizing soft-radius panels and clear typographic hierarchy to organize complex school district data.

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

## TL;DR
Schoolblocks employs a "Professional Blue" palette centered on `#4a90e2` (Primary Blue) and `#2c3e50` (Text Primary) against a clean white canvas. The system relies on a structured hierarchy of `-apple-system` sans-serif typography, featuring large 56px display headings and generous 16px body text. Visual depth is achieved through soft-radius cards (`16px` to `24px`) and subtle multi-layered shadows rather than heavy borders. Interactive elements are consistently pill-shaped or high-radius buttons, often utilizing a secondary blue `#357abd` for hover or emphasis.

## Signature DNA
1. **The "Soft-Box" Container:** Content is grouped in large white or light-gray (`#f8f9fa`) panels with radii between 16px and 24px, often featuring a subtle `0px 20px 60px` shadow to separate sections (observed on Homepage and About).
2. **Chromatic Information Anchors:** Use of `#4a90e2` for primary actions and iconography, paired with a deep slate `#2c3e50` for high-contrast readability in headings.
3. **System-Native Typography:** Heavy reliance on `-apple-system` (San Francisco) across all weights (400-800), ensuring a "utility-first" feel that mimics modern OS interfaces for administrative trust.

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
| :--- | :--- | :--- | :--- | :--- |
| None | N/A | N/A | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--white` | `#ffffff` | Page background, card surface | 51 | 0.8 | computed_style |
| `--text-primary` | `#2c3e50` | Primary headings and labels | 21 | 1.0 | css_variable |
| `--text-secondary` | `#5a6c7d` | Sub-headings and secondary body | 14 | 1.0 | css_variable |
| `--bg-soft` | `#f8f9fa` | Alternating section backgrounds | 8 | 0.6 | computed_style |
| `--border-light` | `#e2e8f0` | Subtle dividers and card outlines | 5 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--primary-blue` | `#4a90e2` | Primary CTA background, icons | 33 | 1.0 | css_variable |
| `--secondary-blue` | `#357abd` | Hover states, active links | 3 | 1.0 | css_variable |
| `--brand-purple` | `#881280` | Pricing and About page accents | 20 | 0.8 | computed_style |
| `--link-blue` | `#0000ee` | Standard inline text links | 26 | 0.8 | computed_style |

### Semantic
| Token | Hex | Role |
| :--- | :--- | :--- |
| Success | `#4a90e2` | Used for checkmarks and success titles |
| Info | `#e8f4fd` | Background for info callouts |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| -apple-system | 400, 500, 600, 700, 800 | All UI, Headings, and Body | Inter | System Native |
| Arial | 400, 600 | Secondary body, specific buttons | Arial | Standard |
| monospace | 400 | Technical UI, folder buttons | Roboto Mono | Standard |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `display-lg` | 56px | 67.2px | -1.12px | 600 | Hero H1 | `h2` |
| `display-md` | 48px | 62.4px | normal | 600 | Section Headings | `h2.modern-heading` |
| `heading-lg` | 35px | 45.76px | normal | 600 | Feature Headings | `h2` |
| `heading-md` | 32px | 51.2px | normal | 400 | Feature Icons | `div.feature-icon` |
| `heading-sm` | 24px | 38.4px | normal | 700 | Card Titles | `h4` |
| `body-lg` | 18px | 28.16px | normal | 500 | Feature text | `span.feature-text` |
| `body-md` | 16px | 25.6px | normal | 400 | Default Body | `section.hero-component` |
| `body-sm` | 14px | 23.04px | normal | 600 | Feature Links | `a.feature-link` |
| `caption` | 12px | 19.2px | normal | 400 | Small labels | `div.feature-check` |

### Principles
1. **Tight Display Tracking:** Large display type (56px) uses negative letter-spacing (-1.12px) to maintain visual density.
2. **Generous Body Leading:** Body text (16px) maintains a 1.6x line-height (25.6px) for readability.
3. **Weight-Based Hierarchy:** Use 600-800 weight for data points (stats) and 400-500 for descriptive prose.

## Spacing
**Base unit:** 4
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `space-xs` | 8px | 23 |
| `space-sm` | 16px | 11 |
| `space-md` | 20px | 15 |
| `space-lg` | 32px | 9 |
| `space-xl` | 40px | 12 |
| `space-section` | 100px | 3 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `radius-sm` | 2px | Form inputs, small cards | `radius: 2px` |
| `radius-md` | 12px | UI Controls, surface containers | `radius: 12px` |
| `radius-lg` | 16px | Feature cards, testimonials | `radius: 16px` |
| `radius-xl` | 24px | Large content panels | `radius: 24px` |
| `radius-pill` | 50px | Primary CTA buttons | `radius: 50px` |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `shadow-low` | `rgba(0, 0, 0, 0.05) 0px 8px 25px 0px` | Hovered cards | Evidence list |
| `shadow-md` | `rgba(0, 0, 0, 0.1) 0px 20px 60px 0px` | Main content panels | Evidence list |
| `shadow-accent` | `rgba(74, 144, 226, 0.3) 0px 8px 25px 0px` | Primary Blue buttons | Evidence list |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action (e.g., "Get Started")
**Pages observed:** Homepage, Pricing
**Spec:** Background: `#4a90e2` | Text: `#ffffff` | Radius: `50px` | Padding: `14px 24px` | Typography: `18px / 600`
**States observed:** Default | Hover: Captured (uses `#357abd`)

#### Text Input
**Role:** Lead capture and contact forms
**Pages observed:** Homepage
**Spec:** Background: `#f8f9fa` | Text: `#000000` | Border: `2px solid #e9ecef` | Radius: `12px` | Padding: `16px 20px`
**States observed:** Default | Focus: Captured

### Tier 2: Patterns
#### Feature Card
**Role:** Highlighting product capabilities
**Pages observed:** Homepage
**Spec:** Background: `transparent` | Border: `1px solid rgba(255, 255, 255, 0.4)` | Radius: `20px` | Shadow: `rgba(0, 0, 0, 0.05) 0px 4px 16px`
**States observed:** Default

#### Testimonial Panel
**Role:** Social proof sections
**Pages observed:** Homepage, About
**Spec:** Background: `rgba(255, 255, 255, 0.25)` | Border: `1px solid rgba(255, 255, 255, 0.3)` | Radius: `24px` | Padding: `40px 30px`
**States observed:** Default

### Tier 3: Surface-specific
#### Pricing CTA
**Role:** Conversion-focused button in pricing grid
**Pages observed:** Pricing
**Spec:** Background: `#ffffff` | Text: `#4a90e2` | Border: `1px solid #4a90e2` | Radius: `50px` | Font: `Arial 18px / 600`
**States observed:** Default

#### Info Badge
**Role:** Small status or category labels
**Pages observed:** Homepage
**Spec:** Background: `transparent` | Text: `#333333` | Radius: `12px` | Padding: `10px 8px`
**States observed:** Default

## Layout
| Property | Value |
| :--- | :--- |
| Max Container Width | 1200px |
| Section Padding (Vertical) | 80px - 100px |
| Grid Gap | 24px - 32px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Stacked cards, 100% width buttons, reduced H1 size |
| Desktop | 1440px | Multi-column grids (3-up or 4-up), horizontal navigation |

## Imagery & decoration
Schoolblocks uses clean, line-art style illustrations with blue accents to represent "School Connections." It avoids heavy photography in favor of high-contrast icons and vector-based graphics that maintain the "software-as-a-service" aesthetic.

## Do's
- Use `#4a90e2` for all primary interactive elements.
- Apply a `16px` or `24px` radius to all content-containing cards.
- Ensure headings use `-apple-system` with a minimum weight of 600.
- Use `#f8f9fa` for alternating section backgrounds to define page rhythm.
- Maintain a `100px` vertical gap between major page sections.

## Don'ts
- **Wrong:** Using `#881280` (Purple) as the primary global CTA color. **Right:** Use `#4a90e2`. **Reason:** Purple is a secondary accent for specific pages like Pricing, not the brand primary.
- Do not use sharp corners (`0px`) for interactive buttons; always use `50px` (pill).
- Do not use pure black `#000000` for body text; use `--text-primary` (`#2c3e50`).
- Avoid using borders heavier than `2px` on form inputs.
- Do not use serif fonts for UI labels or navigation.

## Similar brands
- PowerSchool
- Clever
- Canvas LMS
- Zendesk (Garden)

## Quick start

### CSS Custom Properties
```css
:root {
  --primary-blue: #4a90e2;
  --secondary-blue: #357abd;
  --text-primary: #2c3e50;
  --text-secondary: #5a6c7d;
  --bg-soft: #f8f9fa;
  --radius-lg: 16px;
  --radius-pill: 50px;
  --shadow-md: 0 20px 60px rgba(0, 0, 0, 0.1);
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #4a90e2;
  --color-secondary: #357abd;
  --color-slate-900: #2c3e50;
  --radius-card: 16px;
  --radius-button: 50px;
  --shadow-panel: 0 20px 60px 0 rgba(0, 0, 0, 0.1);
}
```

## Agent prompt examples
- "Generate a primary button using Schoolblocks blue #4a90e2, white text, and a 50px border radius."
- "Create a content card with a 16px radius, white background, and a subtle 0 8px 25px shadow."
- "Design a hero section with a 56px heading in -apple-system, weight 600, and -1.12px letter spacing."

## Known gaps
- Hover states for secondary navigation items were not fully captured in the computed style logs.
- Mobile-specific transition durations for the hamburger menu are missing from the evidence.

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