frontend-slides/bold-template-pack/templates/pink-script/design.md

---

version: alpha name: Pink Script (After Hours) description: A nocturnal couture editorial system rendered in hot fuchsia ink on dim warm-black paper, with a soft film-grain overlay and a hairline interior frame. DM Serif Display carries every script and editorial moment at sizes up to 600px; Inter at weight 300 carries the body voice; JetBrains Mono carries the boutique-catalog metadata. The aesthetic borrows from glossy fashion magazine spreads, late-night perfume advertising, and the editorial pages of high-end zines — closer to a Maison's seasonal lookbook than a startup deck.

colors: ink-deep: "#060507" ink-violet: "#0F0D11" paper-blush: "#F5EDF1" pink: "#ED3D8C" pink-light: "#FF66A8" pink-deep: "#B81D67" line-pink: "rgba(237, 61, 140, 0.32)" mute-paper: "rgba(245, 237, 241, 0.55)" hair-paper: "rgba(245, 237, 241, 0.14)"

color-aliases: c-bg: ink-deep c-fg: paper-blush c-accent: pink c-line: line-pink

typography: script-huge:

fontFamily: "DM Serif Display, serif"
fontSize: 540px
fontWeight: 400
lineHeight: 1.05
letterSpacing: -0.01em
color: "{colors.pink}"

script-section:

fontFamily: "DM Serif Display, serif"
fontSize: 600px
fontWeight: 400
lineHeight: 0.82
letterSpacing: -0.02em
color: "{colors.pink}"

script-giant:

fontFamily: "DM Serif Display, serif"
fontSize: 360px
fontWeight: 400
lineHeight: 1.05
color: "{colors.pink}"

script-cover:

fontFamily: "DM Serif Display, serif"
fontSize: 280px
fontWeight: 400
lineHeight: 1.02
letterSpacing: -0.015em
color: "{colors.pink}"

script-large:

fontFamily: "DM Serif Display, serif"
fontSize: 220px
fontWeight: 400
lineHeight: 1.04
color: "{colors.pink}"

script-med:

fontFamily: "DM Serif Display, serif"
fontSize: 156px
fontWeight: 400
lineHeight: 1.04
color: "{colors.pink}"

script-sm:

fontFamily: "DM Serif Display, serif"
fontSize: 132px
fontWeight: 400
lineHeight: 1.06
color: "{colors.pink}"

serif-cta:

fontFamily: "DM Serif Display, serif"
fontSize: 140px
fontWeight: 400
lineHeight: 1.04
letterSpacing: -0.015em
color: "{colors.paper-blush}"

serif-h2:

fontFamily: "DM Serif Display, serif"
fontSize: 132px
fontWeight: 400
lineHeight: 1.06
color: "{colors.paper-blush}"

serif-quote:

fontFamily: "DM Serif Display, serif"
fontSize: 92px
fontWeight: 400
lineHeight: 1.05
letterSpacing: -0.005em
color: "{colors.paper-blush}"

serif-chart-h:

fontFamily: "DM Serif Display, serif"
fontSize: 90px
fontWeight: 400
lineHeight: 1.06
color: "{colors.paper-blush}"

serif-section-h:

fontFamily: "DM Serif Display, serif"
fontSize: 88px
fontWeight: 400
lineHeight: 1.06
color: "{colors.paper-blush}"

serif-stat:

fontFamily: "DM Serif Display, serif"
fontSize: 116px
fontWeight: 400
lineHeight: 0.9
color: "{colors.pink}"

serif-toc-num:

fontFamily: "DM Serif Display, serif"
fontSize: 64px
fontWeight: 400
lineHeight: 1.0
color: "{colors.pink}"

serif-toc-title:

fontFamily: "DM Serif Display, serif"
fontSize: 56px
fontWeight: 400
lineHeight: 1.05
color: "{colors.paper-blush}"

serif-quote-attr:

fontFamily: "DM Serif Display, serif"
fontSize: 48px
fontWeight: 400
lineHeight: 1.05
color: "{colors.paper-blush}"

serif-process-h:

fontFamily: "DM Serif Display, serif"
fontSize: 38px
fontWeight: 400
lineHeight: 1.05
color: "{colors.paper-blush}"

serif-matrix-label:

fontFamily: "DM Serif Display, serif"
fontSize: 32px
fontWeight: 400
lineHeight: 1.2
color: "{colors.paper-blush}"

body:

fontFamily: "Inter, system-ui, sans-serif"
fontSize: 24px
fontWeight: 300
lineHeight: 1.55
color: "{colors.paper-blush}"

body-muted:

fontFamily: "Inter, system-ui, sans-serif"
fontSize: 22px
fontWeight: 300
lineHeight: 1.5
color: "{colors.mute-paper}"

body-toc-desc:

fontFamily: "Inter, system-ui, sans-serif"
fontSize: 24px
fontWeight: 300
lineHeight: 1.4
color: "{colors.mute-paper}"

mono-runner:

fontFamily: "JetBrains Mono, monospace"
fontSize: 24px
fontWeight: 400
letterSpacing: 0.14em
textTransform: uppercase

mono-kicker:

