Primitives

Base CSS patterns for form semantics, identity, status and shortcuts. These primitives stay HTML-first and are meant to support more complex components later.

Field

A semantic wrapper for label, description and validation messages. Use .field as the default form primitive instead of inventing ad-hoc spacing around each input.

Email *

Used for login, receipts and important product updates.

Project name

Name must have at least 4 characters.

Handle

Available and ready to use.

Marketing updates Receive occasional release notes and product updates by email. Terms acceptance * Required to create a workspace and publish packages.

Avatar

Identity token for people, workspaces and bots. Starts as CSS-only with image, initials and stack patterns.

Sizes

vr XS

ui SM

rs MD

ds LG

vk XL

With image

Renata Silva

Design systems

Stack

rs vk ai

Indicator

Small status signal for presence, sync state, live activity and inline health.

Primary fallback

Syncing

Online

Warning

Offline

Build healthy Degraded queue Incident open

Kbd

Shortcut hints and keyboard references. Keep them compact and reserved for actual keyboard actions.

CtrlKShiftAEsc

Quick search ·Ctrl +K

Close overlay ·Esc

Usage rules

Use .field as the default wrapper around form controls
Prefer initials fallback for avatars when image loading is optional
Pair indicators with text in any critical state
Use kbd only for real keyboard interactions

Don't

Don't replace labels with placeholders inside fields
Don't use avatar color alone as an identity cue when initials fit
Don't show isolated pulsing dots without semantic text nearby
Don't overload screens with shortcut hints that compete with the main content