@UiReact

Installation

The Basics

Colorations

Foundation

Main View

Components

Charts

Dialogs

Framer Animations

EzForms

Forms

Grids

Typography

Utils

Contributing

Feature request

Colorations

The theme colorations are primary, secondary and tertiary. The fonts color is its own category that should only be used on fonts. There are also supporting colorations such as Positive, Negative, Error and Warning.

Colors usages

The truth is that you can use them at your best convenience but we highly recommend to follow this pattern:

Primary - 60%

Secondary - 30%

Tertiary - 10%

The supporting colors could be used as needed based on your design system.

Font color

The primary color to be used on your backgrounds, so your fonts should have a color that totally contrast with this color.

For instance imagine you want your light theme to use the color #E7E7E7 then your texts should have a very dark color to contrast correctly like: #001456.


  <div style={{ backgroundColor: "#E7E7E7", padding: "10px", width: "100%", boxSizing: "border-box", borderRadius: "20px" }}>
    <p style={{color: "#001456"}}>Text colors</p>
  </div>

Example on how to choose colorations

The primary and secondary colors are used as the baseline and as the highlight color.

For instance let's do some mock up thinking that your brand color is: #1CCB2F and you want to keep your app with a green-ish coloration.

Example

The tertiary color would go to : #1CCB2F by default as its your brand color.

For primary color we will use a soft color like this for light theme: #E7E7E7 and this for dark theme: #051C08

The font color for the light theme could be: #0D4313 to be readable on light colorations.

For the dark theme, the font color could be: #F2F7EB to be readble on dark colorations.

Now, for the secondary color we can choose a green color that looks great behind the inverse font color like: #2D5809 for light and this: #C8DEB6 for dark.

Light coloration


  <CustomCard backgroundColor="#E7E7E7">
    <UiFlexGrid alignItems="center" justifyContent="stretch" gap='two'>
      <UiFlexGridItem grow={2}>
        <CustomText color="#0D4313">Font text for light theme on primary coloration</CustomText>
      </UiFlexGridItem>
      <CustomCard backgroundColor="#2D5809">
        <CustomText color="#F2F7EB">Inverse font on secondary</CustomText>
      </CustomCard>
    </UiFlexGrid>
    <hr style={{ margin: "10px 0" }} />
    <TertiaryButton>
      <CustomText color="#0D4313">Tertiary button</CustomText>
    </TertiaryButton>
  </CustomCard>

Dark coloration


  <CustomCard backgroundColor="#0B1503">
    <UiFlexGrid alignItems="center" justifyContent="stretch" gap='two'>
      <UiFlexGridItem grow={2}>
        <CustomText color="#F2F7EB">Font text for dark theme on primary coloration</CustomText>
      </UiFlexGridItem>
      <CustomCard backgroundColor="#C8DEB6">
        <CustomText color="#0D4313">Inverse font on secondary</CustomText>
      </CustomCard>
    </UiFlexGrid>
    <hr style={{ margin: "10px 0" }} />
    <TertiaryButton>
      <CustomText color="#F2F7EB">Tertiary button</CustomText>
    </TertiaryButton>
  </CustomCard>

This is a very simple exercise that we put together so you can get a head start on colorations, but the best thing would be for you to get started and then just play around with your colorations.