/templates/editorial-tri-tone/design.md

version, name, description, colors, color-aliases, typography, spacing, canvas, components

version	name	description	colors	color-aliases	typography	spacing	canvas	components
alpha	Editorial Tri-Tone	A literary magazine-meets-annual-report presentation system built on a strict three-color palette — blush pink, golden butter, and deep burgundy wine. Despite having eleven CSS variable names, only three hex values exist in the entire system; every alias is a semantic rename of one of those three. Headlines run Bricolage Grotesque (a variable grotesque with an optical-size axis) at extreme weights and negative letter-spacing. Instrument Serif (italic-cut only) appears as the expressive accent face for chapter numerals, pull-quotes, years, and signatures. JetBrains Mono carries all metadata, labels, and section markers at tight uppercase tracking. The aesthetic is "independent arts publication" — the kind with a colophon, hand-numbered editions, and an editorial desk.	pink butter burgundy #F2B6C6 #F2D86A #7A1F35	pink-deep sky cream lime terracotta navy forest ink pink pink butter butter butter burgundy burgundy burgundy	display-wordmark display-closer display-stat display-stat-unit chapter-num quote-mark display-xl display-lg signature endorsement-num timeline-year subhead-serif lede cover-pill chart-title card-title quote-heading body-lg body-md body-sm label label-wide label-mid label-tight footer fontFamily fontSize fontWeight lineHeight letterSpacing Bricolage Grotesque, sans-serif 300px 800 0.82 -0.04em fontFamily fontSize fontWeight lineHeight letterSpacing Bricolage Grotesque, sans-serif 320px 700 0.82 -0.05em fontFamily fontSize fontWeight lineHeight letterSpacing Bricolage Grotesque, sans-serif 540px 700 0.78 -0.06em fontFamily fontSize fontWeight lineHeight letterSpacing Instrument Serif, serif 220px 400 1.0 0 fontFamily fontSize fontWeight lineHeight letterSpacing Instrument Serif, serif 240px 400 0.9 0 fontFamily fontSize fontWeight lineHeight letterSpacing Instrument Serif, serif 200px 400 0.6 0 fontFamily fontSize fontWeight lineHeight letterSpacing Bricolage Grotesque, sans-serif 84px 700 0.95 -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Bricolage Grotesque, sans-serif 76px 700 0.95 -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Instrument Serif, serif 64px 400 1.0 0 fontFamily fontSize fontWeight lineHeight letterSpacing color Instrument Serif, serif 56px 400 1.0 0 pink fontFamily fontSize fontWeight lineHeight letterSpacing Instrument Serif, serif 56px 400 1.0 0 fontFamily fontSize fontWeight lineHeight letterSpacing Instrument Serif, serif 48px 400 1.1 0 fontFamily fontSize fontWeight lineHeight letterSpacing Bricolage Grotesque, sans-serif 56px 500 1.05 -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Bricolage Grotesque, sans-serif 44px 500 1.0 0 fontFamily fontSize fontWeight lineHeight letterSpacing Instrument Serif, serif 40px 400 1.0 0 fontFamily fontSize fontWeight lineHeight letterSpacing Bricolage Grotesque, sans-serif 40px 600 1.0 -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Bricolage Grotesque, sans-serif 56px 600 1.0 -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Bricolage Grotesque, sans-serif 28px 400 1.45 0 fontFamily fontSize fontWeight lineHeight letterSpacing Bricolage Grotesque, sans-serif 26px 400 1.4 0 fontFamily fontSize fontWeight lineHeight letterSpacing Bricolage Grotesque, sans-serif 24px 400 1.45 0 fontFamily fontSize fontWeight lineHeight letterSpacing textTransform JetBrains Mono, monospace 24px 400 1.0 0.15em uppercase fontFamily fontSize fontWeight lineHeight letterSpacing textTransform JetBrains Mono, monospace 24px 400 1.0 0.18em uppercase fontFamily fontSize fontWeight lineHeight letterSpacing textTransform JetBrains Mono, monospace 24px 400 1.0 0.12em uppercase fontFamily fontSize fontWeight lineHeight letterSpacing textTransform JetBrains Mono, monospace 24px 400 1.0 0.10em uppercase fontFamily fontSize fontWeight lineHeight letterSpacing textTransform opacity JetBrains Mono, monospace 16px 400 1.0 0.12em uppercase 0.75	slide-pad chrome-gutter section-gap card-pad chart-pad footer-bottom grid-gap endorsement-pad 96px 64px 48px 28px 28px 30px 48px 48px 56px 36px 24px 20px 0	width height 1920px 1080px	pill cover-pill closer-pill value-card value-card-dark value-card-light chart-card timeline-ribbon timeline-ribbon-accent footer-chrome footer-dot swatch-circle stat-breakdown-bar stat-breakdown-divider endorsement-divider avatar timeline-axis timeline-dot borderRadius padding fontFamily fontWeight lineHeight 999px 0.35em 0.9em Bricolage Grotesque, sans-serif 500 1.0 borderRadius padding fontSize fontWeight 999px 16px 38px 44px 500 borderRadius padding fontSize 999px 12px 28px 22px borderRadius padding height 28px 28px 28px 30px 340px background color {colors.burgundy} {colors.butter} background color {colors.butter} {colors.burgundy} background color borderRadius padding {colors.butter} {colors.burgundy} 32px 48px 48px 56px background color borderRadius padding fontFamily fontSize letterSpacing textTransform {colors.burgundy} {colors.butter} 999px 24px 44px JetBrains Mono, monospace 24px 0.15em uppercase fontFamily fontSize fontWeight letterSpacing textTransform color Instrument Serif, serif 30px 400 0 none {colors.pink} position left right bottom fontFamily fontSize letterSpacing textTransform opacity absolute 64px 64px 36px JetBrains Mono, monospace 16px 0.12em uppercase 0.75 width height borderRadius background opacity-inactive opacity-active 8px 8px 999px currentColor 0.3 1.0 width height borderRadius 36px 36px 999px height borderRadius background 10px 999px rgba(246,237,220,0.15) borderTop 1px solid rgba(246,237,220,0.25) borderTop 1px solid rgba(246,237,220,0.30) width height borderRadius background border 72px 72px 999px {colors.burgundy} 3px solid {colors.burgundy} height background opacity 4px {colors.burgundy} 0.15 width height borderRadius border background 28px 28px 999px 4px solid {colors.butter} {colors.burgundy}

