Typography & Colors

Colors and fonts in NAVEGaid are defined once in theme settings and reused by every section. Change them here and the whole store follows.

Color schemes

A color scheme is a named set of colors. Every section has a color scheme picker, so editing a scheme under Theme settings → Colors repaints every section that uses it. You can add, duplicate and rename schemes freely.

What a scheme contains

Color	Used for
Background	Section background.
Background gradient	Optional gradient that replaces the solid background.
Text	Body text, headings and icons.
Solid button background	Primary button fill and border.
Solid button label	Text on primary buttons.
Outline button	Secondary button text and border, and links.
Shadow	Shadows on elements with shadow opacity above 0%.

The five default schemes

Scheme	Background	Text	Button	Button label	Typical use
scheme-1	#ffffff	#121212	#121212	#ffffff	Default for most sections, header, footer and cart.
scheme-2	#f3f3f3	#121212	#121212	#f3f3f3	Default for product, collection and blog cards.
scheme-3	#242833	#ffffff	#ffffff	#000000	Default sold-out badge.
scheme-4	#121212	#ffffff	#ffffff	#121212	Default announcement bar.
scheme-5	#334fb4	#ffffff	#ffffff	#334fb4	Default sale badge.

The demo configuration adds two more schemes — a white scheme and a warm off-white (#f8f4f1) scheme, both with #1b1c1c text — used by the demo pages.

Some custom sections use their own colors

Many NAVEGaid sections have direct color pickers (background, heading, button) in addition to, or instead of, a color scheme. Those colors are set per section and do not change when you edit a scheme.

Font slots

Theme settings → Typography has four font slots, each chosen from the Shopify font library.

Slot	Setting ID	Default	Used for
Body	type_body_font	Work Sans	Paragraphs, buttons, labels and form fields.
Subheading	type_subheading_font	Work Sans Medium	H4–H6 by default.
Heading	type_header_font	Anonymous Pro	H1–H3 by default.
Accent	type_accent_font	Anonymous Pro	Any heading level set to Accent.

Heading styles

Each heading level has its own font slot, size, line height, letter spacing and text case. Sizes scale automatically for smaller screens.

Level	Font slot	Default size	Font slot options
H1	Heading	72px	Heading, Accent
H2	Heading	48px	Heading, Accent
H3	Heading	32px	Heading, Accent, Subheading, Body
H4	Subheading	24px	Heading, Accent, Subheading, Body
H5	Subheading	18px	Heading, Accent, Subheading, Body
H6	Subheading	16px	Heading, Accent, Subheading, Body
Paragraph	Body	14px	—

Option	Values
Size	10px to 184px
Line height	Tight, Normal, Loose
Letter spacing	Tight, Normal, Loose
Text case	Default, Uppercase

Typography inside custom sections

Most NAVEGaid sections let you set font sizes and weights per section, separately for desktop and mobile. Several also have a Use global typography or Use global fonts option: switch it on and the section takes its fonts and heading styles from theme settings instead.

Bundled editorial fonts

The theme ships Inter and Playfair Display (including italic) as self-hosted files for its editorial sections. They load from your store rather than an external font service, so they need no setup.

Borders, shadows and corner radius live in Theme Settings.