REPAY Theme
The underlying properties that define a theme are:
| Color | Primary (HEX 012638) |
| Typeface | Arial |
| Shadow | On |
| Lines | Thin (1px) |
| Shapes | Intermediate |
Color
Our color scheme uses a monochromatic palette and a complementary action scheme. All the monochromatic scheme colors are based on REPAY’S Dark Blue, and the others are variations using the same Hue and changing Brightness and Saturation.
Default Monochromatic Scheme
Action Scheme
Color guide
Use of color
The base color is the REPAY Brand color. It represents the brand through out the product.
Use mainly on: Buttons, content , Icons, headings.
CTA's color, Will be use for the main actions on the page. With this color you will catch the user’s attentionwhen needed.
Use mainly on: Buttons.
Darkest Contrast it is used only for the content Text and Icons.
Use mainly on: Text, icons Form elements.
Contrast (dark, medium, light) as the name says they are used to providing contrast and hierarchy.
Use mainly on: Backgrounds, Placeholder (dark) Breadcrumbs (medium)
Success Variant: This color can be used to provide Success actions.
Use mainly on: Buttons, icons, alerts.
Danger Variant: This color can be used to provide danger actions.
Use mainly on: Buttons, icons alerts.
Warning Variant: This color can be used to convey Warning messages.
Use mainly on: Buttons, icons alerts.
Disable Variant: This color can be used to convey Disabled States.
Use mainly on: Buttons, icons content, Form elements.
Accessibility
When creating new content or components make sure the color and background contrast meet AA Accessibility standards. You can check that here.
Or just use Cactus components; they were designed with accessibility in mind!
Typeface
ARIAL
Use typography to create clear hierarchies to guide users through the product and experience. Arial is used as the main font option, as it conveys cleanness, simplicity.
Arial Regular (400w)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890
” ·$%&/\|()=,.?”:}{<>+_-*&^%#@~`’;Arial Bold (600w)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890
” ·$%&/\|()=,.?”:}{<>+_-*&^%#@~`’;
Shadows
Our default theme comes with shadows because It helps us deliver a better user experience while interacting with our products.
Shadows help us to create a hierarchy by creating apparent z-axis distances between different elements in the UI. Our shadows use the Call to action color at a 30% opacity to match the theme.
S0Shadow: 0, 0, 3px
Color: Call to action 30%
S1Shadow: 0, 3, 8px
Color: Call to action 30%
S2Shadow: 0, 9, 24px
Color: Call to action 30%
Lines
Out standard theme uses a thin line. Used to create groups and separate content.
Thin
It has a thickness of 1px
Shapes
Shapes affects the roundness across the different components in our design system. REPAY’S standard theme will use the intermediate option.
IntermediateGives small components a corner radius of 8px and big components get a corner radius of 4px.