Frontend Slides Fixed-Stage Policy

When this design system is used by the frontend-slides skill, generate the final deck as a fixed 1920×1080 stage that scales uniformly to the browser viewport. The deck should preserve a 16:9 slide canvas on every screen, including phones; it may letterbox or pillarbox, but it should not reflow slide content for mobile.

This policy has higher priority than any source-template responsive behavior described later in this file. If a later section says the original template is viewport-fluid, treat that as source history only, not as the target generation model for frontend-slides.

This policy applies even if the source template was originally implemented with viewport-fluid CSS such as 100vw, 100vh, vw, vh, or clamp(). Treat those values as design proportions to translate into 1920×1080 stage coordinates, not as live responsive rules in the generated deck.

Use deck-stage.js or an equivalent inline stage scaler for final output: render each slide at 1920×1080, scale the whole stage with one transform, and verify rendered screenshots for both text overflow and panel overlap.

Overview

Editorial Tri-Tone is a literary magazine presentation system built on the strictest possible palette: three hex values, eleven CSS variable names. The naming system reveals editorial intent — --pink and --sky point at the same blush; --cream, --butter, --lime, and --terracotta all resolve to the same golden yellow; --burgundy, --navy, --forest, and --ink all collapse to the same deep wine. The aliases exist to communicate the role of the color in context, not to introduce variation.

The typeface stack is a deliberate three-way conversation:

