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 UI identity, with a minimal approach and minimal accent colours. The components are framework-agnostic web components built with Lit, so they can be used with any popular JavaScript library — React, Angular, Vue, Svelte, or vanilla JS.
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
58 custom elements across 45 families, plus the foundation layer — design tokens, a responsive type scale, self-hosted Geist. Grouped as Actions & Inputs · Feedback · Navigation · Overlay · Data display · Layout.
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 — https://bank.gokberk.se, a banking app built on this package.
Licence
MIT (code). Geist & Geist Mono are under the SIL Open Font License 1.1. Built by Gökberk Nur.