Overview

Thykes is a design system for product web interfaces: design tokens and ready-made components that you load with two lines and write as plain HTML.

Thykes gives you the parts of an app screen: buttons, fields, menus, dialogs, tables, navigation, and the colors, type and spacing they share. Every component is a tk-* custom element, so it works in plain HTML and in any framework.

Create project

Cancel

<tk-button variant="primary">Create project</tk-button>
<tk-button>Cancel</tk-button>

It is for people building product interfaces on the web: app screens, settings, forms, dashboards. Native mobile apps and marketing sites are outside its scope.

What you get

Tokens: colors, type, spacing, radius, shadows and motion as CSS custom properties, such as --surface-page or --space-16.
Components: each with its own page of examples, API and accessibility notes.
Three themes: light, dark and high contrast, plus a choice of primary color. Use high contrast where your product must meet the WCAG 2.2 AA contrast minimums. In light and dark a few pairs fall below them, and component pages name those pairs.
Accessibility built in: keyboard support, focus rings and screen-reader names come with each component. Each page lists what is left for you to do.

How the docs are organized

Getting started: load the library and build a first page.
Foundations: color, typography, spacing, radius, elevation, focus, motion, icons and aspect ratio. The tokens and the rules for using them.
Components: one page per component, with usage, API and accessibility tabs. Patterns, such as the Page header, show how to combine components.
Content: how to write the words in your interface: voice and tone, action labels, messages, errors, empty states and a word list.
API conventions: the names and patterns every component shares, so you can guess an API before you look it up.