bleed
design system

Themable component library implemented with HTML, CSS, and minimal JS.
Themes are achieved via design tokens using Style Dictionary.

Color

--ink

--paper

--accent

--positive-subtle

--positive

--positive-strong

--negative-subtle

--negative

--negative-strong

--warning-subtle

--warning

--warning-strong

--neutral-subtle

--neutral

--neutral-strong

Border & radius

--border-w | --border-style | --radius

Shadow

--shadow

--shadow-hover

--shadow-active

Hover shift & transition

Hover me

--hover-shift-x/y | --transition | --transition-duration/ease

Spacing scale

--space-1
--space-2
--space-3
--space-4
--space-5
--space-6
--space-7
--space-8
--space-9

Typography

t-display-1

t-display-2

t-display-3

t-display-4

t-display-5

t-display-6

t-display-7

t-body-1

t-body-2

t-body-3

t-body-4

t-body-5

t-body-6

t-body-7

Icons

anchor
apps-minus
apps-plus
apps
archive
arrow-down-left
arrow-down-right
arrow-down
arrow-left
arrow-right
arrow-up-left
arrow-up-right
arrow-up
at-sign
atom
bell-slash
bell
bin
binary
block
bluetooth-connected
bluetooth-searching
bluetooth-slash
bluetooth
book-open
book
bookmark
briefcase
bug
calendar
camera-video-slash
camera-video
camera
candy
cards
cast
certificate
chart-bar
chart-line
chevron-down
chevron-left
chevron-right
chevron-up
chevrons-down
chevrons-left
chevrons-right
chevrons-up-down
chevrons-up
chip
circle-cross
circle-minus
circle-tick
circle-warning
circle
clipboard-tick
clipboard
clock-alarm
clock
cloud
clover
code
coffee
cog
compass
conical-flask
container
copy
copyleft
copyright
credit-card
crop
cross
crosshair
cube
cursor
database
diamond
diff
disc
download
droplet
eraser
eye-slash
eye
face-frown
face-neutral
face-smile
file-binary
file-code
file-symlink
file
files
filter
flag
flame
floppy-disk
folder-symlink
folder
folders
forward
gamepad
gem
gift
git-branch
git-cherry-pick
git-commit
git-compare
git-fork
git-merge
git-request-cross
git-request-draft
git-request
github
gitlab
glasses
globe
grab-horizontal
grab-vertical
graduate-cap
hash
headphones
heart
help
hexagon
home
hourglass
id
image
inbox
infinity
info
key
laptop
layout-columns
layout-dashboard
layout-grid
layout-list
layout-rows
layout-sidebar
layout-stack-h
layout-stack-v
lightbulb
lightning-bolt
link-external
link-slash
link
mail
map-pin
map
media-back
media-eject
media-fast-forward
media-pause
media-play
media-rewind
media-skip
menu-hamburger
menu-kebab
menu-meatball
message
messages
microphone
minus
mobile
monitor-arrow
monitor-cross
monitor
moon
move
music
newspaper
north-star
notes-cross
notes-tick
notes
nut
octagon-warning
octagon
organisation
package
padlock
paper-plane
paperclip
pencil
people
person
phone-call
phone-cross
phone-forward
phone-incoming
phone-outgoing
phone
pin
plant-pot
plus
power
printer
pulse
quote
refresh
reply
robot
rocket
rotate-anti-clockwise
rotate-clockwise
scales
screen-maximise
screen-minimise
search
server
share
shield-cross
shield-keyhole
shield-tick
shield-warning
shield
shopping-bag
sign-in
sign-out
signpost
skull
snowflake
sound-down
sound-mute
sound-up
speaker
square-cross
square-tick
square
stack-pop
stack-push
stack
star
sticky-note
sun
swap-horizontal
swap-vertical
sword
swords
tablet
tag
telescope
tent
terminal
thumb-down
thumb-up
tick-double
tick
ticket
tree-fir
triangle
trophy
umbrella
upload
wifi-fair
wifi-poor
wifi-slash
wifi-warning
wifi
zoom-in
zoom-out

