# Greenspace — Style Reference
> Monumental monochrome canvas
**Theme:** dark
Greenspace embodies a brutalist-inspired minimalism, featuring stark monochrome surfaces and expansive negative space. The visual system operates on a high-contrast binary of black and white, punctuated by muted gray typography that hints at legacy and heritage. Typography is bold and architectural, often serving as a primary visual element, while a generous use of spacing emphasizes clarity and the monumental scale of projects.
## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Greenspace Carbon | `#000000` | `--color-greenspace-carbon` | Page backgrounds, significant surface areas, default text |
| Subtle Ash | `#bebebe` | `--color-subtle-ash` | Muted text, inactive links, secondary navigation elements – creates a whispered presence against primary backgrounds |
| Canvas White | `#ffffff` | `--color-canvas-white` | Hairline borders, dividers, input outlines, and card edges on light surfaces. Do not promote it to the primary CTA color |
## Tokens — Typography
### haas_grotesk — Primary display and content typography. Its direct and unadorned presence underpins the brand's architectural aesthetic. · `--font-haasgrotesk`
- **Substitute:** Inter
- **Weights:** 400
- **Sizes:** 24px, 72px
- **Line height:** 1.03, 1.15, 1.17
- **Role:** Primary display and content typography. Its direct and unadorned presence underpins the brand's architectural aesthetic.
## Tokens — Spacing & Shapes
**Base unit:** 4px
**Density:** spacious
### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 37 | 37px | `--spacing-37` |
| 200 | 200px | `--spacing-200` |
### Border Radius
| Element | Value |
|---------|-------|
| none | 0px |
### Layout
- **Section gap:** 200px
- **Card padding:** 37px
- **Element gap:** 37px
## Components
### Navigation Link (Active)
**Role:** Main navigation and hero links when active or hovered.
Text in Canvas White (#ffffff) on Greenspace Carbon (#000000) background. Font is haas_grotesk, 72px, weight 400, line height 1.03.
### Navigation Link (Inactive)
**Role:** Main navigation and hero links when inactive.
Text in Subtle Ash (#bebebe) on Greenspace Carbon (#000000) background. Font is haas_grotesk, 72px, weight 400, line height 1.03.
### Project List Item
**Role:** Listings for selected projects.
Text in Subtle Ash (#bebebe) on a white background. Font is haas_grotesk, 24px, weight 400, line height 1.15. No explicit padding or border.
### Section Separator
**Role:** Visual divider for content sections.
Implied by 200px vertical spacing, with a strict binary shift between carbon and white background compositions. No explicit line or element.
## Do's and Don'ts
### Do
- Prioritize Greenspace Carbon (#000000) as the dominant background color for most page areas and major content blocks.
- Use Canvas White (#ffffff) sparingly for text on dark backgrounds and for high-contrast link states.
- Employ Subtle Ash (#bebebe) for all secondary and tertiary text, including inactive navigation and project listings, to create a sense of understated authority.
- Maintain a generous 200px vertical section gap to enforce strict separation and emphasize content monumentality.
- Use haas_grotesk (or substitute Inter) at 72px with a line height of 1.03 for all primary calls to action and prominent headings.
- Leverage haas_grotesk (or substitute Inter) at 24px with a line height of 1.15 for all body text, project lists, and secondary content blocks.
- Adhere to a strict 0px border-radius system across all components and elements for a brutalist, architectural feel.
### Don't
- Avoid introducing any additional chromatic colors; maintain a strictly achromatic palette.
- Do not use subtle gradients or soft shadows; elevation is achieved through color contrast and spatial separation.
- Do not create explicit card borders or outlines; content boundaries are defined by background changes and spacing.
- Do not use smaller font sizes for captions or body text; the minimal display emphasizes impact over detail density.
- Avoid complex or decorative imagery; visuals should be integrated as impactful, high-contrast product shots or abstract elements.
- Do not layer elements or use overlays unless functionally critical; prioritize flat, distinct content blocks.
- Do not vary line heights or letter spacing from the tokenized values; consistency is key to the system's precision.
## Imagery
This system primarily uses stark, high-contrast product photography with deep blacks and bright highlights. Imagery is usually full-bleed or cropped tightly, creating immersive backgrounds or focused product showcases. There are no illustrations or complex graphical elements; the focus is on the object or scene itself, often with a moody, almost cinematic treatment. Icons are minimal, likely monochromatic, and serve purely functional roles. The density is image-heavy in hero sections, with images serving as dominant visual anchors rather than decorative accents.
## Layout
The page primarily utilizes a full-bleed layout, where content sections often extend across the entire viewport width. The hero section features a prominent visual with large, centered navigation elements. Content is typically arranged in distinct, vertically stacked blocks that leverage large section gaps (200px) to create a spacious rhythm. There's a strong emphasis on full-width content blocks and large-scale typography, suggesting a contained but expansive page model. Navigation is likely a sticky top bar or off-canvas element from the 'GS' emblem, given the minimal on-page navigation elements.
## Agent Prompt Guide
Quick Color Reference:
text: #ffffff
background: #000000
border: no distinct border color
accent: no distinct accent color
primary action: no distinct CTA color
Example Component Prompts:
1. Create a full-width header: Greenspace Carbon (#000000) background. Left-aligned 'GS' text in Canvas White (#ffffff), haas_grotesk (or Inter) at 72px, weight 400, line height 1.03. Right-aligned navigation links 'Create' and 'Legacy' in Subtle Ash (#bebebe), haas_grotesk (or Inter) at 72px, weight 400, line height 1.03.
2. Create a 'Selected Projects' section: Canvas White (#ffffff) background. Heading 'Selected Projects' in Greenspace Carbon (#000000), haas_grotesk (or Inter) at 24px, weight 400, line height 1.15. Project list items 'Battersea Power Station', 'Bicycle Therapeutics' in Subtle Ash (#bebebe), haas_grotesk (or Inter) at 24px, weight 400, line height 1.15. Maintain 200px vertical spacing above this section.
3. Create a hero background: Greenspace Carbon (#000000) full-bleed. Centered text 'Create Legacy' with 'Create' in Subtle Ash (#bebebe) and 'Legacy' in Canvas White (#ffffff), both haas_grotesk (or Inter) at 72px, weight 400, line height 1.03. Text is stacked vertically, with 37px vertical spacing between words.
## Similar Brands
- **A24** — Similar use of high-contrast black/white, minimal UI, and large, impactful typography for brand presence.
- **Brutalism.com** — Embraces strict monochromatic palettes, generous spacing, and unadorned typography as primary design elements.
- **Studio Dumbar** — Clean, highly structured layouts with a focus on typography and strong color contrast to create a memorable brand identity.
- **B&W Tek** — Often uses strong black and white photography with minimal text overlay, conveying sophistication through severity.
## Quick Start
### CSS Custom Properties
```css
:root {
/* Colors */
--color-greenspace-carbon: #000000;
--color-subtle-ash: #bebebe;
--color-canvas-white: #ffffff;
/* Typography — Font Families */
--font-haasgrotesk: 'haas_grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-2xl: 24px;
--leading-2xl: 1.17;
--text-5xl: 72px;
--leading-5xl: 1.15;
/* Typography — Weights */
--font-weight-regular: 400;
/* Spacing */
--spacing-unit: 4px;
--spacing-37: 37px;
--spacing-200: 200px;
/* Layout */
--section-gap: 200px;
--card-padding: 37px;
--element-gap: 37px;
/* Named Radii */
--radius-none: 0px;
}
```
### Tailwind v4
```css
@theme {
/* Colors */
--color-greenspace-carbon: #000000;
--color-subtle-ash: #bebebe;
--color-canvas-white: #ffffff;
/* Typography */
--font-haasgrotesk: 'haas_grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-2xl: 24px;
--leading-2xl: 1.17;
--text-5xl: 72px;
--leading-5xl: 1.15;
/* Spacing */
--spacing-37: 37px;
--spacing-200: 200px;
}
```
High-contrast digital canvas – a…
Black canvas, white light
Brutalism meets engineered…
Sculpted Minimalism on Canvas. An…
Graphic Monochrome Canvas: crisp,…
High-contrast digital brutalism.
Brutalist industrial canvas
Monochromatic Canvas, Vivid…
Monochrome Gallery Canvas – a…
Black canvas, typographic drama

Minimalist digital gallery
Architectural blueprint on white…
Minimalist editorial canvas; stark…
Editorial Minimal Canvas — Large,…
Raw concrete with meticulous…
Midnight Grid, Sharp Light
Monochrome Grid Blueprint
Gallery Canvas, Monochromatic…
Black & White Blueprint: A stark,…
monochromatic minimalist gallery