Robert Birming

Bearming palettes

Bearming palettes

The palette options for Bearming let you swap the entire color scheme of your blog without touching the rest of the theme.

Each palette includes colors and optional settings. Replace the ones in your theme with a new set and the whole look changes.1

The palettes library was last updated 6 days, 7 hours ago.

Amber

Editorial and expressive, with golden amber tones and a font combo that means business.

/* Palette: Amber */
@import url('https://fonts.bunny.net/css?family=bricolage-grotesque:600,700,800|dm-sans:400,400i,500&display=swap');

:root {
  color-scheme: light dark;

  /* Layout */
  --page-width: 65ch;
  --line-height: 1.65;
  --space-block: 1.8rem;
  --radius: 5px;

  /* Typography */
  --font-heading: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: ui-monospace, monospace;
  --font-size: 1.0625rem;
  --font-small: calc(var(--font-size) * 0.875);

  /* Light */
  --bg: #f5f1eb;
  --text: #2a1e0e;
  --link: #a0651a;
  --visited: #7a5540;
  --accent: var(--link);
  --muted: color-mix(in srgb, var(--accent) 15%, color-mix(in srgb, var(--text) 65%, var(--bg)));
  --surface: color-mix(in srgb, var(--accent) 7%, var(--bg));
  --border: color-mix(in srgb, var(--accent) 20%, var(--bg));
}

@media (prefers-color-scheme: dark) {
:root {

  /* Dark */
  --bg: #1c1710;
  --text: #d2cdbf;
  --link: #e8a83c;
  --visited: #c49070;
  --surface: color-mix(in srgb, var(--accent) 13%, var(--bg));
  --border: color-mix(in srgb, var(--accent) 30%, var(--bg));
  --muted: color-mix(in srgb, var(--accent) 10%, color-mix(in srgb, var(--text) 80%, var(--bg)));
}
}

Bear

A faithful recreation of Bear's default look, built on Bearming tokens.

/* Palette: Bear */
:root {
  color-scheme: light dark;

  /* Layout */
  --page-width: 720px;
  --line-height: 1.6;
  --space-block: 1.8rem;
  --radius: 3px;

  /* Typography */
  --font-heading: Verdana, sans-serif;
  --font-body: Verdana, sans-serif;
  --font-mono: ui-monospace, monospace;
  --font-size: 1em;
  --font-small: calc(var(--font-size) * 0.875);

  /* Light */
  --bg: #ffffff;
  --text: #444444;
  --link: #3273dc;
  --visited: #8b6fcb;
  --accent: var(--link);
  --muted: color-mix(in srgb, var(--accent) 15%, color-mix(in srgb, var(--text) 65%, var(--bg)));
  --surface: color-mix(in srgb, var(--accent) 7%, var(--bg));
  --border: color-mix(in srgb, var(--accent) 20%, var(--bg));
}

@media (prefers-color-scheme: dark) {
:root {

  /* Dark */
  --bg: #01242e;
  --text: #dddddd;
  --link: #8cc2dd;
  --visited: #8b6fcb;
  --surface: color-mix(in srgb, var(--accent) 13%, var(--bg));
  --border: color-mix(in srgb, var(--accent) 30%, var(--bg));
  --muted: color-mix(in srgb, var(--accent) 10%, color-mix(in srgb, var(--text) 80%, var(--bg)));
}
}

Bloom

Raspberry links, orange surfaces. Personal, punchy, and very much yours.

/* Palette: Bloom */
@import url('https://fonts.bunny.net/css?family=playfair-display:700,800|lato:400,400i,700&display=swap');

:root {
  color-scheme: light dark;

  /* Layout */
  --page-width: 68ch;
  --line-height: 1.65;
  --space-block: 1.8rem;
  --radius: 5px;

  /* Typography */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Lato', system-ui, sans-serif;
  --font-mono: ui-monospace, monospace;
  --font-size: 1.0625rem;
  --font-small: calc(var(--font-size) * 0.875);

  /* Light */
  --bg: #fdf4f7;
  --text: #2a1218;
  --link: #c2387a;
  --visited: #9b6080;
  --accent: #e0723a;
  --muted: color-mix(in srgb, var(--accent) 15%, color-mix(in srgb, var(--text) 65%, var(--bg)));
  --surface: color-mix(in srgb, var(--accent) 7%, var(--bg));
  --border: color-mix(in srgb, var(--accent) 20%, var(--bg));
}

@media (prefers-color-scheme: dark) {
:root {

  /* Dark */
  --bg: #1e1218;
  --text: #f0e4eb;
  --link: #e87ab0;
  --visited: #c49aaa;
  --accent: #e89060;
  --surface: color-mix(in srgb, var(--accent) 13%, var(--bg));
  --border: color-mix(in srgb, var(--accent) 30%, var(--bg));
  --muted: color-mix(in srgb, var(--accent) 10%, color-mix(in srgb, var(--text) 80%, var(--bg)));
}
}

Café

Creamy tones and serif typography. Made for slow reading and long posts.

/* Palette: Café */
:root {
  color-scheme: light dark;

  /* Layout */
  --page-width: 65ch;
  --line-height: 1.7;
  --space-block: 1.8rem;
  --radius: 4px;

  /* Typography */
  --font-heading: Georgia, 'Times New Roman', serif;
  --font-body: Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, monospace;
  --font-size: 1.0625rem;
  --font-small: calc(var(--font-size) * 0.875);

  /* Light */
  --bg: #f5efe6;
  --text: #2c2119;
  --link: #8b4c26;
  --visited: #7a5e6b;
  --accent: var(--link);
  --muted: color-mix(in srgb, var(--accent) 15%, color-mix(in srgb, var(--text) 65%, var(--bg)));
  --surface: color-mix(in srgb, var(--accent) 7%, var(--bg));
  --border: color-mix(in srgb, var(--accent) 20%, var(--bg));
}

