Slash

Pure-dark monochrome canvas — #000000 primary background paired with #1c1d22 panel and #ffffff (#e2e3e9 secondary) foreground doing 95%+ of the surface work. Mid-tone descender #9194a1 → #777a88 → #5e616e handles captions, dividers, de-emphasized labels. Accent palette is a single bronze family — #cc9166 (warm copper) and #aa9b8f (muted khaki) — appearing almost exclusively inside multi-stop gradients and ornamental flourishes, never as solid fills. The CSS variable vocabulary is shadcn/ui (--background HSL 240 10% 3.9%, --page-background HSL 240 20% 2%, --foreground HSL 0 0% 98%, --primary HSL 217 91% 60%, --secondary --muted --border --ring) but the visual register is luxury-financial rather than dev-tool.

• Near-white #ffffff text handling ~2079 measured surface occurrences — dominant reading layer
• Background pair #000000 (page) + #1c1d22 (panel), maintaining 16:1+ contrast with #ffffff
• Mid-tone descender #9194a1 / #777a88 / #5e616e for captions, metadata, dividers, de-emphasized labels
• Bronze accent #cc9166 + muted khaki #aa9b8f used only inside gradients and ornamental layers — surface area < 1%
• Border + divider stripe #1c1d22 doubles as panel surface and hairline separator on the same value

linear-gradient(201deg, rgb(18, 19, 23) 13.96%, rgb(11, 12, 14)) — dominant ambient page tilt
linear-gradient(103deg, rgb(174, 147, 87), rgb(255, 240, 204) 40%, rgb(174, 147, 87)) — bronze→cream→bronze ornamental sweep
linear-gradient(rgba(205, 137, 57, 0) 23.5%, rgb(205, 137, 57)) — copper fade-up edge highlight
linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)) — frosted glass card overlay
linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0)) — light beam glance highlight

• Primary family: Inter (Next.js next/font/google self-hosted, 3 woff2 variants preloaded). No display partner, no serif, no italic — Inter does the entire job.
• Weight ladder: 300 (display + airy headings) / 400 (reading body) / 500 (UI labels + emphasis) / 600 (bold + small metadata caps). Do not substitute 700 — the 600 stops the ladder.
• Size scale: 13 / 14 / 15 / 16 / 18 / 20 / 24 px on body and UI; display headings extend up the same scale. No magic numbers between steps.
• Line-height pattern: tight on small caps (lh 13-14 = font-size, no leading), 1.375x on body 14-16px (lh 19.25-22), 1.375x on display 18-24px (lh 24.75-33). Constant ratio, not unitless.
• No italic for emphasis — weight shift carries it. Italic reserved for quoted editorial content if required.
• Numerics inherit Inter default — no `tabular-nums` override in the captured surface; tables stay slim, columns stay short.

• Dual-base rhythm — both 2px and 6px appear with high frequency (267 and 269 measured occurrences respectively). 2px is the hairline border + divider unit; 6px is the dominant tight gap.
• Standard scale beyond hairline: 6 / 8 / 10 / 12 / 14 / 16 / 18 / 20 / 22 / 24 px. Never invent values between steps.
• Container max-width set: 320 / 412 / 512 / 544 / 576 / 704 px — narrower than typical SaaS landings. Treat each module as an editorial column.
• Section vertical rhythm: pick from the same 16-24 px scale × multipliers, never freehand. The narrow container demands the rhythm.
• Card padding: 16-24 px on desktop, 12-16 px on mobile. Hairline border at 1-2 px before reaching for shadow.

• Primary elevation is the panel value-shift — #000000 → #1c1d22 already separates surface from ground without shadow.
• When shadow is needed, default to `box-shadow: rgba(0, 0, 0, 0.3) 0 4px 30px 0` — soft atmospheric bloom, never a hard halo.
• Layering depth: panel #1c1d22 → divider hairline #1c1d22 (same value, different role) → mid-tone #5e616e for floating overlays.
• Frosted glass overlay technique: `linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02))` over panel for hover/active card states.

