Typography
Type scale, inline elements, and stylistic utilities for text.
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
<h1 class="kds-h1">Heading 1</h1>
<h2 class="kds-h2">Heading 2</h2>
<h3 class="kds-h3">Heading 3</h3>
<h4 class="kds-h4">Heading 4</h4>
<h5 class="kds-h5">Heading 5</h5>
<h6 class="kds-h6">Heading 6</h6>
Text Styles
Extra small — Auxiliary info, footnotes
Small — Secondary body text
Base — Default reading text
Large — Emphasis, lead paragraphs
Extra large — Subheadings
<p class="kds-text-xs kds-text-muted">Extra small</p>
<p class="kds-text-sm">Small</p>
<p class="kds-text-base">Base</p>
<p class="kds-text-lg">Large</p>
<p class="kds-text-xl">Extra large</p>
Inline Elements
Visit the project website for more info.
Run npm install kuarls-ds to install.
Press ⌘ + K to open the command palette.
<a href="#" class="kds-link">project website</a>
<code class="kds-code">npm install kuarls-ds</code>
<kbd class="kds-kbd">⌘</kbd> + <kbd class="kds-kbd">K</kbd>
Badge
Accent
Success
Warning
Danger
Neutral
<span class="kds-badge kds-badge--accent">Accent</span>
<span class="kds-badge kds-badge--success">Success</span>
<span class="kds-badge kds-badge--warning">Warning</span>
<span class="kds-badge kds-badge--danger">Danger</span>
<span class="kds-badge kds-badge--neutral">Neutral</span>
Tags
Tags are used for categorization, labeling, and filtering. They can be static or dismissable with a close button.
Design
Docs
Shipped
Review
Bug
<span class="kds-tag kds-tag--accent">Design</span>
<span class="kds-tag kds-tag--neutral">Docs</span>
<!-- Dismissable tag -->
<span class="kds-tag kds-tag--success">
Shipped
<button class="kds-tag__close" aria-label="Remove">✕</button>
</span>