# GrowinShade Design System

> **Quality Houseplants, Accessories, Workshops & More.**
> GrowinShade Plant Shop · Est. 2020 · 541 Main St., Islip, NY · growinshade.com · @growinshade

This is the human-readable spec. Exact values live in [`brand.json`](brand.json). If the two disagree, **brand.json wins**. Visual examples are in [`assets/reference/`](assets/reference/).

---

## 1. Brand essence

GrowinShade is a Long Island plant shop founded by husband-and-wife team **Kandice Rogers and Aaron Holmes**, who come from design and construction. It specializes in **houseplants that thrive in shade** (*throwin' shade is a good thing*) and designs its own trellises and accessories. It's built on three pillars:

| **Shop** | **Teach** | **Gather** |
|---|---|---|
| Indoor tropical plants for every experience level, design-forward pottery and accessories | Hands-on workshops that combine plant education and art: pottery, terrariums, propagation, paint & pot | Plant Bingo, pop-ups, Small Business Saturday, the loyalty community |

> *"At GrowinShade, we blend a love for design with a passion for plants."*

**Look and feel:** deep greens, hand-drawn botanical line art, warm Marigold highlights, and chunky friendly headlines. It should feel **lush, crafted, and fun**, like a well-styled shop with a sense of humor, never sterile or corporate.

**Three words:** Lush · Playful · Crafted

---

## 2. Color

### Core palette

| | Name | Hex | Role |
|---|---|---|---|
| 🟩 | **Forest** | `#1A4338` | **Primary.** Logo, dark backgrounds, headings, buttons |
| ⬛ | **Deep Pine** | `#1F3930` | Darkest green. Moody backgrounds, Black Friday, photo overlays |
| 🟨 | **Pistachio** | `#D7E19B` | Logo-light color on Forest or Pine, **and** a signature light background with Forest text |
| 🟧 | **Marigold** | `#F6BE61` | **Signature accent and promotions.** Highlight words, wavy underlines, headline shadows, icons, deals |
| 🟢 | **Mint** | `#92D0AB` | Secondary green. Packaging, badges, soft panels |
| ◻️ | **Mint Mist** | `#D3ECE6` | Light tint background |
| ⬜ | **Paper** | `#F1F2ED` | Warm off-white for print and web sections |
| ⬜ | **White** | `#FFFFFF` | Clean background (care cards, bags) |
| ⬛ | **Ink** | `#191919` | Neutral headline option on white |
| ◽ | **Stone** | `#6B6B6B` | Body copy |
| ◽ | **Line** | `#E9E7E7` | Borders and dividers |
| 🟥 | **Bloom Red** | `#F8353E` | **Online store sale prices and SALE badges**, plus the Easy Care plant badge. Nothing else |

### Proportions
About **50% Forest/Pine or White/Paper** (pick one as the base) · **30% the other** · **10–15% Pistachio/Mint** · **5–10% Marigold**.
Every piece uses one of three bases:

| Base | Look | Used on |
|---|---|---|
| **Dark-led** | Forest or Pine background, Pistachio or White logo, Marigold highlights | Banner, awning, Small Business Saturday, loyalty card, Black Friday |
| **Pistachio-led** | Pistachio background, Forest logo and text, Forest blocks and bands, Marigold outlines | 2026 Bayshore ad, e-ink schedule, letterhead, business card |
| **Light-led** | Paper or White background, Forest text, monstera line art, Marigold pops | Workshop cards, care cards, terrarium guide, Closed sign |

Pistachio-led is the newest direction (2026). It's the warmest and most recognizable, so use it for ads and in-store signage.

### Marigold is the promo color
Marigold signals *"look here, this is good"*: deals, highlight words, and calls to action.
- **On dark:** Marigold text works at any size ("Spend $35 get a **FREE** plant").
- **On light:** Marigold is **never readable text** (1.7:1). Use it as a **fill or shadow behind Forest outlines**, a wavy underline, a button outline, or a solid panel with Forest text.
- Underline the key word or number with the **wavy Marigold rule**.
- Use one Marigold moment per section. If everything is highlighted, nothing is.

### Approved pairings

| Text → Background | Ratio | |
|---|---|---|
| White / Pistachio / Marigold → Forest or Pine | 6.5 – 12.5 | ✅ |
| Forest → White / Paper / Mint Mist / Pistachio | 7.9 – 11 | ✅ |
| Forest or Ink → Marigold | 6.5 – 10.4 | ✅ |
| Forest → Mint | 6.2 | ✅ |
| Stone → White / Paper | 5.3 / 4.7 | ✅ body copy |
| Marigold → White / Paper | 1.7 | ❌ text. Decorative only |
| White → Mint | 1.8 | ❌ never |
| Pistachio → White | — | ❌ never |

### Retired colors
`#99CC99` and `#8CBA8C` (old web sage) → use **Mint**. `#C7FA81` (2025 loyalty-card lime) → use **Pistachio** or **Mint** on reprint.

---

## 3. Typography

| Role | Typeface | Use |
|---|---|---|
| **Display** | **Mont Heavy** (web fallback: **Poppins 800**) | Headlines, promo statements, big numbers, "Learn More" |
| **Label** | **Montserrat** 500–700, UPPERCASE | Eyebrows, contact lines, nav, list items, short taglines |
| **Body** | **Work Sans** 400–500 | Paragraphs, care instructions, product descriptions |
| **Script** | Hand-lettered monoline (artwork only) | "Thank You", "Plant one on me". Use [`thank-you-script.png`](assets/illustrations/thank-you-script.png), never a typed substitute |

```html
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Poppins:wght@700;800&family=Work+Sans:wght@400;500;600&display=swap" rel="stylesheet">
```

### Type scale

| Token | Size / Line | Family |
|---|---|---|
| `display-xl` | 56 / 1.05 | Mont Heavy |
| `h1` | 40 / 1.1 | Mont Heavy |
| `h2` | 32 / 1.15 | Mont Heavy |
| `h3` | 24 / 1.2 | Mont Heavy |
| `eyebrow` | 14, +0.06em, UPPERCASE | Montserrat 600 |
| `body-lg` | 18 / 1.55 | Work Sans 400 |
| `body` | 16 / 1.6 | Work Sans 400 |
| `contact` | 13, UPPERCASE | Montserrat 600 |
| `small` | 13 / 1.5 | Work Sans 400 |

### Signature headline treatment
**Outlined + offset:** Mont Heavy with hollow letters (filled with the background color) and a Forest outline, plus a solid Marigold copy shifted down-right behind it ("Join Our Workshops", "Care Guide"). Use it for **one hero headline per piece**, on light backgrounds only.

```css
.gs-pop { font: 800 56px/1.1 'Mont','Poppins',sans-serif;
  color:#F1F2ED;                     /* same as the background: hollow letters */
  -webkit-text-stroke: 2px #1A4338;  /* Forest outline */
  text-shadow: 4px 4px 0 #F6BE61; }  /* solid Marigold offset */
```

### Rules
- Headlines are in **Title Case** ("Join Our Workshops"). Labels and contact lines are **UPPERCASE**. Body is in sentence case.
- Separate contact lines with a Marigold or Forest `|`: `GROWINSHADE.COM | 541 MAIN ST. ISLIP, NY 11751 | 631.623.5707`
- **Retired:** Inknut Antiqua (current website; swap at the next theme update), Playfair Display, ChunkFive, DIN Condensed, Newake, and Swiss 721. Don't start new work in these.

---

## 4. Logo

The logo is the **GROWINSHADE** wordmark (thin condensed sans) with a line-art **branch** rising from "SHADE", over **PLANT SHOP**.

### Color versions
| File | Use on |
|---|---|
| [`logo.svg`](assets/logo.svg) Pistachio **(primary)** | Forest or Pine |
| [`logo-forest.svg`](assets/logo-forest.svg) | White, Paper, Mint Mist, Pistachio, Mint, Marigold |
| [`logo-white.svg`](assets/logo-white.svg) | Forest, Pine, dark photos |
| [`logo-black.svg`](assets/logo-black.svg) | One-color print only |

### Lockups
- **Stacked** (default): wordmark over PLANT SHOP.
- **Pill**: PLANT SHOP inside a rounded pill (white pill with Forest text on dark, or Forest pill with white text on light). Seen on care cards, Small Business Saturday, and Black Friday.
- **Wordmark only**: GROWINSHADE plus the branch, for small or wide spaces and storefront signage.

### Rules
Minimum width is 120px (1" print), and clear space equals the "P" height in PLANT SHOP. Don't recolor outside the four versions, stretch it, add effects, or place it on busy photos without a solid panel or dark overlay.

---

## 5. Graphic elements

These are what make GrowinShade recognizable even without the logo.

| Element | How to use |
|---|---|
| **Botanical line art** (monstera, banana leaf, palm, philodendron) | As a **tonal pattern**: a lighter green on Forest, or Forest lines at about 20% on Paper or White. Also as corner flourishes that bleed off the edge. Lines only, never filled leaves. |
| **Squiggles** | Small hand-drawn wavy strokes scattered in a pattern with the leaves. |
| **Wavy Marigold rule** | Divider under the logo (banner), or an underline beneath the key word ("**FREE**", "**10% OFF**"). |
| **Outline + offset headline** | See §3. One per piece. |
| **Pill shape** | PLANT SHOP lockup, tags, small labels. |
| **Organic blobs** | Soft rounded shapes in Forest or Pistachio to hold the logo (print ad). |
| **Storefront illustration** | [`storefront.png`](assets/illustrations/storefront.png). Use it for "shop local", thank-you cards, tissue paper, and Small Business Saturday. |
| **Pot icon** | Loyalty stamp glyph: a flat Forest pot. |
| **Numbered circles** | Forest circles with white numerals for how-to steps (terrarium guide). |
| **Mascots** | Retro rubber-hose characters (walking pot, monstera face) with sparkles. **Merch and social only**, in black or Forest line art. |
| **Photo blobs** | Photos cropped into organic blob shapes, usually two overlapping, with a thin offset **Marigold** (or Forest) outline. The 2026 house style for workshop photos. |
| **Islip map** | Simplified Forest street map with a speech-bubble pin reading "541 MAIN ST. ISLIP NY 11751" and the storefront icon. Use it on ads and "find us" content. |
| **Curly arrow + note** | Hand-drawn looping arrow from a short note ("This will make your day") to the offer. |
| **Diagonal band** | A thick Forest diagonal stripe that splits a Pistachio layout into content and map or offer zones. |
| **Painted-pot motifs** | Terracotta, black, cream, and pale-mint leaf silhouettes. Paint & Pot workshop visuals only. |

### Plant badges
Circular badges that tag a plant's needs and personality at a glance, on care cards, product pages, shelf tags and social posts. Each has curved serif lettering (mirrored top and bottom), thin arc brackets, and a center line icon. Files are in [`assets/icons/`](assets/icons/) as SVG and 1000px PNG.

| Group | Badge | Means | Colors |
|---|---|---|---|
| **Light** (pick one) | Sun Lover | Bright-direct light, 4+ hours of sun | Marigold / Paper ink |
| | Moderate Light | Bright indirect light | Butter `#FFE894` / Marigold ink |
| | Low Light | Tolerates shade, north windows (our specialty) | Paper / Marigold ink |
| **Care** | Easy Care | Beginner-friendly, forgiving | Red heart sticker (approved Bloom Red exception) |
| | Almost Invincible | Survives neglect | Charcoal `#212426` / White |
| | High Humidity | Needs humid air: bathroom, humidifier, terrarium | Mint Mist / Pine ink |
| **Highlights** | Pet Friendly | Verified non-toxic to cats and dogs | Emerald `#046342` / Mint ink |
| | Rare & Uncommon | Collector plants, limited stock | Pine / White |

**Rules**
- Use at most **3 badges per plant**: one light badge plus up to two others.
- Only claim what is true for that plant. **Pet Friendly** must be checked against the ASPCA toxic plant list.
- Minimum size: 0.75" in print, 64px on screen. Never recolor, re-letter, or crop a badge.
- The serif badge lettering is artwork only. Never typeset it elsewhere.

**"Hello! I am a ___" care card** ([`assets/templates/`](assets/templates/)): a 6 × 4 in tick-box card. Staff write in the plant name, then tick one **I LOVE** light badge and any **I AM** badges, plus the watering and feeding options. Use `care-card-hello.svg` (outlined) to print, or `care-card-hello-editable.svg` to change the wording.

---

## 6. Layout

- **Container:** 1200px max. Gutters are 24px on desktop and 16px on mobile. Base unit is 4px.
- **Corners:** **8px** for cards and inputs, **pill** for buttons, tags, and the PLANT SHOP lockup, and **organic blobs and waves** for decorative section edges (terrarium guide header).
- **Composition:** centered, symmetric layouts for print cards and promos. On the web, center hero and promo blocks and left-align body content.
- **Contact footer:** a full-width Forest band with uppercase Montserrat contact line(s) in White or Pistachio.

---

## 7. Components

### Buttons
| Variant | Style |
|---|---|
| **Primary** | Forest fill, White Mont/Poppins 800 text, pill radius. Hover: Deep Pine |
| **Learn More** (print/QR) | Forest text in a **2px Marigold rectangular outline** |
| **On dark** | Marigold fill, Forest text |

### Workshop card
Paper background, a monstera line-art corner, the **outline + offset** headline, an uppercase Montserrat list of workshop types in Forest, a QR code with a "Learn More" button, and a contact line at the bottom. Reference: [`workshop-card.jpg`](assets/reference/workshop-card.jpg).

### Upcoming workshops calendar
A clean, typographic monthly calendar, 8 × 10 in / 1080×1350, for the window, counter and Instagram. It's built from [`upcoming-workshops.json`](assets/templates/upcoming-workshops.json), with one calendar per month.
- **Header:** "Upcoming Workshops" in Work Sans with a wavy Marigold rule and the logo, beside the **month name** in the hollow outline + offset style.
- **Rows:** up to 5, each with a big Forest day number (or "TBD"), a Poppins title, 1–2 UPPERCASE Montserrat detail lines and an optional time. The weekday sits right-aligned and is calculated from the date. Forest rules separate the rows.
- **Footer:** "RESERVE AT GROWINSHADE.COM" on the left and "541 MAIN ST, ISLIP, NY" on the right.

### Care card
White background, Forest top and bottom rules, and a monstera corner. "Care Guide" in the outline + offset style, the plant name in Mont, then **Lighting:** / **Watering:** labels in bold Forest Work Sans, with the pill logo and URL at the bottom. Reference: [`care-card.jpg`](assets/reference/care-card.jpg).

### Promo square (social, 1080×1080)
Forest or Pine background with a tonal botanical pattern and the logo top-center in the pill lockup. Headline in Mont Heavy White, offer line in White with the key word in **Marigold plus a wavy underline**. Reference: [`promo-small-business-saturday.jpg`](assets/reference/promo-small-business-saturday.jpg).

### How-to guide
A Forest wave header holding the logo, a Mont uppercase title, numbered Forest circles with a photo and a two-line caption (bold name, then a regular "why"), and a contact footer band. Reference: [`terrarium-guide.jpg`](assets/reference/terrarium-guide.jpg).

### Print ad (2026 house style)
Pistachio background with the logo in a Forest half-circle tab at the top. The mission paragraph is in Work Sans Forest, next to two overlapping photo blobs with Marigold outlines and a QR code with a "Learn More" button. A Forest diagonal band leads into an Islip map with the 541 pin. A "PLANT LOVERS" outline + offset headline and curly-arrow note sit beside a big Marigold **15% off in store**. Reference: [`ad-bayshore-2026.jpg`](assets/reference/ad-bayshore-2026.jpg).

### In-store signage
- **Closed / notice signs:** Paper background, monstera line-art corners, a big outline + offset Marigold word ("CLOSED"), a Mont subline in Forest ("FOR THE HOLIDAY"), then a workshop plug with a QR code. Never waste a sign. Reference: [`sign-closed-holiday.jpg`](assets/reference/sign-closed-holiday.jpg).
- **E-ink schedule:** Pistachio, "SCHEDULE" set vertically in heavy black Mont, a "THIS MONTH" header, and a contact footer.
- **Awning:** Forest with the Pistachio stacked logo and the "541" street number. Reference: [`storefront-awning.jpg`](assets/reference/storefront-awning.jpg).

### Plant Bingo card
White, a thin Pistachio-green frame, a "PLANT LOVER" light-caps title over "BINGO" in Forest, and watercolor potted-plant illustrations in a 5×5 grid with a FREE SPACE. Reference: [`plant-bingo-card.jpg`](assets/reference/plant-bingo-card.jpg).

### Loyalty card
Front: Forest background with the Pistachio logo and contact lines. Back: a grid of 10 pot stamps, with "10% OFF" at stamp 4 and "FREE GIFT" at stamp 10.

### Online store (web)
Product cards on White with an 8px radius. **NEW** badge in Mint with Forest text, and **SALE** badge or sale price in Bloom Red (web only). Forms use Paper fill, a 1px Line border, and an 8px radius.

---

## 8. Photography

- **Subject:** real plants and real shelves from the shop, hands in soil at workshops, and finished terrariums and pots.
- **Product (trellises and accessories):** show them *in use*, with a real plant climbing them on a sunny windowsill or wood shelf next to white or cream ceramics and rattan. Use warm natural side-light and shallow depth of field. Reference: [`product-trellis-1.jpg`](assets/reference/product-trellis-1.jpg), [`product-trellis-2.jpg`](assets/reference/product-trellis-2.jpg).
- **Workshop:** a hand holding the finished piece against a blurred, busy workshop table. Real people and real mess are good. Reference: [`workshop-paint-pot-photo.jpg`](assets/reference/workshop-paint-pot-photo.jpg).
- **Interior palette that suits the brand:** white and cream ceramics, warm wood, rattan, terracotta, and earthy stone.
- **Light:** bright, natural, and indirect.
- **Treatment:** behind text, use a **Forest or Pine overlay at 60–80%** with botanical line art on top (Black Friday). Otherwise keep photos natural; no heavy filters.
- **Avoid:** stock jungles, fake plants, and cluttered backgrounds behind product shots.

---

## 9. Packaging & print checklist

- Bags: White with the Forest logo, the "Thank You" script, and the storefront plus URL pill.
- Tissue paper: a White repeat of the storefront, "Thank You" script, and monstera "Plant care is self care" in Forest.
- Every printed piece: correct address (**541 Main St.**), phone as `631.623.5707`, `GROWINSHADE.COM`, `@GROWINSHADE`, and Instagram and Facebook icons in Marigold or Forest rounded squares.

---

## 10. Do / Don't

| ✅ Do | ❌ Don't |
|---|---|
| Lead with Forest and botanical line art | Use filled or photographic leaf clip-art as decoration |
| Use Marigold for the one thing that matters | Put Marigold text on white |
| Use Mont Heavy headlines, Montserrat labels, Work Sans body | Introduce new display fonts per promo |
| Use the pill and wavy-line shapes | Use sharp boxes everywhere |
| Use real shop photography | Use Bloom Red outside the online store |
| Put 541 Main St. on everything | Reprint anything still showing 566 |