Ghost

# Ghost — Style Reference
> Crisp Blueprint on White Canvas. Black text etched onto a pristine white background, punctuated by a vibrant lime green flourish.
Theme: light

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.

## Colors
| Name | Value | Role |
|------|-------|------|
| White Canvas | `#ffffff` | Page backgrounds, card surfaces, pristine backdrops for content. |
| Midnight Ink | `#000000` | Primary text across light backgrounds, creating strong contrast for headlines and body content. |
| Carbon Black | `#15171a` | Background for deeply embedded components, like the main UI elements shown in the dashboard example, acting as a secondary, darker surface. |
| Slate Blue | `#94a3b8` | Secondary text, link hovers, subtle borders, and placeholder text, providing visual hierarchy without harshness. |
| Graphite | `#334155` | Tertiary text, less prominent UI elements, and occasional darker backgrounds for specific content blocks. |
| Ash Gray | `#e5e7eb` | Subtle borders, dividers, subtle button backgrounds, and UI element outlines, providing structure without distraction. |
| Light Steel | `#cbd5e1` | Iconography and less prominent textual elements, contributing to the system's light aesthetic. |
| Dark Steel | `#112220` | Prominent headings and critical interface labels within darker sections, almost black but with a very subtle green undertone. |
| Ghost Gray | `#0f172a` | Darker component backgrounds, especially in the featured UI example, providing depth to the otherwise light theme. |
| Ghost Border | `#1f2937` | Darker borders and separators, primarily used within the embedded dark UI, providing definition to interactive elements. |
| Vivid Lime | `#d1ff19` | Primary call-to-action buttons and key interactive elements, drawing immediate attention with its high contrast. |
| Muted Lime | `#bef264` | Subtle hover states or secondary interactive elements, a softer tone of the brand's primary accent. |
| Forest Green | `#1a2e05` | Background for secondary action buttons, providing a more subdued but still on-brand interactive element. |
| Sky Blue | `#1bb6eb` | Accent color for specific interactive components, like the 'Get Started — free' secondary button, offering a crisp alternative to lime. |
| Neon Pink | `#f8b1e2` | Decorative elements or indicators within the embedded dark UI, providing a vibrant, almost electric pop against dark backgrounds. |

## Typography
| Family | Role |
|--------|------|
| InterVariable | Body copy, button labels, navigation links, and descriptive text. Its versatility ensures readability across various functional elements. |
| InterDisplay | Headlines, section titles, and prominent calls-to-action. The tighter line height and varied letter spacing create a precise, impactful display type. The range of weights allows for a nuanced hierarchy, from assertive headings to more understated but still prominent display text. |