gökberk design system
I'm not a brand. I built the design system anyway — and I use it on my hobby projects.
gökberk is a personal studio identity — minimal and editorial. A near-neutral canvas, one earned
forest-green accent (#1a5a34 light / #86dd8a dark), and a single typeface (Geist) doing the work.
The components are framework-agnostic web components built with Lit that read only
CSS custom properties — so they drop into React, Vue, Svelte, or plain HTML.
Live site · Storybook · See it in use
Install
npm i @gokberknur/design-systemQuick start
Load the foundation once, then import the elements you use:
import '@gokberknur/design-system/standalone.css'; // fonts + tokens + typography + layout
import '@gokberknur/design-system/gok-button'; // register an element (side-effect import)<gok-button>Get started</gok-button>The component reads the tokens, so theming and density work the moment the CSS is loaded.
Theming
One attribute on the root re-themes everything (it cascades into shadow DOM):
<html data-theme="dark" data-density="compact"></html>data-theme is light · dark · auto; data-density is regular · compact. Every colour
pairing is verified WCAG AAA on both themes.
What's inside
46 custom elements across 33 families, plus the foundation layer — design tokens, a responsive type scale, self-hosted Geist. Grouped as Actions & Inputs · Feedback · Navigation · Overlay · Data display.
gok-element prefix ·--gok-*token prefix.- Each element ships axe-clean, with bundled TypeScript types and a
custom-elements.jsonmanifest. - Tree-shakeable — import only what you use, or
@gokberknur/design-system/standaloneto register everything at once.
Explore
- Foundations (tokens · type · colour) — https://design.gokberk.se/site/
- Components, live with controls — https://design.gokberk.se/storybook/
- See it in a real app — gokberk-tools, a SvelteKit storefront that consumes this package, and https://gokberk.se.
Licence
MIT (code). Geist & Geist Mono are under the SIL Open Font License 1.1. Built by Gökberk Nur.