Copilot Money

Copilot Money employs a sophisticated dark-mode aesthetic with a spacious canvas, primarily leveraging shades of deep blue and near-black. Dynamic, multi-colored 'tag' elements float across the interface, adding vibrant, soft-glow accents against the dark backdrop. Typography balances a modern geometric sans with a lighter, custom variable font, creating a refined information hierarchy. Components are soft-edged, often featuring inset shadows and subtle transparency, giving a sense of depth without harshness. Prioritize Midnight Ink (#000814) or Deep Space (#010d1e) for all background canvases and card surfaces to maintain the dark theme. Use Platinum Ghost (#ffffff) for all primary body and headline text to ensure legibility and brand consistency. Apply Iris Pop (#1c6cff) exclusively for primary calls to action to create clear interaction points. Implement a 16px border-radius for all interactive elements like buttons and primary inputs. Use Matter Variable Thin with precise letter-spacing adjustments for headlines to achieve a light, modern typographic presence. Incorporate vibrant accent colors like Teal Glow (#00cc4b) or Crimson Beam (#ff4433) for category tags and small decorative elements, ensuring they stand out against the dark background. Employ inset shadows (like rgba(255, 255, 255, 0.16) inset) on vibrant tags and cards to give elements a subtle, glowing depth. Maintain an element gap of 16px (4 units) and card padding of 16px for consistent visual rhythm and content separation. Avoid using light backgrounds for primary content areas; maintain the dark theme's integrity. Do not introduce new saturated primary colors; limit vibrant accents to the established palette of Teal Glow, Crimson Beam, Iris Pop, etc. Do not use sharp 0px corners on any card-like or interactive UI elements; maintain soft radii (16px, 20px, 24px, 40px). Avoid heavy drop shadows; prefer the subtle, inset shadow styles or minimal elevation visible in the system. Do not use generic system fonts in place of Matter Variable Thin or Jokker; preserve the distinctive brand typography. Do not create dense, text-heavy blocks without sufficient padding or line height; ensure ample white space for readability within the dark context.