ai ml Color System
Replicate's interface is a developer playground crackling with creative energy — a bold, high-contra...
Replicate's interface is a developer playground crackling with creative energy —...
Replicate uses #202020 as the primary accent for interactive elements
Carefully selected 8 colors for ai-ml applications
Uses gradient
#202020
The primary text color and dark surface — a near-black that's the anchor of all text and borders. Slightly warmer than pure #000.
#ea2804
The core brand color — a vivid, saturated orange-red used in the hero gradient, accent borders, and high-signal moments.
#dd4425
A slightly warmer variant for button borders and link hover states.
#2b9a66
Badge/pill background for "running" or operational status indicators.
#24292e
A blue-tinted dark used for code block backgrounds and developer contexts.
#ffffff
The primary page body background.
#fcfcfc
Button text on dark surfaces and the lightest content.
#646464
Secondary body text and de-emphasized content.
/* Replicate Color System */
:root {
--replicate-replicate-dark: #202020;
--replicate-replicate-red: #ea2804;
--replicate-secondary-red: #dd4425;
--replicate-status-green: #2b9a66;
--replicate-github-dark: #24292e;
--replicate-pure-white: #ffffff;
--replicate-near-white: #fcfcfc;
--replicate-medium-gray: #646464;
}
/* Example usage */
.replicate-button-primary {
background-color: var(--replicate-replicate-dark);
color: #ffffff;
border: none;
border-radius: 8px;
padding: 8px 15px;
}Claude's interface is a literary salon reimagined as a product page — warm, unhu...
Cohere's interface is a polished enterprise command deck — confident, clean, and...
ElevenLabs' website is a study in restrained elegance — a near-white canvas (`#f...
MiniMax's website is a clean, product-showcase platform for a Chinese AI technol...