As a designer, I’m always on the hunt for expressive color palettes.

Great color palettes — along with great typography and vertical rhythm — breathe life to otherwise drab designs. And when @kepano, the creator of Obsidian tweeted out a full-scale color system that he’d created for his personal site, I had to try the new scheme.

Tweet from https://twitter.com/kepano/status/1876646531698512285.

You can get the color palette here: https://stephango.com/flexoki

The palette comes with a base of gray-scale colors, and an extended range of common colors, similar to the Tailwind color palette (https://tailwindcss.com/docs/customizing-colors), which this site currently uses. I wanted to see what the new colors looked like on this site and my project site labspace.ai.

Fortunately with Tailwind, changing out an entire color scheme is as easy as a trying on of clothes nowadays. You can setup the new color scheme in the Tailwind configuration file, then remap the colors from one to the other. It gets even easier if you use semantic colors like --color-primary .

Here’s what the tailwind config file looks like: (Full config at the bottom of the post)

colors: {
  flexoki: {
    black: '#100F0F',
    paper: '#FFFCF0',
    // SEMANTIC
    // UI & Layout
    'bg-main': '#100F0F',              // bg - main background
    'bg-alt': '#1C1B1A',               // bg-2 - secondary background
    'border-base': '#282726',          // ui - borders
    'border-hover': '#343331',         // ui-2 - hovered borders
    'border-active': '#403E3C',        // ui-3 - active borders
    ...
  }
}

Here’s what the CSS variables look like:


// Flexoki Colors
--flexoki-black: #100F0F;
--flexoki-paper: #FFFCF0;

// UI & Layout
--flexoki-bg-main: #100F0F;
--flexoki-bg-alt: #1C1B1A;
--flexoki-border-base: #282726;
--flexoki-border-hover: #343331;
--flexoki-border-active: #403E3C;

// Typography  
--flexoki-text-faint: #575653;
--flexoki-text-muted: #878580;
--flexoki-text-primary: #CECDC3;
...

And here’s what the site looks like:

I think it looks great! Aside from the paper yellow background, all the other colors are very similar to the original primary text and link colors. I do think that the Flexoki colors stand out more on top of the paper color, but if I adopt the yellow background, if feels like the site start approximating @kepano’s website, for better or worse.

For this site, I think I’ll adopt the grays and blues, but continue using a (very boring) white background. For labspace.ai, I’ll continue with a colder blue/gray palette, using the labspace palette (https://labspace.ai/theme). Though I think it’d be nice to break the pattern by pairing the yellow-tinted paper background with a serif font for a few occasions.

Another thing that’s really nice about @kepano’s website is its dark mode colors — apparently if you live in SF and you’re a designer you absolutely have to add dark mode — I guess I’ll make an exception to that rule.

Before we go, here’s the entire tailwind configuration for Flexoki 2.0. Copy and paste this into your own tailwind.config.js under config. The colors have been namespaced under flexoki. For example, to set a div’s background color to red, you’d do: ... class="bg-flexoki-red-400" ...:

const config = {
  theme: {
    extend: {
      colors: {
        ...
        flexoki: {
          black: '#100F0F',
          paper: '#FFFCF0',
          // SEMANTIC
          // UI & Layout
          'bg-main': '#FFFCF0',              // bg - main background
          'bg-alt': '#F2F0E5',               // bg-2 - secondary background
          'border-base': '#282726',          // ui - borders
          'border-hover': '#343331',         // ui-2 - hovered borders
          'border-active': '#403E3C',        // ui-3 - active borders
          
          // Typography
          'text-faint': '#575653',           // tx-3 - comments, faint text
          'text-muted': '#6F6E69',           // tx-2 - punctuation, operators
          'text-primary': '#100F0F',         // tx - primary text
          
          // Status & Feedback
          'text-error': '#AF3029',           // re - errors, invalid code
          'text-warning': '#BC5215',         // or - functions, warnings
          'text-success': '#66800B',         // gr - keywords, success states
          
          // Interactive Elements
          'text-link': '#3AA99F',            // cy - links, strings
          
          // Syntax Highlighting
          'syntax-constant': '#AD8301',      // ye - constants
          'syntax-variable': '#205EA6',      // bl - variables, attributes
          'syntax-number': '#5E409D',        // pu - numbers
          'syntax-keyword': '#A02F6F',       // ma - language features
          'base': {
            '50': '#F2F0E5',
            '100': '#E6E4D9',
            '150': '#DAD8CE',
            '200': '#CECDC3',
            '300': '#B7B5AC',
            '400': '#9F9D96',
            '500': '#878580',
            '600': '#6F6E69',
            '700': '#575653',
            '800': '#403E3C',
            '850': '#343331',
            '900': '#282726',
            '950': '#1C1B1A'
          },
          light: {
            'bg': '#FFFCF0',    // paper
            'bg-2': '#F2F0E5',  // base-50
            'ui': '#E6E4D9',    // base-100
            'ui-2': '#DAD8CE',  // base-150
            'ui-3': '#CECDC3',  // base-200
            'tx': '#100F0F',    // black
            'tx-2': '#6F6E69',  // base-600
            'tx-3': '#B7B5AC',  // base-300
            're': '#AF3029',    // red-600
            'or': '#BC5215',    // orange-600
            'ye': '#AD8301',    // yellow-600
            'gr': '#66800B',    // green-600
            'cy': '#24837B',    // cyan-600
            'bl': '#205EA6',    // blue-600
            'pu': '#5E409D',    // purple-600
            'ma': '#A02F6F',    // magenta-600
            're-2': '#D14D41',  // red-400
            'or-2': '#DA702C',  // orange-400
            'ye-2': '#D0A215',  // yellow-400
            'gr-2': '#879A39',  // green-400
            'cy-2': '#3AA99F',  // cyan-400
            'bl-2': '#4385BE',  // blue-400
            'pu-2': '#8B7EC8',  // purple-400
            'ma-2': '#CE5D97',  // magenta-400
          },
          dark: {
            'bg': '#100F0F',    // black
            'bg-2': '#1C1B1A',  // base-950
            'ui': '#282726',    // base-900
            'ui-2': '#343331',  // base-850
            'ui-3': '#403E3C',  // base-800
            'tx-3': '#575653',  // base-700
            'tx-2': '#878580',  // base-500
            'tx': '#CECDC3',    // base-200
            're': '#D14D41',    // red-400
            'or': '#DA702C',    // orange-400
            'ye': '#D0A215',    // yellow-400
            'gr': '#879A39',    // green-400
            'cy': '#3AA99F',    // cyan-400
            'bl': '#4385BE',    // blue-400
            'pu': '#8B7EC8',    // purple-400
            'ma': '#CE5D97',    // magenta-400
            're-2': '#AF3029',  // red-600
            'or-2': '#BC5215',  // orange-600
            'ye-2': '#AD8301',  // yellow-600
            'gr-2': '#66800B',  // green-600
            'cy-2': '#24837B',  // cyan-600
            'bl-2': '#205EA6',  // blue-600
            'pu-2': '#5E409D',  // purple-600
            'ma-2': '#A02F6F',  // magenta-600
          },
          'red': {
            '50': '#FFE1D5',
            '100': '#FFCABB',
            '150': '#FDB2A2',
            '200': '#F89A8A',
            '300': '#E8705F',
            '400': '#D14D41',
            '500': '#C03E35',
            '600': '#AF3029',
            '700': '#942822',
            '800': '#6C201C',
            '850': '#551B18',
            '900': '#3E1715',
            '950': '#261312'
          },
          'orange': {
            '50': '#FFE1D5',
            '100': '#FFCABB',
            '150': '#FDB2A2', 
            '200': '#F89A8A',
            '300': '#E8705F',
            '400': '#D14D41',
            '500': '#C03E35',
            '600': '#AF3029',
            '700': '#942822',
            '800': '#6C201C',
            '850': '#551B18',
            '900': '#3E1715',
            '950': '#261312'
          },
          'yellow': {
            '50': '#FAEEC6',
            '100': '#F6E2A0',
            '150': '#F1D67E',
            '200': '#ECCB60',
            '300': '#DFB431',
            '400': '#D0A215',
            '500': '#BE9207',
            '600': '#AD8301',
            '700': '#8E6B01',
            '800': '#664D01',
            '850': '#503D02',
            '900': '#3A2D04',
            '950': '#241E08'
          },
          'green': {
            '50': '#EDEECF',
            '100': '#DDE2B2',
            '150': '#CDD597',
            '200': '#BEC97E',
            '300': '#A0AF54',
            '400': '#879A39',
            '500': '#768D21',
            '600': '#66800B',
            '700': '#536907',
            '800': '#3D4C07',
            '850': '#313D07',
            '900': '#252D09',
            '950': '#1A1E0C'
          },
          'cyan': {
            '50': '#DDF1E4',
            '100': '#BFE8D9',
            '150': '#A2DECE',
            '200': '#87D3C3',
            '300': '#5ABDAC',
            '400': '#3AA99F',
            '500': '#2F968D',
            '600': '#24837B',
            '700': '#1C6C66',
            '800': '#164F4A',
            '850': '#143F3C',
            '900': '#122F2C',
            '950': '#101F1D'
          },
          'blue': {
            '50': '#E1ECEB',
            '100': '#C6DDE8',
            '150': '#ABCFE2',
            '200': '#92BFDB',
            '300': '#66A0C8',
            '400': '#4385BE',
            '500': '#3171B2',
            '600': '#205EA6',
            '700': '#1A4F8C',
            '800': '#163B66',
            '850': '#133051',
            '900': '#12253B',
            '950': '#101A24'
          },
          'purple': {
            '50': '#F0EAEC',
            '100': '#E2D9E9',
            '150': '#D3CAE6',
            '200': '#C4B9E0',
            '300': '#A699D0',
            '400': '#8B7EC8',
            '500': '#735EB5',
            '600': '#5E409D',
            '700': '#4F3685',
            '800': '#3C2A62',
            '850': '#31234E',
            '900': '#261C39',
            '950': '#1A1623'
          },
          'magenta': {
            '50': '#FEE4E5',
            '100': '#FCCFDA',
            '150': '#F9B9CF',
            '200': '#F4A4C2',
            '300': '#E47DA8',
            '400': '#CE5D97',
            '500': '#B74583',
            '600': '#A02F6F',
            '700': '#87285E',
            '800': '#641F46',
            '850': '#4F1B39',
            '900': '#39172B',
            '950': '#24131D'
          },
        },
        ...
      }
    }
  }
}

And here are the css variables I’ve been messing with

:root {
  // Flexoki Colors
  --flexoki-black: #100F0F;
  --flexoki-paper: #FFFCF0;

  // UI & Layout
  --flexoki-bg: #FFFCF0;
  --flexoki-bg-alt: #F2F0E5;
  --flexoki-border-base: #282726;
  --flexoki-border-hover: #343331;
  --flexoki-border-active: #403E3C;

  // Typography  
  --flexoki-text-faint: #575653;
  --flexoki-text-muted: #878580;
  --flexoki-text-primary: #100F0F;
  --flexoki-tx: #100F0F;

  // Status & Feedback
  --flexoki-text-error: #D14D41;
  --flexoki-text-warning: #DA702C;
  --flexoki-text-success: #879A39;

  // Interactive Elements
  --flexoki-text-link: #3AA99F;

  // Syntax Highlighting
  --flexoki-syntax-constant: #D0A215;
  --flexoki-syntax-variable: #4385BE;
  --flexoki-syntax-number: #8B7EC8;
  --flexoki-syntax-keyword: #CE5D97;

  // Light Theme Colors
  --flexoki-light-bg: #FFFCF0;
  --flexoki-light-bg-2: #F2F0E5;
  --flexoki-light-ui: #E6E4D9;
  --flexoki-light-ui-2: #DAD8CE;
  --flexoki-light-ui-3: #CECDC3;
  --flexoki-light-tx: #100F0F;
  --flexoki-light-tx-2: #6F6E69;
  --flexoki-light-tx-3: #B7B5AC;

  // Dark Theme Colors  
  --flexoki-dark-bg: #100F0F;
  --flexoki-dark-bg-2: #1C1B1A;
  --flexoki-dark-ui: #282726;
  --flexoki-dark-ui-2: #343331;
  --flexoki-dark-ui-3: #403E3C;
  --flexoki-dark-tx: #CECDC3;
  --flexoki-dark-tx-2: #878580;
  --flexoki-dark-tx-3: #575653;

  // Flexoki Color Palette

  // Base
  --flexoki-base-50: #F2F0E5;
  --flexoki-base-100: #E6E4D9;
  --flexoki-base-150: #DAD8CE;
  --flexoki-base-200: #CECDC3;
  --flexoki-base-300: #B7B5AC;
  --flexoki-base-400: #9F9D96;
  --flexoki-base-500: #878580;
  --flexoki-base-600: #6F6E69;
  --flexoki-base-700: #575653;
  --flexoki-base-800: #403E3C;
  --flexoki-base-850: #343331;
  --flexoki-base-900: #282726;
  --flexoki-base-950: #1C1B1A;
  // Red
  --flexoki-red-50: #FFE1D5;
  --flexoki-red-100: #FFCABB;
  --flexoki-red-150: #FDB2A2;
  --flexoki-red-200: #F89A8A;
  --flexoki-red-300: #E8705F;
  --flexoki-red-400: #D14D41;
  --flexoki-red-500: #C03E35;
  --flexoki-red-600: #AF3029;
  --flexoki-red-700: #942822;
  --flexoki-red-800: #6C201C;
  --flexoki-red-850: #551B18;
  --flexoki-red-900: #3E1715;
  --flexoki-red-950: #261312;

  // Orange
  --flexoki-orange-50: #FFE1D5;
  --flexoki-orange-100: #FFCABB;
  --flexoki-orange-150: #FDB2A2;
  --flexoki-orange-200: #F89A8A;
  --flexoki-orange-300: #E8705F;
  --flexoki-orange-400: #D14D41;
  --flexoki-orange-500: #C03E35;
  --flexoki-orange-600: #AF3029;
  --flexoki-orange-700: #942822;
  --flexoki-orange-800: #6C201C;
  --flexoki-orange-850: #551B18;
  --flexoki-orange-900: #3E1715;
  --flexoki-orange-950: #261312;

  // Yellow
  --flexoki-yellow-50: #FAEEC6;
  --flexoki-yellow-100: #F6E2A0;
  --flexoki-yellow-150: #F1D67E;
  --flexoki-yellow-200: #ECCB60;
  --flexoki-yellow-300: #DFB431;
  --flexoki-yellow-400: #D0A215;
  --flexoki-yellow-500: #BE9207;
  --flexoki-yellow-600: #AD8301;
  --flexoki-yellow-700: #8E6B01;
  --flexoki-yellow-800: #664D01;
  --flexoki-yellow-850: #503D02;
  --flexoki-yellow-900: #3A2D04;
  --flexoki-yellow-950: #241E08;

  // Green
  --flexoki-green-50: #EDEECF;
  --flexoki-green-100: #DDE2B2;
  --flexoki-green-150: #CDD597;
  --flexoki-green-200: #BEC97E;
  --flexoki-green-300: #A0AF54;
  --flexoki-green-400: #879A39;
  --flexoki-green-500: #768D21;
  --flexoki-green-600: #66800B;
  --flexoki-green-700: #536907;
  --flexoki-green-800: #3D4C07;
  --flexoki-green-850: #313D07;
  --flexoki-green-900: #252D09;
  --flexoki-green-950: #1A1E0C;

  // Cyan
  --flexoki-cyan-50: #DDF1E4;
  --flexoki-cyan-100: #BFE8D9;
  --flexoki-cyan-150: #A2DECE;
  --flexoki-cyan-200: #87D3C3;
  --flexoki-cyan-300: #5ABDAC;
  --flexoki-cyan-400: #3AA99F;
  --flexoki-cyan-500: #2F968D;
  --flexoki-cyan-600: #24837B;
  --flexoki-cyan-700: #1C6C66;
  --flexoki-cyan-800: #164F4A;
  --flexoki-cyan-850: #143F3C;
  --flexoki-cyan-900: #122F2C;
  --flexoki-cyan-950: #101F1D;

  // Blue
  --flexoki-blue-50: #E1ECEB;
  --flexoki-blue-100: #C6DDE8;
  --flexoki-blue-150: #ABCFE2;
  --flexoki-blue-200: #92BFDB;
  --flexoki-blue-300: #66A0C8;
  --flexoki-blue-400: #4385BE;
  --flexoki-blue-500: #3171B2;
  --flexoki-blue-600: #205EA6;
  --flexoki-blue-700: #1A4F8C;
  --flexoki-blue-800: #163B66;
  --flexoki-blue-850: #133051;
  --flexoki-blue-900: #12253B;
  --flexoki-blue-950: #101A24;

  // Purple
  --flexoki-purple-50: #F0EAEC;
  --flexoki-purple-100: #E2D9E9;
  --flexoki-purple-150: #D3CAE6;
  --flexoki-purple-200: #C4B9E0;
  --flexoki-purple-300: #A699D0;
  --flexoki-purple-400: #8B7EC8;
  --flexoki-purple-500: #735EB5;
  --flexoki-purple-600: #5E409D;
  --flexoki-purple-700: #4F3685;
  --flexoki-purple-800: #3C2A62;
  --flexoki-purple-850: #31234E;
  --flexoki-purple-900: #261C39;
  --flexoki-purple-950: #1A1623;

  // Magenta
  --flexoki-magenta-50: #FEE4E5;
  --flexoki-magenta-100: #FCCFDA;
  --flexoki-magenta-150: #F9B9CF;
  --flexoki-magenta-200: #F4A4C2;
  --flexoki-magenta-300: #E47DA8;
  --flexoki-magenta-400: #CE5D97;
  --flexoki-magenta-500: #B74583;
  --flexoki-magenta-600: #A02F6F;
  --flexoki-magenta-700: #87285E;
  --flexoki-magenta-800: #641F46;
  --flexoki-magenta-850: #4F1B39;
  --flexoki-magenta-900: #39172B;
  --flexoki-magenta-950: #24131D;
}

Trying on a new pair of palettes