Design system

Tokens and components

Minimal logo palette: Active #2870F8, text #000000, white #FFFFFF, warning #F8D030, error #F04048. Poppins, Base/Coinbase field focus, Square modal bands, native select and date, and roomier spacing on the DaisyUI theme toolbox.

Logo

PNG mark only — soft 3D open toolbox. No SVG part kit. Favicon crops of the same mark at 16 / 32.

Open Toolbox

Compressed mark in src/brand-assets · served at /open-toolbox-mark.png · favicon /favicon.png

16×16

32×32

Color

Five logo-matched roles only. Active #2870F8, text #000000, white #FFFFFF, warning #F8D030, error #F04048.

Active / primary

#2870f8

--active

Text

#000000

--text

White

#ffffff

--white

Warning

#f8d030

--warning

Error

#f04048

--error

Sampled from open-toolbox-mark.png: active from the toolbox body, warning from handles / sparks / level, error from the screwdriver. Text is full black. White is the page ground. Coolors ramps are archived — not in the live theme.

DaisyUI roles

primary

secondary

accent

neutral

info

success

warning

error

primary / info / success → active · accent / warning → warning · error → error · secondary / neutral → black · base-100 → white · base-200/300 → light neutrals for borders.

Type

Poppins sitewide. ExtraBold 800 for brand and big titles, Bold 700 for section titles and buttons, Regular/Medium 400/500 for body. Base size is 17px. All UI text is full black #000000.

Text

Brand wordmark, headings, and body. Full black.

#000000

--text · base-content

Open Toolbox

Section label · Medium 500

Page title · ExtraBold 800

Section title · Bold 700

Body copy · Regular 400. Soft opacity for supporting sentences. One full black for the Open Toolbox wordmark.

Supporting note · Medium 500

Meta · Regular 400

Icons

Chunky Lucide-style strokes (2.5) with round caps and joins — matches Poppins Bold and the soft 3D mark. Helper: icon() in src/brand.ts.

arrow-right

layout

layers

zap

check

plus

link

pencil

trash

mail

home

external-link

Spacing

Roomier scale. CSS vars --space-1…12, --page-pad-x, --page-pad-y, --section-gap, --control-pad-*. Components use larger min-heights and padding.

gap-2 / --space-2

A B C

gap-3 / --space-3

A B C

gap-4 / --space-4

A B C

gap-6 / --space-6

A B C

gap-8 / --space-8

A B C

gap-10 / --space-10

A B C

Page shell · page-shell → --page-pad-x 1.25rem / md 2.5rem, --page-pad-y 2.5rem

Controls · buttons/inputs min-height 3rem, --control-pad-x/y

Base font · html { font-size: 17px }

Radii

Softer corners to sit with the chunky mark: 0.9rem boxes, 0.65rem fields and controls.

rounded-box

--radius-box · 0.9rem

--radius-field

0.65rem · inputs

--radius-selector

0.65rem · buttons

Components

Live DaisyUI pieces already used on the marketing site and dashboard, restyled with Base/Coinbase + Square field and modal patterns.

Buttons

Primary is Active. Taller hit targets. Icons sit beside labels with gap.

Inputs

At rest: light neutral border. On focus: Active border only — no glow, ring, or outline shadow. Coinbase form pattern.

Email Organization name Notes Remember this organization

Select

Native <select> styled like a text field with a chevron. Opens the browser list panel — no custom widget library. Coinbase + Square pattern.

Move to column Dense board control

Date

Native <input type="date"> with the same field chrome. Calendar affordance is the browser control.

Due date Compact date

Cards

Roomier card-body padding. Light border, little shadow.

Bench card

Quiet surface for stack notes.

Board card

Value 8

Bordered cards sit inside a column.

Badges

Short status on a card or reply. Pill radius, denser type.

Value 8 Value 4 HTMX swap Warning

Alerts

Form and auth outcomes. Colors stay inside the logo-matched set.

Default alert for a quiet notice.

Share this link. Anyone with it can read the board.

Check your inbox. The link expires in 30 minutes.

Email sending is not available on this account.

That board name is already taken in this workspace.

Modals

Square-style bands: header (title + close), scrollable body, footer (Cancel + primary). Scrim behind. Native <dialog> + tiny showModal/close JS.

Tables

List surfaces for members, owners, and status.

Card	Owner	Value	Column
Canonical host redirects	Studio	9	Done
Magic link email	Ops	6	Build
Design system page	Studio	8	Research

Nav

Drawer + navbar with a larger logo mark on every shell.