DESIGN SYSTEM
A cleaner grid, clearer tokens, and repeatable building blocks for the whole site.
Use this page as the canonical reference for color swatches, type scale, responsive grid rules, radius, liquid glass treatments, navigation, and reusable components already present in the project.
Grid
1180px content / flexible cards
Radius
12 / 20 / 32 / pill
Liquid glass
Blurred translucent surfaces
Components
Nav, buttons, cards, accordions
Color swatches
Current site tokens collected into one visual reference. Prefer these names before adding new raw colors.
Navy
Primary deep surface
Light blue
Accent and highlights
Beige 40
Warm support surface
White
Light content surface
Type scale
Step 3 / 76px / golden ratio display
Restoring blue carbon
Step 2 / 47px / section title
Evidence-led conservation
Base / 18px / body rhythm
Body text starts at 18px and scales upward by the golden ratio. Use this as the anchor for readable bilingual pages before creating one-off sizes.
Golden ratio scale
18
Body base
29
Cards / h3
47
Section title
76
Display
Main localization-ready typography
Use one shared Geist-based type scale for all localized pages. Keep language handling in localization, not in separate design-system styles.
MAIN / GEIST
Blue carbon creates living coastlines.
Use the same clean preset stack across pages so localized content inherits spacing, scale, and rhythm consistently.
LOCALIZED COPY
ทุนธรรมชาติเพื่อชายฝั่งที่ยั่งยืน
Localized text should use the same main presets. If a locale needs script-specific adjustment later, handle it in localization rather than duplicating this system.
Grid, radius, and liquid glass
Responsive grid
Desktop cards use flexible grid columns. Phone views become vertical stacks when the layout reads as a single content sequence.
Corner radius
Use 20–24px for documentation cards, smaller inner radii, and pills for compact CTAs.
Liquid glass
Use translucent fills, a fine border, blur, and soft depth. Keep glass surfaces over dark or image-rich areas only.
Repeatable elements
Navigation
Buttons and pills
Case Studies
Case Studies
Case Studies
Case Studies
Case Studies
Cards
Meeting
หัวข้อข่าวและกิจกรรมล่าสุด
A concise English summary of this update, designed to stay readable in two lines.
Logo vector set specimen
Existing component families: Navigation, Nav Bar, Footer, Country thumbnail, News Card, Hover Image Card, Card Seagrass, Card Wetland, Card Coral Reef, Water button, Button/Secondary, Pill, Accordions, 3D Book, Video, Clients Card.
