DESIGN.md

name	gpu_stack
description	CuperOS project-window language for a visual-first symbolic GPU training-stack model.
colors	desktop-bg desktop-dot window-chrome window-body title-bar title-bar-end text-dark text-light accent-cyan accent-gold oklch(0.45 0.10 195) oklch(0.50 0.12 195) oklch(0.85 0.005 250) oklch(0.97 0.002 90) oklch(0.40 0.15 260) oklch(0.45 0.15 260) oklch(0.15 0.005 250) oklch(0.95 0.003 90) oklch(0.50 0.10 195) oklch(0.82 0.15 88)
typography	display body reading mono fontFamily fontSize fontWeight lineHeight letterSpacing Pixelify Sans, monospace clamp(48px, 8vw, 98px) 700 1.05 0 fontFamily fontSize fontWeight lineHeight letterSpacing IBM Plex Sans, system-ui, sans-serif 15px 500 1.6 0 fontFamily fontSize fontWeight lineHeight letterSpacing IBM Plex Sans, system-ui, sans-serif 15px 500 1.62 0 fontFamily fontSize fontWeight lineHeight letterSpacing IBM Plex Mono, Courier New, monospace 14px 500 1.55 0
rounded	none 0
spacing	xs sm md lg xl 4px 8px 14px 22px 28px
components	window title-bar retro-button backgroundColor textColor rounded padding {colors.window-chrome} {colors.text-dark} {rounded.none} 4px backgroundColor textColor rounded padding {colors.title-bar} {colors.text-light} {rounded.none} 5px 7px backgroundColor textColor rounded padding {colors.window-chrome} {colors.text-dark} {rounded.none} 5px 10px

Design System: gpu_stack

1. Overview

Creative North Star: "A project window inside CuperOS"

The idea is simple. Cuper's portfolio site is styled as a retro operating system called CuperOS. The GitHub Pages site for this project must look like one window inside that OS, not like a separate AI-generated landing page. That means a teal dotted desktop, zero-radius window chrome, indigo title bars, pixel icons, inset content panes, a taskbar, and project copy that sounds human, technical, and slightly amused.

The README stays a GitHub-rendered article. But any browser page for the project inherits the CuperOS design language. The page can be visual and interactive, as long as it behaves like an OS control surface and never like a full-bleed marketing hero.

Key Characteristics:

• Pixel OS chrome first, modern landing-page composition never.
• Pixelify Sans is for window chrome only. Reading copy and labels use IBM Plex Sans. Numbers, IDs, and commands use IBM Plex Mono.
• Border radius is zero. Depth comes from outset, inset, and 2px pixel shadows.
• The site teaches the stack by making files, windows, controls, and dependency panes inspectable.

2. Colors

The palette comes straight from the portfolio OS: teal desktop, gray chrome, indigo title bars, off-white document panes, and small utility accents. Nothing here is new.

Primary

• CuperOS Indigo (title-bar, title-bar-end): title bars, selected controls, primary project identity.

Secondary

• Desktop Teal (desktop-bg, desktop-dot): the surrounding operating-system surface.
• Attention Gold (accent-gold): warnings, active output rows, small status emphasis.

Neutral

• Window Chrome (window-chrome): OS frames, controls, and button faces.
• Document Body (window-body): readable panes and article surfaces.
• Console Ink (text-dark, text-light): body text and title-bar text.

Named Rules

The No New Brand Rule. Do not invent a separate gpu_stack palette. The project page is a child window inside CuperOS, so it uses the parent's colors.

The Small Accent Rule. Gold, green, and red are status lights, not brand washes. Use them as signals, never as backgrounds.

3. Typography

The Font Rule (what ships in docs/styles/00-foundation.css):

• Pixelify Sans (pixel) is for window chrome only: title bars, the wordmark and desktop logo, menus and the nav bar, the taskbar and Start button, window buttons, and very large display titles on the index page. Nothing a reader has to read closely is set in it.
• IBM Plex Sans carries every paragraph, list, label, button, status line, and heading inside a window.
• IBM Plex Mono carries numbers, IDs, hashes, tables, intervals, code, and console output. The taskbar clock uses it too.

