name: chalk-carbon-design
version: alpha
description: >
  A risograph/mimeograph-style editorial newsletter masthead set on warm cream
  paper (#F4ECDD) overlaid with an SVG fractal-noise tooth and two faint
  radial ink blooms. Ink-black (#1C1714) hairlines and heavy 2–3px rules
  partition the page like a printed broadsheet; a single spot-red (#C8453B) and
  a marigold (#E8A317) act as the two "press inks," with a ledger-teal
  (#2E5E6E) for links and dotted leaders. Type is a four-voice newsroom: a
  black Libre Franklin display, a Spectral serif body (with italics), a
  Caveat handwritten margin voice, and DM Mono for stamps, folios and
  eyebrows. Signature moves: a JS-driven three-row marquee masthead with a
  scroll-velocity boost, a desaturated bento of feature tiles, a
  cursor-spotlight corkboard of practitioner "slips," a scroll-pinned
  horizontal rail of ditto worksheets, and an SVG-thread archive timeline.
  Geometry is square-cornered throughout — no rounded corners except the small
  red pushpin dots.
colors:
  # Surface
  paper: '#F4ECDD'        # page background (--paper); body, hero rails, tiles, slips
  paper-2: '#EADFC8'      # darker paper (--paper-2); metabar, hero-bottom, bento frame, footer
  # Text
  ink: '#1C1714'          # primary text/rules (--ink); headings, hairlines, dark tile/voices bg
  ink-soft: '#6B5E50'     # muted text (--ink-soft); folios, captions, by-lines, fineprint
  # Brand / Press inks
  spot-red: '#C8453B'     # accent voltage (--spot-red); stamps, pins, buttons, signatures, focus ring
  marigold: '#E8A317'     # secondary ink (--marigold); diamonds, handwritten subs, underline wipe, year marks
  ledger: '#2E5E6E'       # link/utility teal (--ledger); links, eyebrows, dotted leaders, ditto borders
  # Voices (dark section) tints
  voices-intro: '#C9BCA8' # italic intro text on ink background
  slip-dim-bg: '#2A231E'  # base (unlit) corkboard slip fill
  slip-dim-text: '#5F544A'# base slip text
  slip-dim-border: '#3A322B' # base slip border / dashed rule
  slip-dim-pin: '#4A2D2A' # base slip pushpin
  # Gradient / texture (rgba)
  bloom-marigold: 'rgba(232,163,23,0.05)' # top-left radial ink bloom on body
  bloom-red: 'rgba(200,69,59,0.045)'      # bottom-right radial ink bloom on body
  tile-shadow: 'rgba(28,23,20,0.22)'      # bento tile hover drop shadow
typography:
  display:
    fontFamily: "'Libre Franklin', sans-serif"
    fontSize: clamp(58px, 11vw, 140px)   # rail1 masthead; section heads up to clamp(40px,7vw,84px)
    fontWeight: 900
    lineHeight: 0.92
    letterSpacing: -0.02em
    textTransform: uppercase
  body:
    fontFamily: "'Spectral', Georgia, serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
  bodyItalic:
    fontFamily: "'Spectral', Georgia, serif"
    fontSize: clamp(20px, 3vw, 34px)     # rail3 italic ticker; also v-intro at 14px italic
    fontWeight: 400
    lineHeight: 1.6
  script:
    fontFamily: "'Caveat', cursive"
    fontSize: 26px                       # margin notes, pull quotes, captions, year marks (varies 16–40px)
    fontWeight: 400
    lineHeight: 1.12
  mono:
    fontFamily: "'DM Mono', monospace"
    fontSize: 11px                       # eyebrows, folios, stamps, meta, fineprint
    fontWeight: 400
    letterSpacing: 0.16em
    textTransform: uppercase
rounded:                                 # square-cornered system; only pins/dots are circles
  none: 0px
  full: 9999px                           # pushpin dots / pizza-fraction circle (border-radius:50%)
spacing:                                 # base unit ~ 4px; section padding in larger steps
  xs: 4px
  sm: 8px
  md: 14px
  lg: 22px
  xl: 32px
  section: 60px
components:
  stamp:
    backgroundColor: 'transparent'
    textColor: '{colors.spot-red}'
    border: '2px solid {colors.spot-red}'
    typography: '{typography.mono}'
    rounded: '{rounded.none}'
    padding: '3px 9px'
    note: 'rotated -2.5deg; uppercase, letter-spacing .16em — e.g. "Contents / 47"'
  metabar:
    backgroundColor: '{colors.paper-2}'
    textColor: '{colors.ink-soft}'
    border: '2px solid {colors.ink} (bottom)'
    typography: '{typography.mono}'
    padding: '13px 32px'
  bentoTile:
    backgroundColor: '{colors.paper}'
    textColor: '{colors.ink}'
    border: '1.5px solid {colors.ink}'
    rounded: '{rounded.none}'
    padding: '22px'
    note: 'hover scales to 1.04 with 3px marigold outline + tile-shadow; siblings dim to .55'
  tileDark:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.paper}'
    border: '1.5px solid {colors.ink}'
    rounded: '{rounded.none}'
    padding: '22px'
    note: 'tile-F folio card; eyebrow becomes marigold'
  ditto:
    backgroundColor: '{colors.paper}'
    textColor: '{colors.ink}'
    border: '2px solid {colors.ledger}'
    rounded: '{rounded.none}'
    padding: '6px (outer) / 18px (inner 1px ledger frame)'
    note: 'worksheet card, fixed inner height 430px; faint variant at opacity .55'
  slip:
    backgroundColor: '{colors.paper}'
    textColor: '{colors.ink}'
    border: '1px solid {colors.ink}'
    rounded: '{rounded.none}'
    padding: '18px'
    note: 'absolutely positioned, slight rotation; red pushpin dot via ::before circle'
  browseButton:
    backgroundColor: 'transparent'
    textColor: '{colors.spot-red}'
    border: '2px solid {colors.spot-red}'
    typography: '{typography.mono}'
    rounded: '{rounded.none}'
    padding: '12px 22px'
    note: 'inverts to spot-red fill / paper text on hover'
  subscribeForm:
    backgroundColor: '{colors.paper}'
    textColor: '{colors.ink}'
    border: '2px solid {colors.ink}'
    rounded: '{rounded.none}'
    note: 'flush input + spot-red submit button (paper text, mono uppercase)'
  pinDot:
    backgroundColor: '{colors.spot-red}'
    rounded: '{rounded.full}'
    note: '12–14px circle with subtle drop shadow; on pinned cards, slips, archive nodes'
motion:
  heroMarquee: 'Three rows scroll via JS transform; speed = base / (1 + scroll-velocity boost), paused on hover'
  heroWindup: 'rail1 first paint eases letter-spacing .18em→-.02em and opacity .55→1 over .9s cubic-bezier(.2,.8,.2,1)'
  bentoStagger: 'Tiles fade+rise (translateY 24px→0) on intersect, 70ms stagger'
  bentoHover: 'transform .4s cubic-bezier(.2,.8,.2,1); hovered tile scales 1.04, siblings dim/scale .99'
  spotlight: 'Voices reveal layer masked by radial-gradient that lerps (0.18) toward cursor; idle sinusoidal drift'
  resourcesPin: '250vh sticky section; track translateX driven by scroll progress; counter 01–05'
  archThread: 'SVG path strokeDashoffset draws as you scroll; issue rows reveal via clip-path inset'
  textEntrances: 'data-split word-rise (55ms stagger), txt-windup blur+letterspacing, txt-clip wipe, txt-skew, uline marigold underline scaleX'
  scrollCue: 'arrow bob keyframe, translateY 0→5px, 1.8s ease-in-out infinite'
  footRule: 'horizontal rule scaleX 0→1 over 1s on intersect'
icons:
  library: inline Unicode glyphs (no icon font)
  style: 'typographic — ◆ diamonds (marigold), ↓ arrows, → reading arrows, ☀☁☂❄ weather, geometric shape glyphs △⬡▢◇⬠○'
  sizes: { sm: 11px, md: 18px, lg: 21px }
  color: '{colors.marigold}'

The Chalk & Carbon

chalk-carbon-design · alpha

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

Overview

The Chalk & Carbon is a fictional teachers' newsletter rendered as a risograph/mimeograph broadsheet. The page sits on warm cream paper (--paper #F4ECDD) given material texture by a tiled SVG feTurbulence fractal-noise overlay plus two faint radial ink blooms — marigold (rgba(232,163,23,.05)) top-left and red (rgba(200,69,59,.045)) bottom-right. The whole layout reads like a printed page: ink-black (--ink #1C1714) hairlines, dotted leaders, and heavy 2–3px section rules divide the broadsheet into a masthead, an editorial note + table of contents, a featured bento, a dark "voices" board, a worksheet rail and an archive timeline. There are exactly two "press inks" beyond black: spot-red (--spot-red #C8453B) for stamps, pins, buttons and signatures, and marigold (--marigold #E8A317) for diamond dividers, handwritten subs, year marks and underline wipes; a ledger-teal (--ledger #2E5E6E) handles links and dotted leaders. The type system is a four-voice newsroom — a 900-weight uppercase Libre Franklin display, a Spectral serif for body and italics, a Caveat handwritten hand for margin notes and pull quotes, and DM Mono for every stamp, folio and eyebrow. The signature move is the JS-driven three-row marquee masthead whose speed boosts with scroll velocity, joined by a cursor-spotlight corkboard, a scroll-pinned horizontal ditto rail and an SVG-thread archive. Geometry is uniformly square — the only curves are the small circular red pushpins.

Colors

Surface. --paper #F4ECDD is the page background, applied to the body (with noise + bloom layers), hero rails, bento tiles and corkboard slips. --paper-2 #EADFC8, a slightly deeper cream, fills the metabar, the hero-bottom strip, the bento outer frame and the footer — used wherever a panel needs to recede from the paper.

Text. --ink #1C1714 is the primary ink for headings, body, all hairlines and rules, and the dark fills of the voices section and tile-F. --ink-soft #6B5E50 is the muted voice for folios, captions, by-lines, sig-roles and fineprint.

Press inks / brand. --spot-red #C8453B is the single loud accent: stamp borders/text, pushpin dots, the download button, browse button, signatures, the sub-form submit, and the :focus-visible outline. --marigold #E8A317 is the warm secondary ink for the ◆ diamonds in the masthead and dividers, Caveat sub-titles, the .uline underline wipe, year marks and the tile-F eyebrow. --ledger #2E5E6E is the teal utility color for hyperlinks, eyebrows, dotted leaders, ditto-card borders and the archive thread stroke.

Voices (dark section). On the --ink background, intro text is #C9BCA8 italic; the unlit base layer of slips uses #2A231E fill, #5F544A text, #3A322B borders and a #4A2D2A pushpin — all deliberately dim so the spotlight reveal pops the full-color slips through.

Texture/gradient. Two radial blooms (rgba(232,163,23,.05) and rgba(200,69,59,.045)) and a hover drop shadow rgba(28,23,20,.22) on bento tiles are the only rgba values of note.

Typography

Four Google Fonts families, loaded via one @import-equivalent <link>: Libre+Franklin:wght@400;700;900, Spectral (incl. italic 400), Caveat:wght@400;600;700 and DM+Mono:wght@400;500. All are open-source, so no substitution is needed. Libre Franklin is the display/headline voice (always 900, uppercase, tight -.02em), Spectral the serif body (and the italic ticker/intro voice), Caveat the handwritten margin/quote voice, and DM Mono the all-caps "stamp" voice with wide tracking (.14–.28em).

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(58px,11vw,140px)	900	0.92	-0.02em	masthead rail1; section heads clamp(40px,7vw,84px)
body	17px	400	1.6	—	Spectral paragraphs, excerpts
bodyItalic	clamp(20px,3vw,34px)	400	1.6	—	rail3 italic ticker; v-intro 14px italic
script	26px (16–40px)	400	1.12	—	Caveat margin notes, pull quotes, captions, year marks, signatures (40px)
mono	11px	400/500	—	.14–.28em	eyebrows, folios, stamps, meta, fineprint, buttons

Layout

Base unit ≈ 4px; horizontal gutters and section paddings step up to 14px, 22px and 32px, with 60–78px between major sections. The page is a single 1240px-max .wrap column (padding: 0 32px). Structure top to bottom: (1) Hero — a metabar row, then three full-bleed marquee rails (display, mono, italic) bounded by ink rules, then a hero-bottom strip with issue meta. (2) Editorial — a 5fr / 1px dotted vrule / 6fr grid pairing the editor's note (with a bordered pull-quote) against the table of contents and a rotated "Pinned" card. (3) Featured — a 4-column bento (repeat(4,1fr), 150px min rows) inside a --paper-2 frame, with tiles spanning 1–2 cols/rows. (4) Voices — a full-bleed ink section with an absolutely-positioned corkboard of nine slips revealed by a cursor spotlight. (5) Resources — a 250vh sticky-pinned section translating a horizontal rail of worksheet "dittos." (6) Archives — a 200vh sticky section with a two-column year-group timeline stitched by an SVG thread. (7) Footer — a 5fr/3fr/4fr grid (masthead, colophon, subscribe). Whitespace is generous but everything is framed by rules — the page never floats, it is always "on the page." Below 768px the bento collapses to one column, the spotlight and pins unpin, and the horizontal rails become swipeable.

Elevation & Depth

This is a flat, print-first system: depth comes from rules and borders, not shadows. 2–3px ink borders frame the hero, footer, bento and panels; 1px and 1.5px hairlines outline tiles, slips and dittos; dashed/dotted leaders (.toc-row .lead, .tfoot) and a dashed vrule add ledger texture. The few real shadows are tiny: a 0 1px 2px rgba(0,0,0,.3) under pushpin dots and the one genuine drop shadow 0 14px 34px rgba(28,23,20,.22) that lifts a bento tile on hover (paired with a 3px marigold outline). The voices "spotlight" is a CSS radial-gradient mask, not a glow. No glass, no blur except the transient txt-windup text-reveal blur.

Shapes

Square corners everywhere — border-radius is 0 by default and never set on cards, tiles, buttons or inputs, reinforcing the printed-broadsheet feel. The only rounded elements are circles: the 12–14px red pushpin dots (border-radius:50%) on the Pinned card, the corkboard slips and the archive nodes, plus the circular pizza-fraction diagram. Several elements are tilted a degree or two (rotate(-2.5deg) stamps, rotate(-.8deg) pinned card, rotate(-3deg) signature) to suggest hand-pasted layout.

Components

• Stamp — transparent fill, 2px spot-red border, spot-red mono text, 3px/9px padding, rotated -2.5deg. Label e.g. "Contents / 47", "1978 — Present".
• Metabar — paper-2 strip, bottom ink rule, mono ink-soft text, red links; "Vol. XLVII · The Common Room Collective".
• Bento tile — paper fill, 1.5px ink border, 22px padding, square. Hover scales to 1.04 with a 3px marigold outline + drop shadow while siblings dim to .55. tile-F variant inverts to ink fill / paper text with a marigold eyebrow.
• Ditto (worksheet card) — paper fill, 2px ledger border with a nested 1px ledger inner frame, fixed 430px inner height; a .faint variant at .55 opacity. Has a 42px square spot-red download button (↓).
• Slip — paper fill, 1px ink border, 18px padding, absolutely positioned at a slight rotation with a red pushpin ::before dot.
• Browse button — transparent, 2px spot-red border + text, mono uppercase; inverts to spot-red fill / paper text on hover. "Browse full archive →".
• Subscribe form — 2px ink-bordered row, flush transparent email input + spot-red submit button ("Send →").
• Pinned card — paper fill, 2px ink border, rotated -.8deg, red pushpin dot, marigold mono "Pinned" label, Caveat body.

Motion

The hallmark is the velocity-boosted marquee: three hero rails are advanced every frame by JS translateX, with speed scaling to scroll velocity (speed = 1 + boost, boost capped ~2.2) and paused on hover; rail1 also plays a one-shot windup (letter-spacing + opacity ease, .9s). Scroll-driven set pieces: the resources section is 250vh sticky-pinned with the track translated by scroll progress (counter 01→05); the archives SVG thread draws via strokeDashoffset while issue rows reveal with clip-path inset. The voices spotlight lerps a radial mask toward the cursor (0.18 easing) with idle sinusoidal drift. Entrance animations on intersect: word-rise (data-split, 55ms stagger), txt-windup (blur + letter-spacing), txt-clip wipe, txt-skew, a marigold .uline underline scaleX, a 70ms bento stagger, and a footer-rule scaleX wipe. The scroll-cue arrow bobs on a 1.8s loop. All easing is cubic-bezier(.2,.8,.2,1). Note: the script's reduce flag is hard-coded false, so a prefers-reduced-motion path is authored in spirit but not actually wired.

Iconography

No icon font — all "icons" are Unicode glyphs set in the running type. The recurring mark is the marigold diamond ◆ used as a divider in the masthead, issue-meta and tickers. Directional arrows ↓ (download / scroll cue) and → (reading / submit) are spot-red or inherit text color. The worksheet dittos use literal glyph content: geometric shapes (△ ⬡ ▢ ◇ ⬠ ○) in the tessellation grid and weather symbols (☀ ☁ ☂ ❄) in the weather log. Sizes are small and typographic (≈11–21px); color follows context — marigold for diamonds, spot-red for actionable arrows.

Do's and Don'ts

• Do keep corners square and lean on 1–3px ink rules and dotted/dashed leaders for structure instead of shadows.
• Do ration color to the three press inks: spot-red for action/marks, marigold for decorative dividers/handwriting, ledger-teal for links/leaders.
• Do preserve the four-voice type split — Libre Franklin 900 caps for display, Spectral serif for reading, Caveat for the human/margin voice, DM Mono caps for stamps and folios.
• Do keep the paper texture (noise + faint blooms) and the slight, hand-pasted rotations on stamps, pins and signatures.
• Don't introduce rounded corners, drop shadows beyond the one bento-hover lift, or gradients beyond the faint blooms.
• Don't add more accent hues or let marigold/red take over reading text.
• Don't flatten the marquee into a CSS animation with duration swaps — the velocity boost is the signature; keep it JS transform-driven.

Known Gaps

• The body paper texture is an inline SVG feTurbulence data-URI plus two radial blooms; described qualitatively rather than as a single token.
• The marquee speed, scroll-velocity boost and spotlight lerp are JS-computed per frame; motion entries describe behavior, not fixed durations.
• The footer colophon text names different fonts/inks (Schoolbell, Source Sans 3, JetBrains Mono, hexes 6A3A8A/8A5AB0, paper F2EEE4) as in-world flavor copy — these are NOT the actual implemented tokens and were ignored in favor of the real :root/@import values.
• letterSpacing/textTransform vary per use; table/token values record the dominant case (e.g. mono .16em, but ranges .14–.28em appear).