• --radius CSS variable defaults to 0.5rem (8px) — primary radius for cards, buttons, inputs.
• Smaller controls (badges, hairline chips) step down to 4-6 px to keep tightness.
• Pill radii avoided — Slash never uses fully rounded buttons; corners stay editorial.
• Icons are monoline Lucide-style (shadcn default), never filled glyphs. Stroke 1.5-2 px.

• Primary CTA button

  background

  #ffffff

  text

  #000000

  border

  1px solid transparent

  radius

  8px (var(--radius))

  padding

  12px 20px

  font

  Inter 500 14px / 19.25px

  transition

  0.15s cubic-bezier(0.4, 0, 0.2, 1) on color, background-color, border-color

  Tailwind

  Copy

  inline-flex items-center justify-center rounded-lg bg-white px-5 py-3 text-sm font-medium leading-tight text-black transition-colors duration-150 ease-[cubic-bezier(0.4,0,0.2,1)] hover:bg-white/90

• Secondary ghost button

  background

  transparent

  text

  #ffffff

  border

  1px solid #1c1d22

  radius

  8px

  padding

  12px 20px

  font

  Inter 500 14px / 19.25px

  hoverBackground

  #1c1d22

  Tailwind

  Copy

  inline-flex items-center justify-center rounded-lg border border-[#1c1d22] bg-transparent px-5 py-3 text-sm font-medium leading-tight text-white transition-colors duration-150 ease-[cubic-bezier(0.4,0,0.2,1)] hover:bg-[#1c1d22]

• Surface card

  background

  #1c1d22

  text

  #ffffff

  border

  1px solid rgba(255,255,255,0.06)

  radius

  8px

  padding

  20px 24px

  shadow

  rgba(0, 0, 0, 0.3) 0 4px 30px 0

  Tailwind

  Copy

  rounded-lg border border-white/[0.06] bg-[#1c1d22] p-6 text-white shadow-[0_4px_30px_0_rgba(0,0,0,0.3)]

• Hairline divider with light beam

  height

  1px

  background

  linear-gradient(to right, rgba(0,0,0,0), rgba(255,255,255,0.2), rgba(0,0,0,0))

  margin

  section vertical rhythm 64-96px

  Tailwind

  Copy

  h-px w-full bg-[linear-gradient(to_right,rgba(0,0,0,0),rgba(255,255,255,0.2),rgba(0,0,0,0))]

• Bronze ornamental flourish (gradient stripe)

  height

  2px

  background

  linear-gradient(103deg, rgb(174,147,87), rgb(255,240,204) 40%, rgb(174,147,87))

  usage

  Section corner accent or wordmark underscore — never CTA fill

  Tailwind

  Copy

  h-0.5 bg-[linear-gradient(103deg,rgb(174,147,87),rgb(255,240,204)_40%,rgb(174,147,87))]

• Nav link

  text

  #9194a1

  font

  Inter 500 14px / 14px

  padding

  8px 12px

  radius

  6px

  hoverText

  #ffffff

  hoverBackground

  rgba(255,255,255,0.04)

  transition

  0.2s cubic-bezier(0.4, 0, 0.2, 1) on color, background-color

  Tailwind

  Copy

  rounded-md px-3 py-2 text-sm font-medium leading-none text-[#9194a1] transition-colors duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] hover:bg-white/[0.04] hover:text-white

• Single easing curve `cubic-bezier(0.4, 0, 0.2, 1)` (Tailwind ease-in-out default) anchors every transition. Do not introduce a second curve.
• Duration ladder is exclusive: 75 / 150 / 200 / 300 ms — never freehand timings.
• Framer Motion is opinionated about reduced motion; honor `useReducedMotion()` everywhere a motion.* element ships.
• Hover transitions never animate transform on text — only on cards, buttons, and ornamental layers.

• Color shift before motion shift — Slash leans on the 150ms color transition as the primary feedback channel; transform/opacity shifts are secondary.
• Hover states reveal the bronze gradient on ornaments only, not on functional controls — controls stay monochrome.
• Focus rings inherit --ring (HSL 240 4.9% 83.9%) at 1-2 px — never an outer glow.
• Light-beam dividers act as silent scroll cues — they signal section boundaries without text labels.

5-step Tailwind defaults: sm 400px / md 768px / lg 1024px / xl 1280px / 2xl 1536px. Narrow container set (320-704 px) means content rails stay tight even on 2xl — Slash never expands to a full 1280+ container.

• Mobile-first authoring; lg/xl introduce columned layouts but never widen the inner content rail.
• Container max-width set: 320 / 412 / 512 / 544 / 576 / 704 px — pick the narrowest that fits the module's information density.
• Section vertical rhythm shrinks 40-50% on mobile — narrower copy demands less air.
• Atmospheric gradients render identically across breakpoints; never gate them behind md+.

• Foreground/background contrast: #ffffff on #000000 = 21:1 (AAA Large + Normal). #ffffff on #1c1d22 = 16:1+ (AAA). #9194a1 on #000000 = 6.4:1 (AA Normal). Audit all bronze accents — #cc9166 on #000000 = 5.2:1 (AA Normal only, fails AAA).
• Honor `prefers-reduced-motion` everywhere — Framer Motion `useReducedMotion()` collapses scroll choreography to static.
• Focus ring uses --ring HSL 240 4.9% 83.9% at 1-2 px inset — visible against #000000 without an outer glow.
• Bronze accent never carries semantic meaning — never use it for state (success/error/warning). Reserve semantic states for shadcn defaults (destructive HSL 0 91% 71%).
• All interactive controls keyboard-reachable; Tab + Enter parity with click on every button + link.

Slash builds on a shadcn/ui semantic token foundation but re-tailors values to a luxury-financial register. The HSL --primary defaults to blue (217 91% 60%) but is rarely surfaced — bronze gradients carry the brand instead. Hero image is single, lazy-loaded at 64% rate across 30 captured images.

• Inter preloaded as 3 next/font/google woff2 variants — no manual @font-face needed.
• shadcn HSL vars converted to Tailwind via `@theme inline --color-background: hsl(var(--background))` pattern.
• Framer Motion components ship with `useReducedMotion()` guard; reduced-motion users see static layout.
• Atmospheric gradients live as page-level background layers, not component-level — keep them out of card recipes.

• Default to the dark monochrome canvas (#000000 + #1c1d22) for every surface unless light mode is required.
• Use Inter alone — no display partner, no serif, no italic.
• Reserve bronze (#cc9166 family) for ornamental gradients and flourishes only.
• Honor the narrow container rails (320-704 px) — treat each module as an editorial column.
• Use the 75/150/200/300ms duration ladder + single cubic-bezier(0.4, 0, 0.2, 1) easing for every transition.

• Don't paint a CTA with the bronze accent — bronze stays ornamental.
• Don't add a second font family thinking it warms the page — Inter alone is the discipline.
• Don't widen the container past 704 px — Slash refuses billboard-width modules on purpose.
• Don't introduce a second easing curve — the single `cubic-bezier(0.4, 0, 0.2, 1)` is the motion fingerprint.
• Don't replace atmospheric gradients with hero illustration — subtraction is the visual strategy.

• Single typeface (Inter) only — no exceptions.
• Single accent family (bronze #cc9166 / #aa9b8f) — no expansion to a chromatic accent system.
• Container max-width capped at 704 px on the inner content rail.
• Motion duration ladder fixed: 75 / 150 / 200 / 300 ms — no freehand timings.
• shadcn HSL CSS variable foundation must remain the token source — do not bypass with hex literals in component code.

• Hex grep — #000000 and #1c1d22 dominate; #cc9166 appears only inside gradient strings, never as `background` or `color` solid.
• Font stack inspection — only Inter (or its next/font hashed alias `__Inter_*`) appears across the surface; no second family.
• Container max-width audit — every inner rail measures ≤ 704 px on desktop screenshots.
• Easing audit — `transition-timing-function` reads `cubic-bezier(0.4, 0, 0.2, 1)` across all transitions; no second curve.
• Motion library check — `window.MotionIsMounted` resolves at runtime (Framer Motion present); `useReducedMotion()` guard wraps every `motion.*` element.
• shadcn token check — `--background`, `--foreground`, `--card`, `--primary`, `--secondary`, `--muted`, `--ring` defined in `:root` with HSL values; --radius reads 0.5rem.