Skip to content
Kern
Get Kern

A foundation for considered design

Kern brings typography, color, spacing, and structure into a consistent visual system for brands, websites, and interfaces.

Get Kern ↓Explore typography
A fictional studio brought to life with Kern

A shared language

Start with the foundations, choose the controls, and compose the layout. Every part shares the same typography, color roles, and rhythm.

Typography

Body, Subheading, and Display, plus a complete prose treatment. Inter for the interface. JetBrains Mono for code.

Explore typography
Badge

Components

Everyday controls, navigation, and feedback. Native HTML where it fits, with optional JavaScript for richer interactions.

Browse the library

Sections

Text layouts, feature grids, quotes, pricing, and more. Responsive building blocks with HTML ready to copy and adapt.

Compose a page

Typography with purpose

A 16px base for everyday reading, a more defined voice for supporting messages, and a larger scale for ideas that need emphasis.

Find the right style

Body

10–48px

Good design begins with a clear thought

The words come first. Give them a comfortable pace, a familiar rhythm, and enough room to make the idea understood.

Explore Body

A palette for expression

Neutral tones with shared color roles that adapt to light and dark.

Select a color to copy its token

Space for every idea

Built on a 4px unit, with generous gaps for cards, text, and larger compositions.

Explore layouts
32pxSpace between cards
48pxSpace between rows
64–96pxSpace between columns

Build with Kern

Copy the Kern folder into a Tailwind v4+ project. Import the styles and build with HTML.

  1. Project assets

    Copy the Kern folder, keeping its styles, icons, and scripts together.

  2. Styles and effects

    Load the base stylesheet first, then add UI for components and effects for animation.

  3. Component and section examples

    Copy component or section HTML, then adapt the content and layout to the project.

CSS

@import "./Kern/css/kern-base.css";
@import "./Kern/css/kern-ui.css";
@import "./Kern/css/kern-effects.css";

Adjust paths to the project; the base stylesheet already imports Tailwind

JavaScript

Variants marked js need Kern’s script. Load Kern/js/kern.js once in the document head, before page content, to apply the saved appearance early. Copied examples do not require Astro.

Ready for the next project

Typography, components, and layouts in one portable folder.

Get Kern