A New Era
I'm redesigning my overall 'brand' and I explain why in this post.
Published 26/01/2025As you can see my site has a new look! I’ve been working on this new layout and I’m excited to share it with yall.
Why the Change?
Over the past month, I’ve been wanting to create my own design system/color palette for a long time… and I finally did it! I’m calling it “afterdark” and it’s inspired by the Swiss design style. I’m also using two fonts: Neue Haas Grotesk and Iosevka Term.
afterdark In Depth
I wanted to create a design system that was simple, clean, and easy to read. I’ve always been a fan of the Swiss design style and I wanted to create a design system that was inspired by it. I also wanted to create a color palette that was easy on the eyes and easy to read.
Concepts
- There is only 1 background color:
#141414
. Why use colors for different layers when you can just use one color and slap a border on it?
Typography
- I’m using two fonts: Neue Haas Grotesk and Iosevka Term. I wanted to use a sans-serif font for the readable content and Iosevka Term for the interface font. This choice was inspired by Obsidian, in the way they allow you to choose a font for the interface and a font for the content.
What is readable content?
Readable content is the main content of a page… like this blog post! It’s important to have a font that is easy to read and easy on the eyes (especially for long-form content).
What is the interface font?
The interface font is the font used for the UI of the site. This includes buttons, links, and other elements that are not part of the main content.
Color Palette
type | name | purpose | hex | hsl |
---|---|---|---|---|
utility | dark | shadows, overlays | #0A0A0A | hsl(0, 0%, 4%) |
^^ | white | #FFFFFF | hsl(0, 0%, 100%) | |
neutral | base | #141414 | hsl(0, 0%, 8%) | |
^^ | surface 0 | interior borders | #292929 | hsl(0, 0%, 16%) |
^^ | surface 1 | exterior borders | #525252 | hsl(0, 0%, 32%) |
^^ | subtext 0 | #828287 | hsl(240, 2%, 52%) | |
^^ | subtext 1 | #9A9A9E | hsl(240, 2%, 61%) | |
^^ | text | #CBCBCD | hsl(240, 2%, 80%) | |
color | red | decline, danger | #F23F4F | hsl(355, 87%, 60%) |
^^ | orange | warning | #EE6748 | hsl(11, 83%, 61%) |
^^ | yellow | #fa9f50 | hsl(28, 94%, 65%) | |
^^ | green | primary | #52eea3 | hsl(151, 82%, 63%) |
^^ | cyan | #51e1e9 | hsl(183, 78%, 62%) | |
^^ | blue | #437cf3 | hsl(221, 88%, 61%) | |
^^ | purple | #6f51f4 | hsl(251, 88%, 64%) | |
^^ | pink | #e54f9b | hsl(330, 74%, 60%) |
Conclusion
I’m excited to share this new design system with yall and I hope you like it! I’m probably gonna tweak it a bit over time and also create a Figma file with resuable components! See ya later!