Notifications
3 unread
Notification settings

Components

Every building block in the kit, working. Class names are listed with each one; see README for the full reference.

Colors

Semantic color variables from base.css. Each one has a light and a dark value.

Brand
--brand
Brand soft
--brand-soft
Accent
--accent
Ink
--ink
Background
--bg
Surface 2
--surface-2
Success
--success
Warning
--warning
Danger
--danger
Info
--info
Chart 1
--series-1
Chart 2
--series-2

Typography

Schibsted Grotesk for everything, JetBrains Mono for code.

Display

Heading one .h1

Heading two .h2

Heading three .h3

Lead paragraph for introductions. .lead

Body text at 15px with a 1.6 line height, set for comfortable reading in dense app screens.

Small muted text for hints and metadata. .text-sm .muted

Buttons

.btn plus a variant: .btn-primary, .btn-secondary, .btn-ghost, .btn-soft, .btn-ink, .btn-danger. Sizes .btn-sm and .btn-lg.

Click “Save changes” to see the loading state.

Inputs

.field wraps .label, .input / .select / .textarea, .hint and .field-error.

Visible to everyone in the workspace.

https://

Checkboxes, radios and toggles

.check, .switch (with role="switch") and .segmented.

Checkboxes
Radios

Toggles

Segmented control

Badges and avatars

.badge with -brand, -success, -warning, -danger, -info, -accent, -outline, .badge-dot. Initials avatars use .avatar .av-1….av-6.

NeutralBrandActivePast dueFailedTrialMost popularGuestPill
MLJRAB+3

Alerts

.alert with .alert-info, -success, -warning, -danger. Dismiss one, then bring them back.

New in September
Recurring tasks are here. Set a schedule from any task's menu.
Import complete
214 tasks were added to Website relaunch.
You're close to your automation limit
4,380 of 5,000 runs used. Runs pause when you reach the limit.

Toasts

Call Stackly.toast({ title, message, type }) or add data-toast to any button. Announced politely to screen readers.

Modal

.modal with role="dialog". Focus is trapped inside, Esc closes it and focus returns to the button that opened it.

Tabs

[data-tabs] with role="tablist". Use the arrow keys, Home and End. Add .tabs-pills for the pill style.

The project overview: goal, owner and key dates.

183 tasks completed this week.

Dropdown menu

[data-dropdown] with a trigger and .menu[role="menu"]. Arrow keys move, Esc closes and returns focus.

Tooltip

.has-tooltip + .tooltip[role="tooltip"], linked with aria-describedby. Shows on hover and focus; Esc hides it.

Archive project. You can restore it later. Tooltips add context, not required information.

Progress

.progress with --value, variants -warning, -danger, -indeterminate, and .progress-ring.

Uploading brief.pdf0%

Skeleton loaders

.skeleton with -text, -title, -circle. Mark the container aria-busy="true" while loading.

Empty states

.empty with an illustration, a title that says what's missing and one action.

No projects yet

Projects hold your boards, docs and timelines. Start from a template or a blank board.

You're all caught up

New mentions and assignments will show up here.

Notification settings

Accordion

[data-accordion] with buttons that control regions. Use data-accordion="single" to keep one open.

What shipped last week, what is late and what is due this week, for each person.

Yes, under Settings, Notifications.