Peaka has built-in design system that makes the application adoptable with different themes and views. This design system helps you to create different themes with using different colors and sizes. With this flexibility you can customize the embedded Peaka’s view and make its look and feel as same as your application.

Peaka design system is built to offer flexibility through CSS variables, allowing you to adjust and personalize the appearance of your application easily.

Here is the reference of the customizable variables.

​
CSS Reference

​
General Colors

There are two generic color codes in Peaka’s Design System. Most of the UI components use these color options.

General colors have 5 different variants per class as base, hover, dark, light, lighter

​
Primary Colors

You can change the primary colors of the Peaka with overriding following css variables

--primary-base: #5f62f0;
--primary-hover: #5457cd;
--primary-dark: #363885;
--primary-light: #bcbdf9;
--primary-lighter: #dadafc;

​
Secondary Colors

You can override the secondary colors of the Peaka with following css variables.

--secondary-base: #9aa4be;
--secondary-hover: #444d66;
--secondary-dark: #2d354c;
--secondary-light: #e3e6eb;
--secondary-lighter: #eef0f3;

​
Severity Colors

There are 6 severity option in Peaka’s Design System. These are Success, Error, Warning, Informative, Neutral and Updating.

Each severity option has 5 different variants like general colors.

​
Success Colors

Success colors are used for express result for successful activities or harmless actions.

--success-base: #22c55e;
--success-hover: #16a34a;
--success-dark: #15803d;
--success-light: #bbf7d0;
--success-lighter: #dcfce7;

​
Warning Colors

Warning colors are used in components that the user should be warn.

--warning-base: #f97316;
--warning-hover: #ea580c;
--warning-dark: #c2410c;
--warning-light: #fed7aa;
--warning-lighter: #ffedd5;

​
Error Colors

Error colors are used for errors and actions that user should reconsider the action.

--error-base: #ef4444;
--error-hover: #dc2626;
--error-dark: #b91c1c;
--error-light: #fecaca;
--error-lighter: #fee2e2;

​
Informative Colors

These colors are used for informations

--information-base: #3b82f6;
--information-hover: #326fd1;
--information-dark: #295bac;
--information-light: #abc9fb;
--information-lighter: #d0e1fd;

​
Neutral Colors

These are also used for informations. These can be thought as secondary for iformative colors

--neutral-base: #9aa4be;
--neutral-hover: #444d66;
--neutral-dark: #2d354c;
--neutral-light: #e3e6eb;
--neutral-lighter: #eef0f3;

​
Updating Colors

These colors are used in ongoing processes in Peaka. Such as caching process.

--updating-base: #14b8a6;
--updating-hover: #0e8174;
--updating-dark: #0b655b;
--updating-light: #9ae0d9;
--updating-lighter: #c7eeea;

​
Text Colors

These are the colors that used in text fields in Peaka.

--link-text-color: #f3f4f6;
--link-text-hover-color: #ffffff;
--header-color: #f9fafb;
--text-primary-color: #cfd1d7;
--text-secondary-color: #e5e7eb;
--text-label-color: #cfd1d7;
--text-disabled-color: #555659;
--text-placeholder-color: #75777a;

​
Border Colors

These are the border colors that used in form components, containers, cards etc.

--border-active-color: #f3f4f6;
--border-primary-strong-color: #555659;
--border-primary-color: #3f4043;
--border-strong-color: #f9fafb;
--border-soft-color: #141415;
--border-secondary-color: #27282a;
--border-soft-secondary-color: #27282a;
--border-error-color: #ef4444;
--border-success-color: #22c55e;
--border-warning-color: #f97316;
--border-information-color: #3b82f6;
--border-neutral-color: #9aa4be;

​
Background Colors

Peaka uses 5 different background token in its Design System. You can override these tokens to implement your own look and feel

--background-default: #0d0d0d;
--background-primary: #141415;
--background-secondary: #1d1e1f;
--background-tertiary: #27282a;
--background-offline: #3f4043;

​
Fonts

​
Font Family

You can use your own font families via overrride this variable.

Note: It should be imported the font families that you mentioned in the font family variable.

--font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

​
Heading Font Sizes

Peaka Design System allows you to override heading font sizes. These variables are used for heading components.

