name: maplewood-design
version: alpha
description: >
  Maplewood Day School is a warm, hand-made K–8 school site built on a cream
  paper surface with a five-crayon palette — navy, red, yellow and teal — bound
  together by a single move: everything wears a chunky 3px navy outline with a
  hard offset shadow, like cut-paper bulletin-board art. A serif headline face
  (Bitter), a friendly sans body (Cabin) and a handwritten marker accent (Kalam)
  carry the schoolhouse voice. Signature compositions include a hand-drawn SVG
  owl mascot, a horizontally-scrolling "bell schedule" strip of ticket-notched
  cards, a staggered "chapter" program grid, and a tilted cork-board of taped
  event cards. Geometry is generously rounded (8–40px, with one 120px corner)
  and motion is springy and playful via anime.js.
colors:
  # Surface
  cream: '#FBF3E0'        # page background, card fills, light text on dark
  # Brand / Accents
  navy: '#243A6B'         # primary ink, all 3px borders, offset shadows, dark panels
  red: '#E2483B'          # primary CTA fill, timestamps, accent links, beak
  yellow: '#F6C544'       # secondary highlight, "NOW" card, icon color on navy, underlines
  teal: '#2E7D7B'         # mascot panel, events section bg, program icons, chalk underline
  # Text (all derived from navy)
  ink: '#243A6B'          # default body + heading color (clr-navy)
  ink-80: 'rgba(36,58,107,0.80)'  # secondary paragraph copy (clr-navy/80)
  ink-70: 'rgba(36,58,107,0.70)'  # footer fine print (clr-navy/70)
  # Hairlines / Borders
  border: '#243A6B'       # 3px solid navy on nearly every box (b3 / b3-b)
  # Decorative
  tape: 'rgba(246,197,68,0.70)'   # translucent yellow "tape" on pinned event cards
typography:
  display:
    fontFamily: "'Bitter', serif"
    fontSize: clamp(2.6rem, 6vw, 3.4rem)
    fontWeight: 900
    lineHeight: 1.04
    letterSpacing: '-0.01em'
  heading:
    fontFamily: "'Bitter', serif"
    fontSize: 2.25rem
    fontWeight: 800
    lineHeight: 1.1
  body:
    fontFamily: "'Cabin', sans-serif"
    fontSize: 1.125rem
    fontWeight: 400
    lineHeight: 1.6
  hand:
    fontFamily: "'Kalam', cursive"
    fontSize: 1.25rem
    fontWeight: 700
  eyebrow:
    fontFamily: "'Bitter', serif"
    fontSize: 0.75rem
    fontWeight: 600
    letterSpacing: '0.1em'
    textTransform: uppercase
rounded:
  sm: 8px      # eyebrow chip
  md: 12px     # logo tile, inputs, buttons
  lg: 16px     # bell cards
  xl: 18px     # program cards (top corners), footer panels
  card: 14px   # pinned event cards
  hero: 40px   # mascot panel base radius
  feature: 120px  # mascot panel single oversized top-right corner
  full: 9999px # NOW badge, ticket notches
spacing:        # base unit 4px; 8px rhythm dominant
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  '2xl': 56px
  '3xl': 64px
