# tolans.com — Design System

## 1. Visual Theme & Atmosphere

Tolans is a service or product site built in Webflow that embodies the understated elegance of natural, organic design. The background is a warm parchment-beige (`rgb(244,242,231)`) — the same family as bespoke stationery or aged paper. Against this, near-dark charcoal text (`rgb(44,44,44)`) provides quiet legibility without the harshness of pure black. The palette tokens reveal a green accent (`#01a858`) sitting in the system but not asserting itself in the captured visible states — reserved for data tables or secondary highlights. This is design that whispers rather than shouts.

## 2. Color Palette & Roles

| Role | Value | Usage |
|---|---|---|
| Canvas | `rgb(244,242,231)` (`--light-beige: #f4f2e7`) | Warm parchment background |
| Values section | `rgb(250,248,243)` | Slightly lighter warm surface |
| Card bg | `rgb(241,240,232)` / `rgb(237,236,226)` | Component inner surfaces |
| White overlay | `rgb(255,255,255)` | Navigation menu dropdown |
| Body text | `rgb(44,44,44)` (`--gray-2: #2c2c2c`) | Charcoal — primary readable |
| Dark charcoal | `rgb(71,71,68)` | Menu line, stronger accent |
| Token green | `#01a858` | Defined but subdued accent |
| Token beige | `#e2e0c3` | Secondary warm tone |

The entire palette lives in warm earth tones. No cool colors, no blue, no digital freshness — this is an analog warmth.

## 3. Typography Rules

A single typeface: **GT America** — a contemporary grotesque with American proportions.

- `body/a`: GT America, ~15px, weight 400, ~22.6px line-height — the only values captured

No explicit heading typography captured — the minimal CSS data suggests headings may use the same GT America stack at varied sizes. The consistent use of one typeface across body and links suggests a restrained single-family approach.

## 4. Component Stylings

Border radius values: `15px` (standard), `999px` (pill), `11px` (compact), `9px` (small). A consistent rounded vocabulary — approachable but not playful. No shadows detected. The navigation button uses the canvas background as its fill. Swiper carousel arrows use opacity to signal interactivity (30% default → 80% hover) rather than color changes.

## 5. Layout Principles

Webflow with 8 breakpoints (479–1680px). Clean standard mobile/tablet/desktop/wide progression. No explicit gap or padding values beyond defaults — Webflow's grid system handles layout. The page uses several distinct named surface sections (values, details) suggesting a stacked-section marketing layout.

## 6. Depth & Elevation

No shadows. Depth through warm beige gradations — five distinct levels from pure white (`#fff`) through light beige (`#f4f2e7`) to warm cream variants. The darkest surface is the menu accent line `rgb(71,71,68)`. Everything is above the fold in terms of luminance.

## 7. Do's and Don'ts

**Do:** Maintain the warm beige world — every surface should feel sun-warmed. Use GT America at regular weight throughout. Allow opacity (30–80%) to signal interactive states rather than color changes.

**Don't:** Add cool or blue tones — the warmth is the identity. Don't use pure white as the background; the beige warmth is essential. Don't add drop shadows or hard elevation.

## 8. Responsive Behavior

8 breakpoints from 479 to 1680px — standard Webflow responsive grid. Key transitions at 768 and 992px for tablet and desktop layouts.

## 9. Agent Prompt Guide

> "Design in the style of tolans.com: warm parchment `rgb(244,242,231)` canvas, GT America typeface at regular weight, charcoal `rgb(44,44,44)` text, opacity-based hover states (30–80%), no shadows, no cool colors, 15px standard radius with 999px pills, Webflow-style warm analog aesthetic."

*Generated by Sparkbites — extracted from live CSS analysis*