Fresh Market Colorblock

/freshMarketColorblock
A vibrant, produce-inspired design system championing bold colorblocks, friendly Figtree type, tactile interaction, and curated imagery for boutique, high-energy digital food experiences.
0 likes
0 bookmarks
Jul 10, 2026
Design System Content
# Fresh Market Colorblock Landing

A design language for bright, energetic, and produce-inspired digital experiences.

---

## Philosophy

> "Freshness is felt before it is tasted; color is our open invitation."

This system creates interfaces that feel like stepping into a modern, high-end boutique produce market or handling premium contemporary food packaging. The design relies on bold, flat color fields contrasted with immaculate, friendly typography. It balances vibrant energy with structural minimalism—never feeling cluttered or overwhelming, despite its rich palette. 

### Core Beliefs

1. **Confident Colorblocking** — Sections are grounded in unapologetic, solid background colors. We rely on large, flat geometric color fields rather than gradients.
2. **Friendly but Professional** — The typographic system acts as the stabilizing anchor. It is highly legible, welcoming, yet meticulously structured.
3. **Tactile Buoyancy** — Interaction feels like picking fresh fruit from a shelf. Hover states utilize clean, physical upward lifts rather than heavy shadows or complex morphs.
4. **Vivid Reality** — Photography must pop. Vivid product imagery sits atop flat colorblocks, allowing the natural textures of the food to stand out against the smooth UI.
5. **Rhythmic Alternation** — The layout establishes momentum by alternating between striking full-bleed imagery and grounded, centered copy panels.

### Strict Rules

* **No Gradients** — Backgrounds must remain strictly flat to emulate physical, modern food packaging.
* **Exclusive Typography** — *Figtree* is the only typeface permitted. It provides the exact geometric friendliness required.
* **Controlled Saturation** — Do not mix all brand colors in one component. A section gets *one* dominant background color (e.g., Papaya) with Coconut White and Charcoal providing contrast.
* **Minimal Overlays** — Let the imagery and typography speak. Avoid dark transparent washes over photos; use structural blocks to house text instead.

---

## Color Palette

### The Market Palette

The palette is derived from fresh produce and natural textures. It is vibrant but curated, leaning on Coconut White and Charcoal for structure and legibility, while Papaya, Kiwi, and Banana act as massive structural backgrounds or bold accents.

```css
/* Core Neutrals */
bg-coconut-white      /* Main canvas, clean card backgrounds (#FDFCFB) */
bg-charcoal           /* Primary text, footer backgrounds, dark buttons (#2A2C2A) */
bg-stone-100          /* Muted panels for centered copy blocks (#F4F4F0) */
bg-ivory-100          /* Warm secondary panels for sourcing/reviews (#FDFBF7) */

/* The Produce Colorblocks (Backgrounds & Accents) */
bg-papaya-500         /* Vibrant, energetic orange-coral (#FF7759) */
bg-kiwi-500           /* Fresh, bright green (#84CC5C) */
bg-banana-400         /* Warm, inviting yellow (#FFD659) */

/* Structural Borders & Hover States */
border-charcoal/10    /* Ultra-subtle dividers on light panels */
bg-charcoal/5         /* Hover state for transparent/ghost elements */
bg-coconut-white/90   /* Translucent treatment for sticky navs */

/* Text Hierarchy */
text-charcoal         /* Universal hero text, section headers, body copy */
text-coconut-white    /* Inverse text on Charcoal, Papaya, or Kiwi backgrounds */
text-charcoal/70      /* Secondary descriptions, sourcing notes, hours */
text-charcoal/50      /* Muted metadata, subtle location details */
```

---

## Typography

The typographic system is built entirely on **Figtree**. It prioritizes massive, semibold statements for heroes and highly readable, compact layouts for utility and navigation.

### Font Weights

```css
font-normal      /* Core body copy, card descriptions, review text */
font-medium      /* Compact nav links, button labels, signature item names */
font-semibold    /* Hero headlines, section titles, strong final CTAs - MANDATORY for headers */
```

### Font Size Scale

```css
/* Core Structural Sizes */
text-[13px]      /* Sourcing notes, minor location details, metadata */
text-[14px]      /* Compact nav links, button text, footer links */
text-[16px]      /* Concise card descriptions, standard body copy */
text-[20px]      /* Signature item titles, review highlights */
text-[24px]      /* Sub-headers within centered copy blocks */

/* Display Sizes (Strictly defined per prompt) */
text-[34px] to text-[44px]   /* Section titles, strong final CTAs */
text-[72px] to text-[96px]   /* Semibold hero headlines */
```

### Letter Spacing & Transforms

```css
tracking-tight   /* Semibold hero headlines (pulls the geometric shapes together) */
tracking-normal  /* All body copy, card descriptions, section titles */
tracking-wide    /* Nav links, small categorical tags (e.g., "SOURCING") */

uppercase        /* Categorical tags, compact nav links */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 72–96px | semibold | charcoal (or white) | tight | none |
| Section Title | 34–44px | semibold | charcoal | normal | none |
| Card Title | 20px | medium | charcoal | normal | none |
| Card Description | 16px | normal | charcoal/70 | normal | none |
| Nav Links | 14px | medium | charcoal | wide | uppercase |

---

## Animation System

### Core Philosophy: The Physical Lift

Elements should feel like lightweight, tangible cards on a flat table. Interactions are snappy, clean, and physical.

### Subtle Hover Lift (Cards & Buttons)

```tsx
// Clean, crisp lift without aggressive scaling or muddy shadows
className="transition-transform duration-200 ease-out hover:-translate-y-1.5 hover:shadow-[0_12px_24px_-8px_rgba(42,44,42,0.1)]"
```

### Snap-Style Menu Carousel

Carousels immediately below the hero must snap strictly to grid items, feeling dialed-in and frictionless.

```css
/* Native CSS scroll snapping for ultra-smooth performance */
.carousel-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Hide scrollbar for clean UI */
}

