# KNOCKSSTUDiOS · Quantum 44 — Design System

> "A high-fidelity cinematic production engine with a 44-bit neural depth
> pipeline, featuring immersive 360° digital interfaces and studio-grade
> engineering."

This is the visual blueprint for **KNOCKSSTUDiOS Hollywood MOTiON Pictures —
Soul (Quantum 44)**. It exists to keep every surface — Intro (the Melt), HUD
(the Dashboard), Outro (the Shatter) — in lockstep so the studio reads as one
continuous, professional cinematic instrument.

## Sources

This system was built **from a written brief** — no codebase, Figma file, or
slide template was attached. Therefore every asset here is original. If a real
codebase or Figma exists, attach it and the system will be re-derived from the
canonical source.

## Index

| File | Purpose |
| --- | --- |
| `colors_and_type.css` | Single source of truth: tokens, type, **o-ring SSS** material, motion. |
| `assets/logo-mark.svg` | Primary mark — the Q44 o-ring viewport. |
| `assets/wordmark.svg` | Full lockup — KNOCKSSTUDiOS / SOUL · QUANTUM 44. |
| `preview/*.html` | Foundation cards (auto-rendered in Design System tab). |
| `ui_kits/soul-engine/` | Studio console UI kit (interactive). |
| `SKILL.md` | Cross-compatible Agent Skill manifest. |

---

## Content Fundamentals

The voice is **declarative · cinematic · technical**. We name systems like a
studio names cameras: capitalised proper nouns. We never explain ourselves.

- **Tone:** confident, precise, slightly austere. The product behaves like a
  finely-machined instrument; the words behave the same way.
- **Person:** third-person system voice. The product *renders*, *holds*,
  *passes*. Never "we" / rarely "you" except in direct CTAs.
- **Casing:** display headlines and verbs are **UPPERCASE** with wide
  tracking. Body is sentence case. Mono is uppercase for IDs/state.
- **Punctuation:** em-dashes for cinematic pauses. Middle-dot `·` as the house
  separator (`reel · 0044 · soul`). Avoid exclamation points entirely.
- **Numbers:** four-zero-padded reel IDs (`reel_0044`). Render frames are
  fractional (`128/256`). Latency in `ms`. Depth always in `b` (bits).
- **Emoji:** **never**. Use Unicode glyphs sparingly — `▸ ● ◎ ⊙ ▣ ◇ ◫ ⌘`.

### Voice — examples

| ✓ Do | ✗ Don't |
| --- | --- |
| "A 44-bit neural depth pipeline. Every frame, soul-graded." | "We're a fun creative studio that loves making movies! 🎬" |
| "Render Reel ▸ Soul Pass." | "Click here to start rendering your project!" |
| "Hold." (button) | "Pause for now" |
| "REC ● Q44 · 0044" | "Recording in progress..." |

---

## Visual Foundations

The vibe is **Quantum Cosmic** — heavy, cinematic, professional. The whole
system is built around one signature material: the **O-Ring SSS**.

### Palette

We avoid generic primary colors. The system runs on three:

- **Astro Noir** `#1B1B1E` — primary surface; everything is on noir.
- **Quantum Teal** `#00B4D8` — engineering / signal / live-state accent.
- **Plasma Orchid** `#7B2CBF` — soul / signature / marquee accent.

Plus a 6-step Astro Noir scale (`#08080A → #3F3F48`) and 5-step accent ladders.
Status colors (`Sync / Drift / Fault`) are used **sparingly** — you should be
able to scan a room of screens and see at most one warm color.

### Type

- **Display:** Orbitron — 700/800/900, uppercase, tracking 0.04–0.18em. Used
  for headlines, wordmarks, button caps.
- **Body:** Space Grotesk — 400/500, 14–20px, line-height 1.5–1.6, sentence
  case.
- **Mono:** JetBrains Mono — 11–13px, used for engineering, status, code, IDs,
  technical metadata. Often uppercase with 0.1em tracking.

> ⚠ **Font substitution flag:** No font files were provided in the brief, so
> the system loads Orbitron / Space Grotesk / JetBrains Mono from Google Fonts
> as the closest cinematic / engineering match. If the studio has commissioned
> custom faces (e.g. a custom Q44 cut), drop the `.ttf`/`.woff2` into `fonts/`
> and update the `@font-face` rules in `colors_and_type.css`.

### Spacing

4-px base. Tokens `s-1 → s-10` (`4px → 128px`). Tight UI (12–16); cinematic
breathing room (48–96).

### Radii

`6 / 8 / 14 / 20 / 999` (chip / tile / card-sm / card / pill). Pill is the
o-ring radius — every signature interactive element is full-pill.

### Backgrounds

- Primary background is always **Astro Noir** with a faint magnetic-grid
  pattern (1px lines @ 32px) and a subtle radial caustic (teal bottom-left,
  orchid top-right) at low opacity.
- A 25% overlay of SVG turbulence noise simulates film grain.
- Optional 2-px scanline striping at 18% opacity for cinematic surfaces.
- **No flat solid backgrounds** anywhere. The brand never feels like a web
  page; it always feels like a screen inside a screen.

### Borders & Hairlines

