Graphite Shadcn Theme
Sophisticated graphite theme with elegant gray tones for shadcn/ui. Professional monochromatic design with executive appeal. TypeScript ready.
Powered by
Working with shadcn themes?
Join our Discord community for help from other shadcn developers working with themes and design systems.
Graphite Shadcn Theme
Always admired how architects and designers use graphite pencils to create precise, sophisticated sketches that feel both technical and artistic. This theme captures that same refined aesthetic—pure grays that feel expensive without being flashy, with the kind of understated elegance that says "we don't need colors to make an impact."
Perfect for executive dashboards, luxury brands, architectural portfolios, or any React project where sophisticated restraint matters more than colorful excitement. The Montserrat font gives you that clean, geometric precision that works in boardrooms and design studios alike.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/graphite.jsonnpx shadcn@latest add https://www.shadcn.io/registry/graphite.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/graphite.jsonbunx shadcn@latest add https://www.shadcn.io/registry/graphite.jsonOriginal theme by tweakcn.com
CSS Variables
Copy and paste the following CSS variables into your global CSS file:
:root {
--background: oklch(0.9551 0 0);
--foreground: oklch(0.3211 0 0);
--card: oklch(0.9702 0 0);
--card-foreground: oklch(0.3211 0 0);
--popover: oklch(0.9702 0 0);
--popover-foreground: oklch(0.3211 0 0);
--primary: oklch(0.4891 0 0);
--primary-foreground: oklch(1.0000 0 0);
--secondary: oklch(0.9067 0 0);
--secondary-foreground: oklch(0.3211 0 0);
--muted: oklch(0.8853 0 0);
--muted-foreground: oklch(0.5103 0 0);
--accent: oklch(0.8078 0 0);
--accent-foreground: oklch(0.3211 0 0);
--destructive: oklch(0.5594 0.1900 25.8625);
--border: oklch(0.8576 0 0);
--input: oklch(0.9067 0 0);
--ring: oklch(0.4891 0 0);
--chart-1: oklch(0.4891 0 0);
--chart-2: oklch(0.4863 0.0361 196.0278);
--chart-3: oklch(0.6534 0 0);
--chart-4: oklch(0.7316 0 0);
--chart-5: oklch(0.8078 0 0);
--sidebar: oklch(0.9370 0 0);
--sidebar-foreground: oklch(0.3211 0 0);
--sidebar-primary: oklch(0.4891 0 0);
--sidebar-primary-foreground: oklch(1.0000 0 0);
--sidebar-accent: oklch(0.8078 0 0);
--sidebar-accent-foreground: oklch(0.3211 0 0);
--sidebar-border: oklch(0.8576 0 0);
--sidebar-ring: oklch(0.4891 0 0);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Montserrat, sans-serif;
--font-serif: Georgia, serif;
--font-mono: Fira Code, monospace;
--radius: 0.35rem;
--shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
--shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
--shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
--shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
--tracking-normal: 0em;
--spacing: 0.25rem;
}
.dark {
--background: oklch(0.2178 0 0);
--foreground: oklch(0.8853 0 0);
--card: oklch(0.2435 0 0);
--card-foreground: oklch(0.8853 0 0);
--popover: oklch(0.2435 0 0);
--popover-foreground: oklch(0.8853 0 0);
--primary: oklch(0.7058 0 0);
--primary-foreground: oklch(0.2178 0 0);
--secondary: oklch(0.3092 0 0);
--secondary-foreground: oklch(0.8853 0 0);
--muted: oklch(0.2850 0 0);
--muted-foreground: oklch(0.5999 0 0);
--accent: oklch(0.3715 0 0);
--accent-foreground: oklch(0.8853 0 0);
--destructive: oklch(0.6591 0.1530 22.1703);
--border: oklch(0.3290 0 0);
--input: oklch(0.3092 0 0);
--ring: oklch(0.7058 0 0);
--chart-1: oklch(0.7058 0 0);
--chart-2: oklch(0.6714 0.0339 206.3482);
--chart-3: oklch(0.5452 0 0);
--chart-4: oklch(0.4604 0 0);
--chart-5: oklch(0.3715 0 0);
--sidebar: oklch(0.2393 0 0);
--sidebar-foreground: oklch(0.8853 0 0);
--sidebar-primary: oklch(0.7058 0 0);
--sidebar-primary-foreground: oklch(0.2178 0 0);
--sidebar-accent: oklch(0.3715 0 0);
--sidebar-accent-foreground: oklch(0.8853 0 0);
--sidebar-border: oklch(0.3290 0 0);
--sidebar-ring: oklch(0.7058 0 0);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Inter, sans-serif;
--font-serif: Georgia, serif;
--font-mono: Fira Code, monospace;
--radius: 0.35rem;
--shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
--shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
--shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
--shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--color-destructive-foreground: var(--destructive-foreground);
--font-sans: var(--font-sans);
--font-mono: var(--font-mono);
--font-serif: var(--font-serif);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--shadow-2xs: var(--shadow-2xs);
--shadow-xs: var(--shadow-xs);
--shadow-sm: var(--shadow-sm);
--shadow: var(--shadow);
--shadow-md: var(--shadow-md);
--shadow-lg: var(--shadow-lg);
--shadow-xl: var(--shadow-xl);
--shadow-2xl: var(--shadow-2xl);
}Why this theme actually works
Luxury brands have known for decades that restraint communicates quality better than flashiness. This graphite theme follows the same principle—sophisticated grays that feel expensive because they don't try too hard. The monochromatic palette creates interfaces that feel timeless and authoritative.
Most gray themes either look boring or feel cold and corporate. This theme uses the full spectrum of grays to create depth and hierarchy without needing color. The result feels more like a premium architectural sketch than a generic business application.
Dark mode transforms the aesthetic into something that feels both modern and classic—like high-end charcoal drawings. The careful balance of light and dark creates interfaces that are comfortable for extended use while maintaining that sophisticated edge.
What's actually in this theme
Dead simple setup—copy the CSS variables into your globals.css and you're done. The monochromatic palette relies entirely on contrast and typography to create visual interest, which makes every element feel intentional and refined.
The medium gray primary creates authority without aggression—perfect for actions that should feel important but not urgent. The sophisticated contrast ratios work especially well for data-heavy interfaces where clarity is paramount.
All contrast ratios pass WCAG AA standards because sophistication never comes at the expense of accessibility. Since it uses standard shadcn color tokens, your TypeScript autocomplete for bg-primary, text-foreground, etc. works perfectly.
How to use this in projects
The graphite tones should mark important actions and create clear hierarchy without relying on color psychology. Use the full range of grays to create depth and visual interest through contrast rather than hue.
This works especially well for executive dashboards, luxury brand websites, architectural portfolios, or any interface where sophistication and restraint matter more than energy or playfulness. Think Dieter Rams, not startup pitch deck.
In practice, embrace the monochromatic elegance this palette creates. The absence of color forces you to rely on excellent typography, spacing, and hierarchy—which often results in cleaner, more timeless designs.
You might also like
Mono Theme
Pure monochromatic theme with stark sophistication
Vercel Theme
Clean development-focused monochromatic theme
Corporate Theme
Professional corporate theme with business authority
Dark Matter Theme
Deep space inspired theme with cosmic sophistication
Modern Minimal Theme
Clean minimal theme with subtle sophistication
Notebook Theme
Refined notebook theme with academic elegance
FAQ
Dark Matter Shadcn Theme
Dark matter space-inspired theme with cosmic deep blacks for shadcn/ui. Mysterious universe aesthetic with stellar design elements. TypeScript ready.
Mono Shadcn Theme
Pure monochromatic theme with stark black and white design for shadcn/ui. Terminal-inspired aesthetic with zero-distraction focus. TypeScript ready.