Hub
Design System v2.0.0 — Console Launch Edition
System Initialization
Loading typography module 100%
Loading color system 100%
Loading layout engine 100%
Loading component library 100%
Initializing motion system 100%
Verifying accessibility compliance 100%
console-launch — system-info
$ design-system --info
───────────────────────────────────
System Design System v2.0
Edition Console Launch
Status ● Active
───────────────────────────────────
Modules:
✓ Typography — JetBrains Mono + IBM Plex Sans
✓ Color — 7 tokens, dark palette
✓ Layout — Layered panels, grid system
✓ Components — Tabs, keys, status bars
✓ Motion — Cursor blink, progress fill
───────────────────────────────────
$
1/* ── Console Launch: Color Tokens ── */
2
3:root {
4 --bg: #05070c;
5 --panel: #11131a;
6 --surface: #181c25;
7 --line: #22293a;
8 --text: #d7dbe6;
9 --muted: #8890a2;
10 --green: #1ece79;
11}
12
13/* ── Surface Layers ── */
14.workspace {
15 background: linear-gradient(180deg, #0c111a, #0a0f18);
16 border-radius: 14px;
17 border: 1px solid var(--line);
18}
Live Preview
--bg
--panel
--surface
--green

Typography

JetBrains Mono 400

IBM Plex Sans KR

Connected main UTF-8
CSS Ln 18, Col 1 Spaces: 2

AI Request Prompt

Design a landing page in Console Launch style — IDE-inspired layered dark panels with tab navigation and keycap UI elements.

COLOR TOKENS:
--bg: #05070c
--panel: #11131a
--surface: #181c25
--border: #22293a
--text: #d7dbe6
--text-muted: #8890a2
--accent-1: #1ece79
--workspace-bg-start: #0c111a
--workspace-bg-end: #0a0f18
--onboard-bg: #121722
--tab-bg: #1b202b
--tab-border: #252d3f
--key-bg: #0f131c
--key-border: #2e3649
Background: radial-gradient(circle at 50% -20%, #0f1522 0%, transparent 40%), #05070c.
No other colors.

TYPOGRAPHY:
Heading: "IBM Plex Sans" 700
Body: "IBM Plex Sans" 400
Code/Labels: "JetBrains Mono" 700 (brand), 600 (headings), 400 (keys/footer)
Scale: clamp(1.35rem, 3vw, 2rem) for headline, 1.05rem for h2, 0.88rem tabs, 0.84rem keys, 0.78rem footer
Body line-height: 1.75
Heading line-height: default

UI:
Workspace: border-radius 14px, border 1px solid #1b2231, bg linear-gradient(180deg, #0c111a, #0a0f18), min-height 64vh.
Onboard card: border-radius 14px, border 1px solid #21283a, bg #121722, padding clamp(20px, 3.6vw, 34px), max-width min(720px, 92vw).
Tab bar: border-bottom 1px solid #1a2131, tabs with border-radius 9px, border 1px solid #252d3f, bg #1b202b, active bg #242a37.
Quick section: border-radius 12px, border 1px solid #242c40, bg #171b26, padding 14px.
Keycap tags: border-radius 6px, border 1px solid #2e3649, bg #0f131c, padding 4px 8px, mono font 0.84rem.
Terminal icon: 42x42px, border-radius 8px, border 1px solid rgba(30,206,121,0.65), color var(--accent-1).
Cursor: width 10px, height 1.1em, border-radius 2px, bg var(--accent-1), blink animation 1.05s steps(1, end) infinite.
Buttons: pill shape (border-radius 999px), border 1px solid rgba(30,206,121,0.65), color #9ef2c6, bg transparent.
Prompt box: border-radius 12px, border 1px solid #243047, bg #0f141f.

LAYOUT:
Content max-width: min(1280px, 95vw)
Shell padding: 12px 0 36px
Workspace padding: 26px, display grid place-items center
Onboard width: min(720px, 92vw)
Keys: flex-wrap, gap 8px

MOTION:
Cursor blink only: opacity 1↔0, 1050ms steps(1, end) infinite.
No entrance animations — keep static and tool-like.
Respect prefers-reduced-motion.

RESPONSIVE:
720px: tab padding 6px 8px, font-size 0.8rem; panels and keys stack; content width 92vw
1024px: full layout with max-width 1280px, workspace with generous 26px padding

FORBIDDEN:
- Light or white backgrounds
- Multiple accent colors (green #1ece79 only)
- Heavy gradients or blur effects (flat layered surfaces only)
- Entrance animations (cursor blink is the sole animation)
- Horizontal scroll at any viewport
- Serif fonts

OUTPUT:
1) Color + typography tokens as CSS custom properties
2) Tab bar / Workspace / Onboard panel (headline + intro + quick guide + keys) / Footer structure
3) Semantic HTML + CSS with responsive support
mode: console-launch status: all systems operational

Go to Hub