Customization

You can customize the components very easily, you can change the colors, fonts, and all.

The code is very well-organized. We used CSS variables to make the code reusable, so all you have to do is modify the variables.

Colors:

All the colors are available as CSS variables in the starter.css file. We predefined all required colors, so you will remain consistent while building a project.

You can also explore all these colors from our core style guide which is provided as a Figma file.

Note: add the Figma file link.

Color Codes

--primary: #155bd5;
--primary-dark: #1c3ab6;
--primary-light: #e2f1ff;
--accent: #00d4d7;
--accent-dark: #00bac1;
--accent-light: #dff9f8;
--success: #13d527;
--success-dark: #00ae11;
--success-light: #eafbe7;
--secondary: #8f15d5;
--secondary-dark: #6013c7;
--secondary-light: #f4e5fa;
--info: #15b2d5;
--info-dark: #0f8ca8;
--info-light: #e0f5fa;
--caution: #dbbb25;
--caution-dark: #d58f15;
--caution-light: #fbf9e4;
--error: #e6185e;
--error-dark: #bf1257;
--error-light: #fce4eb;
--black: #1d1d1d;
--dark-1: #2d2d2d;
--dark-2: #4d4d4d;
--dark-3: #6d6d6d;
--gray-1: #8d8d8d;
--gray-2: #adadad;
--gray-3: #cdcdcd;
--gray-4: #e0e0e0;
--light-1: #efefef;
--light-2: #f5f5f5;
--light-3: #fafafa;

Spacing:

Ayro UI uses Bootstrap 5’s default classes for spacing. To learn more visit Bootstrap documentation (opens in a new tab).

Typography:

We used Inter font for Ayro UI. If you want to change the font-family then open starter.css file and change the code below with your own font-family.

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap");

Also, change the font-family variable from the root:

-font-family: "Inter", sans-serif;

Headings:

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  color: var(--black);
  margin: 0px;
}
 
h1,
.h1 {
  font-size: 2.75em;
  line-height: 1.25;
}
 
h2,
.h2 {
  font-size: 2.25em;
  line-height: 1.25;
}
 
h3,
.h3 {
  font-size: 1.75em;
  line-height: 1.25;
}
 
h4,
.h4 {
  font-size: 1.5em;
  line-height: 1.25;
}
 
h5,
.h5 {
  font-size: 1.25em;
  line-height: 1.25;
}
 
h6,
.h6 {
  font-size: 0.875em;
  line-height: 1.25;
}

Paragraph:

p {
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5;
  color: var(--dark-3);
  margin: 0px;
}
 
.text-small {
  font-size: 0.875em;
  line-height: 1.5;
}
 
.text-lg {
  font-size: 1.15em;
  line-height: 1.5;
}

Display:

.display-1 {
  font-size: 5.5em;
  line-height: 1.25;
}
 
.display-2 {
  font-size: 4.75em;
  line-height: 1.25;
}
 
.display-3 {
  font-size: 4em;
  line-height: 1.25;
}
 
.display-4 {
  font-size: 3.25em;
  line-height: 1.25;
}

Quick start Credits