A design system in the style of a risograph print, made to be reused: design tokens, 12 colour skins, light and black paper, three corner sets and a full component set in HTML, CSS and SCSS, plus a Figma library with the same tokens and components. Cream paper, thick ink lines, hard offset shadows in a second ink, words highlighted slightly out of register, halftone dots and stamps.

Every class starts with ok-, so the kit sits next to Bootstrap, Tailwind or your own CSS without clashes. Link one CSS file and it works; with Sass you set your own colours, fonts and corners in one line and add your own components with the same mixins and tokens the kit uses.

What's included

• 14 overview pages with 113 live examples, each with the code to copy: Foundations, Print devices, Buttons, Forms, Cards, Navigation, Feedback, Overlays, Data, Media, Layout, Page blocks, plus the overview and the documentation
• Design tokens in four formats: Sass settings, CSS custom properties (--ok-*), W3C design tokens (tokens/oktavo-ui.tokens.json) and Figma variables (tokens/oktavo-ui.figma.json)
• 12 skins (ink pairs): Fluo, Tangerine, Sunflower, Mint, Scarlet, Lagoon, Lilac, Lemon, Coral, Grape, Forest and Mono, each on light and on black paper
• Components: buttons, icon buttons, groups, text fields, checkboxes, radios, switches, range, rating, special fields and form layouts; cards (feature, quote, price, product, profile, post, photo, stat, ticket, empty state); navbar, tabs, pills, breadcrumb, pagination, steps, side navigation, table of contents, footer; alerts, callouts, banners, toasts, badges, chips, tags, progress, spinners, skeletons; dialog, drawer, menu, popover, tooltip, command palette, dropdown, accordion; tables, stats, CSS charts, lists, timeline, mini calendar, kanban, files, chat, code blocks; figure, gallery, carousel, video poster, logo strip
• Print devices: highlighted words, kickers and plates, stamps, stickers, tape, halftone and grain, duotone pictures and dividers
• Layout helpers: container, stack, cluster, auto-fitting grid, column grids, split, sidebar and sections
• Page blocks built only from the kit: heroes, features, process, pricing, testimonials, FAQ, calls to action, newsletter, sign-in, error page and an app shell
• Figma library (figma/Oktavo UI Kit.fig): variable collections Theme, Skins 1–6, Skins 7–12 (the 12 skins as variable modes), Shape and Scale; text and shadow styles; colour styles for plans without variable modes; 26 components and component sets with variants named after the CSS classes; pages Cover, Getting started, Foundations, Buttons, Forms, Feedback, Content, Navigation, Print devices and Previews
• Starter folder: an example project that adds its own on-style components with the kit's Sass API, without touching the kit
• HTML documentation (15 chapters), readable and minified CSS and JS, SCSS sources

Features

• One attribute switches the look: data-ok-skin="mint", data-ok-theme="dark" or data-ok-radius="sharp" on the page or on any single element, for example one dark card on a light page
• Light, dark and auto paper: black paper is a full dark mode, and every skin has its own dark inks
• Public Sass API: settings, functions and mixins (ok.surface, ok.offset-shadow, ok.halftone-field, ok.focus-ring and more), so new components look like the rest
• Component tokens: every button, card or field variant is a few custom properties, so a new variant is a few lines of CSS
• Optional small script (about 12 KB minified) for tabs, dialogs, drawers, menus, toasts, copy buttons, table sorting and the theme and skin buttons; settings are remembered and applied before the page paints, so there is no flash
• Copy buttons on every example, and the documentation shows the folder structure, the install steps, the Sass API and how to add a component
• Same names in code and in Figma: Figma variables have the CSS names as code syntax (var(--ok-brand)), and component variants follow the classes (Variant=Brand is .ok-btn-brand)
• Accessible: text colours of every skin pass WCAG AA on light and black paper, visible focus, native inputs and dialogs, ARIA tabs and menus, 44 px click targets, reduced-motion support; the overview pages are checked with axe in light and dark
• Self-hosted fonts (Bricolage Grotesque, Instrument Sans, JetBrains Mono), no requests to other servers
• No framework, no jQuery, no build step needed to use it

Technical details

• HTML5, CSS (custom properties, color-mix(), :has(), :where()), SCSS for Dart Sass 1.60 or newer, plain JavaScript
• Works with or without Bootstrap, Tailwind or any other CSS; all classes start with ok-
• Tested in the latest Chrome, Edge, Firefox and Safari, at phone, tablet and desktop widths, in light and dark
• Figma file: made for Figma Professional (10 modes per collection, so the 12 skins are in two collections of six). On the free Starter plan the existing modes can be used but not added; the included colour styles recolour instead

Good to know

• This is a UI kit and design system, not a website template. The overview pages show each component with sample content; you build your own pages from the components and page blocks.
• The Figma library is a .fig file that you import into your own Figma account. Publishing it as a shared team library needs a paid Figma plan.
• The script is optional: components that open or switch (tabs, dialogs, toasts, sorting) need it, the rest is CSS only.
• Bootstrap Icons are used in the examples only; the kit works with any icon set.
• All names, figures and texts in the examples are fictional sample content.

Credits

• Bricolage Grotesque, Instrument Sans and JetBrains Mono: SIL Open Font License 1.1, included with their licence files
• Bootstrap Icons (in the examples only): MIT, included with its licence file
• Sample pictures were drawn for the kit and may be used with it

Changelog

Version 1.0.0 (2026-10-28)

Added

• First release
• 14 overview pages with 113 live examples, each with the code to copy
• Design tokens as Sass settings, CSS custom properties, W3C design tokens and Figma variables
• 12 skins, light, dark and auto paper, and three corner sets (soft, sharp, round), switchable on the page or on any element
• Components, print devices, layout helpers and page blocks in HTML, CSS and SCSS, with an optional small script
• Public Sass API and a starter folder for your own on-style components
• Figma library: variables with the 12 skins as modes, text, shadow and colour styles, and 26 components with variants
• HTML documentation