Zocal Modern Design System · Powered by Bricolage Grotesque Variable Font
Next-Gen UI Architecture

Zocal Design System

A comprehensive design system crafted for the Zocal website redesign. Engineered with polymorphic box components, dynamic variable typography, and Apple-grade aesthetic precision.

Variable Font Sandbox (Bricolage Grotesque)

Adjust the continuous wght (Weight) and opsz (Optical Size) axes in real time.

Zocal: Discover the Best Local Treasures

font-variation-settings: 'wght' 700, 'opsz' 48
Range: 200 – 800
200 (Light)400 (Regular)600 (SemiBold)800 (ExtraBold)
Range: 12 – 96
12 (Caption)24 (Text)48 (Heading)96 (Display/Hero)
Presets:

The Box Components Family

Versatile container primitives: Surface Cards, GlassBox, Grids, Stacks, Callouts, and Sections.

Card variant="default"

Clean Surface

Crisp modern card with subtle border and default shadow.

Perfect for directory listings, search results, and standard information cards.

Card variant="elevated"

Elevated Shadow

Layered float shadow creating depth and hierarchy.

Ideal for highlighted content, featured promotions, and prominent CTAs.

Card variant="interactive"

Interactive Hover

Hover over me to see the spring lift and shadow projection.

Tailored for clickable shop listings, deal vouchers, and navigation cards.

Hover to preview
GlassBox (Frosted)

Specular Glassmorphism

Features optical reflection highlight line, backdrop-filter blur, and specular shine.

Card variant="sunken"

Sunken Inset Box

Recessed well surface for controls and preview bays.

Push Notifications

Claim Business Listing

Dashed container variant ideal for empty states or dropzones.

Contextual Callout Boxes

Typography Scale & Hierarchy

Bricolage Grotesque headings, editorial display text, gradient banners, and microcopy.

Display (opsz: 72, wght: 800)

Expressive Urban Living

Heading size="h1"

Discover Nearby Flavours & Boutiques

Heading size="h2" with GradientText

Handcrafted for Every Local Moment

Heading size="h3" · size="h4" · size="h5"

Neighborhood Recommendations in Real Time

Filtered by Community Reviews and Ratings

Curated with Passion in Bengaluru
Body Text Variants

Lead text: Connect with your neighborhood like never before with verified local discounts.

Body paragraph: Zocal surfaces hidden gems across food, lifestyle, fashion, and services directly from neighborhood merchants.

Small note: Terms & conditions apply. Deals valid till stock lasts.

Overline category indicator

Blockquote
"Bricolage Grotesque is an expressive typeface with historical French attitude."
Mathieu Triay · Type Designer
InlineCode & Kbd

Press ⌘ + K to open the universal search palette.

Import directly from @/design-system in any component.

Buttons, Controls & Badges

Interactive components featuring micro-interactions, spring presses, and accessible states.

Button Variants
Button Sizes
Badges & Status Tags
Live PromotionApproved MerchantPending ReviewSuspendedKoramangalaCafé & BakeryFlat 20% OffGlass BadgeFilter: Open Now
Form Inputs & Toggles

Try searching by dish or café name

Open Now Only

Include Verified Listings

Avatars & Real-Time Indicators
ZA
RS
AR
SP
AK
PS
+2
Live Deals32 Active Merchants
Disclosure & Segmented Controls
Active tab content: overview
Variable fonts like Bricolage Grotesque contain optical sizing (opsz) and weights in a single compact file, eliminating multiple HTTP font requests while delivering crisp microcopy and expressive display headlines.

Developer Implementation Guide

Import any component directly from @/design-system across the Next.js app.

jsx
import { Heading, Text, Card, Button } from '@/design-system';

export function ShopHero({ shop }) {
  return (
    <Card variant="interactive" padding="lg">
      <Heading size="h2">{shop.name}</Heading>
      <Text variant="muted">{shop.category} · {shop.city}</Text>
      <Button variant="brand" rightIcon={<ArrowRight size={16} />}>
        Explore Offers
      </Button>
    </Card>
  );
}