Raster Design System
Design inspires our best work.
Design creates culture. Culture shapes values.
— Robert L. Peters, Designer & Author
Values determine the future.
Raster was built by designers for design-first teams. We believe that with well-designed tools, we can improve the quality of work we ship. Design inspires our daily work, and we hope it inspires yours too.
This is our design playground. It is by no means complete, but we welcome you to gain inspiration from it, copy it, and share it with the world.
Accordion
Expanding sections sharing the library sidebar's motion language, with variable content heights. Single-open by default; pass multiple for independently collapsible sections.
Single-open
Single-open mode: expanding one section collapses the other, the way the editor sidebar's version list behaves.
Multiple open
Multiple mode keeps every section independently collapsible — the editor's tool stack uses this with all sections open by default.
Each trigger carries a disclosure twisty that rotates as the panel opens.
Avatar
An Avatar component is used to display a typeform for a user or organization that doesn't have an uploaded photo. A custom algorithm ensures that each background color is unique yet familiar.
24px
48px
96px
144px
192px
24px
48px
96px
144px
192px
Button
Raster buttons are designed to solicit the feeling of pressing a physical button, but in a digital realm. Optimized for trackpad interaction, the buttons fill upwards while pressed.
Tag
Raster tags carry lightweight metadata for people, search, and agents without making the interface feel heavy.
Color
Raster is built with a neutral color palette as to not influence color grading of photography, but with a tinge of added warmth to offset the ultra-blue light in modern displays. Any color to draw attention, including Raster's brand color, is inspired by the reds and yellows of vintage cinema lenses and Hasselblad cameras.
Form
When asking users for informational input, it's important to remain humble, yet intentional. Our forms do exactly that.
Tabs
Two styles from one class. .tabs is the default segmented control — the primary tab group. .tabs.tabs-minimal is the compact underline style, for sub-tabs or where space is tight. Put the class on whichever element fits: a group of buttons, a group of links, or a <select>.
Default — buttons
Minimal — buttons
Default — links
Minimal — links
Default — select
Minimal — select
Glass
When overlaying modal data, it's important to ensure users retain a sense of context via a skeuomorphic mechanism. Glass keeps that in mind with a subtle effect.
Tooltip
Tooltips provide additional context when hovering over interactive elements.
OptionsAdjust your preferences hereIcon
Raster believes in simple iconography. This set is adapted from Vercel/Icons and Feather Icons.
anchor
apple
archive
bot
arrow-up-right
book-open
arrow-left
arrow-right
camera
camera-off
connection
check
chevron-down
chevron-left
chevron-right
chevron-up
chevron-up-down
circle
clipboard
comment
copy
corner-down-right
corner-up-left
command
cursor
cpu
crop
database
disc
dollar-sign
download
drop
edit-2
eye
eye-off
flag
globe
grid
hard-drive
hash
heart
home
info-circle
image-search
images
layers
link
lock
log-in
log-out
menu
more-vertical
monitor
moon
message-square
pen-tool
move
plus
question-circle
raster
refresh
save
search
send
server
settings
shield
shopping-bag
shuffle
slash
sparkle
square
star
sun
tag
trash
triangle
upload
user
users
video
wand
x
zap
logo-cursor
logo-claude
logo-v0
logo-replit
Raster is the modern DAM for humans and agents.
Store, organize, search, transform, connect, and ship visual assets from one focused system built for teams that move.