1. Bricolage Grotesque — a variable grotesque with an optical-size axis. Used at weights 500, 600, 700, and 800 for all display and body sans text.
2. Instrument Serif — used exclusively in weight 400, often in its italic guise. Reserved for chapter numerals, pull-quote marks, timeline years, signatures, endorsement ordinals, and stat percentage symbols.
3. JetBrains Mono — all metadata, labels, section markers, footnotes, footer chrome.

The editorial voice is that of an independent magazine with a colophon — the deck's last slide is literally called "Colophon." Section markers use the section sign (§) followed by a number and a title. The tone is measured, literary, and warm rather than corporate or high-energy.

Key Characteristics:

• Three-color palette with semantic aliases: blush pink (#F2B6C6), golden butter (#F2D86A), deep burgundy (#7A1F35).
• Mixed typography: Bricolage Grotesque grotesque for display and body; Instrument Serif for expressive accent numerals, quotes, and years; JetBrains Mono for all labels.
• The em tag within Bricolage Grotesque headlines always triggers a switch to Instrument Serif italic — the system's primary typographic mix.
• Pills (border-radius 999px) are the universal tag component; used at three different sizes across cover, chart legend, and closer.
• Value cards have a generous 28px border-radius — soft, rounded, not brutalist.
• Dividers on dark surfaces use low-opacity rgba (0.25–0.30) rather than solid colors — whispered separators.
• Footer dot row: a progress indicator using 8px circles at 30% opacity (inactive) and 100% opacity (active).
• The sole SVG chart combines four series types on a single canvas: filled area, vertical bars, connected circles, dotted line.

Colors

The Three Actual Colors

Despite many CSS variable names, the palette is:

Name	Hex	Role
Blush Pink	#F2B6C6	Accent / highlight on dark surfaces; stat figure color; quote mark glow
Golden Butter	#F2D86A	Warm mid-tone; background for light slides; accent text on dark surfaces
Deep Burgundy	#7A1F35	Primary dark surface; ink color; structural tone

Alias Map

All aliases resolve to one of the three values above. The alias name signals context:

Alias	Points to	Context of use
--pink	#F2B6C6	Default accent label
--pink-deep	#F2B6C6	(unused distinct value — same as pink)
--sky	#F2B6C6	Segment D bar in breakdown
--cream	#F2D86A	Light surface background
--butter	#F2D86A	Accent text on dark; card backgrounds
--lime	#F2D86A	Ribbon accent text; kicker label on dark surfaces
--terracotta	#F2D86A	Italic em highlights in lede or body
--navy	#7A1F35	Alternate label for dark surface contexts
--forest	#7A1F35	Dark panel or column background
--burgundy	#7A1F35	Structural background color
--ink	#7A1F35	All text color

Typography

Font Families

• Bricolage Grotesque: The primary typeface. Variable with optical-size axis (opsz 12..96) and weights from 400 to 800. The weight range is the expressive tool — 400 for body, 500 for lede, 600 for card titles and quote headers, 700 for section headlines, 800 for the wordmark.
• Instrument Serif: Weight 400 only, italic variant loaded. Functions as the expressive counterpoint to Bricolage Grotesque. Never used for body copy; always for large numerals, quotation marks, signatures, years, endorsement ordinals, and the stat percentage symbol. The key insight is that the system never uses Instrument Serif for "normal" running text — only for moments of human expressiveness.
• JetBrains Mono: Weights 400 and 500. All labels are uppercase with 0.10–0.18em letter-spacing. Always secondary information: section markers, metadata, footnotes, legend categories, kickers, footer chrome.

The em Rule

Within any Bricolage Grotesque headline, an <em> tag triggers a switch to Instrument Serif at weight 400. This is the system's primary in-line typographic mix — a grotesque headline interrupted by a serif aside. Example: "A short trajectory, told in five stops." The em portion reads as a quieter, more reflective counterpoint.

The b Rule (Quote Slide Only)

Within Instrument Serif blockquotes, a <b> tag triggers a switch back to Bricolage Grotesque weight 600 in burgundy. The reverse of the em rule — a serif quote punctuated by a grotesk emphasis.

Display Scale

Token	Size	Family	Weight	Use
{typography.display-stat}	540px	Bricolage Grotesque	700	Full-bleed oversized stat or number figure
{typography.display-closer}	320px	Bricolage Grotesque	700	Jumbo title or closing wordmark
{typography.display-wordmark}	300px	Bricolage Grotesque	800	Primary wordmark or deck title
{typography.display-stat-unit}	220px	Instrument Serif	400	Accent symbol alongside a stat figure
{typography.chapter-num}	240px	Instrument Serif	400	Large chapter or section numeral
{typography.quote-mark}	200px	Instrument Serif	400	Decorative large quotation mark
{typography.display-xl}	84px	Bricolage Grotesque	700	Section headline for data or chart layouts
{typography.display-lg}	76px	Bricolage Grotesque	700	Section headlines
{typography.signature}	64px	Instrument Serif	400	Signature or sign-off element
{typography.lede}	56px	Bricolage Grotesque	500	Lede or opening statement
{typography.quote-heading}	56px	Bricolage Grotesque	600	Panel heading or editorial subhead
{typography.endorsement-num}	56px	Instrument Serif	400	Endorsement or list ordinals
{typography.timeline-year}	56px	Instrument Serif	400	Year stamps or large ordinal accents
{typography.subhead-serif}	48px	Instrument Serif	400	Secondary subheads on dark surfaces
{typography.cover-pill}	44px	Bricolage Grotesque	500	Large tag cloud or keyword pills
{typography.chart-title}	40px	Instrument Serif	400	Card or panel title
{typography.card-title}	40px	Bricolage Grotesque	600	Card or value title

Body and Label Scale

Token	Size	Family	Weight	Use
{typography.body-lg}	28px	Bricolage Grotesque	400	Manifesto right-column body
{typography.body-md}	26px	Bricolage Grotesque	600/400	Attribution name, endorsement body
{typography.body-sm}	24px	Bricolage Grotesque	400	Card descriptions, stat annotation, closer index
{typography.label}	24px	JetBrains Mono	400	Standard section labels (0.15em tracking)
{typography.label-wide}	24px	JetBrains Mono	400	Kickers on dark slides (0.18em tracking)
{typography.label-mid}	24px	JetBrains Mono	400	Manifesto bottom meta (0.12em)
{typography.label-tight}	24px	JetBrains Mono	400	Legend categories, breakdown labels (0.10em)
{typography.footer}	16px	JetBrains Mono	400	Page footer chrome (0.12em, opacity 0.75)

Principles

Bricolage Grotesque's optical-size axis makes the face significantly more expressive at large sizes and more legible at small sizes without changing weight. At 540px and 300px (stat and wordmark), the display renders with wide, open letterforms; at 24px (body), it compresses. Both are weight 700 or 800 at display; both are weight 400 at body. The face is never used in intermediate sizes (48–72px) — that zone belongs to Instrument Serif.

Letter-spacing on Bricolage Grotesque is always negative at display: -0.04em at 300px, -0.05em at 320px, -0.06em at 540px. At body sizes (24–28px), no letter-spacing is applied.

JetBrains Mono label tracking is always positive and varies by use: 0.10em for dense data contexts, 0.12em for secondary meta, 0.15em for standard section labels, 0.18em for headline kickers on dark slides.

Layout

Canvas System

Every slide is exactly 1920×1080px. The deck-stage custom element handles centering and scaling.

Gutter System

• Chrome gutter (64px left/right): Used by footer chrome and most content edges.
• Generous slide padding (96px): Most slides use padding: 96px 64px — the top/bottom pad is larger than the sides, giving a portrait-publication feel even on landscape slides.
• Wide slide padding (88px top on chart slide): Slight reduction to accommodate the two-column layout.

Slide Internal Spacing Pattern

Each slide follows a top-to-bottom reading order:

1. Section marker (§ XX — Title, JetBrains Mono, 24px, label tracking)
2. Headline or major content
3. Body / grid content
4. Footer meta (absolute, bottom 36px)

Elevation and Depth

The system uses no box shadows at all. Depth comes entirely from:

Color Surface Contrast

The burgundy/butter/pink trio creates its own depth hierarchy:

• Butter surfaces feel "forward" (warm, light)
• Pink feels "accented" (warm, mid)
• Burgundy feels "recessed" (dark, anchoring)

Alternating surface colors within split slides (cream left / burgundy right on manifesto; lime left / burgundy right on quote) creates depth through edge contrast rather than shadow.

Opacity Dividers

On dark (burgundy) surfaces, all dividers and structural lines use rgba rather than solid colors:

• Row separators in stat breakdown: rgba(246,237,220,0.25)
• Endorsement rows in quote slide: rgba(246,237,220,0.30)
• Timeline axis: opacity: 0.15 on solid burgundy

The cream values (246,237,220) in those rgba strings approximate the butter color at full opacity — dividers feel like recessed etchings rather than drawn lines.

Chart Card Lift

The chart card (slide 6) achieves its "lifted" feeling through border-radius 32px on a butter card placed over a burgundy background. No shadow — the rounded corner on a contrasting surface signals elevation.

Shapes and Treatment

Border Radius Scale

Value	Use
999px	All pills, timeline ribbon, swatch circles, avatar, breakdown bars, timeline dots, footer dots, chart data circles
32px	Chart card (slide 6)
28px	Value cards (slide 3)
4px	SVG chart bars (rx="4")
0px	Section headlines, grid cells (no rounding)

The system has a strong binary: either fully rounded (pills, circles) or square (content blocks). The exception is the chart card (32px) and value cards (28px) — large enough radius to feel "soft" but geometric rather than circular.

Pill System

Pills are the universal label/tag component. Three size variants:

• Cover pills: 44px font, 16px 38px padding — large enough to read as headline elements in the tag cloud
• Standard pills (section labels, legend items): 22–24px font, 10–12px 24–28px padding
• Color assignments alternate: burgundy-bg/pink-text and butter-bg/burgundy-text on cover; burgundy/cream or lime/ink on closer

SVG Chart (Slide 6)

The inline SVG chart at 720×380 viewBox combines four series types deliberately to demonstrate the range of a single chart surface:

• Area series (Series A): Filled path with pink fill at 0.85 opacity, burgundy stroke at weight 3
• Bar series (Series C): Burgundy rectangles with rx="4"
• Connected circle series (Series B): Butter circles (r=8) with burgundy stroke/fill on a burgundy line at weight 3
• Dotted line (Series D): Burgundy dashed stroke (stroke-dasharray="2 10", stroke-linecap="round") at 60% opacity

Y-axis labels are JetBrains Mono 24px at 60% opacity, left-aligned to x=0.

Do's and Don'ts

Do

• Treat the three hex values as a closed system. Every element uses pink, butter, or burgundy — no neutrals, no grays, no white.
• Use Instrument Serif only for moments of human expressiveness: numerals, years, signatures, quotation marks, endorsement ordinals. Never for running body text.
• Use the em tag in Bricolage Grotesque headlines to trigger the serif switch. This is the system's primary inline mix and its clearest editorial voice.
• Give all label text (JetBrains Mono) positive letter-spacing between 0.10em and 0.18em. Monospace without tracking reads as code, not editorial.
• Alternate surface colors across the two-column split slides. One side is always butter, the other always burgundy.
• Keep body text in Bricolage Grotesque at weights 400 (text) and 500–600 (emphasized labels). The weight axis is the tonal dial.
• Use pills at multiple sizes — the pill is the universal tag and its size signals context: 44px for headline-level categorization, 22–24px for utility labels.
• Section markers follow the pattern § NN — Title in JetBrains Mono — every slide opens with this convention.

Don't

• Don't introduce a fourth color. The tri-tone constraint is the design premise.
• Don't use Instrument Serif at small sizes or in body paragraphs. It is purely an accent face.
• Don't break the em rule — using Bricolage Grotesque italic instead of Instrument Serif for inline emphasis loses the typographic mix.
• Don't use letter-spacing on Bricolage Grotesque at display sizes — only negative tracking via letter-spacing: -0.02em to -0.06em depending on size.
• Don't add solid-color dividers on dark (burgundy) surfaces. All structural lines on dark backgrounds must use low-opacity rgba.
• Don't apply box shadows. The system has none. Depth comes from surface contrast and border-radius on contrasting backgrounds.
• Don't round large content containers (section panels, grid backgrounds). Rounding applies only to pill-scale and card-scale elements (value cards, chart card).
• Don't use Bricolage Grotesque weight 800 except in the wordmark. The weight 800 is reserved for the single largest typographic moment.

Responsive Behavior

This template is designed exclusively for 1920x1080 presentation display. The deck-stage web component handles viewport scaling via CSS transforms; the 1920x1080 canvas scales proportionally to any screen without layout changes.

Presenter Behavior

• Slide advancement via keyboard or presentation clicker (handled by deck-stage.js).
• No hover states are defined.
• No interactive elements.

Print / Export

• At 96dpi, 1920x1080 maps to a 20x11.25 inch frame.
• The stat figure at 540px renders at ~405pt — suitable for large-format print.
• The three-color palette is print-safe; burgundy is a deep PMS-range wine tone, butter is a warm yellow, pink is a muted blush — all reproduce well in CMYK offset.

CJK & International Content

Recommended Chinese Pairing

Role	Chinese Face	Weight	Why
Display wordmark / closer / stat (300–540px)	站酷小薇体 ZCOOL XiaoWei	400	A literary decorative serif with the same expressive personality as Bricolage Grotesque + Instrument Serif italic at extreme scale
Section headlines (76–84px)	思源黑体 Noto Sans SC	700	The grotesque equivalent in CJK — carries the Bricolage Grotesque structural weight
Chapter numerals / quote marks / years (200–240px)	霞鹜文楷 LXGW WenKai	400	Hand-set warmth that matches Instrument Serif's expressive accent role
Body paragraph (24–28px)	思源宋体 Noto Serif SC	400	Mincho body voice; literary register
Lede / quote-heading (56px)	思源黑体 Noto Sans SC	500–600	Matches Bricolage Grotesque weight 500/600
Mono label / section marker / footer	思源等宽 Noto Sans Mono CJK SC	400–500	Preserves the JetBrains Mono chrome quality for § NN — Title markers

Mixed-Content Strategy

Use Strategy C — keep Bricolage Grotesque (display, body) and Instrument Serif (italic accents) as the Latin faces and fall back to the Chinese stack only for CJK glyphs. The literary-magazine identity of Editorial Tri-Tone depends on Bricolage Grotesque's optical-size axis and Instrument Serif's italic cut as part of the brand voice; replacing them wholesale with a CJK family would flatten the system into "generic Chinese editorial." Stack:

/* Bricolage Grotesque roles (display, body) */
font-family: 'Bricolage Grotesque', 'Noto Sans SC', sans-serif;
/* Instrument Serif roles (chapter-num, quote-mark, year, signature) */
font-family: 'Instrument Serif', 'LXGW WenKai TC', serif;
/* JetBrains Mono roles (labels, section markers) */
font-family: 'JetBrains Mono', 'Noto Sans Mono CJK SC', monospace;

The system's signature <em> rule (Bricolage Grotesque → Instrument Serif italic inline) carries the editorial tone in Latin but does not port to Chinese. Mid-sentence face switching reads as broken in CJK typography — Chinese readers parse it as a typesetting error, not as the intentional editorial contrast that Latin readers parse. When the surrounding sentence is Chinese, suppress the face-switching part of the em rule and use color or weight contrast instead:

/* Latin sentences — original em rule applies */
:lang(en) h1 em, :lang(en) h2 em, :lang(en) .lede em, :lang(en) .quote-heading em {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
}
/* Chinese sentences — emphasize via color or weight, not face */
:lang(zh) h1 em, :lang(zh) h2 em, :lang(zh) .lede em, :lang(zh) .quote-heading em {
  font-family: inherit;
  font-style: normal;
  color: var(--terracotta); /* or another palette accent */
  /* optional alternative: font-weight: 700; */
}

If the deck has no language-tagged elements, the safer rule is: don't wrap Chinese phrases in <em> at all. The hierarchy of section sign + headline + body already provides enough emphasis structure in Chinese; the inline-italic accent is a Latin-editorial habit that has no Chinese counterpart. A Chinese sentence reads cleanly when it lives in a single face from start to finish.

Watch for baseline mismatch at display sizes (300–540px): Bricolage Grotesque at -0.04em to -0.06em tracking sits visually tighter than Noto Sans SC, so a mixed-script wordmark like INTO 中国 may feel uneven. For hero / wordmark moments, prefer single-script lines and let the second script live on its own line below.

Loading

Add to the existing Google Fonts <link> (or as a second link tag):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@400;500;700&family=LXGW+WenKai+TC&family=ZCOOL+XiaoWei&display=swap" rel="stylesheet">

ZCOOL XiaoWei is the decorative-terminal serif used for the em-switch role; it's hosted on Google Fonts at weight 400 only.

Universal CJK Adjustments

These adjustments apply to every CJK block in this system, regardless of size or role:

• Loosen line-height by 0.05–0.08. CJK glyphs are full-width squares with more visual weight than Latin letterforms; line-heights tuned for Latin (0.78–0.92 on display, 1.4–1.45 on body) read as cramped in Chinese. Bump display to 0.95–1.05 and body to 1.5–1.6.
• Remove negative letter-spacing on CJK headlines. Bricolage Grotesque display uses -0.04em to -0.06em tracking, which collides Chinese glyphs into each other. For CJK runs, set letter-spacing: 0 — or a tiny positive 0.02em if the headline feels visually packed.
• Never text-transform: uppercase on CJK text. Chinese has no case; the CSS property does nothing on Han glyphs but will silently break any mixed-script line where the Latin portion was meant to be capitalized.
• Use Chinese full-width punctuation (，。：；！？「」『』（）) inside Chinese sentences, not the Latin equivalents (,.:;!?""''()). Mixing punctuation systems within one sentence reads as a typesetting error.
• No period (。) at the end of CJK headlines. Chinese headlines follow the same rule as Latin — title-style lines drop terminal punctuation. Body paragraphs keep their 。
• Apply Pangu spacing (盘古之白) at the boundary between CJK and Latin runs. A space (or 0.25em margin) belongs between a Chinese character and an adjacent Latin word or digit, e.g. 2026 年 5 月 not 2026年5月. Either type the spaces manually or use a pangu.js-style auto-spacer.
• One font per sentence. Don't switch between Noto Sans SC, Noto Serif SC, and ZCOOL XiaoWei inside the same sentence — pick the face that matches the role (headline = Noto Sans SC, body = Noto Serif SC) and commit to it for the whole run. This rule overrides the em-rule for Chinese content: do not switch faces mid-sentence on <em> in Chinese, even though the same <em> switches face in Latin. For inline emphasis in Chinese, use color (e.g., var(--terracotta)) or weight (400 → 700), never face switching.

Aesthetic Notes for This System

Editorial Tri-Tone's literary-magazine voice depends on the typographic contrast between Bricolage Grotesque (structural) and Instrument Serif italic (expressive). This contrast does not transfer cleanly to Chinese because mid-sentence face switching is not a Chinese typographic convention — it reads as inconsistency rather than intentional editorial emphasis. The right adaptation is to preserve face-contrast at the role level (headline = 思源黑体, body = 思源宋体, label = mono) rather than inline. Within any single Chinese run, stay in one face. Where Latin would have used <em> to flip into Instrument Serif italic, Chinese should use the palette's accent color (terracotta on butter, pink on burgundy, etc.) or a weight bump (400 → 700) for emphasis instead.

For the system's signature display moments — the 300px wordmark, the 540px stat figure, the 240px chapter numeral — Chinese is at its loudest. Reach for 站酷小薇体 when the moment is decorative (a chapter ordinal "第一章" rendered in literary serif) and 思源黑体 weight 700 when the moment is structural (a section headline like "我们的方法"). The 200px quote-mark glyph is harder in Chinese — Chinese quotation marks (「」) don't carry the same decorative weight as Latin 'curly quotes', so consider rendering the entire quote moment in the Latin glyph (using the Instrument Serif face on the punctuation character itself) and let the body text below switch to 思源宋体.

The section marker convention § NN — Title works in Chinese: § 02 — 我们的承诺. Keep the section sign and the numeral in JetBrains Mono / Noto Sans Mono CJK SC; the title text can switch to 思源黑体 weight 400 with 0.05em tracking to preserve the chrome quality.

Known CJK Gap

ZCOOL XiaoWei is the right aesthetic match for the em-switch role, but it ships as weight 400 only with no italic cut. Chinese has no italic concept (slanted Han glyphs read as broken, not emphasized), so the lack of italic is fine — but the visual softness contrast that Instrument Serif italic provides in Latin (a slanted, more flowing letterform) cannot be exactly replicated in Chinese. The decorative-terminal serif quality of ZCOOL XiaoWei provides the closest equivalent, but the contrast against 思源黑体 is face-based, not slant-based. Decks with heavy reliance on the em-rule should test the visual rhythm in Chinese before committing — if the contrast feels muted, increase the em-portion font-size by 4–8px to compensate.

Iteration Guide

1. Section labels always use the § NN — Title convention in JetBrains Mono with {typography.label} tracking.
2. Every headline with an em/italic moment uses <em> to trigger Instrument Serif. Never use font-style: italic on Bricolage Grotesque directly.
3. Value card alternation: odd-numbered cards (c1, c3, c5, c7) are dark (burgundy/butter); even-numbered (c2, c4, c6, c8) are light (butter/burgundy).
4. New dark-surface sections use rgba(246,237,220,0.25) for dividers — not {colors.butter} at full opacity.
5. New pills follow the existing alternation: burgundy-bg/pink-text and butter-bg/burgundy-text for variety in clusters.
6. Adding a chart series: use the four established visual encodings (area, bars, circles, dotted line) before inventing a new one.
7. All section backgrounds must be one of the three palette colors — never mix (no half-pink half-butter).
8. Footer chrome is shared across all slides: position:absolute; left:64px; right:64px; bottom:36px; font-family:JetBrains Mono; font-size:16px; opacity:0.75.

Known Gaps

• The deck-stage.js script is an external dependency not documented here.
• The footer dot-row progress indicator (.footer .dotrow) is rendered in the HTML but the dots are all styled with class "on" or left as inactive — a presenter would need to update slide state dynamically.
• The SVG chart uses hardcoded paths, coordinates, and placeholder values — no data-binding layer exists.
• The breakdown bars in slide 4 use inline width: XX% as a style — percentages must be set manually.
• The timeline stop dots (.stop .dot) have display: none — they are styled but not visible. A presenter populating this slide would enable them via CSS.
• Instrument Serif italic is loaded as a font variant but is not explicitly called with font-style: italic in every context — in some cases the browser selects it from the variable font's italic axis automatically based on surrounding context.
• Color swatch circles on slide 4 reference --terracotta and --sky, which resolve identically to --butter and --pink — the visual distinction exists only semantically in the source, not visually.