Design inspires your best work.

Raster was built by design engineers for design-led teams. We believe that, with well designed tools, we can improve the quality of work that we produce. Design inspires our daily work, and we hope it inspires yours too.

Design creates culture. Culture shapes values.
Values determine the future.

— Robert L. Peters, Designer & Author

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.

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.

Primary Secondary Default
Enabled
Disabled
Icons

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.

Raster Red
Gray 100 #f4f4f5
Gray 200 #e4e4e7
Gray 300 #d4d4d8
Gray 400 #a1a1aa
Gray 500 #71717a
Gray 600 #52525b
Gray 700 #3f3f46
Gray 800 #27272a
Gray 900 #18181b

Form

When asking users for informational input, it's important to remain humble, yet intentional. Our forms do exactly that.

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.

Hi, I'm Glass.
Sample

Icon

Raster believes in simple iconography. This set is adapted from Vercel/Icons and Feather Icons.