Skip to content
Kinetic

Kinetic Design System

Build consistent, accessible user interfaces with Kin's design system.
Get Started View Components

Design Tokens

Platform-agnostic variables that represent the look and feel of our brand. Use tokens for colors, typography, spacing, and more.

Learn More →

CSS Framework

Utilities, objects, and components that serve as building blocks for your applications. Built with SCSS and design tokens.

Learn More →

Web Components

Framework-agnostic UI components built with Lit. Encapsulated styles and behavior that work with any tech stack.

Learn More →

Typography

Everything you need to present content clearly and efficiently. Web fonts, type scale, and text utilities.

Learn More →

Icons

A comprehensive icon library designed for Kin applications. Consistent sizing and styling across all icons.

Learn More →

Figma

Design and build with our Kinetic components in Figma. Access the complete design system library.

View in Figma →

Quick Start

Install the packages you need:

Terminal window
# CSS Framework
npm install @kin/css


# Web Components
npm install @kin/web-components


# Icons
npm install @kin/icons

Or use our CDN for quick prototyping:

<link rel="stylesheet" href="https://assets.ui.kin.insure/@kin/css@latest/index.css">
<script type="module" src="https://assets.ui.kin.insure/@kin/web-components@latest/bundle.min.js"></script>

Resources