Rival collected source screenshot — Verdant Supply — Style Reference · Source preview ↗

Verdant Supply — Style Reference

A crisp, botanical B2B sourcing direction built from original geometry.

Verdant Supply translates the source's clean agency rhythm into an original B2B service path: orient a business buyer, compare service scopes, prepare a project brief, then confirm a local inquiry draft. It is a high-effort adaptation, not a recreation. All names, copy, CSS and shapes are original.

https://bootstrapmade.com

Color Palette

Implementation tokens for this adaptation; use the foreground/background pairs specified in DESIGN.md.

Reference colors

Typography

Font sizes and roles follow the delivered implementation. Check the font-provider requirements in Quick Start before production use.

Type Scale

hero76px · 800 · 1.03
card24px · 700 · 1.03
lead20px · 400 · 1.5
body16px · 400 · 1.6
label13px · 800 · 1.35
caption12px · 800 · 1.4

Fonts

Font family

Weights: 800 · 400 · 700
Sizes: 12–76px · 6 values
Line heights: 1.03–1.6 · 5 values
Fallback: sans-serif

caption / label / body / lead / card / hero

Spacing & Shape

Spacing

Purpose	Value	Preview
Density
Base unit
Page shell
Hero
Phone

Border Radius

Purpose	Value	Preview
cards
controls

Full spacing scale

1 --space-1
3 --space-3
4 --space-4
6 --space-6
section --space-section

Guidelines

Do

Keep the B2B journey at discovery → service scope → project brief → local inquiry confirmation.
Use Leaf for actions and Lime for focal geometry.
Keep labels, errors, keyboard focus and reduced-motion support visible.

Don't

Do not connect the local inquiry confirmation to a CRM, email service, database or automatic submission.
Do not reuse source marks, code, photos, people, ratings, projects or contact details.
Do not turn generic labels into unverified product or service claims.

Design.mdMarkdown

DESIGN-reference-394c88bf0897.md

# Verdant Supply — Style Reference
> A crisp, botanical B2B sourcing direction built from original geometry.

**Theme:** light

Verdant Supply translates the source's clean agency rhythm into an original B2B service path: orient a business buyer, compare service scopes, prepare a project brief, then confirm a local inquiry draft. It is a high-effort adaptation, not a recreation. All names, copy, CSS and shapes are original.

## Tokens — Colors

| Name | Value | Token | Role |
|---|---|---|---|
| Field Canvas | `#f6f7f1` | `--canvas` | Page field |
| Paper | `#ffffff` | `--paper` | Cards and fields |
| Slate Ink | `#1e293b` | `--ink` | Type and dark bands |
| Leaf | `#466d1d` | `--leaf` | Primary action and markers |
| Lime | `#b9d65d` | `--lime` | Hero geometry and inquiry field |
| Mist | `#e8eed8` | `--mist` | Alternate card surface |

## Tokens — Typography

Arial is a local fallback only; no remote font is loaded.

### Type Scale

| Role | Family | Weight | Size | Line Height | Token |
|---|---|---:|---:|---:|---|
| caption | Arial | 800 | 12px | 1.4 | `--text-caption` |
| label | Arial | 800 | 13px | 1.35 | `--text-label` |
| body | Arial | 400 | 16px | 1.6 | `--text-body` |
| lead | Arial | 400 | 20px | 1.5 | `--text-lead` |
| card | Arial | 700 | 24px | 1.03 | `--text-card` |
| hero | Arial | 800 | 76px | 1.03 | `--text-hero` |

## Tokens — Spacing & Shapes

Comfortable spacing, hairline rules, flat panels and a clipped diamond mark make the system feel precise rather than decorative.

### Spacing Scale

| Name | Value | Token |
|---|---:|---|
| 1 | 8px | `--space-1` |
| 3 | 16px | `--space-3` |
| 4 | 24px | `--space-4` |
| 6 | 48px | `--space-6` |
| section | 104px | `--space-section` |

### Border Radius

| Element | Value | Token |
|---|---:|---|
| cards | 2px | `--radius` |
| controls | 2px | `--radius` |

### Layout

- **Page shell:** `--layout-max` / 1200px with `--gutter` / 28px.
- **Hero:** `--hero-min-height` / 620px desktop grid.
- **Phone:** at 760px all grids stack and gutters become 16px.

## Components

### Header and Mobile Navigation
Sticky navigation becomes a disclosed menu on phones. Escape, the toggle and a menu link close it.

### Buyer-Orientation Hero
The hero uses a flat lime ring and numbered panel made only with CSS. It frames service discovery and a project-inquiry action.

### Service-Scope Cards
Three ruled cards organize generic service scopes. They must not state availability, certification, delivery, capacity or performance facts before approval.

### Application Grid
Dark-grid prompts help a buyer describe use conditions and service questions; they are not proof of capability.

