Core

Text

Borders

Status

Category (dashboards)

Brand

Type scale

Font families

Semantic headings

Heading 1

Heading 2

Heading 3

Text utilities

Default paragraph text with normal color.

Secondary text — .text-secondary

Tertiary text — .text-tertiary

Serif text — .text-serif

Label text — .label

Code

Inline code uses the monospace stack.

// Pre-formatted code block
const theme = document.documentElement.hasAttribute('dark-mode');
console.log('Dark mode:', theme);

Border radius

Shadows

Container widths

Transition

Variants

Sizes

Hover (forced)

Disabled

Icon buttons

Block & link

3-column grid with hover

Card with footer

2-column grid

Auto-fill grid

Variants

In context

Service status: Running

Build #142: In progress

Deployment: Failed

Feature branch: Unreviewed

Default

Focus state

Error state

Disabled state

With hint

Basic

Pre-selected value

JS API

Navbar

See the top of this page for a live example. Classes: .navbar, .navbar__brand, .navbar__actions.

Tab navigation

Tab states

States

Theme toggle

Circular button used in the navbar for dark mode switching.

Sizes

With text

HTMX integration

Brand footer link

Full page footer

Usage snippet

Quick start (single file)

Docker (bake into image)

Go (embed)

Dark mode

Modular (pick what you need)

Center timeline

• 2022 – present

  Head of Product

  Constructor.tech

  Leading product development for e-commerce search and discovery platform.

• 2020 – 2022

  Senior Product Manager

  Yandex Cloud

  Managed data warehouse and analytics products serving millions of users.

• 2018 – 2020

  Product Manager

  EdTech Startup

  Built AI/ML platform for university education, improving learning outcomes.

List variant (.timeline--list)

• 2018

  MSc Computer Science

  Moscow State University

• 2014

  BSc Applied Mathematics

  HSE University

Project cards (.card.card--project)

Icon cards (.card.card--icon)

Icon card with soft icon (.card__icon--soft)

Editorial card (.card.card--editorial)

Inset 1px shadow + pronounced lift on hover. Pairs with small caps .card__eyebrow above a serif .card__title. Wrap in <a> or add .card--link to make the whole card clickable.

Editorial hero (.hero.hero--editorial)

Drops the min-height: 100vh from base .hero. Adds .hero__eyebrow (topic crumbs), .hero__lede (article subtitle), .hero__meta (date / reading time). Title uses a serif clamp scale.

Pill navbar (.navbar.navbar--pill)

Floating glassy pill at the top of the viewport — for marketing / blog pages where the navbar is decorative. Goes alongside .navbar-controls on the right side for theme toggle / language switcher. Add .active to the current page's link. At ≤ 768px it collapses into a slide-out drawer — pair with a .hamburger button carrying data-ds-nav-toggle="#yourNavId" (auto-wired by js/nav-drawer.js).

Mobile drawer (≤ 768px)

When the viewport is ≤ 768px, the pill collapses into a 280px-wide drawer triggered by .active. Below is a fixed-size replica forced into the open state via inline CSS so you can see it at any viewport. Real usage: include js/nav-drawer.js in the bundle (auto-init) and add data-ds-nav-toggle="#mainNav" to your hamburger button.

Editorial footer (.footer.footer--editorial)

Dark background, two-column grid: .footer__main (copyright) + .footer__social (Connect heading + .social-icons). .footer__bottom row at the end. Mobile collapses to single column.

Inline row (article footer)

• Product & AI
• Systems & Automation
• Claude Code
• Build Logs

Tag cloud (sized by article count)

• Product & AI12
• Claude Code8
• Systems & Automation6
• Build Logs3
• Notes1

Table of contents (.prose-toc)

Article body (.prose)

function setupSmoothScrolling() {
    const navLinks = document.querySelectorAll('nav a');
    navLinks.forEach(link => {
        link.addEventListener('click', (e) => {
            const targetId = link.getAttribute('href');
            if (!targetId || !targetId.startsWith('#')) return;
            e.preventDefault();
        });
    });
}

Icon variants

Full confirmation

Empty list state (.empty-state--sm)

Hamburger states

Interactive drawer demo

The drawer is fixed-position in production. Here it's contained inside the demo box.

Code

Scroll progress bar

In production: position:fixed; top:0; left:0; z-index:9999

Scroll-to-top button

In a card

Reveal

Stagger children

Flag buttons

Text labels

Popover

All variants

Chip row

Dashboard overview

Plain

Labeled (session break)