/* global React, ReactDOM */ const { useState } = React; // ============================================================ // Atom: Broken Frame Mark (locked geometry from logo-r2) // ============================================================ function BFM({ size = 100, accent = 'var(--green)', ink = 'var(--ink)', stroke = 6 }) { return ( ); } // ============================================================ // Atom: Hybrid wordmark // ============================================================ function Wordmark({ size = 56, variant = 'default' }) { // variant: default | ink-dark (for light-bg) | ink-light (for any dark bg) | mono-white | mono-black const cls = "hybrid-word " + (variant === 'ink-dark' ? 'ink-dark' : variant === 'ink-light' ? 'ink-light' : ''); return ( parabreak ); } // ============================================================ // Section frame // ============================================================ function Frame({ name, meta, children }) { return (
{name} {meta && {meta}}
{children}
); } // ============================================================ // Section: 01 — Logo // ============================================================ function LogoSection() { return ( ); } // ============================================================ // Section: 02 — Color // ============================================================ const PALETTE = { dark: [ { name: 'bg', sub: 'page', hex: '#0A0B0F', use: 'page background', tok: '--bg' }, { name: 'bg-2', sub: 'card', hex: '#0F1116', use: 'panels · code blocks', tok: '--bg-2' }, { name: 'panel', sub: 'tile', hex: '#151821', use: 'raised tiles', tok: '--panel' }, { name: 'line', sub: '01', hex: '#1E2230', use: 'grid lines · default borders', tok: '--line' }, { name: 'line-2', sub: '02', hex: '#2A2F40', use: 'strong borders · pill outlines', tok: '--line-2' }, { name: 'ink', sub: 'primary', hex: '#E6E8EF', use: 'headings · body emphasis', tok: '--ink' }, { name: 'ink-2', sub: 'body', hex: '#B4B8C5', use: 'paragraph body', tok: '--ink-2' }, { name: 'mute', sub: 'label', hex: '#6B7080', use: 'labels · captions · annotations', tok: '--mute' }, { name: 'mute-2', sub: 'whisper', hex: '#4A4F60', use: 'placeholders · disabled', tok: '--mute-2' }, ], accent: [ { name: 'green', sub: 'phosphor', hex: '#46E49E', use: 'primary accent · CTAs · highlights', tok: '--green' }, { name: 'green-dim', sub: 'phosphor 2',hex: '#2A8F62', use: 'hover-out · disabled accent', tok: '--green-dim' }, { name: 'amber', sub: 'warn', hex: '#F2B544', use: 'pricing badge · time-sensitive', tok: '--amber' }, { name: 'violet', sub: 'plus tier', hex: '#8B5CF6', use: 'Plus tier · Dialogic badge', tok: '--violet' }, { name: 'red', sub: 'destruct', hex: '#E44C4C', use: 'errors · LOCKED · strike-through', tok: '--red' }, ], light: [ { name: 'bg', sub: 'page', hex: '#F4F4EE', use: 'page background', tok: '--bg' }, { name: 'bg-2', sub: 'card', hex: '#ECECE5', use: 'panels', tok: '--bg-2' }, { name: 'panel', sub: 'tile', hex: '#FFFFFF', use: 'raised tiles', tok: '--panel' }, { name: 'line', sub: '01', hex: '#D8D8D0', use: 'grid lines · default borders', tok: '--line' }, { name: 'line-2', sub: '02', hex: '#C2C2BA', use: 'strong borders', tok: '--line-2' }, { name: 'ink', sub: 'primary', hex: '#0A0B0F', use: 'headings', tok: '--ink' }, { name: 'ink-2', sub: 'body', hex: '#2A2F40', use: 'paragraph', tok: '--ink-2' }, { name: 'mute', sub: 'label', hex: '#6B7080', use: 'labels · captions', tok: '--mute' }, { name: 'green', sub: 'phosphor', hex: '#1A8B5A', use: 'accent (darker for AA contrast on cream)', tok: '--green' }, ], }; function Swatch({ s, dark }) { return (
{s.name} {s.sub}
{s.hex}
{s.use}
); } function ColorSection() { return (
02COLOR

Dark CRT default.
Light editorial for docs.

Two themes, one accent system. Dark is the canonical landing surface — phosphor green on near-black. Light mode reuses the same token slots with cream / paper tones for docs, blog, and print. Accent colors (amber / violet / red) keep the same hex in both modes; only the green dims slightly for AA contrast on cream.

DARK — CANONICAL 9 tokens · default
{PALETTE.dark.map((s) => )}
LIGHT — DOCS · PRINT 9 tokens · override
{PALETTE.light.map((s) => )}
ACCENT — SHARED ACROSS THEMES 5 tokens · semantic
{PALETTE.accent.map((s) => )}
·CSS TOKENS

tokens.css contract.

All themes expose the same variable names. --green means "primary accent" regardless of theme. Light mode swaps values, never adds new tokens. This is what makes the Tweaks light/dark toggle a one-class flip.

CSS VARDARKLIGHTUSE
{[ ['--bg', '#0A0B0F', '#F4F4EE', 'page background'], ['--bg-2', '#0F1116', '#ECECE5', 'panel · card surface'], ['--panel', '#151821', '#FFFFFF', 'raised tile'], ['--line', '#1E2230', '#D8D8D0', 'default border · grid lines'], ['--line-2', '#2A2F40', '#C2C2BA', 'strong border'], ['--ink', '#E6E8EF', '#0A0B0F', 'headings · emphasis'], ['--ink-2', '#B4B8C5', '#2A2F40', 'body paragraph'], ['--mute', '#6B7080', '#6B7080', 'labels · captions'], ['--mute-2', '#4A4F60', '#9095A2', 'whisper / disabled'], ['--green', '#46E49E', '#1A8B5A', 'primary accent'], ['--green-dim', '#2A8F62', '#46E49E', 'accent secondary'], ['--amber', '#F2B544', '#F2B544', 'pricing badge · warn'], ['--violet', '#8B5CF6', '#8B5CF6', 'Plus tier · Dialogic'], ['--red', '#E44C4C', '#E44C4C', 'destructive · LOCKED'], ].map(([v, d, l, u]) => (
{v} {d} {l} {u}
))}
); } // ============================================================ // Section: 03 — Typography // ============================================================ function TypeSection() { return (
03TYPOGRAPHY

