Style Guide
A simple, consistent system designed to keep everything clear, balanced, and easy to build on.
This page shows only a small part of the system behind this template. Everything here is built with structure in mind, where typography, colors, spacing, and components are all connected through a consistent set of variables and reusable classes, so nothing feels random.
To really understand how it works, it’s worth opening the Navigator, exploring the class structure, and checking the variables, because that’s where the logic actually lives. The goal was to create something clean, flexible, and easy to scale, so you can use it as it is or adapt it to your own way of building without fighting the system.
To really understand how it works, it’s worth opening the Navigator, exploring the class structure, and checking the variables, because that’s where the logic actually lives. The goal was to create something clean, flexible, and easy to scale, so you can use it as it is or adapt it to your own way of building without fighting the system.
Typography
Typography is the backbone of this template. Each style is defined to create clear hierarchy, improve readability, and keep the layout consistent across all pages. From large display headings to small captions, everything has its place and purpose. Use them as they are, or adapt them to fit your brand.
Heading H1
Heading H2
Heading H3
Heading H4
Heading H5
Heading H6
Text Large
Text Large (Strong)
Text Medium
Text Medium (Strong)
Text Small
Text Small (Strong)
Label
Label
Colors
The color system is built to be practical, not decorative. It’s based on a small set of neutrals for structure and a few accents to bring focus where it matters. Contrast and usability always come first. You’ll find colors for base surfaces, text, borders, and highlights. They are designed to work together out of the box, but you can easily adjust them to match your brand.
Surface
Neutral define space and structure. They are not text colors. They are the surfaces everything sits on.
- Surface 1 — main page background
- Surface 2 — elevated surfaces (cards, panels)
- Surface 3 — grounded or contrast sections
If you want a section to feel darker or heavier, use Surface 3. If you want elevation, use Surface 2.To create a dark section: Switch the section to Inverted Mode. No manual color overrides are needed.
surface 1
surface 2
surface 3
Ink
Ink defines hierarchy of information. It is used for text, icons, borders, subtle UI elements
The scale is consistent in both modes.
- Ink-1 — primary content
- Ink-2 — secondary text
- Ink-3 — supportive / meta information
- Ink-4 — borders, dividers, quiet details
All levels are tonal variations of the base ink color, ensuring consistent hierarchy across light and dark layouts
ink 1
ink 2
ink 3
ink 4
Accent
Accent colors are used sparingly for key actions, highlights, brand moments. They remain consistent across modes.
accent yellow
accent blue
accent blue wash
accent pink
Buttons
Buttons are designed to be clear and predictable. Primary actions stand out and guide the user forward. Secondary and tertiary buttons support without competing for attention. The goal is simple: users should always know what to do next without thinking.
Secondary
Circle
Inputs
Inputs are built to feel calm and easy to use. Different states like default, active, and filled help users understand where they are and what’s happening. Everything is kept minimal so forms don’t feel heavy or distracting. Use them as a base and adapt if your project needs something more custom.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
GSAP Split Fix
When using GSAP split text, some letters or word endings may get visually clipped because the split wrappers create masking and overflow issues. To prevent this, we added a small custom fix that keeps the text rendering clean and avoids those cut-off edges.
Please do not remove these classes, even if they seem unnecessary at first glance. They are important and intentionally used to override this issue:
Please do not remove these classes, even if they seem unnecessary at first glance. They are important and intentionally used to override this issue:
gsap_split_word
gsap_split_line
Without them, split text may break visually and crop parts of letters.
