
Preview image. Unlock full-res
Muted violet canvas
Phantom uses a confident, muted-violet interface language. Its pages feature a bright canvas with substantial rounded corners, lending a soft, approachable feel to components. Typography is clear and prominent, anchoring sections, while a spectrum of muted and vivid violet tones defines interactive elements and brand accents against a largely achromatic background. Functional elements like buttons feature a subtle, colored box shadow that deepens the visual hierarchy without heavy drop shadows.
Use Phantom Violet (#3c315b) for all primary text content and interactive element borders to maintain brand consistency.
Apply a 32px border-radius to all interactive buttons for a consistent soft, approachable feel.
Structure pages with a base unit of 4px for all spacing measurements, including row-gap and column-gap.
Elevate primary action buttons with a subtle 0px 0px 4px 0px box-shadow using Ghost Button Violet (#e2dffe), not harsh black shadows.
Maintain a clear visual hierarchy by using Canvas White (#fdfcfe) for main page and card backgrounds.
Employ the Phantom font at weight 350 for body text and navigation, and weight 400 for display headings, always with -0.025em letter-spacing.
Ensure section gaps default to 32px to create comfortable visual breathing room between content blocks.
Do not use harsh or high-contrast shadows; only subtle, colored box-shadows are permitted for elevation.
Avoid using multiple font families; restrict typography to the Phantom typeface in its specified weights.
Do not deviate from the established border-radius values; always use 32px for buttons and 24px for cards.
Refrain from introducing new accent colors beyond the defined violet palette, unless for semantic status indicators.
Do not use generic gray backgrounds for sections; instead, use Soft Fog (#f4f2f4) for subtle visual differentiation.
Avoid heavy borders or solid dividers; use subtle color changes or text separation instead of explicit lines.
Do not use letter-spacing values other than -0.025em, as this is a key characteristic of the Phantom typography.









