Sass variables

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 )
);
...