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

...