Sass variables

This part of the documentation relates to premium templates built with Cruip CSS framework only. If the template you are using is built on the top of Tailwind CSS, please refer to the last part of the documentation.

Here is the structure of the settings folder which includes all the files that contain our Sass variables 👇

settings/
├── base/
│ ├── _colors.scss
│ ├── _links.scss
│ ├── _misc.scss
│ ├── _scroll-reveal.scss
│ ├── _typography.scss
│ └── _widths-and-spacing.scss
├── elements/
│ ├── _accordion.scss
│ ├── _buttons-and-forms.scss
│ ├── _carousel.scss
│ └── _modal.scss
├── layout/
│ ├── _footer.scss
│ └── _header.scss
├── patterns/
│ ├── _split.scss
│ └── _tiles.scss
├── sections/
│ ├── _clients.scss
│ ├── _cta.scss
│ ├── _features-split.scss
│ ├── _features-tiles.scss
│ ├── _hero.scss
│ ├── _pricing.scss
│ ├── _signin.scss
│ ├── _team.scss
│ └── _testimonials.scss
└── _settings.scss

So if for example if you want to modify the color palette, just open the settings/base/_colors.scss file and replace the HEX values with your own 👇

// The color palette
$palette: (
light: (
1: #FFFFFF,
2: #F0F4FD,
3: #D9E0F0
),
dark: (
1: #2B2B52,
2: #58678C,
3: #95A1BC
),
primary: (
1: #8E79FC,
2: #B8ABFD,
3: #6448FB,
4: #E2DDFE
),
secondary: (
1: #6EB0FC,
2: #A0CBFD,
3: #3C95FB,
4: #D2E6FE
),
alert: (
error: #FF7272,
warning: #FFBF77,
success: #4ED3A1
)
);
...

Or, in the case you want to make changes to the typographic scale settings/base/_typography.scss 👇

...
// The typographic scale
$font--scale: (
// key // font-size, line-height, kerning
alpha: ( 44px, 54px, null ),
beta: ( 38px, 48px, null ),
gamma: ( 32px, 42px, null ),
delta: ( 24px, 34px, -0.1px ),
epsilon: ( 20px, 30px, -0.1px ),
zeta: ( 18px, 28px, -0.1px ),
eta: ( 16px, 24px, -0.1px ),
theta: ( 14px, 22px, null )
);
...