ColorColor is a crucial tool in the Resend visual system. The palette is designed around sharp contrast between black and light, reinforcing precision and focus. Accent colors are used sparingly to communicate state, intent, and meaning within the product.
Our palette uses the Radix color scale to ensure consistency, predictable behavior, and accessible contrast.
Color paletteThe Resend core palette consists of Resend Black and Resend White. Together, they form the foundation of our color identity and are the primary drivers of brand recognition.
Black and white are used across both product themes, supporting light and dark mode experiences. Black is also the dominant color for all marketing touchpoints, where high contrast and consistency are key.
Resend Black
#000000
Resend White
#FDFDFD
GradientsGradients add depth and dimension to the Resend visual system.
They are used sparingly on backgrounds, borders, and text to create visual interest while maintaining the brand's refined aesthetic.
Luminanceeffect-font-gradient
Depthresend-dark-gradient-text
Alloyresend-dark-gradient
Frostglassy-button
Edge Fadecard-border-fade
GrayThe gray scale is used for structure, hierarchy, and subtle separation.
Grays support secondary text, borders, dividers, disabled states, and background layers. They should never compete with primary content or accent colors.
RedRed signals critical states and irreversible actions.
It is used for errors, destructive actions, and system feedback that requires immediate attention. Red should feel intentional and rare, not decorative.
Don't use red for neutral emphasis or non-critical highlights.
AmberAmber communicates caution and pending states.
It is used for warnings, system limitations, or situations that require user awareness but not immediate action. Amber sits between neutral and critical, providing clear signal without urgency.
GreenGreen represents success and completion.
It is used for confirmations, successful actions, and healthy system states. Green should feel calm and reassuring.
Don't over use it.
BlueBlue is used for interactive and informational elements.
It supports links and informative messaging. Blue should guide attention without overpowering the interface.
TexturesTextures add tactile quality and visual depth to surfaces. They break up flat areas and create a sense of physicality.
- Grain: glassy buttons, navigation, overlays.
- Noise: hero backgrounds, atmospheric overlays.
Grain/static/texture-btn.png
Noise/static/product-pages/noise.png