design system v2 — prototypes
these are the patterns from the cloud-del-norte / sumerian-hosts research synthesis. evaluate each in both modes before deciding which to lift site-wide. six prototypes — chromatic shadows, gradient surfaces, spring motion, conic edges, perspective tilt, inset buttons.
chromatic shadow card
side-by-side: current black-channel shadow vs 3-layer violet shadow — does the color channel read as depth or just tint?
--shadow-mdblack-channel shadow — lifts but reads cool/flat against nebula backgrounds
learn more →warm violet channels: ambient diffuse + mid shadow + ambient base. reads as depth rather than silhouette
learn more →see notes
rgba(94,65,162,0.06) ambient diffuse + rgba(94,65,162,0.10) mid shadow + rgba(0,0,0,0.04) ambient base. dark mode bumps all opacity values — rgba(129,105,197,...) at 0.10 / 0.18 / 0.20. the demo well bg must differ from the card surface for the shadow to read — if they match, the shadow disappears.multi-layer gradient surface
color-mix tints the card background with brand-purple at 8% — perceived surface variation without new token declarations
135deg diagonal — secondary bg to purple-tinted midpoint and back. the tint is subtle in light mode, slightly stronger in dark
learn more →see notes
color-mix(in srgb, var(--color-background-secondary) 92%, var(--brand-purple) 8%) at the 50% stop. dark mode: same pattern with var(--brand-lavender) at 10%. no new token declarations — only existing tokens composed differently. pair with chromatic shadow for maximum surface read.spring-hover lift
cubic-bezier(0.22, 1, 0.36, 1) gives physical overshoot on hover — shadow expands as the card lifts
hover this card — chromatic shadow expands as the card rises. both light + dark get tuned opacity values
learn more →see notes
transform: translateY(-3px) on hover. shadow grows from mid-level to 0 16px 40px rgba(94,65,162,0.16). guarded by @media (prefers-reduced-motion: no-preference) — no motion fires for reduced-motion users. dark mode uses the 129,105,197 violet channel at higher opacity to maintain legibility.conic-gradient accent edge
3px ::before pseudo on the top edge — purple → orange → lavender → purple loop using existing brand tokens only
most portable cloud-del-norte signature adapted to nebula palette. the gradient loops — no hard stops, no new color values
learn more →see notes
::before pseudo, height: 3px, position: absolute; top: 0. conic-gradient from 90deg — var(--brand-purple) → var(--brand-orange) → var(--brand-lavender) → var(--brand-purple). card must have overflow: hidden and matching border-radius on the pseudo. no light/dark override needed — the gradient is always visible regardless of mode.perspective tilt
rotateX(2deg) at perspective(1000px) on hover — lightest-touch 3D feel, no babylon.js dependency
hover to see the tilt. works in every browser. combines well with chromatic shadow expansion
learn more →see notes
transform: perspective(1000px) rotateX(0deg) on rest state — declares the perspective context. hover applies rotateX(2deg). 2deg is the minimum perceptible tilt; more reads as novelty rather than depth. guarded by prefers-reduced-motion. shadow stays chromatic on hover — same 3-layer pattern as prototype a, lighter opacity values.inset highlight button
inset top-edge shadow catches the light-source reading — both primary (solid purple) and secondary (ghost with border) variants
see notes
inset 0 1px 0 rgba(255,255,255,0.15) catches light from above. dark mode drops inset to rgba(255,255,255,0.04) — barely perceptible, shadow below carries the depth read. secondary variant: ghost background with rgba(94,65,162,0.25) border + high inset highlight (rgba(255,255,255,0.60) in light mode). hover shifts primary bg from --brand-purple to --brand-lavender. focus-visible ring via var(--focus-ring) with 3px offset.switch the theme toggle in the nav to compare both modes — the demo-well backgrounds shift between modes, so the contrast read changes for each prototype.