fontFamily: "JetBrains Mono, monospace"
fontSize: 22px
fontWeight: 400
letterSpacing: 0.14em
textTransform: uppercase
color: "{colors.pink}"

mono-label:

fontFamily: "JetBrains Mono, monospace"
fontSize: 22px
fontWeight: 400
letterSpacing: 0.14em
textTransform: uppercase
color: "{colors.paper-blush}"

mono-cover-pre:

fontFamily: "JetBrains Mono, monospace"
fontSize: 28px
fontWeight: 400
letterSpacing: 0.42em
textTransform: uppercase
color: "{colors.paper-blush}"

mono-pill:

fontFamily: "JetBrains Mono, monospace"
fontSize: 16px
fontWeight: 400
letterSpacing: 0.08em
textTransform: uppercase

spacing: edge-x: 60px edge-top-chrome: 60px edge-bottom-chrome: 60px content-top: 140px content-bottom: 140px inner-frame-inset: 36px

canvas: width: 1920px height: 1080px

components: slide-surface:

background: "radial-gradient(ellipse 90% 70% at 30% 30%, #1A1218 0%, #0A0709 55%, #050306 100%)"
description: "Universal dark surface — radial ellipse from a slightly warmer #1A1218 in the upper-left fading to near-black in the lower-right. The off-center light source is part of the system's identity."

film-grain:

selector: ".slide::before"
background: "fractalNoise SVG via data URI, baseFrequency=0.9, octaves=2"
opacity: 0.08
mixBlendMode: screen
description: "Subtle film grain overlay on every slide via ::before. Opacity 0.08 with screen blend — barely visible but reads as photographic grain rather than digital flatness."

hairline-frame:

selector: ".slide::after"
position: "absolute; inset: 36px"
border: "1px solid {colors.hair-paper}"
description: "1px paper-blush-at-14%-opacity interior frame inset 36px from each slide edge. Always present. Functions as the editorial border of the magazine page."

runner:

position: "absolute; top: 60px; left: 60px; right: 60px"
fontFamily: "JetBrains Mono, monospace"
fontSize: 24px
letterSpacing: 0.14em
textTransform: uppercase
description: "Top metadata runner — brand name on left (colored pink), section / chapter tag on right (muted paper-blush)."

footer:

position: "absolute; bottom: 60px; left: 60px; right: 60px"
fontFamily: "JetBrains Mono, monospace"
fontSize: 24px
letterSpacing: 0.14em
textTransform: uppercase
description: "Bottom metadata runner — source / confidentiality on left, page-position (e.g. '03 / 09') on right. Page-position has paper-blush base text with a pink ::em for the current number."

pink-rule:

height: 1px
background: "{colors.pink}"
opacity: 0.45
description: "Hairline pink rule for soft section separators."

hair-rule:

height: 1px
background: "{colors.paper-blush}"
opacity: 0.25
description: "Hairline paper rule for muted section separators."

pink-glow:

textShadow: "0 0 80px rgba(237, 61, 140, 0.18)"
description: "Soft pink halo behind large script titles. Applied via text-shadow on hero serif text only."

pink-glow-mega:

textShadow: "0 0 120px rgba(237, 61, 140, 0.22)"
description: "Stronger pink halo for section-divider mega numerals."

callout-rail:

borderLeft: "1px solid {colors.pink}"
paddingLeft: 24px
description: "Pink left rule with right-aligned content — used as a callout container beside a chart, beside a chapter explanation."

matrix-cell:

padding: "16px 24px"
borderBottom: "1px solid {colors.line-pink}"
fontFamily: "Inter, sans-serif"
fontSize: 22px
fontWeight: 300
color: "{colors.paper-blush}"
description: "Comparison matrix cell. Rows are separated by hairline pink-at-32% rules; columns are gap-separated, no vertical borders."

matrix-cell-us:

background: "rgba(237, 61, 140, 0.08)"
description: "Highlighted matrix row variant — soft pink wash to mark the 'our' column."

pill-outline:

border: "1px solid {colors.pink}"
color: "{colors.pink}"
padding: "6px 14px"
fontFamily: "JetBrains Mono, monospace"
fontSize: 16px
letterSpacing: 0.08em
textTransform: uppercase
description: "Hollow pink pill — 1px pink border with pink mono text. The default pill state."

pill-solid:

background: "{colors.pink}"
color: "{colors.ink-deep}"
border: "1px solid {colors.pink}"
fontWeight: 500
description: "Solid pink pill — pink fill, deep-ink text. Affirmative / featured state."

pill-dim:

borderColor: "{colors.hair-paper}"
color: "{colors.mute-paper}"
description: "Dim pill — muted paper border, muted paper text. The de-emphasized state."

qr-tile:

width: 180px
height: 180px
background: "{colors.paper-blush}"
padding: 12px
description: "QR-code container — solid paper-blush square with 12px white padding around the SVG QR. The only large light-surface element in the system."

stat-row:

display: "grid; columns: 240px 1fr"
borderBottom: "1px solid {colors.hair-paper}"
paddingBottom: 16px
description: "Stat row pattern — large pink serif figure on the left (with a paper-blush superscript unit) paired with a mono label and Inter description on the right. Rows are separated by 1px paper hairline."

