TGP Design System · Foundations V1 · October 2026
Design System
The rules the working model is built from. Every page in the model uses only what is on this page. Sizes are designed at 1920px and scale smoothly down to a phone; the green numbers show the live value at your current window width. Press G anywhere to show the grid.
Grid
| Token | At 1920 | At 375 | Now | Rule |
|---|---|---|---|---|
--margin | 120px | 24px | Content edge, every page. Text and inset images align here. | |
--gutter | 48px | 16px | Space between the 12 columns. | |
| Column | 96px | stacks | 12 columns. Below 820px, content goes full width. | |
--edge | 48px | 20px | Nav and logo frame, symmetrical. Wider than the content margin on purpose. | |
--seam | 18px | 8px | Gap inside image pairs and face grids. | |
| Breakpoint | 820px | One breakpoint. Above it, the 12-column grid; below it, a single column. | ||
Spacing
Every vertical gap comes from this scale. The three largest steps scale with the screen.
--s-1--s-2--s-3--s-4--s-5--s-6--s-7--s-8| Use | Step |
|---|---|
| Between major sections | --s-8 (168px at 1920) |
| Between related blocks (title to lead, image to body) | --s-6 |
| Image to caption, heading to text | --s-4 |
| Caption title to caption text | --s-2 |
Type
A 1.5× scale: 16, 24, 36, 54, 81, 120. Roles are named by job. DM Serif Text carries the voice; Inter carries information.
Bringing the outdoors indoors
Bringing the indoors, outdoors
We design thoughtful spaces that celebrate the environment and create meaningful connections.
Related Projects
living
working
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Pear Village Courtyard
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Structural Engineer · © Guzzardo Landscape Architecture, 2026
Color
Text colors
--c-ink #4E4D4D
8.3:1 on white
All primary text
--c-ink-muted #6B6B6B
5.3:1 on white
Secondary text, any size (replaces #7F7F7F and #A7A7A7)
--c-green-text #5A7A2B
4.9:1 on white
Green type: caption area names, link hover, project subtitle
Brand colors (graphic treatment and logo only)
--c-green #7EA841
2.8:1, never text on white
--c-yellow #E7B621
1.9:1, never text on white
--c-surface-subtle #F4F4F1
Quiet surfaces
Images
Four proportions, defined by ratio and column span rather than pixels. Landscape is true 16:9 everywhere, matching the client photography.
Layouts
Components
IDs match the Component Registry (B = block, E = element, C = card). Green IDs are new in the model and not yet in the registry. Header and footer are the live ones at the top and bottom of this page.
We are landscape architects who translate innovative ideas into dynamic built environments.
Bringing the indoors, outdoors Pear Village
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
- Location
- Seattle, WA
- Size
- 8 acres
- Client
- Expedia Group
Pear Village Courtyard
Project name in ink, area in green. Caption text always ink, max 6 columns.
Body copy runs 9 columns; a callout can sit in columns 11 to 12.
- Architect
- SOM
- Structural Engineer
- Thornton Tomasetti
- Civil Engineer
- Langan
- Studio
- 123 Placeholder Street
San Francisco, CA - info@tgp-inc.com
- Phone
- 415 555 0100
Graphic Treatment
In progress in Figma, so intentionally left out of the system for now. The model contains no angular shapes except one piece: the Home splash, ported as is from Claude Design "Guzzardo Home v5".
| Piece | Where | Status |
|---|---|---|
| Home splash: hero photo wipes in through the yellow angle, then the angle exits as the statement shape slides in on scroll | Home | From Claude Design v5, timings unchanged |
| Header logo: static yellow logo (logo_yellow.svg) | Header, every page | Replaced the animated v5 logo (V1.2) |
| Everything else (section shapes, bands, dot fields) | None | Waiting on Figma |
Page Matrix
Which components each page in the working model uses.
| Component | Home | Project | People L | People | Case St. L | Case St. | Careers | Contact |
|---|---|---|---|---|---|---|---|---|
| B01 Header | ||||||||
| B02 Hero, full bleed | ||||||||
| Hero, inset | ||||||||
| E18 Carousel dots | ||||||||
| E19 Typology word list | ||||||||
| E01 Title | ||||||||
| E03 Lead / statement | ||||||||
| E09 Facts | ||||||||
| B04 Full-bleed image + E08 caption | ||||||||
| B05 Story / body | ||||||||
| Image pair, 4:5 | ||||||||
| B07 Image row | ||||||||
| B08 Drawing / site plan | ||||||||
| E20 Inline callout | ||||||||
| C01 / B09 Cards | ||||||||
| B10 Face grid | ||||||||
| E21 Credits | ||||||||
| E22 Pager | ||||||||
| B12 Job listing | ||||||||
| B13 Contact block | ||||||||
| E17 Input + submit | ||||||||
| Home splash (Claude Design v5) | ||||||||
| B11 Footer |