Thailand Fishing — Style Guide

Design tokens, typography, components, and spacing used across the site.

Color Palette

Black#000000--_brand-colors---black

Orange Thailandhsla(13, 76%, 48%)--_brand-colors---orange-thailand

White#FFFFFF--_brand-colors---white

Box Grayhsla(0, 0%, 91%)--_brand-colors---box-gray

Secondary Grayhsla(0, 0%, 25%)--_brand-colors---secondary-gray

Typography

Heading 1

H1Montserrat · inherits site default scale

Heading 2

H2 — SectionMontserrat · 24px / 25px · 700

Heading 3

H3 — Card TitleMontserrat · 20px / 22px · 700

Heading 4 — Subsection

H4 — SubsectionMontserrat · 1.5rem / 1.8rem

Category Label

Label / NavMontserrat · 14px · 700 · uppercase · 1px letter-spacing

Body text. The quick brown fox jumps over the lazy dog. Used across paragraphs, captions, and UI descriptions throughout the site.

BodyMontserrat · 14px / 20px · 400 · #333

Image caption text, secondary descriptive copy.

Caption / ItalicVarela · italic · hsla(0,0%,33%)

Navigation Link

Nav LinkMontserrat · 1.2rem / 20px · 0.25px letter-spacing

Spacing Scale

0.1rem~1.6px · --0-1-rem

0.2rem~3.2px · --0-2-rem

0.3rem~4.8px · --0-3-rem

0.4rem~6.4px · --0-4-rem

0.5rem~8px · --05-rem

1rem~16px · --1-rem

2rem~32px · --2-rem

4rem~64px · --4-rem · Section spacing

Border Radius

Sharp0 — Default buttons, content blocks

0.3remButton_Black_Standard, form elements

12pxDropdown menus (Nav dropdowns)

Buttons & Interactive Elements

Button PrimaryBlack · no radius · 12px · uppercase · 2px tracking

CTA ButtonOrange · 0.3rem radius · 12px · uppercase

Category LinkBlack bg · white text · 700 weight · 0.5rem padding

Outline ButtonTransparent · 2px black border · uppercase

Borders & Dividers

2px solid Black — section accents

4px solid Black — top border (card highlight)

4px solid Orange — primary card accent

0.3px solid Gray — content row separator

1px White (22px tall) — Navbar divider

Elevation & Shadow

FlatNo shadow. Used on most containers.

Card Shadow0 2px 5px 0 rgba(0,0,0,0.2) — blog cards

Layout & Grid

Max container — 1440px

Standard container — 1260px

Narrow container — 1140px

Content width — 1024px

3-col grid — 1fr 1fr 1fr · gap: 0.5rem

4-col grid — 1fr 1fr 1fr 1fr · gap: 2rem

2-col split — 65% / 35%

Image Aspect Ratios

16:9

16/9 — Primary image ratio for all cards, hero, and blog images

1:1

1/1 — Author thumbnails (max-width: 25%)