Four families.
Each does one job.

Space Grotesk for everything display (H1–H4, lockups, pricing). JetBrains Mono for body, labels, UI chrome, kickers — the lived-in "this is a tool" voice. IBM Plex Mono for code blocks (more open `0` and `l`, fewer ambiguities). Pretendard for Korean — same rhythm and weight progression so KO/EN sit side-by-side without re-grading.

SPACE GROTESK · DISPLAY600 · variable

The meta engine.

Hooks. Thirty-five.

What breaks.

headings · marketing · pricing · titles

JETBRAINS MONO · UI400 · 500 · 600

// the game knows.

Parabreak is a runtime layer that gives your characters access to things outside the game — the save file, the menu, the player's last session.

LABELS · KICKERS · ANNOTATIONS · BUTTONS

IBM PLEX MONO · CODE400 · 500
{`{`}
{` "type": `}"save_delete",
{` "slot": `}0,
{` "mark_persistent": `}true,
{`}`}

JSON BLOCKS · INLINE CODE · TERMINAL

PRETENDARD · KOREAN400 · 500 · 600
한국에서 만든 메타 게임을 위해.
parabreak는 한글 자모 단위 text_corrupt를 1순위로 지원합니다.

KOREAN COPY · DOCS · FESTIVAL

·SCALE

Type scale.

Major-third ratio (1.25) for display, fixed steps for UI. Korean h1 / h2 keep the same px but tighten line-height to 1.15 (vs 1.0) to breathe with Hangul's taller character box.

