## 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 of your html
IBM Plex Sans: CSS class for a variable style
.ibm-plex-sans- {
font-family: "IBM Plex Sans", sans-serif;
font-optical-sizing: auto;
font-weight: ;
font-style: normal;
font-variation-settings:
"wdth" 100;
}
Finlandica: CSS class for a variable style
.finlandica- {
font-family: "Finlandica", sans-serif;
font-optical-sizing: auto;
font-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;
}
```