Style Your Site

Colors and a logo get you most of the way. These settings do the rest—the small decisions that make two spaces with the same palette feel completely different.

What You'll Do

• Pick a highlight color for the things that matter
• Turn on a statement band
• Set your border weight and shadow style
• Choose how airy your pages feel
• Add a Thai (or other script) display font

Everything Here Is Optional

Every setting on this page starts empty, and empty is a perfectly good answer. Leave one alone and your site keeps the look it has today:

Setting	If you leave it alone
Highlight color	Uses your accent color
Band colors	Uses your text color, with your background color on top
Border weight	Thin, 1px lines
Shadow style	No shadows—flat and clean
Spacing scale	Normal rhythm
Heading letter-spacing	Normal spacing
Script font	Your body font

You can set one, change your mind, and clear it again. Nothing here is permanent.

These live with your other visual settings, in your site's theme settings.

Highlight Color

Your primary color is for buttons and links. Your highlight color is for the one number or word you want people to land on—a class price, a spot count, a headline figure.

How to choose:

• Pick something that stands apart from your primary color, or people stop noticing either
• Warm colors pull the eye faster than cool ones
• Test it on your Pricing page first, since that's where it works hardest

Two Accents Is Plenty

A primary color for actions and a highlight color for emphasis covers almost every page. A third accent usually just adds noise.

Statement Band

A statement band is a solid panel that spans the full width of the page, in its own colors. It's the visual equivalent of raising your voice.

You choose two colors:

Color	What it does
Band background	Fills the panel
Band text	Sits on top, so it has to be readable

Once your band colors are set, you can turn any Call to Action block into a band. See the CTA block for how it looks.

Where a band works:

• The free trial offer at the bottom of your homepage
• One membership pitch on a long page
• A seasonal announcement

Where it doesn't:

• Three bands on one page. The eye gives up and none of them win.

Check the Contrast

Dark band with light text, or light band with dark text. If you have to squint at your phone in daylight, pick a stronger pair.

Border Weight

How thick the lines around cards and panels are, in pixels.

Weight	Feels like
1px	Quiet, modern, gets out of the way
2px	Confident, a little more graphic
3px and up	Bold, playful, poster-like

Heavier borders draw more attention to the edges of things, so they suit spaces with a strong graphic identity—a boxing gym, a print studio—more than a meditation retreat.

Shadow Style

How your cards sit on the page.

Style	What it looks like	Suits
None	Flat. Cards sit right on the page.	Editorial, calm, print-like
Soft	A gentle blur underneath, like real light.	Warm, familiar, easy
Hard	A solid offset block behind each card, no blur.	Graphic, energetic, bold

Hard shadows use your own text color rather than a generic grey, so they stay inside your palette. A deep plum theme gets a plum shadow, not a black one.

Pair Them Thoughtfully

Hard shadows and heavy borders belong together. Soft shadows go better with thin borders. Mixing a hard shadow with a hairline border tends to look accidental.

Spacing Scale

How much room sits between the sections of your pages. It's a multiplier, so it scales everything at once and keeps your rhythm even.

Scale	Result	Good when
Below 1	Tighter	You have a lot to say and want it above the fold
1	Normal	Most spaces
Above 1	Airier	Fewer, bigger statements; calm, spacious brands

Small moves go a long way. Try 0.9 or 1.15 before anything more dramatic.

Heading Letter-Spacing

How tightly the letters in your headings sit together.

• Tighter (a negative value) makes big headings feel modern and packed. It works best on large display type.
• Looser (a positive value) makes small headings and all-caps text easier to read.

Only your headings change. Body text stays as it is, because tracking hurts readability at small sizes.

Check It on a Long Heading

Tight tracking looks great on one word and can look cramped on eight. Preview your longest page title before you commit.

Script Font

If your site mixes Thai and English—or any two scripts—you can give each one its own display face.

Here's how it works:

1. Your title font handles Latin headings
2. Your script font handles headings written in Thai or another non-Latin script
3. Tatiya picks between them automatically, heading by heading

You don't tag anything. A Thai heading gets the Thai face, an English heading on the same page keeps the Latin one.

Prices and punctuation don't count as a change of script, so a heading like ฿350 stays on your Latin display font rather than flipping mid-line.

Choosing a pair:

• Match the weight and the mood, not the letterforms—scripts are built differently
• Compare them at the same size, side by side, before deciding
• If you're unsure, leave it empty. Your body font already handles both scripts.

Putting It Together

A few combinations that hang together:

Feel	Border	Shadow	Spacing	Tracking
Calm and editorial	1px	None	Airier	Slightly tight
Warm and welcoming	1px	Soft	Normal	Normal
Bold and graphic	2-3px	Hard	Normal	Tight
Dense and practical	1px	Soft	Tighter	Normal

Pick a row, live with it for a week, then adjust one thing at a time.

Check Your Changes

After you save a change:

1. Preview your site to see how it looks
2. Check both desktop and mobile views
3. Look at a page with cards on it, like Pricing—that's where borders and shadows show up most
4. Look at your longest heading, where letter-spacing shows up most

What's Next?

Your site's look is set. Now let's fill it with words. Head to Edit Your Pages.

---

Change One Thing at a Time

It's tempting to set all seven at once. Change one, look at your site, then move on. That way you always know which setting did what.