Brand principles
Five ideas sit underneath every decision below. When a choice is unclear, these break the tie.
Scholarly, not stuffy
An old almanac you actually want to open. Serious about the ideas, never solemn about itself.
Curiosity is the spark
The gold accent is the one bright thing in a calm field. We highlight wonder, not warnings.
Warm & grounded
Parchment and ink over cold white and pure black. Pine for growth. Nothing clinical.
Watch, then do
Cinema invites; practice cements. Every surface should move a learner toward doing.
Respect the reader
Plain, confident, a little witty. We never talk down to a curious kid — or up at an expert.
Logo & lockups
An open book with a curiosity-spark rising from the gutter: the book is the school, the spark is the curious mind. The wordmark is Scolav[o] set in Fraunces, with the final o in gold — the spark made letterform — over a tiny mono tagline.
Scolavoa school for the curiousScolavoa school for the curiousClear space & minimum size
Keep clear space equal to the height of the spark on all four sides — nothing should crowd it. Don’t shrink the full lockup below 120px wide, or the mark below 24px (use the mark alone at small sizes — favicons, avatars, app icons).
Misuse
Place on parchment, pine, or dark backgrounds with strong contrast. Keep the gold spark. Give it room. Use the mark alone when space is tight.
Stretch or rotate it, add shadows/glows/outlines to the glyph, recolor the spark, set the wordmark in another typeface, or place it on a busy, low-contrast photo.
Color system
Pine leads, gold sparks, parchment grounds, warm ink reads. Every color is a CSS variable — always reference the token, never a raw hex, so dark mode flips for free. Pine and gold brighten in dark mode; paper and ink invert.
Core palette
--pine--pine-2--pine-soft--gold--gold-soft--clay--paper--paper-2--ink--ink-2--ink-3--lineFeedback
--green--green-soft--red--red-softLevel accents
Each curriculum tier owns one hue used as a 3px top edge on tiles, dot indicators, and gradient bands — a wayfinding signal, never body color.
Contrast & pairing
Body text in Ink / Ink 2 on Paper (AAA). Pine buttons with --ink-on-pine labels. Hit 4.5:1 for text, 3:1 for UI & icons.
Set body text in Gold (decorative only), use Ink 3 for small text, or put pine text on a gold field. When unsure, run the pair through a WCAG checker.
Typography
Fraunces (variable serif, soft & wonky axes) for display & headings; Hanken Grotesk for body & UI; Spline Sans Mono for kickers, labels, and data. No Inter, no system fonts. Display sets tight (-.02em) with a touch of SOFT/WONK for warmth; body sits at 17px / 1.6.
Fraunces 600 · SOFT 30 WONK 1
Page heroes only. One per page.
Fraunces 600
Section openers, marketing H2.
Fraunces 600
Card titles, sub-sections.
Fraunces 600 italic · SOFT 40
Lesson hooks, pull-quotes.
Hanken Grotesk 400
Lead paragraphs, lesson body.
Hanken Grotesk 400 · 17px
Default UI & paragraph text.
Spline Sans Mono 600 · .22em
Eyebrows, labels, data, breadcrumbs.
Usage rules
One Display per page. Keep measure at 52–62ch for body. Use the italic Fraunces for hooks & emphasis. Mono only for short, uppercased labels.
Set long paragraphs in Fraunces, use bold weights above 600 for display, justify text, or run mono as body copy — it’s a seasoning, not a meal.
Voice & tone
Warm, calm, curious, lightly witty — and always in the second person. We sound like the best teacher you ever had: confident, plain-spoken, never condescending. Voice is constant; tone flexes — gentler after a wrong answer, brighter at a reward.
Warm
Speak to one curious person. “You” and “we”, never “users”.
Clear
Plain words, short sentences. Clever is fine; confusing never is.
Lightly witty
A wink, not a stand-up set. Humor serves the idea.
Encouraging
Progress over perfection. Mistakes are part of learning.
Say this, not that
Mechanics
Sentence case for everything except mono kickers (uppercase). Oxford comma. Spell out numbers under ten in prose. Em dashes for asides — like this. Avoid jargon, exclamation-point inflation, and “simply / just / obviously” (nothing is obvious to a learner).
Iconography
Two registers. Emoji carry warmth and instant meaning in subject tiles and steps (📖 🎬 🧠 📊). Line glyphs — single-weight, rounded-cap, drawn on a 24px grid — handle UI affordances. Both stay monochrome and inherit text color; the gold spark is reserved for the brand, not the icon set.
Keep stroke weight consistent (~1.75px at 24px), align to the pixel grid, and let icons inherit currentColor.
Mix filled and outline styles in one view, add gradients, or use icon-only buttons without an accessible label.
Illustration & imagery
Our illustration style is flat vector: clean shapes, limited palette drawn from the tokens, gentle grain, and a confident editorial line — the visual cousin of an almanac plate. No 3D renders, no glossy gradients, no stock-photo clichés. Diagrammatic clarity over decoration.
Two-slide pacing: a text slide with a small illustration cuts to a near-full illustration slide with no text. Keep a visible parchment frame (~80% of the canvas) around every illustration — no full-bleed art.
Motion
Motion is quiet and purposeful: things rise in, hovers warm up, and the gold fills a progress bar as you go. We never bounce, spin, or distract. Every transition respects prefers-reduced-motion and turns off when asked.
| Token | Duration | Easing | Used for |
|---|---|---|---|
| Quick | 120ms | ease | Button press, taps, tiny state flips. |
| Standard | 150–200ms | ease | Hovers, color & border transitions, theme switch (300ms). |
| Entrance | 400ms | cubic-bezier(.2,.7,.2,1) | Cards rising in, lesson steps, results. |
| Reveal | 600ms | cubic-bezier(.2,.7,.2,1) | Scroll-into-view, staggered by .06s. |
Animate opacity & transform (cheap, smooth). Enter from +14–18px below. Stagger lists by ~60ms. Keep it under 600ms.
Animate layout/width on scroll, loop attention-seeking motion, or block interaction behind an animation.
Spacing & grid
A warm, roomy rhythm. Content maxes at 1120px with 28px gutters; lessons narrow to 840px for comfortable reading. Radii are generous — 12px on controls, 14–18px on cards, 22–24px on feature panels. Spacing follows a soft scale (px):
Use the scale for padding & gaps. Let cards breathe (22–28px padding). Anchor everything to the 1120 / 840 containers.
Invent arbitrary values, crowd cards, or run text edge-to-edge on wide screens — measure beats width.
Components
A small, consistent kit: pill buttons, mono kickers, hairline cards, stat chips, and rounded subject tiles with a level-colored top edge. Reuse these before inventing anything new.
Accounting & Finance
AI & LLMs
Watch the lesson
A short, beautifully narrated film introduces the idea.
Accessibility
Curiosity should be available to everyone. These are commitments, not aspirations — we hold the whole product to them.
- AAText meets WCAG 2.1 AA contrast (4.5:1 body, 3:1 large & UI). Most core pairings clear AAA.
- ⌨Everything works by keyboard, in a logical order, with a visible pine focus ring. No keyboard traps.
- 🎞
prefers-reduced-motionis honored everywhere — transitions and reveals turn off. - 🔤Color is never the only signal: correct/wrong states carry icons and text, not just green/red.
- 📐Layouts reflow to 320px and stay usable at 200% zoom. Touch targets are at least 44px.
- 🗣Semantic HTML and labels; images and icon-only controls always carry alt text or an accessible name.
Assets & downloads
Building something with us, writing about us, or making a partner page? Use the approved marks and colors as documented above — don’t recreate them.
Logo pack
Primary lockup & standalone mark, on-light and on-dark, in SVG and PNG.
Color tokens
Every variable above as CSS custom properties — the same file the product ships.
Voice cheatsheet
The say-this-not-that table and tone principles, one page, ready to share.
Need files or have a question? Grab assets or reach us on the contact page.
“Make it warm, make it clear, leave room for the spark.”