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