@media (prefers-color-scheme: dark) {
:root {

  /* Dark */
  --bg: #1d1814;
  --text: #e4dbd0;
  --link: #d4956a;
  --visited: #b89aaa;
  --surface: color-mix(in srgb, var(--accent) 13%, var(--bg));
  --border: color-mix(in srgb, var(--accent) 30%, var(--bg));
  --muted: color-mix(in srgb, var(--accent) 10%, color-mix(in srgb, var(--text) 80%, var(--bg)));
}
}

Forest

Green undertones and an earthy feel. Like reading somewhere quiet.

/* Palette: Forest */
:root {
  color-scheme: light dark;

  /* Layout */
  --page-width: 65ch;
  --line-height: 1.65;
  --space-block: 1.8rem;
  --radius: 4px;

  /* Typography */
  --font-heading: system-ui, sans-serif;
  --font-body: system-ui, sans-serif;
  --font-mono: ui-monospace, monospace;
  --font-size: 1.0625rem;
  --font-small: calc(var(--font-size) * 0.875);

  /* Light */
  --bg: #f4f6f2;
  --text: #2f332f;
  --link: #3a7d5a;
  --visited: #847665;
  --accent: var(--link);
  --muted: color-mix(in srgb, var(--accent) 15%, color-mix(in srgb, var(--text) 65%, var(--bg)));
  --surface: color-mix(in srgb, var(--accent) 7%, var(--bg));
  --border: color-mix(in srgb, var(--accent) 20%, var(--bg));
}

@media (prefers-color-scheme: dark) {
:root {

  /* Dark */
  --bg: #1a1f1b;
  --text: #e4e8e3;
  --link: #7bc096;
  --visited: #b0a294;
  --surface: color-mix(in srgb, var(--accent) 13%, var(--bg));
  --border: color-mix(in srgb, var(--accent) 30%, var(--bg));
  --muted: color-mix(in srgb, var(--accent) 10%, color-mix(in srgb, var(--text) 80%, var(--bg)));
}
}

Lavender

Purple links and open spacing. Clean, considered, and just a little dreamy.

/* Palette: Lavender */
@import url('https://fonts.bunny.net/css?family=lexend:700,800|inter:400,400i,500,700&display=swap');

:root {
  color-scheme: light dark;

  /* Layout */
  --page-width: 65ch;
  --line-height: 1.65;
  --space-block: 2rem;
  --radius: 7px;

  /* Typography */
  --font-heading: 'Lexend', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, monospace;
  --font-size: 1rem;
  --font-small: calc(var(--font-size) * 0.875);

  /* Light */
  --bg: #f7f5fb;
  --text: #24212c;
  --link: #6f3fd6;
  --visited: #8f4a7a;
  --accent: var(--link);
  --muted: color-mix(in srgb, var(--accent) 15%, color-mix(in srgb, var(--text) 65%, var(--bg)));
  --surface: color-mix(in srgb, var(--accent) 7%, var(--bg));
  --border: color-mix(in srgb, var(--accent) 20%, var(--bg));
}

@media (prefers-color-scheme: dark) {
:root {

  /* Dark */
  --bg: #17141f;
  --text: #e8e4f2;
  --link: #b399ff;
  --visited: #e0a3c2;
  --surface: color-mix(in srgb, var(--accent) 13%, var(--bg));
  --border: color-mix(in srgb, var(--accent) 30%, var(--bg));
  --muted: color-mix(in srgb, var(--accent) 10%, color-mix(in srgb, var(--text) 80%, var(--bg)));
}
}

Studio

Teal links, pink surfaces, expressive headings. Made for the creative and cheerful blogger.

/* Palette: Studio */
@import url('https://fonts.bunny.net/css?family=fraunces:700,800|nunito:400,400i,600&display=swap');

:root {
  color-scheme: light dark;

  /* Layout */
  --page-width: 66ch;
  --line-height: 1.65;
  --space-block: 1.8rem;
  --radius: 5px;

  /* Typography */
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --font-mono: ui-monospace, monospace;
  --font-size: 1.0625rem;
  --font-small: calc(var(--font-size) * 0.875);

  /* Light */
  --bg: #fdf8f2;
  --text: #1e1828;
  --link: #0a8f8a;
  --visited: #7a60a0;
  --accent: #e0407a;
  --muted: color-mix(in srgb, var(--accent) 15%, color-mix(in srgb, var(--text) 65%, var(--bg)));
  --surface: color-mix(in srgb, var(--accent) 7%, var(--bg));
  --border: color-mix(in srgb, var(--accent) 20%, var(--bg));
}

@media (prefers-color-scheme: dark) {
:root {

  /* Dark */
  --bg: #13121e;
  --text: #ede8f8;
  --link: #38c8c0;
  --visited: #b090d8;
  --accent: #f06898;
  --surface: color-mix(in srgb, var(--accent) 13%, var(--bg));
  --border: color-mix(in srgb, var(--accent) 30%, var(--bg));
  --muted: color-mix(in srgb, var(--accent) 10%, color-mix(in srgb, var(--text) 80%, var(--bg)));
}
}

  1. Built for the Bearming theme. Using a different theme? Add the Bearming tokens to make them work with your setup.↩