Colors
Color tokens for the Zurto UI design system. Click any swatch to copy its value.
Brand Colors
Copied!
Primary
#df3e53 Copied!
Primary Hover
#e85566 Copied!
Primary Active
#c73548 Copied!
Primary Light
rgba(223, 62, 83, 0.15)Background Colors
Copied!
Background
#0a0a0a Copied!
Surface
#111111 Copied!
Elevated
#1a1a1a Copied!
Overlay
#222222Text Colors
Copied!
Text Primary
#ffffff Copied!
Text Secondary
#a0a0a0 Copied!
Text Muted
#666666 Copied!
Text Disabled
#444444Semantic Colors
Copied!
Success
#22c55e Copied!
Warning
#f59e0b Copied!
Error
#ef4444 Copied!
Info
#3b82f6Border Colors
Copied!
Border Default
#2a2a2a Copied!
Border Hover
#3a3a3a Copied!
Border Focus
#df3e53Glassmorphism
Glassmorphism effect preview
CSS Variables Reference
css
:root {
/* Brand */
--z-primary: #df3e53;
--z-primary-hover: #e85566;
--z-primary-active: #c73548;
--z-primary-light: rgba(223, 62, 83, 0.15);
/* Backgrounds */
--z-bg: #0a0a0a;
--z-bg-surface: #111111;
--z-bg-elevated: #1a1a1a;
--z-bg-overlay: #222222;
/* Text */
--z-text: #ffffff;
--z-text-secondary: #a0a0a0;
--z-text-muted: #666666;
--z-text-disabled: #444444;
/* Semantic */
--z-success: #22c55e;
--z-warning: #f59e0b;
--z-error: #ef4444;
--z-info: #3b82f6;
/* Borders */
--z-border: #2a2a2a;
--z-border-hover: #3a3a3a;
--z-border-focus: #df3e53;
/* Glass */
--z-glass-bg: rgba(255, 255, 255, 0.05);
--z-glass-border: rgba(255, 255, 255, 0.1);
}Usage Examples
tsx
// In your components
import { tokens } from "@zurto/ui";
const MyComponent = () => (
<div
style={{
background: tokens.colors.bgElevated,
color: tokens.colors.textPrimary,
borderColor: tokens.colors.border,
}}
>
Content
</div>
);Customizing Colors
Override the default theme colors:
tsx
import { ZThemeProvider } from "@zurto/ui";
const customTheme = {
colors: {
primary: "#8b5cf6", // Purple
primaryHover: "#a78bfa",
primaryActive: "#7c3aed",
},
};
function App() {
return (
<ZThemeProvider theme={customTheme}>
<YourApp />
</ZThemeProvider>
);
}