Ghost

Ghost, professional, clean

Preview image. Unlock full-res

Crisp Blueprint on White Canvas. Black text etched onto a pristine white background, punctuated by a vibrant lime green flourish.

Industrysaas, dev-tools
Palette
#ffffff
#000000
#15171a
#94a3b8
#334155
#e5e7eb
#cbd5e1
#112220
#0f172a
#1f2937
#d1ff19
#bef264

This design system grounds a clean, light interface with judicious dark elements, creating a sense of professional authority. A stark contrast between near-black text and a bright white background establishes immediate readability, while subtle, desaturated grays provide tiered information. The vivid lime green is reserved for primary calls to action, standing out against the neutral palette like a beacon. The interplay of sharp, functional typography with soft, rounded elements, especially in buttons, creates a balanced, approachable feel without sacrificing precision. Use Midnight Ink (#000000) for all primary body and headline text on White Canvas (#ffffff) backgrounds to ensure maximum contrast (21.0:1 AAA). Apply Vivid Lime (#d1ff19) exclusively for primary calls-to-action and key indicators, reserving its high visual impact. Maintain the 24px border-radius for all primary buttons and significant interactive elements for a consistent soft-edged aesthetic. Utilize InterDisplay for headlines at sizes 36px and above, with letter-spacing adjusted between -0.025em and normal for optimal legibility. Ensure a minimum vertical spacing of 24px between content blocks and 16px for element gaps to maintain a comfortable density. Employ the rgba(0, 0, 0, 0.1) 0px 0px 1px 0px, rgba(0, 0, 0, 0.03) 0px 2px 6px 0px shadow for interactive cards and buttons to provide subtle depth. Do not use highly saturated colors for large areas or non-interactive elements; colors beyond the defined brand/accent palette will appear off-brand. Avoid deviating from the defined InterVariable and InterDisplay font families; no other fonts should be introduced. Refrain from using shadows or borders that are more pronounced than those defined (e.g., rgba(0, 0, 0, 0.25) 0px 25px 50px -12px is reserved for highly elevated, transient elements like modals or dropdowns). Do not mix border-radius values indiscriminately; stick to 24px for buttons, 8px for cards, and 9999px for pill-shaped elements. Do not use generic gray values; always refer to the specific neutral palette (Slate Blue, Graphite, Ash Gray, Light Steel, Dark Steel, Ghost Gray) to maintain subtle chromatic tint and consistency. Do not use a line height greater than 1.5 for any text block, as this design favors a compact, focused presentation.

More like this