--heading-xxs-size: 0.75rem;
--heading-xs-size: 0.875rem;
--heading-sm-size: 1rem;
--heading-md-size: 1.25rem;
--heading-lg-size: 1.5rem;
--heading-xl-size: 1.75rem;
--heading-xxl-size: 2.25rem;
--heading-xxs-line-height: 1rem;
--heading-xs-line-height: 1.125rem;
--heading-sm-line-height: 1.25rem;
--heading-md-line-height: 1.5rem;
--heading-lg-line-height: 1.75rem;
--heading-xl-line-height: 2rem;
--heading-xxl-line-height: 2.5rem;

​
Label Font Sizes

These font size variables are used for labels, descriptions, component’s labels (such as button) etc.

--label-xs-size: 0.625rem;
--label-sm-size: 0.75rem;
--label-md-size: 0.875rem;
--label-lg-size: 1rem;
--label-xl-size: 1.25rem;
--label-xs-line-height: 0.75rem;
--label-sm-line-height: 0.875rem;
--label-md-line-height: 1rem;
--label-lg-line-height: 1.125rem;
--label-xl-line-height: 1.375rem;

​
Body Font Sizes

These font sizes are used for general informations and explanations in the Peaka UI.

--body-xs-size: 0.625rem;
--body-sm-size: 0.75rem;
--body-md-size: 0.875rem;
--body-lg-size: 1rem;
--body-xl-size: 1.25rem;
--body-xs-line-height: 0.875rem;
--body-sm-line-height: 1rem;
--body-md-line-height: 1.25rem;
--body-lg-line-height: 1.5rem;
--body-xl-line-height: 1.875rem;

​
Font Weight

These variables set the font weight in all system. It can affect all components in the system.

--font-thin: 100;
--font-extralight: 200;
--font-light: 300;
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
--font-extrabold: 800;
--font-black: 900;

​
Sizes

​
Padding

These are system wide padding sizes. You can override the padding values in order to apply your design system’s your whitespace rules.

--padding-none: 0;
--padding-3xs: 0.125rem;
--padding-2xs: 0.25rem;
--padding-xs: 0.375rem;
--padding-sm: 0.5rem;
--padding-md: 0.625rem;
--padding-lg: 0.75rem;
--padding-xl: 1rem;
--padding-2xl: 1.5rem;
--padding-3xl: 2rem;
--padding-4xl: 2.5rem;
--padding-5xl: 3rem;

​
Radius

These are the default radius values of Peaka Design System. You can override them to apply your radius rules.

--radius-xs: 0.25rem;
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-2xl: 1.25rem;
--radius-3xl: 1.5rem;

​
Shadows

These are the basic shadow rules in Cards, Form components, Tooltip’s etc.

--shadow-sm: 0 8px 16px 0 rgba(71, 74, 79, 0.12);
--shadow-md: 0 8px 12px 0 rgba(26, 27, 28, 0.16);
--shadow-lg: 0 4px 16px 0 rgba(69, 72, 74, 0.24);
--shadow-xl: 0 8px 12px 0 rgba(42, 44, 49, 0.36);
--tooltip-shadow: 0 2px 2px 0 rgba(59, 59, 59, 0.22);
--input-shadow: 0 0 0 3px #27282a;
--avatar-shadow: inset 0 -4px 8px 0 rgba(31, 34, 38, 0.2);
--border-shadow: 0 0 1px 0 rgba(90, 90, 107, 0.64);

​
Gradients

These gradients are used in system wide. You can override gradient rule(s) with these variables

--gradient-01: linear-gradient(180deg, #2c3271 0%, #5a1f9d 100%);
--gradient-02: linear-gradient(180deg, #e265de 0%, #33cbb2 100%);
--gradient-03: linear-gradient(180deg, #208be2 0%, #3838bd 100%);
--gradient-04: linear-gradient(180deg, #111111 0%, #333333 100%);
--gradient-05: linear-gradient(180deg, #000b58 0%, #9b7ebd 100%);
--gradient-06: linear-gradient(360deg, #0d92f4 0%, #00ff9c 100%);
--gradient-07: linear-gradient(180deg, #ff6500 0%, #6256ca 96%);
--gradient-08: linear-gradient(360deg, #00712d 0%, #86ab89 100%);
--gradient-09: linear-gradient(180deg, #ffa62f 0%, #f97300 100%);
--gradient-10: linear-gradient(360deg, #8576ff 0%, #bc7fcd 100%);