olehomelchenko.com/themes-guide.md at ccf76a56168477f30e63fe959c45c621fb82f31d

oleh/olehomelchenko.com

Fork 0

mirror of https://github.com/olehomelchenko/olehomelchenko.com.git synced 2026-02-05 02:54:37 +00:00

Files

Oleh Omelchenko ccf76a5616 feat: custom theme

2026-01-10 05:15:42 +02:00

6.7 KiB

Raw Blame History

Personal Design System

Brand Colors

Role	Hex	Usage
Primary Blue	`#1789fc`	UI accents, links, interactive elements
Primary Yellow	`#fdb833`	Highlights, secondary accents
Text	`#2d2a26`	Body text, headings
Background	`#f5f3f0`	Page background

Data Visualization

Categorical (8 colors): #296EB4 #FDB833 #CCE160 #9FDFDC #8A983E #C7C7FA #D02F2F #A62191

Sequential: Ramps derived from #1789fc (blue) or #fdb833 (yellow)

Diverging: Blue ↔ neutral midpoint ↔ Yellow

Typography

Role	Font
Headings	Finlandica
Body	IBM Plex Sans
Code	IBM Plex Mono

Design Principles

Sharp corners, no border-radius
Solid fills over gradients
Light mode only
Colorblind-safe palette

Font instructions from Google Fonts

Code below was generated by Google Fonts:


Embed code in the <head> of your html

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Finlandica:ital,wght@0,400..700;1,400..700&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">



IBM Plex Sans: CSS class for a variable style


.ibm-plex-sans-<uniquifier> {
  font-family: "IBM Plex Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}


Finlandica: CSS class for a variable style


.finlandica-<uniquifier> {
  font-family: "Finlandica", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

IBM Plex Mono: CSS classes

.ibm-plex-mono-thin {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 100;
  font-style: normal;
}

.ibm-plex-mono-extralight {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 200;
  font-style: normal;
}

.ibm-plex-mono-light {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 300;
  font-style: normal;
}

.ibm-plex-mono-regular {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

.ibm-plex-mono-medium {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-style: normal;
}

.ibm-plex-mono-semibold {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-style: normal;
}

.ibm-plex-mono-bold {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  font-style: normal;
}

.ibm-plex-mono-thin-italic {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 100;
  font-style: italic;
}

.ibm-plex-mono-extralight-italic {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 200;
  font-style: italic;
}

.ibm-plex-mono-light-italic {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 300;
  font-style: italic;
}

.ibm-plex-mono-regular-italic {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 400;
  font-style: italic;
}

.ibm-plex-mono-medium-italic {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-style: italic;
}

.ibm-plex-mono-semibold-italic {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-style: italic;
}

.ibm-plex-mono-bold-italic {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  font-style: italic;
}

Colors for website theme

The code below was generated by Realtime Colors website.

General variables:

:root[data-theme="light"] {
  --text: #2c2a26;
  --background: #f5f3f0;
  --primary: #296eb3;
  --secondary: #fdba35;
  --accent: #188afb;
}
:root[data-theme="dark"] {
  --text: #d9d7d3;
  --background: #0f0d0a;
  --primary: #4c91d6;
  --secondary: #ca8702;
  --accent: #0475e7;
}

Option with shades:

:root[data-theme="light"] {
  --text-50: #f3f3f1;
  --text-100: #e7e6e4;
  --text-200: #d0cdc8;
  --text-300: #b8b4ad;
  --text-400: #a09b92;
  --text-500: #888277;
  --text-600: #6d685f;
  --text-700: #524e47;
  --text-800: #37342f;
  --text-900: #1b1a18;
  --text-950: #0e0d0c;

  --background-50: #f5f3f0;
  --background-100: #ebe7e0;
  --background-200: #d6cec2;
  --background-300: #c2b6a3;
  --background-400: #ad9d85;
  --background-500: #998566;
  --background-600: #7a6a52;
  --background-700: #5c503d;
  --background-800: #3d3529;
  --background-900: #1f1b14;
  --background-950: #0f0d0a;

  --primary-50: #eaf2fa;
  --primary-100: #d5e5f6;
  --primary-200: #acccec;
  --primary-300: #82b2e3;
  --primary-400: #5999d9;
  --primary-500: #2f7fd0;
  --primary-600: #2666a6;
  --primary-700: #1c4c7d;
  --primary-800: #133353;
  --primary-900: #09192a;
  --primary-950: #050d15;

  --secondary-50: #fff6e6;
  --secondary-100: #feeecd;
  --secondary-200: #fedd9a;
  --secondary-300: #fdcb68;
  --secondary-400: #fdba35;
  --secondary-500: #fca903;
  --secondary-600: #ca8702;
  --secondary-700: #976502;
  --secondary-800: #654401;
  --secondary-900: #322201;
  --secondary-950: #191100;

  --accent-50: #e6f2ff;
  --accent-100: #cde5fe;
  --accent-200: #9bccfd;
  --accent-300: #68b2fd;
  --accent-400: #3699fc;
  --accent-500: #047ffb;
  --accent-600: #0366c9;
  --accent-700: #024c97;
  --accent-800: #023364;
  --accent-900: #011932;
  --accent-950: #000d19;

}
:root[data-theme="dark"] {
  --text-50: #0e0d0c;
  --text-100: #1b1a18;
  --text-200: #37342f;
  --text-300: #524e47;
  --text-400: #6d685f;
  --text-500: #888277;
  --text-600: #a09b92;
  --text-700: #b8b4ad;
  --text-800: #d0cdc8;
  --text-900: #e7e6e4;
  --text-950: #f3f3f1;

  --background-50: #0f0d0a;
  --background-100: #1f1b14;
  --background-200: #3d3529;
  --background-300: #5c503d;
  --background-400: #7a6a52;
  --background-500: #998566;
  --background-600: #ad9d85;
  --background-700: #c2b6a3;
  --background-800: #d6cec2;
  --background-900: #ebe7e0;
  --background-950: #f5f3f0;

  --primary-50: #050d15;
  --primary-100: #09192a;
  --primary-200: #133353;
  --primary-300: #1c4c7d;
  --primary-400: #2666a6;
  --primary-500: #2f7fd0;
  --primary-600: #5999d9;
  --primary-700: #82b2e3;
  --primary-800: #acccec;
  --primary-900: #d5e5f6;
  --primary-950: #eaf2fa;

  --secondary-50: #191100;
  --secondary-100: #322201;
  --secondary-200: #654401;
  --secondary-300: #976502;
  --secondary-400: #ca8702;
  --secondary-500: #fca903;
  --secondary-600: #fdba35;
  --secondary-700: #fdcb68;
  --secondary-800: #fedd9a;
  --secondary-900: #feeecd;
  --secondary-950: #fff6e6;

  --accent-50: #000d19;
  --accent-100: #011932;
  --accent-200: #023364;
  --accent-300: #024c97;
  --accent-400: #0366c9;
  --accent-500: #047ffb;
  --accent-600: #3699fc;
  --accent-700: #68b2fd;
  --accent-800: #9bccfd;
  --accent-900: #cde5fe;
  --accent-950: #e6f2ff;

}

6.7 KiB Raw Blame History