design productivity Color System
Framer's website is a cinematic, tool-obsessed dark canvas that radiates the confidence of a design ...
Framer's website is a cinematic, tool-obsessed dark canvas that radiates the con...
Framer uses #000000 as the primary accent for interactive elements
Carefully selected 8 colors for design-productivity applications
Uses negative letter-spacing, gradient and more
#000000
Primary background, the void canvas that defines Framer's dark-first identity
#ffffff
Primary text color on dark surfaces, button text on accent backgrounds
#0099ff
Primary accent color — links, borders, ring shadows, interactive highlights
#a6a6a6
Secondary text, subdued labels, dimmed descriptions on dark surfaces
#090909
Elevated dark surface, shadow ring color for subtle depth separation
#000000
Page background, primary canvas
rgba(255, 255, 255, 0.1)
Translucent button backgrounds, glass-effect surfaces on dark
rgba(255, 255, 255, 0.5)
Slightly more opaque frosted elements for hover states
/* Framer Color System */
:root {
--framer-pure-black: #000000;
--framer-pure-white: #ffffff;
--framer-framer-blue: #0099ff;
--framer-muted-silver: #a6a6a6;
--framer-near-black: #090909;
--framer-void-black: #000000;
--framer-frosted-white: rgba(255, 255, 255, 0.1);
--framer-subtle-white: rgba(255, 255, 255, 0.5);
}
/* Example usage */
.framer-button-primary {
background-color: var(--framer-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...
Figma's interface is the design tool that designed itself — a masterclass in typ...