### Local Inquiry Draft
The inquiry starts without a selected scope, accepts one project direction, and opens a labeled local confirmation form. It focuses the first error and gives a local-only completion state; it sends and stores nothing.

## Do's and Don'ts

### Do
- Keep the B2B journey at discovery → service scope → project brief → local inquiry confirmation.
- Use Leaf for actions and Lime for focal geometry.
- Keep labels, errors, keyboard focus and reduced-motion support visible.

### Don't
- Do not connect the local inquiry confirmation to a CRM, email service, database or automatic submission.
- Do not reuse source marks, code, photos, people, ratings, projects or contact details.
- Do not turn generic labels into unverified product or service claims.

## Surfaces

| Level | Name | Value | Purpose |
|---:|---|---|---|
| 0 | Field Canvas | `#f6f7f1` | Overall field |
| 1 | Paper | `#ffffff` | Cards and fields |
| 2 | Slate Ink | `#1e293b` | Application and footer |
| 3 | Lime | `#b9d65d` | Inquiry block |

## Elevation

Cards are flat, separated by rules. Buttons move two pixels on hover; they do not gain shadows.

## Imagery

Use no source imagery, logos, screenshots or icons. The ring, diamond and numbered panel are original CSS geometry. Later imagery must be licensed and approved.

## Layout

Desktop order is header → hero → service scopes → application grid → local inquiry confirmation → footer. On narrow screens every grid becomes one column while preserving the inquiry path.

## Agent Prompt Guide

**Quick Color Reference**

Use canvas `#f6f7f1`, ink `#1e293b`, leaf `#466d1d`, lime `#b9d65d` and mist `#e8eed8`. Keep content factual and request-led.

**Example Component Prompts**

1. **B2B hero:** Create a 620px desktop grid with a CSS lime ring, numbered panel and project-inquiry action.
2. **Service-scope grid:** Create three flat ruled cards with generic labels and local brief actions.
3. **Local inquiry:** Validate three fields, focus the first error and state clearly that nothing was sent or saved.

## Similar Brands

- **Gardena** — category clarity can inspire scanability without borrowing identity.
- **Fiskars** — disciplined product grouping can inform structure without copying visuals.
- **Hozelock** — application-led navigation can guide information architecture.

## Quick Start

### CSS Custom Properties

Use this complete local stylesheet as the blank-project starting point. It supplies tokens, responsive layouts, named components, focus states, validation states, local-only feedback, and reduced-motion support.

