Bojicas Design System
Version 0.3.0
The Bojicas Design System gives my public pages one look and one voice: bojica.com, silviu.bojica.com and orgthread.dev, and later slides and documents. This page shows it at a glance, and it is built with the system itself.
The files, the full docs and the licences are on GitHub. The code is under the MIT licence, the docs under CC BY 4.0, and the two fonts under the SIL Open Font License.
Colours
Each colour has a value for light mode and one for dark mode. Blue and orange carry the page. Never red, and never black as an accent.
- bglight #FAFBFC · dark #0F1B2DPage background.
- cardlight #FFFFFF · dark #15243ACards and raised panels on the page background.
- inklight #14233A · dark #E4ECF5Body text and headings. A deep navy, never pure black.
- mutedlight #4A5A70 · dark #9AAABDSecondary text: labels, captions, the footer, the role line.
- linelight #DDE3EA · dark #2A3A52Hairline borders of cards and avatars, dividers.
- bluelight #226DBD · dark #6AA6E8The main colour: links, buttons, focus rings in light mode.
- orangelight #E8740C · dark #F28C28The second colour: accent bars, arrows, the dots between footer items, list markers, focus rings in dark mode. Never for small text on the light background.
- paperlight #FAFBFC · dark #F2F4F7The ground behind pen drawings, so they keep their white paper in dark mode.
Fonts
Space Grotesk, for all text
JetBrains Mono, for small labels
Both fonts are served from this site, so no visitor data goes to a font service.
Arrows
An arrow tells the reader, before the click, where a link goes.
| Where the link goes | Button | Link in text |
|---|---|---|
| A page of the same site | → | no mark |
| Another of my own sites | → | no mark |
| A site of someone else | ↗ | ↗, small and orange |
Components
Buttons
Eyebrow
A small label with an orange bar
Tags
Links in text
A link to a page of this site, such as the posts, has no mark. A link to someone else's site, such as Unsplash, ends in a small ↗.
Facts
- Version
- 0.3.0
- Licence
- MIT for the code, CC BY 4.0 for the docs, SIL Open Font License for the fonts
- Source
- github.com/bojicas/bojicas-design-system
The back link at the top of this page and the footer at the bottom are components too.