---
title: "School design system"
variant: extended
source: https://schoooool.com/
captured_at: 2026-10-12
theme: light
industry: design
generator: Design DNA (https://four.wiralomi.com/style/schoooool-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# School · Design System

> A playful studio canvas for ideas and work.

**Theme:** light · **Industry:** design · **Source:** https://schoooool.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

School presents a creative studio through a playful, modular collage of interactive tools, project previews, and editorial content. Soft gray surroundings and crisp white cards give the varied imagery a calm, gallery-like frame.

## North star

Treat the page as a calm gray studio wall holding a lively, carefully varied collage of crisp white interactive cards.

## Overview

The page uses a light, gallery-like palette: a broad #dbdbdb canvas supports white and near-white modules, while #303030 carries the main copy and compact labels. The bright accents are restrained in the interface; lilac and blue appear as small card details, while much of the stronger color belongs to artwork and interactive demos. Helvetica handles the large, relaxed studio introduction and readable body copy. IBM Plex Mono gives card headings, metadata, and controls a precise, catalog-like voice. A loose multi-column collage places unequal cards beside one another rather than imposing a uniform portfolio grid. Rounded white panels, small pills, and subtle shadows contain a mix of portraits, project imagery, playful widgets, and editorial features. Generous gray gutters keep the busy content legible and let each module feel like an object on a studio wall.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Ink | `#303030` | `--color-studio-ink` | brand | Primary headings, body copy, card titles, labels, and most interface text. |
| Gallery Gray | `#dbdbdb` | `--color-gallery-gray` | brand | Dominant page canvas and broad background band separating the collage from the viewport. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Clean card surfaces, media framing, and occasional light text or fine separators. |
| Soft Porcelain | `#f9f9f9` | `--color-soft-porcelain` | surface | Main backgrounds for project, profile, and interface cards. |
| Quiet Gray | `#808080` | `--color-quiet-gray` | neutral | Secondary hairlines and occasional media-edge or subdued heading details. |
| Pale Graphite | `#aaaaaa` | `--color-pale-graphite` | neutral | Sparse secondary heading details; not a defining interface color. |
| Misty Silver | `#bfbfbf` | `--color-misty-silver` | neutral | Subtle borders and minor badge or interface details. |
| Cloud Input | `#ededed` | `--color-cloud-input` | surface | Pale input and card details, including the rounded name-entry field. |
| Pure Black | `#000000` | `--color-pure-black` | semantic | Minor dark media or illustration detail, not a primary text color. |
| Warm Sand | `#e2ceb8` | `--color-warm-sand` | semantic | A muted color found in small visual details and imagery rather than core UI. |
| Slate Lavender | `#6a728e` | `--color-slate-lavender` | semantic | Muted illustration or media detail; not a dominant brand surface. |
| Lilac Accent | `#e0bff4` | `--color-lilac-accent` | accent | Small accent in interactive card details and illustrated elements. |
| Signal Blue | `#648fe0` | `--color-signal-blue` | accent | Blue card accent and text within a featured interactive verification module. |

### Semantic aliases

`--color-canvas` → `#dbdbdb` (Gallery Gray) · `--color-surface` → `#f9f9f9` (Soft Porcelain) · `--color-surface-2` → `#ffffff` (Paper White) · `--color-text` → `#303030` (Studio Ink) · `--color-text-muted` → `#ffffff` (Paper White) · `--color-border` → `#ffffff` (Paper White) · `--color-accent` → `#e0bff4` (Lilac Accent) · `--color-accent-2` → `#648fe0` (Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#303030` | `#dbdbdb` | 9.53:1 | AAA |
| `#303030` | `#f9f9f9` | 12.54:1 | AAA |
| `#303030` | `#ffffff` | 13.2:1 | AAA |
| `#ffffff` | `#dbdbdb` | 1.38:1 | fail |
| `#ffffff` | `#f9f9f9` | 1.05:1 | fail |
| `#e0bff4` | `#dbdbdb` | 1.17:1 | fail |
| `#e0bff4` | `#f9f9f9` | 1.54:1 | fail |
| `#e0bff4` | `#ffffff` | 1.62:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| helvetica | `--font-body` | system | 400, 300, 700 | Studio introduction, large headings, body copy, and prominent input text. | Helvetica Neue |
| IBM Plex Mono | `--font-mono` | webfont | 400 | Card headings, navigation and links, labels, captions, and compact metadata. | IBM Plex Mono |

- **helvetica:** Regular is the main voice; light weight appears in secondary large headings. Sentence case, unforced tracking.
- **IBM Plex Mono:** Regular monospaced text adds a catalog-like rhythm; used in sentence case and small, compact labels.

### Type scale — Major Third (ratio ≈ 1.25, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 44px | 400 | 1.4 | 0 | — | helvetica | Main studio introduction in the first viewport. |
| h2 | 42px | 300 | 1.4 | 0 | — | helvetica | Large secondary statements and editorial headings. |
| h3 | 25px | 400 | 1.4 | 0 | — | IBM Plex Mono | Monospaced titles for cards and content modules. |
| h4 | 24px | 400 | 1.4 | 0 | — | helvetica | Supporting headings within cards and feature blocks. |
| body | 18px | 400 | 1.4 | 0 | — | helvetica | Readable introductory and supporting copy. |
| caption | 11px | 400 | 1.4 | 0 | — | IBM Plex Mono | Compact card metadata, tags, and small labels. |
| code | 11px | 400 | 1.4 | 0 | — | IBM Plex Mono | Monospaced technical or interface-style microcopy. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 4, 5, 6, 8, 10, 12, 18, 20, 24, 30 px.
- Section rhythm 100px · element gap 2px · card padding — · max content width 1392px.

The page uses a spacious desktop canvas with a measured maximum width of 1392px. Its upper content is a loose, asymmetric multi-column collage: a narrow introduction and tools column sits beside larger profile, drawing, and project cards. Align card edges where useful, but vary module widths and heights to keep the portfolio lively. Broad gray gutters separate modules; content continues into a full-width visual section and a compact footer. The measured section gap is generous, while card internals remain compact.

## Shape & elevation

- Radius: input `9999px` · card `10px` · media `50%` · badge `9999px` · xs `10px` · pill `9999px`
- Shadow `sm` (card, other): `rgba(0, 0, 0, 0.18) 0px 1px 4px 0px`
- Shadow `sm-2` (other): `rgba(0, 0, 0, 0.16) 0px 3px 6px 0px`
- Shadow `sm-3` (text): `rgba(0, 0, 0, 0.12) 0px 1px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 2px 0px`
- Shadow `sm-4` (other): `rgba(0, 0, 0, 0.33) 0px 1px 4px 0px`
- Shadow `hairline` (media): `rgb(128, 128, 128) -10px 10px 0px 0px`
- Motion: standard transition `0.5s cubic-bezier(0.33, 1, 0.68, 1)` on interactive elements.

Cards sit subtly above the gray canvas through restrained soft shadows rather than heavy outlines. White and near-white surfaces do most of the separation work; use fine gray or white hairlines sparingly. Rounded card corners and pill-shaped badges add gentle depth, while media can use a sharper edge or offset accent.

## Imagery

Mix studio and project photography with playful 3D character portraits, color-picker and drawing widgets, editorial images, and video-led visual blocks. Keep assets within crisp white or near-white cards, with rounded card corners and simple framing. Let artwork supply most of the saturated color; the surrounding interface stays quiet. Preserve the collage-like variety rather than applying a uniform image treatment.

## Components

### Studio introduction

Large Helvetica greeting and studio statement on the gray canvas, paired with compact pill-shaped contact details.

### Project and content cards

Near-white panels with 10px measured card radius, dark text, subtle shadow, and IBM Plex Mono titles or metadata.

### Profile builder

White interactive panel combining an illustrated character, rounded pale name input, and compact selection controls.

### Project preview

Large media-led card with a small monospaced heading and rounded campaign or production badges.

### Editorial feature

Image-led content card with a compact label, prominent featured artwork, and supporting story text.

### Contact pills

Small rounded, light-colored contact links set in monospaced type.

### Interactive demo card

Embedded playful tool or verification module; its blue background is an isolated accent, not a general page surface.

### Measured component styles

- **Link** (“Selected Work”): transparent background · text #303030 · radius 0px · padding 0px · 400 16px IBM Plex Mono
- **Input** (“Langston”): background #ededed · text #303030 · radius 25px · padding 1px 2px · 400 25px helvetica
- **Card** (“(Y)our interface color.”): background #f9f9f9 · text #303030 · radius 10px · padding 0px · 400 16px IBM Plex Mono · shadow rgba(0, 0, 0, 0.18) 0px 1px 4px 0px
- **Badge** (“Campaign”): background #bbbbbb · text #303030 · radius 20px · padding 4px 12px · 400 11px IBM Plex Mono

## Do

- Keep the main canvas light gray and the content cards white or near-white.
- Use Helvetica for studio-scale statements and readable body text.
- Use IBM Plex Mono for card labels, metadata, and compact links.
- Build an irregular collage with varied card sizes and clear gutters.
- Let project imagery and interactive demos carry the strongest colors.
- Use soft shadows, rounded cards, and pill details with restraint.

## Don't

- Do not turn the collage into a uniform grid of identical cards.
- Do not use saturated accents as full-page backgrounds.
- Do not overdecorate cards with strong borders or deep shadows.
- Do not replace the monospaced microcopy with generic rounded display type.
- Do not force the artwork into one photographic or illustrative style.
- Do not crowd the gray gutters with extra interface elements.

## Agent prompt

Build a new creative-studio page in School's calm, playful collage style. Use Gallery Gray (#dbdbdb) as the broad canvas, Paper White (#ffffff) and Soft Porcelain (#f9f9f9) for softly elevated cards, and Studio Ink (#303030) for primary text. Keep Lilac Accent (#e0bff4) and Signal Blue (#648fe0) to small interface or illustration details. Set large statements and body copy in Helvetica; use IBM Plex Mono for card headings, links, tags, and metadata. Arrange unequal modules in an airy multi-column collage with generous gutters, restrained shadows, rounded card corners, and pill-shaped labels. Combine project imagery, playful interactive widgets, and editorial content without forcing them into a single visual treatment. Keep the overall interface quiet so the artwork remains vivid.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed light opening with an asymmetric collage of introduction, interactive profile and color tools, project cards, and editorial media. | browse selected work, edit profile, interact with demos | gray canvas, uneven card grid, rounded white panels, monospaced metadata |
| 2 | gallery | Full-width media-led closing band with a single prominent image on the measured gray background. | view closing artwork | full-bleed image, gray section canvas |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/schoooool-com