Style Guide

This website is a React app built on the Next.js framework with TailwindCSS. I've made it easy for you to duplicate my styles. You can copy and paste the CSS variables into the globals.css file of your codebase. You'll need to have shadcn/ui set up for semantic styling of components to work out-of-the-box. Not using a framework? I've included agnostic tokens you can use for your own styling.

Install Next.js

Themes

Dark mode

This website uses next-themes to manage light & dark styles and match them to system preferences. The useTheme hook is used to set and access the current theme and a ThemeProvider is used to wrap the root layout.

next-themes

CSS variables

Syntax

CSS variables are defined without the hsl() colour space function according to TailwindCSS guidelines.

Paste desired variables into your code

globals.css

@layer base {
        :root {
          --background: 0 0% 100%;
          --foreground: 224 71.4% 4.1%;
          --card: 0 0% 100%;
          --card-foreground: 224 71.4% 4.1%;
          --popover: 0 0% 100%;
          --popover-foreground: 224 71.4% 4.1%;
          --primary: 243 75% 59%;
          --primary-foreground: 226 100% 97%;
          --secondary: 220 14.3% 95.9%;
          --secondary-foreground: 220.9 39.3% 11%;
          --muted: 220 14.3% 95.9%;
          --muted-foreground: 220 8.9% 46.1%;
          --accent: 220 14.3% 95.9%;
          --accent-foreground: 220.9 39.3% 11%;
          --destructive: 0 84.2% 60.2%;
          --destructive-foreground: 210 20% 98%;
          --border: 220 13% 91%;
          --input: 220 13% 91%;
          --ring: 243 75% 59%;
          --radius: 0.5rem;
          --selection: 229 84% 5%;
          --selection-foreground: 240 100% 99%;
        }
       
        .dark {
          --background: 222 47% 11%;
          --foreground: 210 20% 98%;
          --card: 229 84% 5%;
          --card-foreground: 210 20% 98%;
          --popover: 229 84% 5%;
          --popover-foreground: 210 20% 98%;
          --primary: 245 58% 51%;
          --primary-foreground: 226 100% 97%;
          --secondary: 215 27.9% 16.9%;
          --secondary-foreground: 210 20% 98%;
          --muted: 215 27.9% 16.9%;
          --muted-foreground: 217.9 10.6% 64.9%;
          --accent: 215 27.9% 16.9%;
          --accent-foreground: 210 20% 98%;
          --destructive: 0 62.8% 30.6%;
          --destructive-foreground: 210 20% 98%;
          --border: 215 27.9% 16.9%;
          --input: 215 27.9% 16.9%;
          --ring: 245 58% 51%;
          --selection: 247 75% 59%;
          --selection-foreground: 240 100% 99%;
        }
    }

Semantics

For the following CSS variables:

Primary button colours (dark)

button-primary

--primary: 263.4 70% 50.4%;
--primary-foreground: 210 20% 98%;

The background variable is used for the background colour of the button and the foreground variable is used for the text colour.

Naming

The background suffix is omitted when the variable is used for the background colour of the component.

The background colour of the following Button styled with Tailwind utility classes will be hsl(var(--primary)) and the foreground colour will be hsl(var(--primary-foreground)).

Check the shadcn/ui Theming docs for full details on the semantic use of variables.

Custom variables

The selection variable is used for the background colour of the selection highlight. The selection-foreground variable is used for the text colour of the selection highlight.

Want HEX or RGB colours instead?

🤓 I thought you'd never ask.

Tips

Click a cell value to copy the colour to your clipboard. Toggle between light and dark themes in the header or mobile menu to see the relevant colours.

Page 1 of 3

HEX	RGB	HSL	LCH
#FFFFFF	255, 255, 255	0, 0%, 100%	100%, 0, 0
#0B0B0B	11, 11, 11	224, 71.4%, 4.1%	14.96%, 0, 0
#FFFFFF	255, 255, 255	0, 0%, 100%	100%, 0, 0
#0B0B0B	11, 11, 11	224, 71.4%, 4.1%	14.96% 0 0
#FFFFFF	255, 255, 255	0, 0%, 100%	100%, 0, 0
#0B0B0B	11, 11, 11	224, 71.4%, 4.1%	14.96%, 0, 0
#4F46E5	79, 70, 229	243, 75%, 59%	41%, 94, 303
#EEF2FF	238, 242, 255	226, 100%, 97%	96%, 7, 279
#F3F4F6	243, 244, 246	220, 14.3%, 95.9%	96.7%, 0.003, 264.54
#111827	17, 24, 39	220.9, 39.3%, 11%	21.01%, 0.032, 264.66

Components

Radix Primitives

Detailed styles for customized Radix UI components coming soon!

Radix Primitives Docs

shadcn/ui

Detailed styles for customized shadcn/ui components coming soon!

shadcn/ui Docs

Figma UI kit

You can access a design kit with all the components used on this website with support for Figma variables, props, and theming (dark mode). Use it as a starting point for your own customization with CSS variables and/or Tailwind CSS. Credit to Pietro Schirano (@skirano) for creating the original Figma kit for shadcn/ui.

Preview file

Get a copy

Was this helpful?

Buy me a coffee! ☕️