Why: at small sizes the pixel face misreads. C looks like O, and E looks like a euro sign, so "E001-SC1" rendered as "€001-S01". This replaces the earlier all-pixel "Font Law", which contradicted the typography table above and made data hard to read.

Size floor: prose is 15px or more. Labels, tags, and units are 13px or more. Table cells and values are 14px. Text inside SVG charts is 13px in chart units, and charts keep at least about 85% of their design width (they scroll sideways in their frame instead of shrinking).

Headlines wrap between words only. Section titles in narrow columns are sized from the column width so the longest word fits.

Hierarchy

• Display (700, clamp(48px, 8vw, 98px), 1.05): page title and very large OS labels only.
• Headline (700, clamp(30px, 4vw, 50px), 1.05): window-section titles.
• Title (700, 20px, 1.05): pane titles and dialog headings.
• Body (500, 15px, 1.62): explanatory prose, capped near 65-75 characters when possible.
• Label (700, 13px, 1.2): status labels, tabs, small captions. Window title text is the one pixel exception.

Named Rules

The Pixel Display Rule. Pixelify Sans carries chrome only: title bars, wordmark, menus, taskbar, and very large display titles. Everything read closely is Plex Sans, and data values, commands, and identifiers are Plex Mono.

The No Negative Tracking Rule. Letter spacing stays at 0.

4. Elevation

Depth here is not blur, glass, or soft shadow. It is the physical model of a retro OS: 2px outset for buttons and frames, 2px inset for content wells, and a crisp 2px 2px 0 shadow behind windows. A surface looks raised or sunken because its border says so.

Shadow Vocabulary

• Pixel Window Shadow (2px 2px 0 oklch(0.08 0.004 250)): top-level windows only.
• Inset Pane (border: 2px inset var(--window-chrome)): documents, consoles, diagrams, stats, and visual wells.
• Outset Control (border: 2px outset var(--button-face)): buttons, tabs, and fake OS controls.

Named Rules

The Chrome Is Structure Rule. If an element needs hierarchy, give it a real OS affordance: a title bar, an inset pane, a status light, or a taskbar entry. Do not fake hierarchy with decorative cards.

5. Components

Windows

• Shape: square corners (0 radius).
• Frame: 2px outset gray chrome with a crisp 2px pixel shadow.
• Title bar: indigo gradient, Pixelify Sans, icon plus filename.
• Content: off-white document body inset into the frame.

Buttons

• Shape: square corners (0 radius), minimum 36px high.
• Primary: selected state uses the indigo title bar color with light text.
• Hover / Focus: hover slightly lightens chrome; focus uses a gold outline.
• Active: border switches to inset.

Navigation

• Style: file-tree buttons in a left OS pane on desktop, stacked above content on mobile.
• Labels: concrete file/app names such as CLI.exe, layers.sys, README.md.

Diagrams and Visual Panes

• Style: diagrams live inside inset document wells, never as a full-bleed hero background.
• Caption: one short IBM Plex Sans sentence under the visual.

Console

• Style: dark terminal inset with green mono text.
• Purpose: runnable commands and output-like examples only.

6. Do's and Don'ts

Do:

• Do preserve the CuperOS desktop metaphor from the portfolio.
• Do use Pixelify Sans for OS chrome only, IBM Plex Sans for readable explanation, and IBM Plex Mono for numbers and IDs.
• Do show the stack before explaining the stack.
• Do expose root inputs as visible modeling debt.
• Do make interactive controls look like OS controls, not SaaS pills.
• Do keep diagrams inspectable inside panes with real alt text.

Don't:

• Don't make the GitHub.io page look like a standalone SaaS landing page.
• Don't use full-bleed datacenter hero imagery as the primary identity.
• Don't use feature-card grids, hero metrics, glassmorphism, gradient text, or purple-blue AI gradients.
• Don't use rounded cards inside rounded cards.
• Don't use em dashes in page copy.
• Don't introduce a new design system when the portfolio already has one.