Theme

Modify predefined color palette, add your own colors, change the font sizes and more. This page serves as a means to establish default settings for your app. While markdown/source code usage is optional, it's typically beneficial to define constants for colors, sizes, and other essential elements, as this is usually something which you will use in development.

Brand colors

  • Primary light (#1bbeb0)
  • Primary main (#169f94)
  • Primary dark (#11756d)
  • Secondary light (#299cd1)
  • Secondary main (#3b84a5)
  • Secondary dark (#032535)

State colors

  • Info light (#77b3f0)
  • Info main (#4596eb)
  • Info dark (#3676cb)
  • Success light (#91c589)
  • Success main (#67ab5b)
  • Success dark (#4f8c46)
  • Warning light (#f5b861)
  • Warning main (#f29c38)
  • Warning dark (#e68331)
  • Error light (#d77976)
  • Error main (#e15240)
  • Error dark (#c33f37)
  • Focus (#169f94)

Text colors

  • Text color main(#1c1c1c)
  • Text color link (#169f94)
  • Text color opposite(#ffffff)

General colors

  • App background (#ffffff)
  • Opposite (#ffffff)
  • Neutral 100 (#edf4f8)
  • Neutral 200 (#e5ecf1)
  • Neutral 600 (#a8bac1)
  • Neutral 800 (#829aa3)

Custom colors

No custom colors have been added. You can add your own colors to the palette using the Custom colors menu and utilize them just like predefined colors.

Radius

  • 0
    NONE
  • 2
    XS
  • 4
    SM
  • 6
    MD
  • 8
    LG
  • 12
    XL
  • 16
    2XL

Sizes

  • 28
    Button/Input SM
  • 46
    Button/Input MD
  • 24
    Avatar XS
  • 32
    Avatar SM
  • 48
    Avatar MD
  • 64
    Avatar LG
  • 128
    Avatar 2XL

Icon sizes

  • SM
  • MD
  • LG

Font sizes

  • H1 - The quick brown fox jumps over the lazy dog.
  • H2 - The quick brown fox jumps over the lazy dog.
  • H3 - The quick brown fox jumps over the lazy dog.
  • H4 - The quick brown fox jumps over the lazy dog.
  • H5 - Heading 5
  • Paragraph 1 - The quick brown fox jumps over the lazy dog.
  • Paragraph 2 - The quick brown fox jumps over the lazy dog.
  • Caption 1 - The quick brown fox jumps over the lazy dog.
  • Caption 2 - The quick brown fox jumps over the lazy dog.
  • Small - The quick brown fox jumps over the lazy dog.
  • Button MD - The quick brown fox jumps over the lazy dog.
  • Button SM - The quick brown fox jumps over the lazy dog.
  • Input - The quick brown fox jumps over the lazy dog.

State variants

  • Normal
  • Pressed (0.8)

Setup your theme

This way, you can brand your UI. Any changes made here will be applied to all other components that use it. It will not override UI changes you've made to specific components using particular configurations.

Source code
export const theme = {
  color: {
    primaryLight: '#1bbeb0',
    primaryMain: '#169f94',
    primaryDark: '#11756d',
    secondaryLight: '#299cd1',
    secondaryMain: '#3b84a5',
    secondaryDark: '#032535',
    infoLight: '#77b3f0',
    infoMain: '#4596eb',
    infoDark: '#3676cb',
    successLight: '#91c589',
    successMain: '#67ab5b',
    successDark: '#4f8c46',
    warningLight: '#f5b861',
    warningMain: '#f29c38',
    warningDark: '#e68331',
    errorLight: '#d77976',
    errorMain: '#e15240',
    errorDark: '#c33f37',
    focus: '#169f94',
    textMain: '#1c1c1c',
    textLink: '#169f94',
    textOpposite: '#ffffff',
    appBg: '#ffffff',
    opposite: '#ffffff',
    neutral100: '#edf4f8',
    neutral200: '#e5ecf1',
    neutral600: '#a8bac1',
    neutral800: '#829aa3',
  },
  radius: {
    none: 0,
    xs: 2,
    sm: 4,
    md: 6,
    lg: 8,
    xl: 12,
    '2xl': 16,
    _2xl: 16,
  },
  size: {
    buttonInputSM: 28,
    buttonInputMD: 46,
    avatarLG: 64,
    avatar2XL: 128,
  },
  icon: {
    sm: 20,
    md: 24,
    lg: 28,
  },
  fontSize: {
    h1: 30,
    h2: 26,
    h3: 22,
    h4: 20,
    h5: 18,
    paragraph1: 16,
    paragraph2: 14,
    caption1: 12,
    caption2: 10,
    small: 8,
    buttonMD: 20,
    buttonSM: 16,
    input: 16,
  },
  state: {
    activeOpacity: 0.8,
  },
};