Styleguide
Live design tokens & UI patterns for HotSpringMaps. Use this page to verify colors, typography, buttons, cards, inputs, links, spacing, and responsive embeds.
Colors
brand.forest — #2E5538
brand.aqua — #36A8A8
brand.stone — #F5F5F0
brand.sand — #E9E6DD
Typography
H1 — Big Heading
H2 — Section Title
H3 — Subsection
Body — DM Sans with comfortable line-height. Use text-gray-800 on bg-brand-stone backgrounds. This paragraph demonstrates default body text.
Small — for captions & meta.
Buttons
Buttons include focus-visible rings and a loading state via [data-loading="true"].
Links
Default link with utility: Terms
Links use underline decoration, brand hover color, and focus-visible rings.
Cards
Card Title
Use .card for consistent padding, subtle border, and soft shadow.
Another Card
Cards are great for tiles, result items, and spring info blocks.
Inputs
We’ll never share your email.
Please choose a region.
Embeds (Responsive 16:9 Video)
This section uses Tailwind’s aspect-video utility for responsive embeds.