---
name: "Slash"
mode: "dark"
---
# Slash
## Visual theme and atmosphere
Slash operates in a midnight gallery mode: an almost-black canvas, white type, and a single warm copper accent that functions as editorial punctuation. Display headings are set in Ivy Presto, a high-contrast didone serif used at extreme sizes (up to 88px) — this serif-versus-sans collision is the system's signature, lending financial seriousness without the stockbroker gravitas of traditional banking. The rest of the UI is deliberately quiet: thin borders, pill-shaped controls, compact 16px body text, and barely-there elevation that lets the serif breathe. A single golden gradient (chart line, micro-accents) injects warmth into an otherwise monochrome system, evoking the warm glow of a Bloomberg terminal rendered for a design audience.
Midnight vault with gilded ledger lines.
## Color palette and roles
- **Copper (#cc9166)**: Category labels, editorial links, warm accent punctuation — the only chromatic color, used sparingly to mark curated content and category tags.
- **Gilded Gradient (linear-gradient(103deg, rgb(174, 147, 87), rgb(255, 240, 204) 40%, rgb(174, 147, 87) 70%, rgba(189, 157, 79, 0)))**: Chart line stroke, financial data visualization accent — a warm gold-to-cream gradient that brings the only color energy to data displays.
- **Onyx (#040406)**: Card surface, secondary backdrop — one step deeper than the page for visual weight.
- **Obsidian (#08080a)**: Page canvas, footer background, deepest surface — near-black with the faintest blue undertone.
- **Carbon (#121317)**: Elevated panels, subtle UI fills — the first clearly lighter step in the surface stack.
- **Graphite (#1c1d22)**: Borders, dividers, icon containers, slider controls — the hairline color that defines structure.
- **Slate (#2e3038)**: Secondary borders, muted icon strokes, subtle dividers between content blocks.
- **Smoke (#464853)**: Tertiary borders, inactive nav items — barely visible structural lines.
- **Ash (#5e616e)**: Muted body text, placeholder content, secondary metadata.
- **Steel (#777a88)**: Button borders, icon strokes, secondary text, ghost button outlines.
- **Fog (#9194a1)**: Nav text, body descriptions, helper text — the workhorse readable gray.
- **Mist (#acafb9)**: Subdued body copy, supplementary text, less-emphasized paragraphs.
- **Silver (#c7c9d1)**: Light body text, medium-emphasis paragraphs, secondary headings.
- **Bone (#e2e3e9)**: High-emphasis body text, dense data labels, the default text tone across most UI.
- **Paper White (#ffffff)**: Primary action button fill, headings, nav active state — the highest contrast color, reserved for elements that must command attention.
## Typography rules
- **Display**: Ivy Presto, 400, 88px. Display and heading serif — used exclusively for hero headlines and section titles at 28px and above. Fallback: Playfair Display, DM Serif Display, Libre Caslon Display..
- **Body**: Inter, 400, 16px. UI sans — body, nav, buttons, labels, links, form fields, and the 48px subhead level..
- **Label**: Inter, 600, 12px. Small-caps category labels..
## Spacing and shape
- Base unit: 8px.
- Default gap: 8px.
- Card padding: 24px.
- Section padding: 160px.
- Card corners: 10px.
- Control corners: 9999px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 120ms; composed transitions last 400ms; easing is cubic-bezier(0.16, 1, 0.3, 1).
## Guardrails
- Use Ivy Presto for all display and heading text at 28px and above — never for body copy under 20px.
- Apply Copper (#cc9166) only to category labels and editorial links — never to buttons, icons, or large text blocks.
- Use 1px borders for card and table edges; never use drop shadows for elevation.
- Don't introduce blue, green, or any chromatic color as a brand accent — Copper is the only warm note in the palette.
---
name: "Slash"
mode: "dark"
---
# Slash
## Visual theme and atmosphere
Slash operates in a midnight gallery mode: an almost-black canvas, white type, and a single warm copper accent that functions as editorial punctuation. Display headings are set in Ivy Presto, a high-contrast didone serif used at extreme sizes (up to 88px) — this serif-versus-sans collision is the system's signature, lending financial seriousness without the stockbroker gravitas of traditional banking. The rest of the UI is deliberately quiet: thin borders, pill-shaped controls, compact 16px body text, and barely-there elevation that lets the serif breathe. A single golden gradient (chart line, micro-accents) injects warmth into an otherwise monochrome system, evoking the warm glow of a Bloomberg terminal rendered for a design audience.
Midnight vault with gilded ledger lines.
## Color palette and roles
- **Copper (#cc9166)**: Category labels, editorial links, warm accent punctuation — the only chromatic color, used sparingly to mark curated content and category tags.
- **Gilded Gradient (linear-gradient(103deg, rgb(174, 147, 87), rgb(255, 240, 204) 40%, rgb(174, 147, 87) 70%, rgba(189, 157, 79, 0)))**: Chart line stroke, financial data visualization accent — a warm gold-to-cream gradient that brings the only color energy to data displays.
- **Onyx (#040406)**: Card surface, secondary backdrop — one step deeper than the page for visual weight.
- **Obsidian (#08080a)**: Page canvas, footer background, deepest surface — near-black with the faintest blue undertone.
- **Carbon (#121317)**: Elevated panels, subtle UI fills — the first clearly lighter step in the surface stack.
- **Graphite (#1c1d22)**: Borders, dividers, icon containers, slider controls — the hairline color that defines structure.
- **Slate (#2e3038)**: Secondary borders, muted icon strokes, subtle dividers between content blocks.
- **Smoke (#464853)**: Tertiary borders, inactive nav items — barely visible structural lines.
- **Ash (#5e616e)**: Muted body text, placeholder content, secondary metadata.
- **Steel (#777a88)**: Button borders, icon strokes, secondary text, ghost button outlines.
- **Fog (#9194a1)**: Nav text, body descriptions, helper text — the workhorse readable gray.
- **Mist (#acafb9)**: Subdued body copy, supplementary text, less-emphasized paragraphs.
- **Silver (#c7c9d1)**: Light body text, medium-emphasis paragraphs, secondary headings.
- **Bone (#e2e3e9)**: High-emphasis body text, dense data labels, the default text tone across most UI.
- **Paper White (#ffffff)**: Primary action button fill, headings, nav active state — the highest contrast color, reserved for elements that must command attention.
## Typography rules
- **Display**: Ivy Presto, 400, 88px. Display and heading serif — used exclusively for hero headlines and section titles at 28px and above. Fallback: Playfair Display, DM Serif Display, Libre Caslon Display..
- **Body**: Inter, 400, 16px. UI sans — body, nav, buttons, labels, links, form fields, and the 48px subhead level..
- **Label**: Inter, 600, 12px. Small-caps category labels..
## Spacing and shape
- Base unit: 8px.
- Default gap: 8px.
- Card padding: 24px.
- Section padding: 160px.
- Card corners: 10px.
- Control corners: 9999px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 120ms; composed transitions last 400ms; easing is cubic-bezier(0.16, 1, 0.3, 1).
## Guardrails
- Use Ivy Presto for all display and heading text at 28px and above — never for body copy under 20px.
- Apply Copper (#cc9166) only to category labels and editorial links — never to buttons, icons, or large text blocks.
- Use 1px borders for card and table edges; never use drop shadows for elevation.
- Don't introduce blue, green, or any chromatic color as a brand accent — Copper is the only warm note in the palette.
---
name: "Slash"
mode: "dark"
---
# Slash
## Visual theme and atmosphere
Slash operates in a midnight gallery mode: an almost-black canvas, white type, and a single warm copper accent that functions as editorial punctuation. Display headings are set in Ivy Presto, a high-contrast didone serif used at extreme sizes (up to 88px) — this serif-versus-sans collision is the system's signature, lending financial seriousness without the stockbroker gravitas of traditional banking. The rest of the UI is deliberately quiet: thin borders, pill-shaped controls, compact 16px body text, and barely-there elevation that lets the serif breathe. A single golden gradient (chart line, micro-accents) injects warmth into an otherwise monochrome system, evoking the warm glow of a Bloomberg terminal rendered for a design audience.
Midnight vault with gilded ledger lines.
## Color palette and roles
- **Copper (#cc9166)**: Category labels, editorial links, warm accent punctuation — the only chromatic color, used sparingly to mark curated content and category tags.
- **Gilded Gradient (linear-gradient(103deg, rgb(174, 147, 87), rgb(255, 240, 204) 40%, rgb(174, 147, 87) 70%, rgba(189, 157, 79, 0)))**: Chart line stroke, financial data visualization accent — a warm gold-to-cream gradient that brings the only color energy to data displays.
- **Onyx (#040406)**: Card surface, secondary backdrop — one step deeper than the page for visual weight.
- **Obsidian (#08080a)**: Page canvas, footer background, deepest surface — near-black with the faintest blue undertone.
- **Carbon (#121317)**: Elevated panels, subtle UI fills — the first clearly lighter step in the surface stack.
- **Graphite (#1c1d22)**: Borders, dividers, icon containers, slider controls — the hairline color that defines structure.
- **Slate (#2e3038)**: Secondary borders, muted icon strokes, subtle dividers between content blocks.
- **Smoke (#464853)**: Tertiary borders, inactive nav items — barely visible structural lines.
- **Ash (#5e616e)**: Muted body text, placeholder content, secondary metadata.
- **Steel (#777a88)**: Button borders, icon strokes, secondary text, ghost button outlines.
- **Fog (#9194a1)**: Nav text, body descriptions, helper text — the workhorse readable gray.
- **Mist (#acafb9)**: Subdued body copy, supplementary text, less-emphasized paragraphs.
- **Silver (#c7c9d1)**: Light body text, medium-emphasis paragraphs, secondary headings.
- **Bone (#e2e3e9)**: High-emphasis body text, dense data labels, the default text tone across most UI.
- **Paper White (#ffffff)**: Primary action button fill, headings, nav active state — the highest contrast color, reserved for elements that must command attention.
## Typography rules
- **Display**: Ivy Presto, 400, 88px. Display and heading serif — used exclusively for hero headlines and section titles at 28px and above. Fallback: Playfair Display, DM Serif Display, Libre Caslon Display..
- **Body**: Inter, 400, 16px. UI sans — body, nav, buttons, labels, links, form fields, and the 48px subhead level..
- **Label**: Inter, 600, 12px. Small-caps category labels..
## Spacing and shape
- Base unit: 8px.
- Default gap: 8px.
- Card padding: 24px.
- Section padding: 160px.
- Card corners: 10px.
- Control corners: 9999px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 120ms; composed transitions last 400ms; easing is cubic-bezier(0.16, 1, 0.3, 1).
## Guardrails
- Use Ivy Presto for all display and heading text at 28px and above — never for body copy under 20px.
- Apply Copper (#cc9166) only to category labels and editorial links — never to buttons, icons, or large text blocks.
- Use 1px borders for card and table edges; never use drop shadows for elevation.
- Don't introduce blue, green, or any chromatic color as a brand accent — Copper is the only warm note in the palette.
---
name: "Slash"
mode: "dark"
---
# Slash
## Visual theme and atmosphere
Slash operates in a midnight gallery mode: an almost-black canvas, white type, and a single warm copper accent that functions as editorial punctuation. Display headings are set in Ivy Presto, a high-contrast didone serif used at extreme sizes (up to 88px) — this serif-versus-sans collision is the system's signature, lending financial seriousness without the stockbroker gravitas of traditional banking. The rest of the UI is deliberately quiet: thin borders, pill-shaped controls, compact 16px body text, and barely-there elevation that lets the serif breathe. A single golden gradient (chart line, micro-accents) injects warmth into an otherwise monochrome system, evoking the warm glow of a Bloomberg terminal rendered for a design audience.
Midnight vault with gilded ledger lines.
## Color palette and roles
- **Copper (#cc9166)**: Category labels, editorial links, warm accent punctuation — the only chromatic color, used sparingly to mark curated content and category tags.
- **Gilded Gradient (linear-gradient(103deg, rgb(174, 147, 87), rgb(255, 240, 204) 40%, rgb(174, 147, 87) 70%, rgba(189, 157, 79, 0)))**: Chart line stroke, financial data visualization accent — a warm gold-to-cream gradient that brings the only color energy to data displays.
- **Onyx (#040406)**: Card surface, secondary backdrop — one step deeper than the page for visual weight.
- **Obsidian (#08080a)**: Page canvas, footer background, deepest surface — near-black with the faintest blue undertone.
- **Carbon (#121317)**: Elevated panels, subtle UI fills — the first clearly lighter step in the surface stack.
- **Graphite (#1c1d22)**: Borders, dividers, icon containers, slider controls — the hairline color that defines structure.
- **Slate (#2e3038)**: Secondary borders, muted icon strokes, subtle dividers between content blocks.
- **Smoke (#464853)**: Tertiary borders, inactive nav items — barely visible structural lines.
- **Ash (#5e616e)**: Muted body text, placeholder content, secondary metadata.
- **Steel (#777a88)**: Button borders, icon strokes, secondary text, ghost button outlines.
- **Fog (#9194a1)**: Nav text, body descriptions, helper text — the workhorse readable gray.
- **Mist (#acafb9)**: Subdued body copy, supplementary text, less-emphasized paragraphs.
- **Silver (#c7c9d1)**: Light body text, medium-emphasis paragraphs, secondary headings.
- **Bone (#e2e3e9)**: High-emphasis body text, dense data labels, the default text tone across most UI.
- **Paper White (#ffffff)**: Primary action button fill, headings, nav active state — the highest contrast color, reserved for elements that must command attention.
## Typography rules
- **Display**: Ivy Presto, 400, 88px. Display and heading serif — used exclusively for hero headlines and section titles at 28px and above. Fallback: Playfair Display, DM Serif Display, Libre Caslon Display..
- **Body**: Inter, 400, 16px. UI sans — body, nav, buttons, labels, links, form fields, and the 48px subhead level..
- **Label**: Inter, 600, 12px. Small-caps category labels..
## Spacing and shape
- Base unit: 8px.
- Default gap: 8px.
- Card padding: 24px.
- Section padding: 160px.
- Card corners: 10px.
- Control corners: 9999px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 120ms; composed transitions last 400ms; easing is cubic-bezier(0.16, 1, 0.3, 1).
## Guardrails
- Use Ivy Presto for all display and heading text at 28px and above — never for body copy under 20px.
- Apply Copper (#cc9166) only to category labels and editorial links — never to buttons, icons, or large text blocks.
- Use 1px borders for card and table edges; never use drop shadows for elevation.
- Don't introduce blue, green, or any chromatic color as a brand accent — Copper is the only warm note in the palette.
---
name: "Slash"
mode: "dark"
---
# Slash
## Visual theme and atmosphere
Slash operates in a midnight gallery mode: an almost-black canvas, white type, and a single warm copper accent that functions as editorial punctuation. Display headings are set in Ivy Presto, a high-contrast didone serif used at extreme sizes (up to 88px) — this serif-versus-sans collision is the system's signature, lending financial seriousness without the stockbroker gravitas of traditional banking. The rest of the UI is deliberately quiet: thin borders, pill-shaped controls, compact 16px body text, and barely-there elevation that lets the serif breathe. A single golden gradient (chart line, micro-accents) injects warmth into an otherwise monochrome system, evoking the warm glow of a Bloomberg terminal rendered for a design audience.
Midnight vault with gilded ledger lines.
## Color palette and roles
- **Copper (#cc9166)**: Category labels, editorial links, warm accent punctuation — the only chromatic color, used sparingly to mark curated content and category tags.
- **Gilded Gradient (linear-gradient(103deg, rgb(174, 147, 87), rgb(255, 240, 204) 40%, rgb(174, 147, 87) 70%, rgba(189, 157, 79, 0)))**: Chart line stroke, financial data visualization accent — a warm gold-to-cream gradient that brings the only color energy to data displays.
- **Onyx (#040406)**: Card surface, secondary backdrop — one step deeper than the page for visual weight.
- **Obsidian (#08080a)**: Page canvas, footer background, deepest surface — near-black with the faintest blue undertone.
- **Carbon (#121317)**: Elevated panels, subtle UI fills — the first clearly lighter step in the surface stack.
- **Graphite (#1c1d22)**: Borders, dividers, icon containers, slider controls — the hairline color that defines structure.
- **Slate (#2e3038)**: Secondary borders, muted icon strokes, subtle dividers between content blocks.
- **Smoke (#464853)**: Tertiary borders, inactive nav items — barely visible structural lines.
- **Ash (#5e616e)**: Muted body text, placeholder content, secondary metadata.
- **Steel (#777a88)**: Button borders, icon strokes, secondary text, ghost button outlines.
- **Fog (#9194a1)**: Nav text, body descriptions, helper text — the workhorse readable gray.
- **Mist (#acafb9)**: Subdued body copy, supplementary text, less-emphasized paragraphs.
- **Silver (#c7c9d1)**: Light body text, medium-emphasis paragraphs, secondary headings.
- **Bone (#e2e3e9)**: High-emphasis body text, dense data labels, the default text tone across most UI.
- **Paper White (#ffffff)**: Primary action button fill, headings, nav active state — the highest contrast color, reserved for elements that must command attention.
## Typography rules
- **Display**: Ivy Presto, 400, 88px. Display and heading serif — used exclusively for hero headlines and section titles at 28px and above. Fallback: Playfair Display, DM Serif Display, Libre Caslon Display..
- **Body**: Inter, 400, 16px. UI sans — body, nav, buttons, labels, links, form fields, and the 48px subhead level..
- **Label**: Inter, 600, 12px. Small-caps category labels..
## Spacing and shape
- Base unit: 8px.
- Default gap: 8px.
- Card padding: 24px.
- Section padding: 160px.
- Card corners: 10px.
- Control corners: 9999px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 120ms; composed transitions last 400ms; easing is cubic-bezier(0.16, 1, 0.3, 1).
## Guardrails
- Use Ivy Presto for all display and heading text at 28px and above — never for body copy under 20px.
- Apply Copper (#cc9166) only to category labels and editorial links — never to buttons, icons, or large text blocks.
- Use 1px borders for card and table edges; never use drop shadows for elevation.
- Don't introduce blue, green, or any chromatic color as a brand accent — Copper is the only warm note in the palette.