callout-num:

fontFamily: "DM Serif Display, serif"
fontSize: 120px
lineHeight: 0.9
color: "{colors.pink}"
description: "Chart callout number — large pink serif numeral with smaller paper-colored unit suffix."

arrow-glyph:

width: 24px
height: 24px
color: "{colors.pink}"
description: "Small pink right-arrow SVG used between process steps."

---

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

Pink Script is a nocturnal couture editorial system built on a single atmospheric premise: a deep warm-black surface lit from the upper-left by a slightly warmer #1A1218 ellipse that fades to near-black across the lower-right. The off-center light source reads as a studio softbox catching one corner of a magazine spread. Over this, a subtle film-grain overlay at 8% opacity with screen blend adds the photographic graininess of late-night editorial photography. Inside this surface sits a 1px hairline interior frame (paper-blush at 14% opacity, inset 36px from each edge) — the editorial border of every page. Without the lit gradient, the film grain, and the interior frame, the system collapses into flat dark UI.

The typeface stack is a deliberate three-voice editorial pairing. DM Serif Display carries every editorial moment — script titles (treated as the system's "pink script"), serif headlines, stat figures, quote text. It runs at weight 400 only; the face has just one weight and that's the system's display voice. The serif scales freely from 32px (table labels) all the way up to 600px (section-divider numerals). Inter at weight 300 carries every body paragraph, lead, description, and caption — the ultra-light geometric sans is the system's calm prose voice. JetBrains Mono at weight 400 carries every label, kicker, page number, axis tag, runner, and footer string — always uppercase with at least 0.08em positive tracking.

The palette is anchored to a single signature: hot pink fuchsia ({colors.pink} — #ED3D8C) against deep warm-black ({colors.ink-deep} — #060507). The pink is the entire editorial accent system; it appears as script title color, as kicker color, as chart line color, as pill border, as inline <em> switch inside paper-blush headlines, as callout numerals, as rule color, and as the soft halo (text-shadow glow) behind hero script titles. Paper-blush ({colors.paper-blush} — #F5EDF1) is the secondary text color — used for editorial sans-serif headlines, paragraph copy, and any moment that should read as ink rather than highlight. Muted paper at 55% opacity handles secondary text; hairline paper at 14% handles separators and the interior frame.

Depth is created through three layered mechanisms: the off-center radial gradient surface (lit from the upper-left), the subtle film-grain overlay (8% opacity, screen blend, adds photographic texture), and the pink halo text-shadow on hero script titles (a soft 80–120px glow that simulates the light bleed of large neon-saturated type on photographic paper). There are no drop shadows on any element; the depth is atmospheric and photographic, not structural.

Density philosophy: sparse-medium with one hero moment. Pink Script reads as elegant when a single oversized script anchors the slide and the rest is generous negative space punctuated by 2–4 small editorial fragments (a runner, a kicker, a paragraph, a footer). A slide with the hero script taking up 60–70% of the canvas and the supporting copy quietly orbiting the remaining margin is correct. Cramming the canvas with multiple equally-weighted regions breaks the late-night magazine feeling. The exception is the stats slide (5 stat rows side-by-side), the comparison matrix (full-grid table), and the system slide (multiple panels) — these slides are denser by design because the editorial purpose is reference, not poetry. Process and TOC slides are populated but always hierarchical: a giant script header dominates, with smaller card rows orbiting beneath.

Key Characteristics:

• Deep warm-black surface ({components.slide-surface}) lit from the upper-left by a radial gradient ellipse.
• A subtle film-grain overlay ({components.film-grain}) on every slide — opacity 0.08, screen blend.
• A 1px paper-blush interior frame ({components.hairline-frame}) inset 36px from each edge, present on every slide.
• Hot fuchsia pink ({colors.pink}) is the single chromatic accent — used as script color, kicker color, line color, pill outline, inline emphasis, and the soft halo behind hero scripts.
• DM Serif Display carries every editorial moment, scaling from 32px to 600px. There is no second display face.
• Inter at weight 300 carries every body paragraph — ultra-light sans is the system's prose voice.
• JetBrains Mono uppercase at 0.08em+ tracking carries every label, page number, and runner string.
• Top runner and bottom footer chromes appear on every slide; the runner brand text is pink, everything else in chrome is muted paper-blush.
• The inline <em> element switches paper-blush serif headlines to pink — the system's editorial emphasis mechanism.

Colors

Palette

• Ink Deep ({colors.ink-deep} — #060507): The base surface color. A near-black with a faint warm shift. Combined with the radial gradient, this anchors the dark editorial surface.
• Ink Violet ({colors.ink-violet} — #0F0D11): A slightly lifted dark with a violet cast. Reserved alternate dark — available but rarely used in current slide types.
• Paper Blush ({colors.paper-blush} — #F5EDF1): A warm off-white with a faint pink undertone. The primary editorial text color, the QR-tile background, and the secondary highlight surface. Reads as paper rather than pure white.
• Pink ({colors.pink} — #ED3D8C): Hot fuchsia. The system's single chromatic accent. Used as the script title color, kicker color, inline <em> color, callout numeral color, rule color, chart line color, pill outline color, and the source color for the halo text-shadow.
• Pink Light ({colors.pink-light} — #FF66A8): A brighter pink. Defined but not used in current slide types.
• Pink Deep ({colors.pink-deep} — #B81D67): A darker pink. Defined but not used in current slide types.
• Line Pink ({colors.line-pink} — rgba(237,61,140,0.32)): Pink at 32% opacity for table row dividers and chart axis lines.
• Mute Paper ({colors.mute-paper} — rgba(245,237,241,0.55)): Paper-blush at 55% for muted body text and metadata.
• Hair Paper ({colors.hair-paper} — rgba(245,237,241,0.14)): Paper-blush at 14% for the interior hairline frame, dim pill borders, and toc-row dividers.

Defaults

• Default slide surface: {components.slide-surface} — the lit warm-black radial gradient. Always.
• Default film grain: {components.film-grain} at opacity 0.08 with screen blend. Non-optional.
• Default interior frame: {components.hairline-frame} at 1px paper-blush 14%. Non-optional.
• Default primary headline color: For a hero script moment, {colors.pink}. For an editorial headline that should read as ink (not highlight), {colors.paper-blush}.
• Default body text color: {colors.paper-blush} for primary copy; {colors.mute-paper} for muted lead and description.
• Default kicker color: {colors.pink}. The eyebrow label is always pink.
• Default label / metadata color: {colors.mute-paper} for runner, footer, and metadata.
• Default line / divider color: {colors.pink} at 45% opacity for soft pink rules; {colors.hair-paper} for muted hairlines.
• Default emphasis mechanism inside a paper-blush headline: wrap in <em> to switch that word to {colors.pink} (font-style stays upright).
• Default pill state: outline ({components.pill-outline}) — pink border, pink text.
• Default chart series: pink line for primary; muted paper-blush dashed for secondary.

The pink is the only chromatic color in regular use; the other pink variants (Pink Light, Pink Deep) are reserved. Don't introduce a second chromatic accent — Pink Script's identity is that it is monochromatically pink.

Typography

Font Family

The system loads three web fonts: DM Serif Display (weight 400, italic 0 only) carries every editorial / display moment from 32px up to 600px; Inter (weights 300, 400, 500, 600) carries every body paragraph and lead; JetBrains Mono (weights 400, 500) carries every label, runner, footer, and metadata string.

The emotional register of each face is distinct:

• DM Serif Display reads as editorial, perfume-magazine, late-night couture — the face has elegant high-contrast strokes and the system uses it for every moment that should feel literary or magazine-typeset.
• Inter at weight 300 reads as calm, contemporary, neutrally elegant — the ultra-light weight matches the editorial tone without competing with the serif.
• JetBrains Mono reads as archival, boutique-catalog, edition-numbered — the mono uppercase voice handles edition numbers, page positions, runner brand text, and section tags.

A key inline mixing rule: the <em> element inside a DM Serif Display headline switches color to {colors.pink} (font-style normalized to upright). This is the system's primary headline emphasis — pink ink inside paper-blush serif text.

A second inline mixing rule: a <sup> element inside a stat figure renders at ~36px in {colors.paper-blush} with a slight top-padding offset — used for unit suffixes (%, ×, M).

Type Scale

Token	Size	Family	Weight	Use
{typography.script-section}	600px	DM Serif Display	400	Section-divider mega numeral
{typography.script-huge}	540px	DM Serif Display	400	Hero script in a feature display position
{typography.script-giant}	360px	DM Serif Display	400	Large editorial script title
{typography.script-cover}	280px	DM Serif Display	400	Cover script title
{typography.script-large}	220px	DM Serif Display	400	TOC primary script
{typography.script-med}	156px	DM Serif Display	400	Process slide primary headline
{typography.serif-cta}	140px	DM Serif Display	400	Closing CTA headline (paper-blush color)
{typography.script-sm}	132px	DM Serif Display	400	Stat-slide headline, matrix headline
{typography.serif-stat}	116px	DM Serif Display	400	Stat row figure
{typography.callout-num}	120px	DM Serif Display	400	Chart callout numeral
{typography.serif-quote}	92px	DM Serif Display	400	Quote-slide body text
{typography.serif-chart-h}	90px	DM Serif Display	400	Chart-slide headline
{typography.serif-section-h}	88px	DM Serif Display	400	Section divider supporting headline
{typography.serif-toc-num}	64px	DM Serif Display	400	TOC row numeral
{typography.serif-toc-title}	56px	DM Serif Display	400	TOC row title
{typography.serif-quote-attr}	48px	DM Serif Display	400	Quote attribution name
{typography.serif-process-h}	38px	DM Serif Display	400	Process step heading
{typography.serif-matrix-label}	32px	DM Serif Display	400	Matrix row label
{typography.body}	24px	Inter	300	Standard body paragraph
{typography.body-muted}	22px	Inter	300	Muted lead and description
{typography.body-toc-desc}	24px	Inter	300	TOC row description
{typography.mono-runner}	24px	JetBrains Mono	400	Top runner and bottom footer
{typography.mono-kicker}	22px	JetBrains Mono	400	Pink kicker eyebrow
{typography.mono-label}	22px	JetBrains Mono	400	Standard paper-blush label
{typography.mono-cover-pre}	28px	JetBrains Mono	400	Cover preamble line (with 0.42em wide tracking)
{typography.mono-pill}	16px	JetBrains Mono	400	Pill text

Defaults

• Default primary content headline: {typography.script-sm} (132px) — when the slide is a content moment with a strong headline.
• Default cover / opening headline: {typography.script-cover} (280px) — the cover script lockup.
• Default section-divider mega numeral: {typography.script-section} (600px).
• Default body paragraph: {typography.body} (24px Inter 300).
• Default muted lead / description: {typography.body-muted} (22px Inter 300, mute-paper color).
• Default label / kicker: {typography.mono-kicker} (22px JetBrains Mono, pink).
• Default footer / runner: {typography.mono-runner} (24px JetBrains Mono).
• Default stat figure: {typography.serif-stat} (116px) with a 36px paper-blush <sup> for unit.
• Default weight for any display element: 400 (DM Serif Display has only one weight).
• Default weight for body: 300.

When unsure, the canonical pattern is: a 22px pink kicker + a 132–156px DM Serif Display headline (with one <em>-wrapped word in pink if extra emphasis is needed) + a 22–24px Inter 300 paragraph in muted paper-blush. That three-element pattern is the system's most reliable rhythm.

Signature Treatments

These treatments are non-optional whenever the corresponding element type is used:

• Every slide carries the radial-gradient surface, the film-grain overlay, AND the 1px paper-blush interior frame. All three together. Removing any one collapses the editorial-magazine reading.
• Every hero script element (sizes 280px and larger) carries the pink halo text-shadow. {components.pink-glow} for hero scripts (80px blur); {components.pink-glow-mega} for section-divider mega numerals (120px blur). The halo simulates the light bleed of neon-saturated print.
• Every script color is {colors.pink}. DM Serif Display in any other color is not "script" — it becomes "serif headline." The pink color is what defines script vs. headline in this system.
• Paper-blush serif headlines may switch one word to pink via <em> — this is the system's headline emphasis mechanism. The <em> stays upright (font-style: normal).
• DM Serif Display headlines always have padding-bottom: .1em (or .12em for the largest script). This compensates for the serif descenders so the visual baseline reads correctly aligned.
• All JetBrains Mono is uppercase with at least 0.08em positive tracking (most chrome and labels use 0.12–0.18em; the cover preamble uses 0.42em).
• Body text is always Inter at weight 300. Inter at any other weight is not body — switching to 400 reads as a different tone.
• The kicker is always pink in {colors.pink}. The eyebrow color is non-negotiable.
• Runner brand text on the left is always pink; the right-side meta is always muted paper-blush. The pink brand text is the system's persistent identity signal.
• The page-position footer uses paper-blush base text with a pink <em> for the current number. Format: <span>03 / 09</span> where 03 is wrapped in <em> to render pink.

Typography Principles

The rhythm of Pink Script is oversized pink script + paper-blush serif paragraph headline + muted Inter prose + small mono editorial tag. Switching any voice (e.g., setting a script in Inter, or body in DM Serif) collapses the system's editorial register. The serif scales freely from 32px to 600px; choose the size based on the slide's hero moment, not on a fixed scale.

Italic letterforms are not used (DM Serif Display does have an italic, but it's not loaded by the template). The <em> tag is repurposed as a pink color switch. Underline is not used. Bold weight is not available in DM Serif Display, and using bold Inter for body breaks the calm prose voice.

Layout

Canvas System

The system targets a fixed 1920×1080 canvas rendered inside a <deck-stage> web component. All sizes are pixel-fixed; the stage handles proportional scaling.

Most slides use absolute positioning with edge-anchored elements. The standard content area is inset: 140px 60px 140px 60px — a 140px top reserve for the runner + headline area, 140px bottom reserve for the footer, and 60px left/right edge margins.

Padding and Anchoring

Anchor	Value	Use
edge-x	60px	Left and right edge margins for content
edge-top-chrome	60px	Top inset for the runner chrome
edge-bottom-chrome	60px	Bottom inset for the footer chrome
content-top	140px	Top inset for slide body content (below runner)
content-bottom	140px	Bottom inset for slide body content (above footer)
inner-frame-inset	36px	The hairline interior frame inset

Chrome Frame

Every slide carries a top runner at 60px top / 60px sides — a brand name on the left (always pink) and a section / chapter tag on the right (muted paper-blush). The runner is JetBrains Mono uppercase at 24px with 0.14em tracking.

Every slide also carries a bottom footer at 60px bottom / 60px sides — typically a source or confidentiality string on the left and a page-position marker on the right. The page-position uses paper-blush base with a pink <em> for the current number (e.g., 01 / 09).

The hairline interior frame at 1px paper-blush 14% sits at inset: 36px on every slide. It is the editorial border of the magazine page and present unconditionally.

Depth and Elevation

No Box Shadows, Atmospheric Depth Only

The system uses zero box-shadow declarations on any structural element. Depth comes from three atmospheric layers:

1. The radial-gradient surface ({components.slide-surface}) — lit from the upper-left by a warm dark ellipse fading to near-black across the lower-right. This creates the impression of a studio softbox catching one corner of the page.
2. The film-grain overlay ({components.film-grain}) — 8% opacity, screen blend, adds photographic graininess to the surface.
3. The pink halo text-shadow on hero script titles — a soft 80–120px blur in pink at low alpha that simulates the light bleed of large neon-saturated type on photographic paper.

No Drop Shadows on Cards or Panels

Cards, tables, and panels do not carry shadows. The system's "card" pattern is structural rather than elevated: a region defined by a border or a left-rule, sitting flat on the surface.

Hairline Rules as Structural Depth

Where the system needs to separate regions, it uses:

• 1px pink at 45% opacity ({components.pink-rule}) for soft pink rules.
• 1px paper-blush at 14% ({components.hair-paper}) for muted hairline separators.
• 1px pink at 32% ({colors.line-pink}) for table row dividers and chart axis lines.

Never a 2px or thicker rule. Never a colored rule outside pink and paper.

Shapes and Treatment

Border Radius

Value	Use
0px	Cards, panels, table cells, QR tiles, runner / footer text
999px	None — pills here are explicitly rectangular

The system has zero border-radius on any structural element. Pills are 0-radius rectangles (despite the "pill" naming convention). The only round element is the small chart-callout circle marker (an SVG <circle> element marking an inflection point).

Border Weights

• 1px solid paper-blush at 14% — the universal interior hairline frame.
• 1px solid pink ({colors.pink}) — pill outlines.
• 1px solid pink at 32% ({colors.line-pink}) — table dividers, chart axes.
• 1px solid paper-blush at 14% — TOC row dividers, footer separators.
• 1px solid pink at full opacity — left callout-rail border, top-of-step border in process slides.
• 1px dashed pink at 18% — chart grid lines.

No other border weights exist. There is no 2px, 3px, or thicker border anywhere in the system.

Decorative Element Types

Hero script title — A DM Serif Display headline at 220–600px in pink with the halo text-shadow. The defining moment of any slide that uses it. Always pink, always with the glow, always carries padding-bottom: .1em to compensate for descenders.

Paper-blush serif headline — A DM Serif Display headline at 88–140px in paper-blush. Used when the moment should read as ink rather than highlight. May contain <em> to switch one word to pink.

Pink kicker — A 22px JetBrains Mono uppercase eyebrow in {colors.pink} placed above a headline. The system's most consistent appearance of pink alongside the hero script.

Mono runner / footer — Standard JetBrains Mono chrome at 24px / 0.14em tracking. The brand on the runner is always pink; the rest is muted paper-blush.

Pink rule ({components.pink-rule}) — 1px pink at 45% opacity. Used as a soft separator.

Hairline rule ({components.hair-rule}) — 1px paper-blush at 14% opacity. Used as a muted separator and as the TOC row divider.

Callout rail ({components.callout-rail}) — A 1px pink left border with right-aligned content padding-left 24px. Used as a vertical callout container beside charts or beside a chapter explanation.

Stat row ({components.stat-row}) — A 240px serif figure paired with a mono label + Inter description, separated from the next row by a 1px paper hairline. Stat figures are pink; descriptions are muted paper-blush.

Pills ({components.pill-outline}, {components.pill-solid}, {components.pill-dim}) — Three pill states: hollow pink (default), solid pink with deep-ink text (affirmative / featured), and dim hairline (de-emphasized). All are 0-radius rectangles.

QR tile ({components.qr-tile}) — A 180×180 paper-blush square with 12px white padding and an SVG QR inside. The only large light-surface element in the system; it functions as a "ticket" object on the CTA slide.

Chart callout — A 120px pink serif numeral with a 0.5em paper-colored unit suffix, plus a small mono label and a 22px muted Inter description, anchored to the right of a chart by a 1px pink callout rail.

Chart line — A 3px solid pink line for the primary series; a 2px paper-blush dashed line for the secondary series. The inflection point on the primary line carries a 9px solid pink circle with an 18px hollow ring at 50% opacity and a vertical dashed line dropping to the axis.

Process step — A vertical column anchored by a 1px solid pink top border with a 96px pink serif numeral, a 38px paper-blush serif heading, and an Inter description. Steps are separated by a 24px gap and connected by a small pink arrow glyph.

Matrix table — A 4-column grid with the first column being a 32px paper-blush serif label, the column header row colored pink, and the "our column" row tinted with rgba(237, 61, 140, 0.08) to mark it.

Do's and Don'ts

Do

• Apply the radial-gradient surface, the film-grain overlay, and the 1px paper-blush interior frame to every slide. All three are non-optional.
• Set hero script titles in {colors.pink} with the halo text-shadow. The glow is part of the script's identity.
• Use DM Serif Display for every editorial / display moment. The serif is the system's only editorial face — don't substitute a second face.
• Set body paragraphs in Inter at weight 300. The ultra-light weight is the system's calm prose voice.
• Use JetBrains Mono uppercase with at least 0.08em tracking for every label, page number, runner, and footer string.
• Use <em> inside a paper-blush serif headline to switch one word to pink — the system's primary headline emphasis.
• Place a pink kicker above every primary headline. The pink eyebrow is the system's editorial signal.
• Use the pink left-rule callout ({components.callout-rail}) to anchor a stat, a callout, or a chapter explanation to the right of a chart or content region.
• Add padding-bottom: .1em to every DM Serif Display headline. The serif descenders need compensation.
• Use the page-position footer pattern with pink <em> for the current number: <em>03</em> / 09.

Don't

• Don't omit the film grain or the interior hairline frame. The system's editorial atmosphere depends on both.
• Don't use box-shadow on any panel or card. Depth is atmospheric, not structural.
• Don't introduce a second chromatic accent. Pink is the only accent. Adding red, blue, or green breaks the system.
• Don't render the pink fuchsia as text on the paper-blush surface — the contrast inverts and looks like a typo.
• Don't put body copy in DM Serif Display. The serif is for editorial moments, not paragraphs.
• Don't put display headlines in Inter. The sans is the body voice, not the headline voice.
• Don't round any element. Cards, pills, tables, QR tiles — all strict rectangles.
• Don't use blurred shadows on any element. The only "shadow" in the system is the pink halo text-shadow on hero scripts, and that's a glow, not a drop shadow.
• Don't use italic letterforms. The <em> tag is repurposed as a pink color switch.
• Don't crowd a slide with multiple equally-weighted regions. The system reads as elegant when one hero moment dominates.

Responsive Behavior

The system targets a fixed 1920×1080 canvas rendered inside a <deck-stage> web component. The stage handles proportional scaling to the browser viewport — all pixel-fixed sizes inside the canvas scale uniformly.

Presenter Behavior

• Navigation, scaling, and presenter chrome are handled by the <deck-stage> component.
• Keyboard, touch, and mouse-wheel navigation are managed by the stage.
• The canvas is constant 1920×1080 regardless of viewport.

Print Behavior

Print export depends on the deck-stage component's print handling. The pink halo text-shadow and the film-grain overlay may render inconsistently in PDF export — test before assuming visual parity.

CJK & International Content

Recommended Chinese Pairing

Role	Latin face	Chinese face (recommended)	Weight	Notes
Script / display (DM Serif Display)	DM Serif Display	思源宋体 Noto Serif SC	900	Heavy serif that holds visual mass on dark backgrounds. The default choice.
Display alternate (delicate moments)	DM Serif Display	站酷小薇体 ZCOOL XiaoWei	400	Couture-thin display face — use only at very large sizes (400px+) where delicacy reads as intentional. Too thin on dark backgrounds at typical headline sizes (40–200px).
Body (Inter 300)	Inter	Noto Serif SC (思源宋体)	400	Serif body keeps the editorial register cohesive with the heavy display.
Label / runner (JetBrains Mono UPPERCASE tracked)	JetBrains Mono	Noto Sans SC	400 (do not force monospace on CJK)

Mixed-Content Strategy

Strategy A — extend each token's fontFamily to include the Chinese face after the Latin face. DM Serif Display tokens become "DM Serif Display, 'Noto Serif SC', serif" with font-weight: 900 on the Chinese run; Inter body tokens become "Inter, 'Noto Serif SC', system-ui, sans-serif"; JetBrains Mono tokens become "JetBrains Mono, 'Noto Sans SC', monospace". Latin glyphs render in their original face; CJK falls through automatically.

Critical: when Chinese text uses the display role, set font-weight: 900 explicitly. DM Serif Display's "single weight" is already visually heavy because it's a high-contrast display serif — the equivalent CJK heaviness lives at weight 900 in Noto Serif SC, not weight 400.

Loading

<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=DM+Serif+Display&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&family=Noto+Serif+SC:wght@400;500;700;900&family=Noto+Sans+SC:wght@400;500;700&family=ZCOOL+XiaoWei&display=swap" rel="stylesheet">

Universal CJK Adjustments

• Line-height: body 1.75–1.85, display 1.15–1.25
• Letter-spacing: 0 on CJK
• Text-transform: no uppercase on CJK
• Full-width punctuation （，。：；！？「」（））
• No period on display headlines (Chinese typography convention)
• Pangu spacing 盘古之白 (space between CJK and Latin: 使用 Claude not 使用Claude)
• One font per sentence

Aesthetic Notes for This System

Pink Script (After Hours) is a nocturnal couture system whose entire editorial identity rests on DM Serif Display in hot fuchsia pink at sizes up to 600px against dim warm-black paper. The visual weight of DM Serif Display at any size is substantial — high-contrast strokes, serif terminals, and a typographic mass that holds against the dark background.

The recommended Chinese equivalent is 思源宋体 Noto Serif SC at weight 900. This carries the same visual mass as DM Serif Display: bold serif terminals, sufficient stroke density to read clearly against the dark surface, and the editorial register that defines the system. Weight 900 is non-negotiable for display moments — anything lighter (400, 500, even 700) will visually disappear against the pink-glow + dark-paper combination and break the entire couture register.

站酷小薇体 ZCOOL XiaoWei is a viable secondary option for moments where extreme delicacy reads as intentional — a single 400-px+ pull-quote, a hairline section divider title, a brand wordmark at the very top of a cover slide. Its single-weight 400 with extreme stroke contrast carries a different feeling: dressier, more whisper-thin, more vintage-Vogue than modern-fashion-editorial. For most display work, choose Noto Serif SC 900; reach for XiaoWei only when the moment is genuinely a delicate accent at extreme size.

The pink halo text-shadow ({components.pink-glow} at 80–120px blur) transfers perfectly to Chinese characters regardless of which display face you choose. Apply the same glow to every Chinese display moment in pink — the neon bleed effect is script-agnostic and the late-night magazine atmosphere survives the script switch fully.

The pink color ({colors.pink} — #ED3D8C) as the only chromatic accent works unchanged. The inline <em> color switch (paper-blush headline with one word in pink) is a clean transfer to Chinese — wrap one CJK character or one phrase in <em> and the pink ink switch reads exactly the same.

Inter at weight 300 for body does not transfer directly. Noto Serif SC at weight 400 is the recommended body face — its high-contrast serif stroke matches the couture register of the system's overall feel. Body color stays paper-blush ({colors.paper-blush}); the ultra-light register is achieved through size, paper-blush color, and the muted 55%-opacity lead, not through font weight.

JetBrains Mono uppercase tracked labels (runner brand, page numbers, footer chrome) do not transfer to CJK. Pure Latin chrome strings (the brand name itself, edition numbers like 01 / 09) keep JetBrains Mono. For Chinese chrome text (a section / chapter tag in the upper-right), use Noto Sans SC 400 at the same 24px size with letter-spacing reset to 0 and no uppercase.

The radial-gradient surface, the film-grain overlay, the 1px paper-blush interior frame — all script-agnostic. The pink halo, the kicker, the callout rail, the stat-row pattern, the matrix-cell — all transfer unchanged.

Known CJK Gap

DM Serif Display's "single weight" is misleading: it's a high-contrast display serif that reads as visually heavy at any size. The Chinese equivalent heaviness lives at Noto Serif SC weight 900, not weight 400 — using weight 400 for display will make Chinese headlines look limp and disconnected from the bold pink callouts. The system's reliance on size for hierarchy still works in Chinese, but you must lock display weight at 900 to preserve the visual mass.

ZCOOL XiaoWei is the only CDN-loadable Chinese face that captures the "high-contrast couture serif" character in its proportions, but its single-weight 400 is too thin for most display sizes on this template's dark surface. Treat XiaoWei as a niche option, not the default.

Iteration Guide

1. Every new slide background is the lit radial gradient ({components.slide-surface}) with film grain and the interior hairline frame. Don't skip any of the three layers.
2. Every new hero script title is DM Serif Display in {colors.pink} with the halo text-shadow at 80–120px blur.
3. Every new editorial headline that should read as ink (not highlight) is DM Serif Display in {colors.paper-blush}. Use <em> inside to switch a word to pink.
4. Every new body paragraph is Inter at weight 300 in paper-blush (full) or mute-paper (muted).
5. Every new label, runner, footer, or metadata tag is JetBrains Mono uppercase at 0.08em+ tracking.
6. Every new kicker eyebrow is pink. Don't render a kicker in any other color.
7. Every new pill is a 0-radius rectangle. Choose outline (default), solid (affirmative), or dim (de-emphasized) state.
8. Every new table or matrix uses 1px pink-at-32% row dividers and no vertical borders.
9. Every chart uses a 3px solid pink line for primary and a 2px paper-blush dashed line for secondary. Don't introduce a third color.
10. The runner brand text is always pink; the right-side meta is always muted paper-blush. Don't swap.

Known Gaps

• The system depends on a <deck-stage> web component loaded via deck-stage.js. Without it, the 1920×1080 canvas will not scale and slides will render at native pixel size.
• The film-grain overlay uses a data-URI SVG with feTurbulence. Some browsers (older Safari) render the noise inconsistently or skip it in PDF export.
• DM Serif Display has only weight 400. There is no bold or italic variant available — the system has no fallback weight scale and depends on size alone for hierarchy.
• The pink halo text-shadow uses fixed 80px and 120px blur values. At very small viewport scales, the glow may dominate the type; at very large scales, the glow may appear weak.
• The {colors.pink-light}, {colors.pink-deep}, and {colors.ink-violet} tokens are defined but inactive in current slide types. They are reserved for future variation.
• The QR-tile SVG inside the CTA slide is a hand-coded pattern of <rect> elements that does not encode a real scannable code. Real QR codes need to be generated externally.
• Chart line points and inflection markers are SVG <polyline> coordinates that must be computed manually. There is no data-binding layer.
• The cover script lockup uses padding-left: 180px on the second line for an indented hanging effect. This is a hardcoded layout decision and doesn't generalize to other word lengths — long second lines may break the centering.
• The runner and footer rely on white-space: nowrap to prevent line-wrap. Extremely long brand names or page-position strings may overflow the 60px edge margin.
• The matrix cell.us column highlight is a hardcoded rgba(237, 61, 140, 0.08) wash. Tinting other columns requires per-column class additions.