№ cornellbotanicgardens-org

Cornellbotanicgardens

Earthy ochre and muted sage, clean sans-serif, spacious and serene natural light.

Manifestominimalism swiss editorial culture educationlight

The hero image establishes a sense of place with a wide, calming view. Clean typography and ample white space create a feeling of openness and accessibility. The overall impression is one of quiet authority and natural beauty. · botanic gardens, nature website, environmental education, gardens website, nonprofit design, aerial photography, cornell university, natural areas, conservation, green space

Cornellbotanicgardens - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Cornellbotanicgardens - full page scroll

Cornellbotanicgardens - mobile full page

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: earthy · muted · cool

SwatchHexOKLCHSuggested roleCopy

Hex#c3cc33
OKLCHoklch(81.2% 0.166 113)
RoleDominant
find sites →
Hex#211704
OKLCHoklch(21.2% 0.036 82)
RoleSurface
find sites →
Hex#dfe494
OKLCHoklch(89.7% 0.102 111)
RoleInk
find sites →
Hex#ac935b
OKLCHoklch(67.3% 0.080 86)
RoleAccent
find sites →
Hex#c4ccbf
OKLCHoklch(83.5% 0.020 133)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Sample
h2	Proxima-Nova	24px	700	1.4	Aa Bb Cc
h3	proxima_nova	24px	700	1.25	Aa Bb Cc
body	Proxima-Nova	16px	400	1.4	Aa Bb Cc
button	Arial	28px	400	1	Aa Bb Cc

Spacing scale

14px

30px

Radius scale

0px

3px

5px

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #c3cc33;
  --color-surface: #211704;
  --color-ink: #dfe494;
  --color-accent: #ac935b;
  --color-detail: #c4ccbf;
}

/* CSS variables exposed by source */
:root {
  --swiper-theme-color: #007aff;
  --swiper-navigation-size: 44px;
  --sk-size: 40px;
  --sk-color: #333;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Cornellbotanicgardens.
Reference design system (extracted from the live site):
- Palette: #c3cc33, #211704, #dfe494, #ac935b, #c4ccbf
- Typefaces: Proxima-Nova, Arial
- Macrostructure: Manifesto
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/cornellbotanicgardens-org

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Proxima-Nova

24px

700

1.4

Aa Bb Cc

proxima_nova

24px

700

1.25

Aa Bb Cc

body

Proxima-Nova

16px

400

1.4

Aa Bb Cc

button

Arial

28px

400

Aa Bb Cc

:root { --color-dominant: #c3cc33; --color-surface: #211704; --color-ink: #dfe494; --color-accent: #ac935b; --color-detail: #c4ccbf; } /* CSS variables exposed by source */ :root { --swiper-theme-color: #007aff; --swiper-navigation-size: 44px; --sk-size: 40px; --sk-color: #333; }

Build a landing page in the visual style of Cornellbotanicgardens. Reference design system (extracted from the live site): - Palette: #c3cc33, #211704, #dfe494, #ac935b, #c4ccbf - Typefaces: Proxima-Nova, Arial - Macrostructure: Manifesto Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/cornellbotanicgardens-org