```css
:root{--canvas:#f6f7f1;--paper:#fff;--ink:#1e293b;--muted:#52606f;--leaf:#466d1d;--leaf-hover:#365716;--lime:#b9d65d;--mist:#e8eed8;--line:#cfd8c0;--focus:#172554;--on-dark:#fff;--font-display:Arial,sans-serif;--font-body:Arial,sans-serif;--layout-max:1200px;--gutter:28px;--hero-min-height:620px;--radius:2px;--text-caption:12px;--text-label:13px;--text-body:16px;--text-lead:20px;--text-card:24px;--text-section:44px;--text-hero:76px;--space-1:8px;--space-2:12px;--space-3:16px;--space-4:24px;--space-5:32px;--space-6:48px;--space-section:104px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--canvas);color:var(--ink);font:400 var(--text-body)/1.6 var(--font-body);overflow-x:hidden}a{color:inherit}button,input,textarea{font:inherit}.shell{width:min(calc(100% - 2 * var(--gutter)),var(--layout-max));margin:auto}.skip-link{position:fixed;left:10px;top:10px;z-index:99;padding:10px 14px;background:var(--lime);transform:translateY(-150%)}.skip-link:focus{transform:translateY(0)}.header{position:sticky;top:0;z-index:20;background:rgba(246,247,241,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}.nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{font:800 22px/1 var(--font-display);letter-spacing:-.06em;text-decoration:none}.brand i{display:inline-block;width:24px;height:24px;margin-right:7px;background:var(--leaf);vertical-align:-5px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}.links{display:flex;gap:26px;list-style:none;margin:0;padding:0}.links a{font-size:var(--text-label);font-weight:700;letter-spacing:.06em;text-decoration:none;text-transform:uppercase}.menu{display:none;border:1px solid var(--ink);background:var(--paper);padding:9px 12px}.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:var(--paper)}.hero:after{content:'';position:absolute;right:-14vw;bottom:-18vw;width:56vw;max-width:760px;aspect-ratio:1;border:72px solid var(--lime);border-radius:50%;opacity:.8}.hero-grid{min-height:var(--hero-min-height);display:grid;grid-template-columns:1.1fr .9fr;align-items:center}.hero-copy{position:relative;z-index:1;max-width:730px;padding:90px 0}.eyebrow{margin:0 0 var(--space-4);color:var(--leaf);font-size:var(--text-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase}.eyebrow:before{content:'◆ ';color:var(--lime)}h1,h2,h3{margin:0;font-family:var(--font-display);line-height:1.03}h1{font-size:var(--text-hero);letter-spacing:-.07em;text-transform:uppercase}h1 em{font-style:normal;color:var(--leaf)}.lead{max-width:610px;margin:var(--space-5) 0;color:var(--muted);font-size:var(--text-lead)}.hero-panel{position:relative;z-index:1;justify-self:end;width:min(100%,420px);padding:26px;border:1px solid var(--ink);background:var(--mist)}.hero-panel:before{content:'01';display:block;color:var(--leaf);font:800 104px/.75 var(--font-display);letter-spacing:-.12em}.hero-panel p{margin:20px 0 0;color:var(--muted)}.button{display:inline-flex;min-height:50px;align-items:center;justify-content:center;border:1px solid var(--leaf);padding:11px 18px;background:var(--leaf);color:var(--on-dark);font-size:var(--text-label);font-weight:800;letter-spacing:.07em;text-decoration:none;text-transform:uppercase;transition:transform .15s,background .15s}.button:hover{background:var(--leaf-hover);transform:translate(-2px,-2px)}.button--quiet{margin-left:10px;background:transparent;color:var(--leaf)}.section{padding-block:var(--space-section)}.heading{max-width:720px;margin-bottom:var(--space-6)}.heading p{margin:var(--space-3) 0 0;color:var(--muted)}h2{font-size:var(--text-section);letter-spacing:-.055em}.cards{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--ink)}.card{min-height:310px;padding:var(--space-5);border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);background:var(--paper)}.card:nth-child(2){background:var(--mist)}.card b{display:block;margin-bottom:62px;color:var(--leaf);font-size:var(--text-label);letter-spacing:.12em}.card h3{font-size:var(--text-card);letter-spacing:-.04em}.card p{color:var(--muted)}.card a{font-size:var(--text-label);font-weight:800;text-decoration:none;text-transform:uppercase}.dark{background:var(--ink);color:var(--on-dark);border-block:1px solid var(--ink)}.dark h2{color:var(--on-dark)}.dark .heading p{color:#d7dfca}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#617080;border:1px solid #617080}.grid article{min-height:210px;padding:var(--space-4);background:var(--ink)}.grid b{display:block;margin-bottom:54px;color:var(--lime);font-size:var(--text-label);letter-spacing:.1em}.grid h3{font-size:var(--text-card)}.grid p{color:#d7dfca}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}.step{padding-top:18px;border-top:5px solid var(--leaf)}.step span{display:block;margin-bottom:var(--space-4);color:var(--leaf);font:800 68px/.8 var(--font-display);letter-spacing:-.1em}.inquiry{background:var(--lime);padding-block:var(--space-section)}.inquiry-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:var(--space-6)}.form{display:grid;gap:var(--space-3)}.field{display:grid;gap:6px}.field label{font-size:var(--text-label);font-weight:800}.field input,.field textarea{width:100%;padding:13px;border:1px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink)}.field textarea{min-height:105px}.field [aria-invalid=true]{border:3px solid #8b2500}.error{min-height:1.3em;color:#5d1b00;font-size:var(--text-caption);font-weight:700}.status{min-height:1.5em;font-weight:700}.inquiry .button{border-color:var(--ink);background:var(--ink)}.footer{padding-top:var(--space-6);background:var(--ink);color:#d7dfca}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--space-5);padding-bottom:var(--space-5)}.footer .brand{color:var(--on-dark)}.footer h3{color:var(--on-dark);font-size:var(--text-label)}.footer p{margin:8px 0}.footer-base{padding-block:var(--space-3);border-top:1px solid #617080;font-size:var(--text-caption)}:where(a,button,input,textarea):focus-visible{outline:3px solid var(--focus);outline-offset:3px}.inquiry :where(a,button,input,textarea):focus-visible,.footer a:focus-visible{outline-color:var(--on-dark)}@media(max-width:760px){:root{--gutter:16px;--space-section:72px;--text-section:34px;--text-hero:48px}.menu{display:inline-flex}.links{position:absolute;top:72px;left:var(--gutter);right:var(--gutter);display:none;flex-direction:column;gap:0;padding:14px;border:1px solid var(--ink);background:var(--paper)}.links[data-open=true]{display:flex}.links a{display:block;padding:12px 0}.hero-grid,.inquiry-grid{grid-template-columns:1fr}.hero-copy{padding:76px 0 38px}.hero-panel{justify-self:start;width:72%;margin-bottom:56px}.cards,.grid,.steps,.footer-grid{grid-template-columns:1fr}.card{min-height:0}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}

```

### Tailwind v4

```css
@import "tailwindcss";
@theme { --color-leaf: #466d1d; --color-lime: #b9d65d; --color-ink: #1e293b; --radius-card: 2px; }
```