components:
  navButtonApply:
    backgroundColor: '{colors.red}'
    textColor: '{colors.cream}'
    typography: '{typography.eyebrow}'
    rounded: '{rounded.md}'
    border: '3px solid {colors.navy}'
    shadow: '4px 4px 0 {colors.navy}'
    padding: '8px 16px'
  ctaPrimary:
    backgroundColor: '{colors.red}'
    textColor: '{colors.cream}'
    typography: '{typography.heading}'
    rounded: '{rounded.lg}'
    border: '3px solid {colors.navy}'
    shadow: '4px 4px 0 {colors.navy} → 8px 8px 0 on hover (translate -2,-2)'
    padding: '14px 28px'
  eyebrowChip:
    backgroundColor: '{colors.teal}'
    textColor: '{colors.cream}'
    typography: '{typography.eyebrow}'
    rounded: '{rounded.sm}'
    border: '3px solid {colors.navy}'
    padding: '6px 12px'
  bellCard:
    backgroundColor: '{colors.cream}'
    textColor: '{colors.navy}'
    typography: '{typography.heading}'
    rounded: '{rounded.lg}'
    border: '3px solid {colors.navy}'
    padding: '20px'
    note: 'fixed width 176–192px, varying heights; circular navy ticket notches on both sides'
  bellCardActive:
    backgroundColor: '{colors.yellow}'
    textColor: '{colors.navy}'
    rounded: '{rounded.lg}'
    border: '3px solid {colors.navy}'
    shadow: '4px 4px 0 {colors.navy}'
    note: 'NOW badge (navy pill, cream text); pulses scale 1→1.06'
  programCard:
    backgroundColor: '{colors.cream}'
    textColor: '{colors.navy}'
    typography: '{typography.heading}'
    rounded: '{rounded.xl} top only, square bottom'
    border: '3px solid {colors.navy}'
    padding: '24px'
    note: 'CH.0x tab tucked under top edge; hovers flip bg to teal/red/yellow with inverted text'
  pinnedEventCard:
    backgroundColor: '{colors.cream}'
    textColor: '{colors.navy}'
    typography: '{typography.hand}'
    rounded: '{rounded.card}'
    border: '3px solid {colors.navy}'
    padding: '20px'
    note: 'absolutely positioned at ±1–3deg rotation with translucent yellow tape strip'
  input:
    backgroundColor: '{colors.cream}'
    textColor: '{colors.navy}'
    typography: '{typography.body}'
    rounded: '{rounded.md}'
    border: '3px solid {colors.navy}'
    padding: '12px 16px'
  newsletterPanel:
    backgroundColor: '{colors.navy}'
    textColor: '{colors.cream}'
    typography: '{typography.heading}'
    rounded: '{rounded.xl}'
    border: '3px solid {colors.navy}'
    padding: '28px'
motion:
  chalkUnderline: 'anime.js svg draw-on 0→1, 1200ms, ease inOut(3), delay 300ms'
  mascotDrop: 'panel drops from -40vh to 0 with spring(stiffness 90, damping 9, mass 1.4)'
  mascotWing: 'wing rotates 0 → -22 → 0, 900ms inOut(2), infinite loop, delay 700ms'
  bellPulse: 'active NOW card scales 1→1.06, 1400ms inOut(2), alternate loop'
  programIconsIn: 'icons opacity 0→1 + scale 0.85→1, stagger 120ms, on scroll into view'
  programHover: 'card lifts y -6, scale 1.02 (220ms out(3)); bg + text colors flip'
  pinHover: 'card straightens rotate→0, scale 1.05 spring(stiffness 160, damping 10), raises z-index'
  ctaHover: 'transform translate(-2px,-2px) + shadow grows to 8px 8px 0, .18s ease'
icons:
  library: Tabler Icons (webfont, ti ti-*)
  style: outline
  sizes: { sm: 16px, md: 24px, lg: 32px, xl: 60px }
  color: '{colors.teal}'  # default; yellow on navy panels, navy on yellow cards

Maplewood Day School

maplewood-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

