Utopian Scholastic

---
name: utopian-scholastic
description: Apply the Utopian Scholastic visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Utopian Scholastic, mentions edutainment aesthetic, 90s encyclopedia style, scholastic collage, or describes cut-out stock-photo collage on white, primary brights against clean margins, classical serif display type — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Utopian Scholastic Design System

The bright, curious look of 1990s edutainment: encyclopedic stock-photo and clip-art collage on clean white, primary-bright accents, classical serif headlines, and motifs of learning — globes, planets, dinosaurs, columns, and floating cut-out objects. The style of Eyewitness books, Encarta, and classroom media from the late 80s to the early 2000s.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Utopian Scholastic.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (edutainment aesthetic, 90s encyclopedia style, scholastic collage, eyewitness style), or describes its traits: cut-out stock-photo collage on white; primary brights against clean margins; classical serif display type; educational motifs: globes, planets, specimens; labeled-diagram layouts; surreal floating-object compositions.

## Design tokens

### Color palette

- Clean encyclopedia-page white: `#ffffff` (--color-bg)
- Pale cool panel for sidebars and fact boxes: `#f4f6f9` (--color-surface)
- Ink-navy primary text: `#1c2a3a` (--color-text)
- Captions and secondary text: `#4c5b6e` (--color-text-muted)
- Encyclopedia blue — links, rules, primary actions: `#1f4fb8` (--color-accent)
- Textbook red for highlights and callouts: `#d0342c` (--color-accent-2)
- Sunny yellow for decorative bursts (not text): `#f2b705` (--color-accent-3)
- Botanical green for nature-themed sections: `#1c7c43` (--color-accent-4)
- Thin cool rules and caption lines: `#d8dee7` (--color-border)

### Typography

- Display / headings: Libre Caslon Text (fallback: Georgia, Times New Roman, serif)
- Body: Source Serif 4 (fallback: Georgia, serif)
- Mono / data: IBM Plex Mono (fallback: Courier New, monospace)
- Type scale: 1.3 ratio, base 17px — computed steps: 17px / 22px / 29px / 37px / 49px / 63px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.15, letter-spacing 0
- Body: line-height 1.65, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 36, 56, 80 — Busy but ordered, like a well-designed spread: collage clusters alternate with clean caption blocks and generous page margins.
- Border radius: none 0px, sm 4px — Mostly square — pages, plates, and fact boxes; small rounding only on interactive elements.
- Border treatment: 1px solid #d8dee7 — Thin rules everywhere: under captions, around fact boxes, framing plates — like encyclopedia layout furniture.

### Shadows

- cutout: `0 6px 14px rgba(28, 42, 58, 0.18)` — Under floating cut-out collage objects to lift them off the page
- plate: `0 2px 8px rgba(28, 42, 58, 0.10)` — Fact boxes and cards

### Layout

- Max content width: 1140px
- Encyclopedia-spread structure: main column plus fact-box sidebars and captioned figures
- Cut-out objects overlap column edges to create the collage feel
- Thin rules and numbered captions tie images to text like labeled diagrams
- Occasional surreal scale play — a giant beetle beside a tiny Parthenon

### Effects

- Drop-shadowed cut-out (photo with background removed + cutout shadow) as the core image treatment
- Thin leader lines connecting labels to parts of an image
- Yellow starburst or red circle 'DID YOU KNOW?' badges used sparingly
- Subtle paper-white gradient (barely off-white) to suggest a printed page

### Motion

- Easing: cubic-bezier(0.25, 0.1, 0.25, 1); durations 140ms / 260ms / 450ms
- Cut-outs drift gently apart on scroll (parallax at low amplitude; disable under prefers-reduced-motion)
- Fact boxes fade-slide in like turned pages
- Hover lifts a cut-out slightly with a deeper shadow

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ffffff;
  --color-surface: #f4f6f9;
  --color-text: #1c2a3a;
  --color-text-muted: #4c5b6e;
  --color-accent: #1f4fb8;
  --color-accent-2: #d0342c;
  --color-accent-3: #f2b705;
  --color-accent-4: #1c7c43;
  --color-border: #d8dee7;
  --radius-none: 0px;
  --radius-sm: 4px;
  --shadow-cutout: 0 6px 14px rgba(28, 42, 58, 0.18);
  --shadow-plate: 0 2px 8px rgba(28, 42, 58, 0.10);
  --border-default: 1px solid #d8dee7;
  --font-display: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --font-body: "Source Serif 4", Georgia, serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;
  --text-base: 17px;
  --leading-heading: 1.15;
  --leading-body: 1.65;
  --tracking-heading: 0;
  --tracking-body: 0;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 140ms;
  --duration-base: 260ms;
  --duration-slow: 450ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@400;700&family=Source+Serif+4:wght@400;600&family=IBM+Plex+Mono:wght@400&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** White bar with a 1px rule below; serif wordmark, small-caps section links in encyclopedia blue; active section marked by a thin double rule
- **Hero:** Serif headline with a collage cluster of drop-shadowed cut-outs (globe, planet, specimen) orbiting it, thin caption rules, blue primary CTA
- **Card:** White plate with 1px rule border, captioned image area with cutout shadow, serif title, numbered figure label in mono
- **Button (primary):** Encyclopedia-blue rectangle (4px radius) with white serif-adjacent label; darkens on hover
- **Button (secondary):** White with 1px blue border and blue label
- **Form fields:** White field with 1px rule border, 4px radius; focus adds a 2px blue border and the label turns blue

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

A white field with crisp cut-out photographic objects — a globe, a beetle, a Corinthian column, Saturn — floating in loose orbit around a classical serif headline, each with a thin caption rule like an encyclopedia plate. Spend boldness here; keep everything else quiet.

## Do

- Compose with cut-out imagery — objects, not scenes, floating on white
- Caption and label things; the diagram furniture is the charm
- Use primary brights as punctuation against dominant white and navy
- Mix eras and scales surreally: planets with beetles with columns

## Don't

- No dark backgrounds — the white page is the canvas
- Don't use grungy textures or distressed type; the mood is crisp wonder
- Avoid corporate gradient blobs; imagery must feel photographic or engraved
- Never crowd out the captions — uncaptioned collage becomes chaos

## Accessibility notes

- Ink navy and encyclopedia blue both pass 4.5:1 on white; textbook red (#d0342c) sits near the line — use it at 18px+ or bold, and never rely on red alone to signal meaning
- Sunny yellow (#f2b705) is decorative-only and fails as text on white; pair yellow badges with navy text
- Collage parallax must be disabled under prefers-reduced-motion, and every collage image needs real alt text since the imagery carries meaning

## Reference sites

- Wikipedia — Utopian Scholastic: https://en.wikipedia.org/wiki/Utopian_Scholastic
- CARI — Utopian Scholastic: https://cari.institute/aesthetics/utopian-scholastic
- Aesthetics Wiki — Utopian Scholastic: https://aesthetics.fandom.com/wiki/Utopian_Scholastic
- CARI Are.na — Utopian Scholastic channel: https://www.are.na/consumer-aesthetics-research-institute/utopian-scholastic-kofobzbjyhg

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip utopian-scholastic.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/utopian-scholastic.json

Settings → Capabilities → Skills → Upload skill → utopian-scholastic.zip