Figma Config

Figma Config employs a bold, high-contrast dark theme, emphasizing clarity and directness. Monochrome neutrals dominate the canvas, creating space for content to stand out. Typography is dense and strong, utilizing custom fonts that command attention while maintaining high legibility against the dark background. Interaction is signaled through subtle border changes and direct color swaps rather than complex elevation, giving components a lightweight and integrated feel. Use Midnight Void (#000000) as the dominant background color for all main canvas areas. Apply FigmaSans for all text elements, setting letter-spacing to -0.0300em for display text (80px, 32px) and -0.0200em for smaller headings and body text. Form primary interactive buttons with a Midnight Void (#000000) background and Ghost White (#e2e2e2) text, using 0px border-radius. For ghost buttons or secondary actions, use Ghost White (#e2e2e2) for both text and a 1px border, maintaining a transparent background. Utilize the 4-6px vertical padding and 6-12px horizontal padding for navigation and compact interactive elements. Maintain a primary text color of Ghost White (#e2e2e2) against dark backgrounds and Midnight Void (#000000) against light backgrounds. Apply 1px borders using Midnight Void or Shadow Charcoal (#3d3d3d) for subtle division and emphasis. Avoid using gradients; the system relies on flat colors for a stark, impactful appearance. Do not introduce intermediate grey tones between Midnight Void (#000000) and Ghost White (#e2e2e2) without a clear functional purpose, as the system favors high contrast. Do not use highly saturated colors for large surface areas; color is reserved for functional accents or semantic states. Do not use generic system fonts; stick to figmaSans or figmaMono for all typographic elements. Avoid soft, rounded corners for main interactive elements (buttons, cards); prefer sharp, square edges unless specifically for small pill-shaped accents. Do not use drop shadows for elevation; rely on color contrast and borders to define hierarchy and interactive states.