Welcome to Nayzak v1.0
In this documentation we'll walk you through all information and tips you might need to get the most out of the template.
Folder / File Structure
Once downloaded, unzip the compressed folder and you’ll see something like this:
Nayzak/
|--- nayzak saas templates/
| |--- assets/
| | |--- css
| | |--- fonts
| | |--- images
| | |--- js
| | |--- plugins
| | |--- scss
| |--- landing1.html
| |--- landing2.html
| |--- landing3.html
| |--- landing4.html
| |--- landing5.html
| |--- 404.html
| |--- sign-in.html
| |--- sign-up.html
| |--- contact1.html
| |--- contact2.html
| |--- about1.html
| |--- about2.html
| |--- team.html
| |--- pricing1.html
| |--- pricing2.html
| |--- privacy-policy.html
| |--- careers.html
| |--- job-opening.html
| |--- blog-home.html
| |--- blog-single.html
|--- sharedassets/
| |--- saas
|--- documentation/
Style Guide
A quick overview of the typography, colors, and design language used throughout the design system.
Typography
Nayzak SAAS Template is following Bootstrap 5 basic typography system with some changes to match our template as well as additional font sizes for more flexibility.
Syne
Syne is a 5-style type family originally designed in 2017 for the art center Synesthésie, based in Saint-Denis in the very close suburb of Paris, France. Used across their identity, print and screen, Syne has been released under open-source license in June 2018.
Inter
Inter started out in late 2016 as an experiment to build a perfectly pixel-fitting font at (11px.) The idea was that by crafting a font in a particular way, it would be possible to get the best of both sharpness and readability.
Sizes
- 26px
- 22px
- 20px
- 18px
- 16px
- 14px
- 12px
Colors
Nayzak SAAS Template comes with an extensive color system based on Bootstrap 5 to enable more comprehensive customization and extension for any project.
Main colors
Blue
Black
Cyan
Green
Indigo
Orange
Pink
Purple
Red
Teal
Yellow
Color shades
Each color comes with shades from 900 (Darkest) to 50 (Lightest)
Borders (Only in Sketch)
Shadows
We use 3 different shadow strengths for images, backgrounds, and dropdowns.
Change Colors
Changes made to solid colors reflect everywhere in the template
where the color is used.