fs-electric-studio

Electric Studio · 钴蓝工作室

Bold, clean, professional, high-contrast split-panel decks. Theme locked to the Electric Studio preset (section 2 of STYLE_PRESETS.md) from the MIT-licensed zarazhangrui/frontend-slides.

Start from example.html in this plugin folder. It is the proven seed: keep its stage CSS (full viewport-base.css contents), the split-panel shell, the corner-marks chrome, the :root tokens, and the entire SlidePresentation controller script verbatim — replace slide content only. Do not rewrite the design; do not introduce any color or font outside this spec.

Locked design tokens (:root — complete list, no additions)

:root {
    --bg-dark: #0a0a0a;                          /* edge bar, dark text, stage letterbox */
    --bg-white: #ffffff;                         /* upper panel */
    --accent-blue: #4361ee;                      /* cobalt panel, chips, bars, numerals */
    --text-dark: #0a0a0a;
    --text-light: #ffffff;
    --text-dark-soft: rgba(10, 10, 10, 0.58);
    --text-light-soft: rgba(255, 255, 255, 0.72);
    --line-dark: rgba(10, 10, 10, 0.14);
    --line-light: rgba(255, 255, 255, 0.28);
    --blue-soft: rgba(67, 97, 238, 0.10);        /* tick boxes, outline bar fills */

    --stage-bg: var(--bg-dark);
    --slide-bg: var(--bg-white);

    --font: 'Manrope', sans-serif;               /* the ONLY typeface */
    --title-size: 152px;
    --h2-size: 88px;
    --lede-size: 33px;
    --body-size: 27px;

    --slide-pad-x: 110px;
    --edge-bar-h: 14px;

    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-normal: 0.7s;
}

Forbidden: any other hue, gradients, purple/indigo (#6366f1), warm accents, photography, illustrations, drop shadows, rounded hero cards. The palette is exactly white / cobalt / near-black plus their soft alphas.

Typography (all Manrope, Google Fonts weights 400/500/800)

• Display / H2 — Manrope 800, tight negative letter-spacing (-0.025em to -0.035em), line-height ≤ 1.08. Title ~152px, H2 60–88px. A terminal period in --accent-blue (<span class="blue">.</span>) is a signature flourish.
• Quote hero — Manrope 800 at ~92px with an oversized cobalt “ mark (~220px): quote typography is the deck's hero visual.
• Kicker — 22px, 800, uppercase, letter-spacing: 0.34em, cobalt on white / white on cobalt.
• Body / lede — 400/500, 25–33px. Support copy on the white panel uses --text-dark-soft; body copy on the cobalt panel stays full --text-light for WCAG AA contrast (the soft light alpha is reserved for bold uppercase chrome: marks, hints, separators).
• Marks — 19px, 800, uppercase, letter-spacing: 0.22em.
• Never substitute Inter, Roboto, Arial, serifs, or any second typeface.