Fey

Fey uses a commanding dark mode palette, leveraging deep blacks and subtle gradients as a backdrop for high-fidelity financial data. White and muted grays provide essential text hierarchy and UI structure, while sparse, vivid chromatic accents draw attention to critical insights and interactive elements. The system emphasizes clarity and data density through compact typography and minimal component padding, offering a direct and focused user experience. Transparency and blurred surfaces create a sense of depth without resorting to heavy shadows. Prioritize Calibre font for all text. Utilize its full range of weights to establish hierarchy, maintaining the crisp, data-centric feel. Use Absolute Zero (#000000) for base page backgrounds, Charcoal Black (#0b0b0b) for primary card surfaces, and Ghost Gray (#131313) for subtle layering. Apply a 99px border-radius for all primary action buttons, ensuring a consistent, friendly pill shape. Introduce Sky Surge (#479ffa) or Tangelo Flame (#ffa16c) sparingly as functional highlights for navigation or critical information, never for large areas. Maintain tight letter-spacing for headings (e.g., -0.0800em at 54px) to ensure a compact, controlled visual appearance. Employ transparency and backdrop filters (e.g., blur(10px)) for floating elements or overlays to create depth without heavy drop shadows. Use 1px solid rgba(255, 255, 255, 0.1) hair-thin borders for subtle separation between elements within cards or lists. Avoid using multiple font families; Calibre is the sole typeface for branding and content. Refrain from large, visually dominating images; focus on product screenshots, data visualizations, or minimal abstract elements. Do not use generic box-shadows. Shadows should be subtle, usually with dark hues or inset, as defined in component descriptions. Never use highly saturated colors for backgrounds or large text blocks; reserve vivid hues for small, functional accents. Avoid excessive padding within components; Fey emphasizes information density and a compact layout. Do not introduce strong color gradients across full sections or cards; gradients are reserved for subtle accents or interactive element highlights only. Do not use generic system icon sets. Icons should align with the defined outline style and minimal appearance.