TOKENSIZELS · LHSAMPLE
{[ ['h1', '88 / 64', '-0.045em · 0.96', 'The meta engine.', 'display'], ['h2', '56 / 44', '-0.035em · 1.05', 'Four kinds of seam.', 'display'], ['h3', '28 / 22', '-0.02em · 1.2', 'Lines change while the player reads.', 'display'], ['h4', '22 / 18', '-0.01em · 1.3', 'Meta moments are one-offs.', 'display'], ['body', '15', '0 · 1.55', 'Parabreak exposes the seams as first-class hooks.', 'mn'], ['mono', '13', '0 · 1.55', 'res://addons/parabreak', 'mn'], ['label', '11', '0.2em · 1.5', '// READ-ONLY', 'mn'], ['micro', '10', '0.2em · 1.4', 'V0.1 · PUBLIC ALPHA', 'mn'], ['kr-h2', '56 / 38', '-0.04em · 1.15', '한국에서 만든 메타 게임.', 'kr'], ['kr-body', '15', '0 · 1.7', '한글 narration · 자모 단위 text_corrupt 지원', 'kr'], ].map(([lab, sz, ls, ex, fam]) => (
{lab} {sz}px {ls} {ex}
))}
); } // ============================================================ // Section: 04 — Spacing // ============================================================ function SpaceSection() { return (
04SPACING

Four-base scale.
Section rhythm.

Spacing is a 4px base with a doubling-after-16px progression. Section padding is 96px top/bottom on desktop, 60px on phone. Container max-width 1240px, padding 24px (20px mobile). Use the named tokens — never type raw px in components.

SPACING SCALE10 steps · 4–128px
{[ ['--s1', 4], ['--s2', 8], ['--s3', 12], ['--s4', 16], ['--s5', 24], ['--s6', 32], ['--s7', 48], ['--s8', 64], ['--s9', 96], ['--s10', 128], ].map(([v, px]) => (
{v} {px}px
))}

LAYOUT · container

container content · max 1240px · pad 24px (mobile 20px)

One container width across the site. Within it, content lives on a 12-col implied grid; we use flex / grid with explicit gap rather than per-column tracks for resilience.

RHYTHM · section padding

section · default96px top/bot
section · phone60px top/bot
card · default28px / 24px
grid gap · default24px · 0px on shared-border cards
inline gap · default10–14px
); } // ============================================================ // Section: 05 — Components // ============================================================ function ComponentsSection() { return (
05COMPONENTS

A small kit.
Used a lot.

Buttons, sticker pills, kickers, code blocks. That's most of it. Cards are framed with a thin 1px border and a 28px header strip (dot + name + meta) — anywhere we show structured content. Keep the kit small so the brand stays recognizable.

{/* Buttons */}
BUTTONS · 3 VARIANTSprimary · default · ghost
e.preventDefault()}>Install → e.preventDefault()}>See all 35 hooks e.preventDefault()}>Read docs
e.preventDefault()}>Buy Plus · $69 →
13px / 0.05em / uppercase. 14×22 padding default. Primary is filled phosphor green on near-black. Ghost has no border — for tertiary actions inside dense layouts.
{/* Sticker pills */}
STICKER PILLStrust signals · sub copy
Break the fourth wall · commercially
Your player deleted their save
Compatible with Dialogic 2
locked · FLAG_PLAYER_NOTICED
10px / 0.16em / uppercase. 5×10 padding. Dot color is semantic: green = primary, amber = time/warn, violet = Plus / Dialogic, red = locked / destruct.
{/* Kickers */}
KICKERS · SECTION LABELSsite-wide section header
01WHAT IS PARABREAK
0335 HOOKS
04한국 시장 신호
11px / 0.3em / uppercase. 24px green line + green numbered prefix. Sits 28px above the section heading. Korean kickers use the same dim but Pretendard font.
{/* Code block */}
CODE BLOCK · JSONscenario format
{`{`}
{` `}"type": "shader_effect",
{` `}"effect": "scanline",
{` `}"intensity": 0.45,
{` `}"duration": 1.5{`,`}
{`} `}// 1 of 35 typed blocks
IBM Plex Mono 12px. Tokens: green keys, amber strings, violet numbers / bools, mute comments. No syntax highlighting library — colorize at render with simple regex.
); } // ============================================================ // Section: 06 — Voice // ============================================================ function VoiceSection() { return (
06VOICE