Grid

Default: --grid-min: 24rem | --grid-gap: var(--space-4)

<div>
<div>
<div>
data-span="2"
data-span="3"
data-span="full"

Tight: --grid-min: 10rem | --grid-gap: var(--space-2)

<div>
<div>
<div>
<div>
<div>
data-span="full"

Alerts

Default

Deposit $12,400 by 16:00 EST to avoid liquidation.

Title only

Description only.

Solid

T+1 settlement cleared for 3 trades.

Badges

Default With dot Accent Positive Negative Warning
Default solid With dot solid Accent solid Positive solid Negative solid Warning solid

Buttons

Empty state

No open positions

Your portfolio is all cash. Place a trade to get started.

Loading

Menus

Meter & Progress

Meter

Default 41% 41%
Optimum 31% 31%
Low 54% 54%
High 90% 90%

Progress

Definition lists

Stat grid

Market cap
$2.9T
P/E
31.4
Dividend yield
0.44%
52w range
164.08–237.49

Inline

Symbol
AAPL
Quantity
1,200
Avg price
228.50
Commission
4.95
Total
274,204.95

Toasts

Tooltips

A default tooltip, outlined on paper.
A solid tooltip, filled with ink.
Opens above the anchor.
Opens below the anchor.
Opens to the left of the anchor.
Opens to the right of the anchor.

Inputs

$ USD

Hint: leave blank and click away.

Error: field is required.

$

Hint: guidance shown before interaction.

Error: what's wrong and how to fix it.

Textarea

Hint: leave blank and click away.

Error: field is required.

Hint: guidance shown before interaction.

Error: field cannot be empty.

Select

Qty
Every days

Hint: leave blank and click away.

Error: field is required.

Hint: guidance shown before interaction.

Error: what's wrong and how to fix it.

Checkbox & radio

Checkbox
Radio

Range

Cards

Simple

The card--pad variant: content sits directly inside with padding.

Interactive

Hover or press me — shares the button motion contract entirely through tokens.

Structured sections

badge
Header, body, and footer slots.

Modals

Short body, no footer

Nothing to confirm, so the footer is dropped entirely. Esc or the close button closes it.

Form with footer actions

Native <dialog>: focus trap, Esc-to-close, inert background, and ::backdrop — all free.

Long body that scrolls

You must hit Accept or Decline.

The body is the only scroll container — the header and footer stay put while this text moves under them.

Margin is required. Positions are marked to market continuously, and a shortfall may be called at any time during the session without prior notice.

Orders routed outside regular hours execute against thinner books. Quoted spreads widen, partial fills are common, and a limit price is strongly advised.

Settlement occurs one business day after the trade date. Proceeds from an unsettled sale are not available for withdrawal, though they may be reinvested immediately.

Dividend reinvestment applies to whole and fractional shares alike. Fractions are aggregated across the account and liquidated on closure.

Corporate actions — splits, mergers, spin-offs — are applied on the ex-date. Open orders against the affected symbol are cancelled rather than adjusted.

Tax lots default to first-in, first-out. Changing the disposal method affects future sales only; realised lots are not restated.

Past performance says nothing about future returns. Every position carries the risk of total loss, including positions held for the long term.

Tabs

Standard tab — a folder tab. .tabs__list holds the .tabs__tab buttons; the selected one is a bordered box whose lower edge is blended into this .tabs__panel.

Segmented tab — the boxed variant. One bordered strip with dividers between segments; the selected segment inverts to solid --ink.

Positions

Symbol Name Last Chg Qty
AAPLApple Inc. 228.50 1.2% 1,200
TSLATesla, Inc. 242.10 3.1% 300
MSFTMicrosoft Corp. 441.00 0.4% 850
Net exposure2,350