Modern Tech vs Sustainable Green
Two restrained pages, both white, both one accent. They disagree about whether restraint means precision or absence.
Short answer: Modern Tech expresses care through technique — a 56px grid fading out behind the hero, mono numerals, an 8px button radius and a 1px shadow. Sustainable Green expresses care by removing all of it: zero box-shadows on the page, system fonts, and 1px rules doing the work borders normally do.
What actually separates them
Modern Tech is engineered. The hero sits on a two-axis grid of 1px lines at 56px spacing, masked to fade to nothing by 78% of the way down, so it reads as texture rather than graph paper. Numbers and labels are Roboto Mono, which makes digits align across rows — the detail that makes a product page feel built rather than styled.
Sustainable Green is subtractive. There is not a single box-shadow in the stylesheet. Sections are separated by 1px #dfe3e0 rules, service items are marked with a 2px left border in #1f7a4d instead of a card, and the only font family is the system stack. It is also the fastest page in the gallery, because there is nothing to download beyond one CSS file.
Decision table
A filled dot marks the side that handles the dimension more convincingly. It is a judgement, not a rule — several rows are genuinely a tie.
| Dimension | Modern Tech Style | Sustainable / Green Design |
|---|---|---|
| Depth | ● One 1px shadow on buttons; a masked grid behind the hero | No shadow anywhere, at all |
| Typefaces | Inter plus Roboto Mono for numerals | System stack only |
| Separation | Cards at 8px radius with a hairline border | ● 1px rules and a 2px green left border |
| Accent use | Blue fills on primary buttons and tags | One green, mostly as a 2px mark |
| Radii | 8px buttons, 999px tags | 4px buttons, 50% on the one circle |
| Headline measure | Full container width | ● max-width: 17ch |
The CSS that changes
These are the declarations that make the difference visible. Everything else — font sizes, spacing, section order — is shared, because both pages use the same markup.
| Property | Modern Tech Style | Sustainable / Green Design |
|---|---|---|
| Hero texture | linear-gradient grid, background-size: 56px 56px, mask fades to 78% |
none |
| Numerals | font-family: 'Roboto Mono' |
inherits the system stack |
| Service item | card: 1px border, 8px radius |
border-left: 2px solid #1f7a4d; no card |
| Shadow | box-shadow: 0 1px 2px rgba(15,23,42,.12) |
box-shadow: none (0 occurrences in the file) |
When each one wins
Modern Tech Style wins when
- The page sells something technical and the precision is part of the pitch
- There is real data — numbers, figures, statuses — that benefits from mono alignment
- You want a designed feel without colour, imagery or ornament
Sustainable / Green Design wins when
- Page weight and honesty are part of the brand: no webfont, no shadow, nothing decorative
- The content is long and mostly text, so rules and whitespace are enough
- The organisation is a public body, a co-op or a climate brand where restraint is expected
Steering a model to one or the other
The deciding clause is whether shadows exist. Say "one accent, system fonts, zero box-shadows, 1px rules between sections" and you get the green page. Say "a faint 56px grid behind the hero that fades out, mono numerals for all figures, 8px button radius with a 1px shadow" and you get the tech page. A model asked for "clean minimal white with a green accent" will produce neither: it will add a webfont, a soft shadow, and land on a generic SaaS look.