Plain. Slightly menacing.
Always specific.

Parabreak's tone is a tool that knows what it's for. We don't write hype, but we don't write neutral either — every line should sound like it's been used. Korean and English share the same posture, not the same idiom. Translate the feel, not the words.

AXISYESNO
{[ ['register', 'craftsperson · dry · specific', 'marketing · "delight" · vague'], ['authority', "tells you what's locked", 'asks permission · "powered by"'], ['humor', 'wry · meta-aware · earned', 'memes · references · winks'], ['certainty', 'admits the small print', 'overpromises · disclaimers'], ['korean', 'short · spoken · tightened', 'literal EN→KO machine tone'], ['hype', 'a single hard noun verbs the line', 'three adjectives in a row'], ].map(([k, y, n]) => (
{k} {y} {n}
))}
// YES

Hero subhead

Parabreak is a runtime layer that gives your characters access to the things outside the game — the save file, the menu, the player's last session, the system clock. landing · §1 hero

One concrete list. No "revolutionize." The first noun ("runtime layer") tells you what it is in two words.

// NO

Hero subhead (rewritten badly)

Unlock the next generation of immersive meta-narrative experiences with parabreak — the revolutionary engine that empowers your players. — what we are not

"Unlock · next generation · revolutionary · empowers" — four marketing tells in one sentence. Says nothing concrete. Erase.

// YES

한국어 lead

메타 게임의 임팩트는 "개발자가 나를 본다"는 감각에서 옵니다. 그 감각은 번역체에서 절반쯤 죽습니다. landing · §4 dev note

구어체 + 단언 + 짧은 두 문장. 영어 카피의 길이를 직번역하지 않고, 한국어 호흡에 맞게 끊었음.

// NO

한국어 lead (번역체)

Parabreak는 전례 없는 게임 개발 경험을 통해 당신의 플레이어가 진정으로 의식되는 순간을 가능하게 합니다. — 직역 톤

"전례 없는 · 진정으로 의식되는 순간을 가능하게" — 영어 마케팅 어법 그대로 옮긴 톤. 한국어 호흡 0, 신뢰 0.

·RULES

Six rules.

Apply in order. If a line fails any of them, rewrite — don't add a disclaimer.

{[ ["No verbs we wouldn't say at a desk.", "\"empower\", \"unlock\", \"revolutionize\", \"transform\". If you'd be embarrassed to say it to another engineer, don't write it."], ["One concrete noun per claim.", "If we can't point at the thing (save file, JSON block, menu button), the line is hot air."], ["The narrator can be wry, never smug.", "We're amused that the engine notices you. We are not amused at the player. Distinction matters."], ["Admit the corner.", "\"$49 now. $69 after launch.\" \"Open source core. Paid blocks for the rare stuff.\" State the trade — don't hide it."], ["Korean is its own copy, not a translation.", "Write the KR line in Korean from the brief, not from the EN final. Same posture, different idiom."], ["When in doubt, cut.", "A blank space says more than filler. The landing already over-explains; trust the visuals."], ].map(([t, d], i) => (
{String(i + 1).padStart(2, '0')}
{t}
{d}
))}
); } // ============================================================ // Doc header + footer // ============================================================ function DocHead() { return (
parabreak
// BRAND SYSTEM · v1.0
); } function DocFoot() { return ( ); } // ============================================================ // App // ============================================================ function App() { return ( <> ); } ReactDOM.createRoot(document.getElementById('root')).render();