design productivity Color System
Miro's website is a clean, collaborative-tool-forward platform that communicates "visual thinking" t...
Miro's website is a clean, collaborative-tool-forward platform that communicates...
Miro uses #1c1c1e as the primary accent for interactive elements
Carefully selected 8 colors for design-productivity applications
Uses shadow-as-border, negative letter-spacing and more
#1c1c1e
Primary text
#ffffff
`--tw-color-white`, primary surface
#5b76fe
`--tw-color-blue-450`, primary interactive
#2a41b6
`--tw-color-actionable-pressed`
#fde0f0
Soft pink surface
#fbd4d4
Light red surface
#e3c5c5
Muted red
#00b473
`--tw-color-success-accent`
/* Miro Color System */
:root {
--miro-near-black: #1c1c1e;
--miro-white: #ffffff;
--miro-blue-450: #5b76fe;
--miro-actionable-pressed: #2a41b6;
--miro-pink: #fde0f0;
--miro-red: #fbd4d4;
--miro-dark-red: #e3c5c5;
--miro-success: #00b473;
}
/* Example usage */
.miro-button-primary {
background-color: var(--miro-near-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...