- Default hairline: `rgba(255,255,255,0.06)`.
- Strong hairline: `rgba(255,255,255,0.12)`.
- Active rail: 2-px Quantum Teal with `0 0 10px` glow (used for selected
  states in nav and tabs).

### Shadow / Elevation system

Three-tier — every elevation is a *combination* of inner highlight, inner
shadow, drop shadow, and 1-px rim. This is how the SSS material reads:

- `--elev-1` — surface / cards.
- `--elev-2` — panel / hover.
- `--elev-3` — modal / floating.

Plus two glow utilities: `--glow-teal`, `--glow-orchid` for accent halos.

### The O-Ring SSS Material

The signature material. Every interactive element with importance is rendered
as a glossy o-ring with **subsurface scattering** — a soft caustic glow under
the element in the accent's color. Implemented in CSS via:

1. Hot top highlight (linear gradient).
2. Under-belly bleed (radial gradient, accent-colored).
3. Mid-tone body (linear gradient, top → bot of the colorway).
4. Inner rim highlight + inner deep-shadow + 1-px outer rim.
5. **`::after` caustic** — a blurred radial glow positioned just beneath the
   ring, in the accent color. This is the SSS read.

Combine `.q-oring` with one of `--noir / --teal / --orchid / --ghost`. Use
`.q-oring--card` for rectangular cards, `.q-oring--flat` to suppress the
caustic on surfaces.

### Animation

- Default UI: `--ease-quantum` (220ms).
- Cinematic transitions: `--ease-cine` (720ms) — slate fades, scene cuts.
- Heavy entries: `--ease-thrust` (420ms) — render starts, modal lifts.
- **No bounces.** The system reads as machined; bounces feel toy-like.
- **Linear is forbidden** except for indeterminate spinners.

### Hover / Press states

- **Hover:** `translateY(-1px)` + `brightness(1.08) saturate(1.05)` — the
  o-ring lifts and gets *wetter*, not more saturated.
- **Press:** `translateY(1px) scale(0.99)` + `brightness(0.94)` — the ring
  compresses into the surface.
- **Focus:** 3-px Quantum Teal glow ring (`0 0 0 3px rgba(0,180,216,0.18)`).

### Transparency / Blur

Used **sparingly**. Only valid use is the SSS caustic (a blurred glow under an
element). No frosted-glass panels — the material vocabulary is solid,
machined, optical. If we need to dim a layer, we drop opacity on a noir
overlay; we don't blur the underlying scene.

### Imagery vibe

Cool, deep, slightly desaturated. Always with grain (≥1% film texture) and
ideally with the studio's corner-tick + REC overlay treatment. Avoid:
oversaturated stock-photo aesthetics, bright daylight, warm sunsets.

### Cards

Cards are rectangular noir surfaces with the same SSS treatment: top inner
highlight, bottom inner shadow, 1-px hairline rim, and an optional caustic
underglow when the card is "active" (in `accent` or `orchid` mode). Radius
20px. Padding 18–22px.

### Layout rules

- Top bar is fixed and contains an eyebrow line above the page title — the
  eyebrow doubles as a path crumb (`Q44 / SOUL.engine`).
- Sidebar is fixed 260px on desktop. Section headings are mono, 0.32em
  tracking.
- Console layouts are 1.6fr / 1fr — viewport gets the lion's share.
- **Dashboards never scroll horizontally.** Vertical scroll only inside body
  panels.

---

## Iconography

The system ships **no full icon library**. Two valid approaches:

1. **Unicode glyphs (preferred for status/IDs):** `◎ ⊙ ▣ ◇ ◫ ▸ ● ⌘ ✦`. These
   are used inline in the Soul Engine console for menu/list affordances. They
   render with `JetBrains Mono` and inherit the line color.

2. **Lucide via CDN (for general UI icons):** Lucide's stroke style (1.5px,
   round caps, geometric) matches the Q44 aesthetic — clean, technical, no
   ornament. Load via `https://cdn.jsdelivr.net/npm/lucide-static@latest/font/lucide.css`
   when icons are needed beyond status glyphs.

> ⚠ **Iconography substitution flag:** Lucide is a substitute, not a brand
> asset. If KNOCKSSTUDiOS has a commissioned icon set (`.svg` sprite or icon
> font), drop it into `assets/icons/` and document usage here.

**Emoji are never used.** Not in product, marketing, or speaker notes.

**Logo:**

- `assets/logo-mark.svg` — the Q44 o-ring viewport with embedded "44" /
  "QUANTUM" engraving. Min size 32px. Always on noir. 1× ring of clearspace.
- `assets/wordmark.svg` — the full lockup with eyebrow rule + accent bar.

---

## Caveats

- **No real source materials.** Built entirely from the brief. Pixel-fidelity
  cannot be claimed against a non-existent reference.
- **Fonts are substitutions** (Orbitron / Space Grotesk / JetBrains Mono).
- **No icon library** is bundled — Unicode + optional Lucide CDN.
- **One UI kit, one screen.** The brief implied a single product (a console);
  expanding to login / archive / settings is a follow-up.

If any of these are wrong (real assets exist, real fonts exist, additional
products exist), please attach them and the system will be re-derived from
the canonical source.