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, charcoalrgb(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
