Slash

Slash

Preview image. Unlock full-res

Midnight Ledger, Obsidian Surfaces

Industryfintech
Palette
#000000
#030304
#08080a
#121317
#1c1d22
#5e616e
#777a88
#acafb9
#cdcdcd
#e2e3e9
#ffffff
#cc9166

Slash adopts a high-contrast dark mode aesthetic for business finance: black canvases, subtly layered dark gray surfaces, and a striking white primary text. Inter typography provides utilitarian clarity, while Ivy Presto adds a touch of classic sophistication to display headlines. The system minimizes color, primarily using off-white for interaction and a warm, golden gradient for subtle accents and visual depth on elevated elements. Use Midnight Ink (#000000) as the base background for most pages to establish the dark theme. Prioritize Inter for all functional text: body, navigation, buttons, and forms, ensuring high legibility. Apply Ivy Presto for large headlines (above 32px) to introduce a classic, authoritative counterpoint to Inter. Maintain a compact density using 6px for elementGap and 16px as a multiplier for internal component spacing. Incorporate subtle Golden Gradient (#cc9166) on hover states or as a background for elevated, interactive elements, never as a solid background color. Use Pure White (#ffffff) for primary text and active states to ensure strong contrast and draw attention. Round corners with a 10px radius for cards and general content blocks, and 9999px for pill-shaped buttons and inputs. Avoid using bright, saturated colors for backgrounds or large areas, as the system relies on subtle tonal differences. Do not use Ivy Presto for body text or small UI elements; reserve it for large display headings. Do not break the dark canvas and dark surface hierarchy by introducing light-mode components. Refrain from heavy shadows or strong outlines; elevate elements through subtle background shifts and internal padding. Do not introduce additional font families or decorative elements that disrupt the high-contrast, professional aesthetic. Avoid arbitrary uses of Pure White (#ffffff) for backgrounds; reserve it for primary text and calls to action. Do not use gradients for body text or small icons; they are reserved for decorative accents and elevated visuals.

More like this