Styles
Switch between styles to instantly update the entire system.Component examples
Preview the design system applied to common interface components.A simple card with title, description and action buttons.
Card with image placeholder and text content.
Featured card with accent background color.
$45,231
+20.1% from last month
john@example.com
Product designer focused on creating beautiful user experiences.
Check out our latest update with improved performance and new tools.
Tailwind config
Copy or export the Tailwind configuration generated from this style./** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
colors: {
primary: '#0f172a',
secondary: '#475569',
accent: '#6366f1',
background: '#ffffff',
foreground: '#0f172a',
muted: '#f1f5f9',
border: '#e2e8f0',
destructive: '#ef4444',
},
borderRadius: {
sm: '0.25rem',
md: '0.5rem',
lg: '0.75rem',
full: '9999px',
},
fontFamily: {
sans: ['DM Serif Text', 'system-ui', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace'],
},
fontSize: {
xs: '0.75rem',
sm: '0.875rem',
base: '1rem',
lg: '1.125rem',
xl: '1.25rem',
'2xl': '1.5rem',
},
lineHeight: {
tight: '1.2',
normal: '1.5',
relaxed: '1.7',
},
fontWeight: {
regular: 400,
medium: 500,
semibold: 600,
bold: 700,
},
spacing: {
xs: '0.25rem',
sm: '0.5rem',
md: '1rem',
lg: '1.5rem',
xl: '2rem',
},
boxShadow: {
sm: '0 1px 2px rgba(0,0,0,0.05)',
md: '0 4px 6px rgba(0,0,0,0.08)',
lg: '0 10px 15px rgba(0,0,0,0.12)',
},
},
},
plugins: [],
}