design productivity Color System
Figma's interface is the design tool that designed itself — a masterclass in typographic sophisticat...
Figma's interface is the design tool that designed itself — a masterclass in typ...
Figma uses #000000 as the primary accent for interactive elements
Carefully selected 5 colors for design-productivity applications
Uses negative letter-spacing, gradient and more
#000000
All text, all solid buttons, all borders. The sole "color" of the interface.
#ffffff
All backgrounds, white buttons, text on dark surfaces. The other half of the binary.
#ffffff
Primary page background and card surfaces.
rgba(0, 0, 0, 0.08)
Subtle dark overlay for secondary circular buttons and glass effects.
rgba(255, 255, 255, 0.16)
Frosted glass overlay for buttons on dark/colored surfaces.
/* Figma Color System */
:root {
--figma-pure-black: #000000;
--figma-pure-white: #ffffff;
--figma-pure-white: #ffffff;
--figma-glass-black: rgba(0, 0, 0, 0.08);
--figma-glass-white: rgba(255, 255, 255, 0.16);
}
/* Example usage */
.figma-button-primary {
background-color: var(--figma-pure-black);
color: #ffffff;
border: none;
border-radius: 8px;
padding: 8px 15px;
}Airtable's website is a clean, enterprise-friendly platform that communicates "s...
Cal.com's website is a masterclass in monochromatic restraint — a grayscale worl...
Clay's website is a warm, playful celebration of color that treats B2B data enri...
Framer's website is a cinematic, tool-obsessed dark canvas that radiates the con...