name: nyx-design
version: alpha
description: >
  Studio Nyx is a near-black CGI/3D render lab portfolio built on a single
  technical-instrument surface (#060608). Three voltages — cyan #2EE6E6, violet
  #7B5BFF, and magenta #FF3D9A — wire a blueprint world of crosshairs, ruler
  ticks, faint cyan grids and dashed center-lines around a CSS isometric
  photo-stack (rotateX55/rotateZ-45) that floats and parallaxes to the cursor.
  The type story is Space Grotesk display + Hanken Grotesk body + Space Mono for
  the pervasive monospace telemetry labels and a live terminal panel. Geometry
  is sharp and rectilinear: square glass panels (rgba white 5% + 20px blur),
  hairline borders, no rounded corners except small dots and a custom magenta
  cursor glow.
colors:
  # Surface
  surface: '#060608'           # page background (#nyx-root)
  black-overlay: 'rgba(0,0,0,0.6)' # terminal section bg (bg-black/60)
  # Brand voltages
  cyan: '#2EE6E6'              # primary voltage: grids, ticks, crosshairs, mono accents, terminal text, cmd buttons
  violet: '#7B5BFF'            # secondary voltage: Y glyph, step indices [01-04], selection bg, glow core
  magenta: '#FF3D9A'           # accent voltage: cursor dot/glow, percentages, ↗ tags, center reticle
  # Text
  text: '#e8e8ee'             # base body text on #nyx-root
  text-white: '#ffffff'        # headings / strong text
  text-muted: 'rgba(255,255,255,0.4)'  # mono labels, secondary captions (white/40)
  text-faint: 'rgba(255,255,255,0.3)'  # footer output line (white/30)
  text-body-muted: 'rgba(255,255,255,0.5)' # body paragraph (white/50)
  # Hairlines
  hairline: 'rgba(255,255,255,0.1)'    # row dividers inside panels (white/10)
  glass-border: 'rgba(255,255,255,0.12)' # glass-panel border
  cyan-border: 'rgba(46,230,230,0.2)'  # terminal top border (#2EE6E6/20)
  # Gradient / glow
  glow-core: 'rgba(123,91,255,0.22)'   # hero radial glow center (violet)
  cursor-glow: 'rgba(255,61,154,0.22)' # magenta cursor radial glow
  grid-line: 'rgba(46,230,230,0.07)'   # faint grid lattice
typography:
  display:
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: clamp # 6xl glyphs / text-4xl headings / text-3xl hero / text-2xl work titles
    fontWeight: 600
    lineHeight: 1.1
  hero:
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: 30px            # text-3xl
    fontWeight: 500
    lineHeight: 1.25
  body:
    fontFamily: "'Hanken Grotesk', sans-serif"
    fontSize: 14px            # text-sm
    fontWeight: 400
    lineHeight: 1.6
  mono:
    fontFamily: "'Space Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 2px        # tracking-[0.18em]–[0.2em]
    textTransform: uppercase
rounded:                       # almost everything is square; only dots/cursor are round
  none: 0px
  full: 9999px                 # status dots, cursor, center reticle
spacing:                       # 4px base unit (Tailwind scale)
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 112px                   # py-28 section rhythm
components:
  glass-panel:
    backgroundColor: 'rgba(255,255,255,0.05)'
    borderColor: '{colors.glass-border}'
    textColor: '{colors.text-white}'
    typography: '{typography.mono}'
    rounded: '{rounded.none}'
    padding: '32px'           # p-8
    note: 'backdrop-filter blur(20px); inset 0 1px 0 rgba(255,255,255,0.22) top highlight'
  cmd-btn:
    backgroundColor: 'transparent'  # hover rgba(46,230,230,0.12)
    borderColor: 'rgba(46,230,230,0.4)'
    textColor: '{colors.cyan}'
    typography: '{typography.mono}'
    rounded: '{rounded.none}'
    padding: '4px 12px'       # px-3 py-1
  step-row:
    textColor: '{colors.text-white}'
    typography: '{typography.mono}'
    note: 'index [0n] violet, percent magenta, border-b white/10'
  iso-layer:
    borderColor: 'rgba(123,91,255,0.5)'  # varies per layer (violet/cyan/white)
    rounded: '{rounded.none}'
    note: 'absolute inset-0 image layers translated on Z; mix-blend-screen on lower layers'
  terminal:
    backgroundColor: '{colors.black-overlay}'
    borderColor: '{colors.cyan-border}'
    textColor: '{colors.cyan}'
    typography: '{typography.mono}'
    rounded: '{rounded.none}'
    padding: '32px'           # px-8 py-8
  crosshair-corner:
    color: 'rgba(46,230,230,0.7)'  # #2EE6E6/70 L-shaped ticks at viewport corners
motion:
  cursor-trail: 'Magenta radial glow + dot lerp-follow pointer at 0.12 ease (requestAnimationFrame)'
  iso-tilt: 'animejs createAnimatable rotateX/rotateY ±24° toward cursor, ease out(3)'
  iso-float: 'Each iso layer animates translateZ +18px, 2600+i*700ms, alternate loop, inOutSine'
  panel-blur-in: 'GSAP .gpanel from autoAlpha 0 + blur(14px) + xPercent 12, 0.8s, stagger 0.18, power2.out on scroll (top 80%)'
  cli-typewriter: 'animejs splitText chars opacity 0->1, stagger 14ms linear'
  cli-cursor: 'Blink opacity 1<->0, 550ms alternate loop, steps(1)'
  scramble-prompt: 'animejs scrambleText reveals ./show --reel surreal_renders after 1400ms'
icons:
  library: 'Tabler icons-webfont (ti) + game-icons (lorc/delapouite SVG)'
  style: 'outline / line'
  sizes: { sm: 18px, md: 22px }
  color: '{colors.cyan}'      # ti icons cyan; game-icons SVGs recolored via CSS filter to cyan/violet

Studio Nyx

nyx-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

Studio Nyx is a CGI & 3D render-lab portfolio dressed as a technical instrument. The whole page sits on a single near-black surface #060608 with base text #e8e8ee, and is overlaid with blueprint chrome: L-shaped cyan corner crosshairs, a top row of ruler tick marks, a dashed cyan vertical/horizontal center-cross, and faint 46px cyan grid lattices. The signature move is a CSS-3D isometric photo-stack — three render images on an iso-stack plane set to rotateX(55deg) rotateZ(-45deg), each layer pushed to a different Z depth, ambient-floating and tilting toward the cursor through animejs. Three voltages do all the work: cyan #2EE6E6 for the grid/telemetry world, violet #7B5BFF for glyphs, step indices and the central glow, and magenta #FF3D9A for the custom cursor, percentages and ↗ tags. Type is a clean trio — Space Grotesk for display, Hanken Grotesk for body, and Space Mono everywhere telemetry, coordinates and a live terminal demand a monospace voice. Geometry is hard and square: glass panels (rgba(255,255,255,0.05) + blur(20px)) with hairline borders and a top inset highlight, zero rounded corners except the few round dots and the magenta cursor.

Colors

Surface. The page is surface #060608, set on #nyx-root with text #e8e8ee. The terminal section drops to black-overlay rgba(0,0,0,0.6) with a backdrop blur.

Brand voltages. cyan #2EE6E6 is the dominant signal color: grid lines, ruler ticks, corner crosshairs, dashed center-lines, mono section labels (// PROCESS_STACK), terminal log lines, and the cmd-btn outline. violet #7B5BFF carries the Y hero glyph, the [01]–[04] step indices, the radial glow core, and the text selection (selection:bg-[#7B5BFF]/40). magenta #FF3D9A is the rarest, used for emphasis: the custom cursor dot+glow, the percentage readouts, the ↗ work tags, the [ PIPELINE ] label, and the center reticle ring.

Text. Headings use text-white #ffffff; body copy uses text-body-muted rgba(255,255,255,0.5); mono captions use text-muted rgba(255,255,255,0.4); the footer output line is text-faint rgba(255,255,255,0.3).

Hairlines. Panel row dividers are hairline rgba(255,255,255,0.1); glass panels are bordered glass-border rgba(255,255,255,0.12); the terminal top edge is cyan-border rgba(46,230,230,0.2).

Gradient / glow. A 640px hero radial glow centers on glow-core rgba(123,91,255,0.22) fading through cyan rgba(46,230,230,0.05) to transparent. The cursor adds a cursor-glow rgba(255,61,154,0.22) radial in screen blend. Grid lattices are drawn with grid-line rgba(46,230,230,0.07).

Typography

Loaded from Google Fonts: Space Grotesk (400–700), Hanken Grotesk (300–600), Space Mono (400/700). All are open-source so no substitution is needed. Space Grotesk is the display/headline face, Hanken Grotesk the body face, and Space Mono the monospace voice for coordinates, telemetry labels, percentages, project metadata and the terminal.

Token	Size	Weight	Line-height	Tracking	Usage
display (glyphs)	6xl (60px)	700	1 (none)	—	N / Y / X corner glyphs
display (headings)	4xl (36px)	600	tight	—	"From greybox to beauty render."
hero	3xl (30px)	500	tight	—	Hero statement headline
display (work)	2xl (24px)	500	—	—	Project titles (AURELIA No.7)
body	14px (text-sm)	400	1.6	wide	Body paragraphs, step descriptions
mono	10–11px	400	relaxed	0.18–0.2em	Coordinates, labels, terminal, metadata (uppercase)

Layout

Base unit is 4px (Tailwind scale); section rhythm runs to py-28 (112px). The page is three full-bleed sections. Section 1 is a min-h-screen hero: an absolutely-composed instrument frame (corner crosshairs, ruler row, center cross + reticle, axis glyph column on the right, mono coordinate block top-left) wrapping a centered 460px isometric 3D stack with a 640px radial glow behind it; the hero statement sits bottom-left. Section 2 is a max-w-6xl grid-cols-12 pipeline: a 4-column intro paragraph and an 8-column pair of overlapping glass panels (negative left margins -ml-16 / -ml-4) showing the process stack and selected work, with a faint half-width grid and a 520px render image bleeding off the right. Section 3 is a full-width terminal panel (max-w-5xl) on a translucent black bar. Whitespace is generous and the composition leans on absolute/3D positioning rather than flow.

Elevation & Depth

Depth is built three ways. (1) Glass — glass-panel uses rgba(255,255,255,0.05) + backdrop-filter:blur(20px), a rgba(255,255,255,0.12) border, and an inset 0 1px 0 rgba(255,255,255,0.22) top highlight. (2) Glow — radial gradients (hero violet/cyan glow, magenta cursor glow in screen blend; iso-layer box-shadow:0 0 40px rgba(123,91,255,0.25) inset). (3) Real 3D — the isometric stack uses transform-style:preserve-3d with perspective:1400px and per-layer translateZ (−90 / 20 / 130 px), so layers genuinely stack in space and float. There are no conventional drop shadows.

Shapes

Hard and rectilinear. border-radius is effectively 0 everywhere — glass panels, image layers, and buttons are all square, matching the blueprint/render aesthetic. The only round elements are rounded-full dots: the 8px magenta cursor dot, the 12px center reticle ring, the three 2.5×2.5 terminal window dots, and the 340px cursor glow circle.

Components

• glass-panel — rgba(255,255,255,0.05) fill, blur(20px), rgba(255,255,255,0.12) border, top inset highlight, p-8, square. Houses the process stack and selected-work list.
• cmd-btn — transparent with rgba(46,230,230,0.4) border, cyan text, mono 11px, px-3 py-1, square; hover fills rgba(46,230,230,0.12). Labels: ./reel, ./contact, ./filter --type=cgi.
• step-row — mono row with violet [0n] index, white title, Hanken body caption, magenta percentage (12%→100%), border-b white/10 divider.
• work-row — display 2xl title + mono metadata caption + magenta ↗ CGI tag; border-b white/10.
• iso-layer — full-bleed image, border (violet/cyan/white per layer), square, blended mix-blend-screen on the two lower layers.
• terminal — bg-black/60 + blur, border-t #2EE6E6/20, mono log lines in cyan/white/violet/magenta, blinking cli-cursor cyan caret, window dots.
• crosshair-corner / ruler ticks — #2EE6E6/70 L-shaped marks at the four viewport corners and a row of cyan ticks along the top.

Motion

Heavily animated. The custom cursor is a magenta dot that tracks the pointer instantly plus a glow that lerp-follows at 0.12 ease via rAF. The iso stack tilts ±24° toward the cursor (animejs createAnimatable, out(3)), and each layer ambient-floats its translateZ by 18px on a 2600+i*700ms alternating loop (inOutSine). Glass panels blur-in on scroll (GSAP: autoAlpha 0, blur(14px), xPercent 12, 0.8s, stagger 0.18, power2.out, trigger top 80%). The terminal types its log via animejs splitText char stagger (14ms), blinks the caret (550ms, steps(1)), and scramble-reveals ./show --reel surreal_renders after 1.4s. GSAP ScrollTrigger is registered.

Iconography

Two icon sources. Tabler icons-webfont (ti ti-terminal, ti ti-code) render inline as line icons at ~text-base, colored cyan #2EE6E6. game-icons SVGs (lorc/cut-diamond, delapouite/nested-hexagons) are loaded from jsDelivr at 18–22px and recolored via CSS filter (hue-rotate) to cyan or violet. Icons are sparse and technical — used as pipeline/process markers, not decoration. Plain glyphs (↗) double as inline tags.

Do's and Don'ts

• Do keep the surface near-black #060608 and let the three voltages (cyan/violet/magenta) carry all color; reserve magenta for accents only.
• Do keep corners square — the blueprint look depends on zero radius outside dots.
• Do preserve the instrument chrome (crosshairs, ticks, grids, coordinates, mono labels) and the isometric 3D stack — they are the identity.
• Do use Space Mono uppercase for any telemetry/coordinate/label text.
• Don't introduce rounded cards, drop shadows, or warm/pastel colors.
• Don't flatten the iso stack to 2D or remove the cursor/tilt interactions.
• Don't mix in a fourth hue or use mono for long-form body copy (that's Hanken Grotesk's job).

Known Gaps

• Display "size" is clamp in the spec only as a label; the HTML uses discrete Tailwind sizes (6xl/4xl/3xl/2xl) noted in the table — no actual clamp() is in the markup.
• letterSpacing for mono ranges 0.18em–0.2em across instances; recorded as a representative 2px.
• Color roles for text shades (white/30/40/50) are inferred from Tailwind opacity utilities; exact rgba computed from #ffffff.
• Iso-layer border color in the token block lists the top layer's violet value; layers actually vary (violet / cyan/30 / white/30).