.carousel-card {
  scroll-snap-align: start;
}
```

---

## UI Components

### The Hero Color Field

A dominant section that pairs a strong colorblock (e.g., Papaya or Banana) with oversized 72-96px Figtree type, overlaid with vivid, deep-etched product imagery. Features two direct CTAs.

```tsx
<header className="relative w-full bg-papaya-500 px-8 py-24 flex flex-col items-center text-center">
  <h1 className="font-figtree font-semibold text-[72px] md:text-[96px] text-coconut-white tracking-tight leading-none mb-8">
    Fresh Arrivals.
  </h1>
  <div className="flex gap-4 z-10">
    <PrimaryCTA>Shop Market</PrimaryCTA>
    <SecondaryCTA>View Sourcing</SecondaryCTA>
  </div>
  <img src="vivid-produce.png" className="absolute bottom-0 max-w-2xl drop-shadow-2xl" />
</header>
```

### Snap-Style Carousel Card

Clean `coconut-white` cards sitting inside the snap-scroll container. Minimal text, maximum imagery focus.

```tsx
<article className="min-w-[280px] bg-coconut-white rounded-2xl p-6 transition-transform duration-200 ease-out hover:-translate-y-1.5 scroll-snap-align-start border border-charcoal/5">
  <img src="signature-item.jpg" className="w-full h-48 object-cover rounded-lg mb-4" />
  <h3 className="font-figtree font-medium text-[20px] text-charcoal">Signature Item</h3>
  <p className="font-figtree font-normal text-[16px] text-charcoal/70 line-clamp-2">
    Concise card description goes here.
  </p>
</article>
```

### Centered Copy Panels

Alternating between full-bleed imagery, these panels provide breathing room for sourcing notes, reviews, location, and hours.

```tsx
<section className="w-full bg-stone-100 py-32 px-6 flex justify-center">
  <div className="max-w-3xl text-center">
    <span className="font-figtree text-[13px] font-medium tracking-wide uppercase text-charcoal/50 mb-4 block">Sourcing Notes</span>
    <h2 className="font-figtree font-semibold text-[34px] md:text-[44px] text-charcoal leading-tight">
      Harvested by hand. Delivered by morning.
    </h2>
  </div>
</section>
```

---

## Component Catalog

### Buttons

```tsx
// Primary Direct CTA (High Contrast)
"bg-charcoal text-coconut-white font-figtree font-medium text-[14px] px-8 py-4 rounded-full hover:-translate-y-1 transition-transform duration-200"

// Secondary Direct CTA (Blends with Colorblock)
"bg-coconut-white/20 text-coconut-white font-figtree font-medium text-[14px] px-8 py-4 rounded-full backdrop-blur-md border border-coconut-white/30 hover:bg-coconut-white hover:text-charcoal transition-all duration-200"

// Strong Final CTA (End of page)
"bg-kiwi-500 text-charcoal font-figtree font-semibold text-[34px] md:text-[44px] w-full py-16 hover:bg-kiwi-600 transition-colors"
```

### Layout Modules

```tsx
// Full-Bleed Image Section
"w-full h-[60vh] md:h-[80vh] bg-cover bg-center bg-no-repeat"

// Location & Hours Grid (Ivory Panel)
"bg-ivory-100 p-12 grid grid-cols-1 md:grid-cols-2 gap-12 rounded-3xl"
```

---

## Quality Checklist

* [ ] Is every typographic element rendering strictly in **Figtree**?
* [ ] Do hero headlines hit the exact 72–96px range with a `semibold` weight?
* [ ] Do section titles hit the exact 34–44px range with a `semibold` weight?
* [ ] Are background colors solid blocks (Papaya, Kiwi, Banana, Ivory, Stone) with zero gradients?
* [ ] Do carousels snap cleanly to the start of each card?
* [ ] Do cards use the subtle `-translate-y-1.5` lift on hover instead of heavy shadow expansions?
* [ ] Are the full-bleed image sections strictly alternating with centered, stone/ivory copy panels?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-contrast color pairings (e.g., Charcoal text on a bold Papaya background).
* Crisp, deep-etched produce/product photography that overlaps color fields.
* Pill-shaped (rounded-full) buttons for CTAs.
* Expansive padding inside Ivory and Stone panels to give copy maximum focus.
* Concise, brutally edited card descriptions.

### ✗ Not Allowed

* Gradients, mesh gradients, or watercolor background effects.
* Font pairings (Do not introduce serif fonts; stick exclusively to Figtree).
* Complex hover states that flip, spin, or morph cards.
* Dark-mode styling (Keep the aesthetic bright, utilizing Coconut White and bright fruits).
* Floating elements with heavy, muddy drop shadows.