infrastructure Color System
Stripe's website is the gold standard of fintech design -- a system that manages to feel simultaneou...
Stripe's website is the gold standard of fintech design -- a system that manages...
Stripe uses #533afd as the primary accent for interactive elements
Carefully selected 8 colors for infrastructure applications
Uses negative letter-spacing, gradient and more
#533afd
Primary brand color, CTA backgrounds, link text, interactive highlights. A saturated blue-violet that anchors the entire system.
#061b31
`--hds-color-heading-solid`. Primary heading color. Not black, not gray -- a very dark blue that adds warmth and depth to text.
#ffffff
Page background, card surfaces, button text on dark backgrounds.
#1c1e54
`--hds-color-util-brand-900`. Deep indigo for dark sections, footer backgrounds, and immersive brand moments.
#0d253d
`--hds-color-core-neutral-975`. The darkest neutral -- almost-black with a blue undertone for maximum depth without harshness.
#ea2261
`--hds-color-accentColorMode-ruby-icon-solid`. Warm red-pink for icons, alerts, and accent elements.
#f96bee
`--hds-color-accentColorMode-magenta-icon-gradientMiddle`. Vivid pink-purple for gradients and decorative highlights.
#ffd7ef
`--hds-color-util-accent-magenta-100`. Tinted surface for magenta-themed cards and badges.
/* Stripe Color System */
:root {
--stripe-stripe-purple: #533afd;
--stripe-deep-navy: #061b31;
--stripe-pure-white: #ffffff;
--stripe-brand-dark: #1c1e54;
--stripe-dark-navy: #0d253d;
--stripe-ruby: #ea2261;
--stripe-magenta: #f96bee;
--stripe-magenta-light: #ffd7ef;
}
/* Example usage */
.stripe-button-primary {
background-color: var(--stripe-stripe-purple);
color: #ffffff;
border: none;
border-radius: 8px;
padding: 8px 15px;
}ClickHouse's interface is a high-performance cockpit rendered in acid yellow-gre...
Composio's interface is a nocturnal command center — a dense, developer-focused ...
HashiCorp's website is enterprise infrastructure made tangible — a design system...
MongoDB's website is a deep-forest-meets-terminal experience — a design system r...