Maplewood is a hand-made schoolhouse brand built on a warm cream paper surface (#FBF3E0) and a five-crayon palette: navy ink (#243A6B), apple red (#E2483B), crayon yellow (#F6C544) and chalkboard teal (#2E7D7B). The signature move is unmistakable cut-paper bulletin-board styling — almost every element wears a chunky 3px solid navy border (.b3) paired with a hard offset drop shadow (5px 5px 0 or 4px 4px 0 in navy, no blur), so cards, buttons and panels read like stickers pinned to a board. The type story is a schoolroom trio: Bitter (a slab-ish serif) for headings, Cabin for running body, and Kalam (a marker hand) for playful asides like "Hi, I'm Maple! 👋" and section eyebrows. Hand-drawn SVG owns the personality — a fully custom owl mascot named Maple, a chalk underline that draws itself under the hero word, and dot-grid / spiral-binding background textures. Composition leans into craft: a horizontally scrolling bell-schedule strip of ticket-notched cards, a staggered "chapter" program grid whose cards have only their top corners rounded, and a tilted cork-board of taped event cards. Geometry is soft and friendly (8–40px radii) with one dramatic 120px swoop on the mascot panel, and anime.js makes it bounce, wave and pulse.

Colors

Surface. cream #FBF3E0 is the whole page and the default fill for light cards (bell cards, program cards, event cards, inputs); it also serves as the text color on dark panels (.clr-cream).

Brand / Accents. navy #243A6B is the system's backbone — it's the default text ink, the color of every 3px border, every offset shadow, and the fill of dark panels (header logo tile, "Today at School" band, newsletter box, footer links blocks). red #E2483B is the primary action color: the Apply and Book a Tour / Sign Up buttons, the bell-schedule timestamps, event dates, the owl's beak, and accent links. yellow #F6C544 is the highlight voltage — the active "NOW" bell card, icon color sitting on navy panels, the hero's underline decoration, and the translucent "tape" on pinned cards (rgba(246,197,68,.70)). teal #2E7D7B anchors the larger color fields: the mascot panel, the full-bleed events section, the program icons, and the chalk underline stroke.

Text. All text is navy or a transparency of it: solid #243A6B for headings and primary body, clr-navy/80 for secondary paragraphs, clr-navy/85 for footer link lists, and clr-navy/70 for the copyright line.

Hairlines / Borders. There is effectively one border in the system: 3px solid #243A6B (.b3 all around, .b3-b bottom only). It does the work that shadows do elsewhere.

Typography

Three Google Fonts loaded via one @import: Bitter (serif, weights 400–900), Cabin (sans, 400–700), and Kalam (handwriting, 400/700). Bitter is the display/heading face and reaches font-black (900); Cabin is the body face; Kalam is the marker accent for eyebrows, badges and signoffs. No mono face is used. These are all open-source Google Fonts, so no substitution is needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp 2.6→3.4rem	900	1.04	tight	Hero H1 "Welcome to Maplewood"
heading	~2.25rem (text-2xl→4xl)	800	1.1	tight	Section H2s, card titles
body	1.125rem	400	1.6	—	Paragraphs, lists, inputs
hand	1.25rem	700	—	—	Eyebrows, badges, signoffs (Kalam)
eyebrow	0.75rem	600	—	0.1em	Uppercase pill labels (Bitter)

Layout

Base unit is 4px with an 8px rhythm; the content column is capped at max-w-[1280px] with px-6 gutters. The page stacks full-width bands separated by 3px navy rules (.b3-b): header → split hero → dark bell-schedule band → program grid → teal events band → footer. The hero is an asymmetric 5fr / 6fr grid (mascot panel left, copy right). The bell schedule is a horizontal overflow-x-auto strip of fixed-width cards with a custom teal scrollbar. The program grid is a 4-up layout where alternating cards are nudged down (lg:mt-8) for a hand-placed feel. The events section is a fixed-height relative container with cards absolutely positioned and rotated like a cork-board. Whitespace is generous and the mood is crafted, not minimal — texture (dot grid, spiral binding) fills empty space.

Elevation & Depth

Depth is expressed through hard, blur-free offset shadows, never soft elevation. .offset-red is 5px 5px 0 #243A6B and .offset-navy is 4px 4px 0 #243A6B; on hover the CTA shadow grows to 8px 8px 0 as the element translates up-left, creating a "lifting off the page" effect. The 3px navy border itself provides most of the visual separation. Backgrounds add depth via texture rather than blur: a navy dotgrid radial pattern at 8–10% opacity, and a spiral-top repeating-linear-gradient that mimics notebook spiral binding atop the footer. No glass, no glow, no gradients-as-fills.

Shapes

Rounded and friendly throughout. The radius scale runs 8px (chips) → 12px (logo tile, buttons, inputs) → 14px (event cards) → 16px (bell cards) → 18px (program cards, footer panels) → 40px (mascot panel). Two deliberate breaks from uniform rounding give character: the mascot panel has one oversized 120px top-right corner (rounded-tr-[120px]), and program cards round only their top corners (rounded-t-[18px] rounded-b-none) so they read like tabbed file folders. Fully-round (9999px) appears on the NOW pill badge and the circular ticket notches punched into the sides of bell cards.

Components

• Apply button (nav) — red fill, cream text, 3px navy border, 4px 4px 0 navy offset, 12px radius, Bitter semibold; label "Apply".
• Primary CTA — red fill, cream text, 3px border, navy offset (grows on hover), 14px radius, Bitter bold; labels "Book a Tour", "Sign Up".
• Eyebrow chip — teal fill, cream uppercase Kalam/Bitter text, 3px border, 8px radius; e.g. "Now enrolling · Fall 2026".
• Bell card — cream fill, 3px border, 16px radius, fixed 176–192px width and varying height, circular navy ticket notches on both sides; red timestamp, teal Tabler icon, Bitter title. Active variant is yellow with navy offset, a navy "NOW" pill, and a pulse animation.
• Program card — cream fill, 3px border, top-only 18px radius, navy "CH.0x" tab tucked under the top edge; teal 60px icon, Bitter title, Kalam red link. Hover flips the whole card to its data-hover color with inverted text.
• Pinned event card — cream fill, 3px border, 14px radius, absolutely positioned at ±1–3° rotation with a translucent yellow tape strip; red Bitter date, Kalam title, Cabin detail with clock icon.
• Input — cream fill, navy text, 3px border, 12px radius; placeholder "you@email.com".
• Newsletter panel / footer link blocks — navy fill, cream/yellow text, 3px border, 18px radius.

Motion

Powered by anime.js v4 (esm.sh import). On load: the chalk underline draws itself under "Maplewood" (1200ms inOut(3)), and the mascot panel drops in from -40vh on a soft spring. Persistent loops: the owl's wing waves (0→-22→0, 900ms) and the active bell card pulses (scale 1→1.06, 1400ms alternate). On scroll, program icons stagger in (opacity + scale, 120ms stagger). On hover, program cards lift and flip color, pinned event cards straighten to 0° and pop on a stiff spring while raising z-index, and CTAs translate up-left with a growing offset shadow (CSS transition, .18s ease).

Iconography

Tabler Icons via the webfont CDN (ti ti-*), outline style. Used at multiple sizes — small inline (clock, walk), 24–32px in cards, and oversized 60px (text-6xl) decorative icons in the program grid. Default color is teal; icons flip to yellow on navy panels and to navy on the yellow active card. Examples: ti-school, ti-bell, ti-book-2, ti-palette, ti-trophy, ti-users, ti-mail, ti-walk. The owl mascot is bespoke inline SVG, not an icon-font glyph.

Do's and Don'ts

• Do wrap every card, button and panel in the 3px navy border — it is the glue of the whole system.
• Do use hard, blur-free offset shadows (4–8px navy) for depth; never soft blurred shadows.
• Do keep the trio of voices distinct: Bitter for headlines, Cabin for body, Kalam for handwritten asides.
• Do lean on craft textures (dot grid, spiral binding, tape, ticket notches) to fill space.
• Don't introduce gradients-as-fills, glassmorphism, or glow — the surface is flat paper.
• Don't flatten the radii to uniform — the 120px mascot corner and top-only program-card rounding are intentional character.
• Don't add a sixth color; the five-crayon palette is the brand.
• Don't replace the hand-drawn owl or chalk underline with stock assets.

Known Gaps

• Heading sizes vary inline across sections (text-2xl through text-4xl); the heading token records a representative ~2.25rem value rather than every per-section size.
• The hero display size is captured as a clamp() approximating the two fixed breakpoints used (2.6rem mobile, 3.4rem ≥640px); the HTML uses discrete Tailwind sizes, not an actual clamp.
• letterSpacing values (tracking-tight, tracking-widest) are translated to approximate em values; the HTML uses Tailwind's named tracking utilities.
• Spacing scale is inferred from the Tailwind utilities actually used, not from a declared token set.