---
version: alpha
name: GiGi
description: GiGi media kit and storefront design system. This file documents the GiGi theme direction, not Dawn defaults.
colors:
  black: "#000000"
  white: "#FFFFFF"
  green: "#8CD201"
  pineapple-coconut-yellow: "#FEF278"
  pineapple-coconut-brown: "#AD6B3B"
color_rules:
  core_ui:
    - "#000000"
    - "#FFFFFF"
    - "#8CD201"
  pineapple_coconut_only:
    - "#FEF278"
    - "#AD6B3B"
  overlays: Use transparent black, transparent white, or transparent green only.
  forbidden: Do not add Dawn grays, beige neutrals, blue links, default color schemes, or extra accent colors.
dark_mode:
  attribute: "html[data-gigi-theme='dark']"
  storage_key: "gigi:theme-mode"
  toggle_snippet: gigi-theme-toggle
  global_overrides: assets/gigi-theme-mode.css
  tokens:
    - "--gigi-theme-surface"
    - "--gigi-theme-ink"
    - "--gigi-theme-muted"
    - "--gigi-theme-line"
    - "--gigi-theme-soft"
    - "--gigi-theme-image-outline"
    - "--gigi-input-surface"
    - "--gigi-input-border"
    - "--gigi-input-shadow"
  rule: Every new component uses theme tokens or ships its own html[data-gigi-theme='dark'] overrides in its own stylesheet.
typography:
  display:
    fontFamily: Bebas Neue
    usage: Hero titles, page titles, section titles, campaign lines, bold labels
    casing: Uppercase for major titles
    letterSpacing: "0"
    lineHeight:
      hero: "0.86"
      sectionTitle: "0.95"
      compactLabel: "1.1"
  body:
    fontFamily: Poppins
    usage: Body copy, captions, controls, forms, product details
    lineHeight:
      shortCopy: "1.43"
      standardCopy: "1.5"
      longCopy: "1.55 to 1.7"
    weights:
      regular: 400
      medium: 500
      semibold: 600
      bold: 700
spacing:
  sectionPadding:
    desktop: "6.4rem 2.4rem"
    compact: "3.2rem 2.4rem"
    mobile: "4.8rem 1.6rem"
  contentMaxWidth:
    narrow: "64rem"
    reading: "76rem"
    hero: "89.6rem"
    page: "115.2rem"
  gridGap:
    tight: "1.2rem"
    standard: "1.6rem"
    wide: "2.4rem"
    feature: "4rem"
radii:
  smallControl: "6px"
  tile: "8px"
  card: "12px"
  featureCard: "16px"
  largeMedia: "24px"
  pill: "9999px"
surfaces:
  page:
    background: "#FFFFFF"
    text: "#000000"
    rule: Pages should feel custom, sharp, and GiGi-owned, never like an unmodified Dawn template.
  hero:
    background: "#000000"
    text: "#FFFFFF"
    accent: "#8CD201"
    layout: Center major title copy, keep text compact, and leave the next section visible when practical.
  section:
    rule: Use full-width color bands or clean white sections. Do not nest cards inside decorative section cards.
  tile:
    radius: "8px"
    border: Use black, green, or low-opacity black/white borders only.
    padding: "1.6rem to 2.4rem"
    rule: Tiles are functional surfaces, not Dawn cards. Keep them flat, tight, and easy to scan.
  featureCard:
    radius: "12px to 16px"
    padding: "2.4rem to 3.6rem"
    rule: Use for repeated content blocks only. Avoid stacked card-on-card layouts.
buttons:
  primary:
    background: "#8CD201"
    text: "#000000"
    radius: "9999px"
    lineHeight: "1"
    height: "4rem to 4.8rem"
    rule: Use for the most important action only.
    mobileLayout: Do not make primary buttons full-width on mobile unless explicitly requested. Use content width plus intentional horizontal padding, usually 16px per side.
  secondary:
    background: "#FFFFFF"
    text: "#000000"
    border: "#000000"
    radius: "9999px"
  utility:
    radius: "6px to 8px"
    rule: Use for compact tools, filters, copy buttons, and small controls.
  glass:
    background: Transparent white or transparent green over black.
    border: Transparent white or green.
    text: "#FFFFFF"
    radius: "9999px"
    rule: Use sparingly on black hero surfaces, such as the media-kit design file link.
imagery:
  product:
    rule: Show the real can clearly. Avoid dark, vague, cropped, stock-like imagery when the product needs inspection.
  lifestyle:
    rule: Show real high-effort moments: gym, work, coding, office fridge, party setup, Bangalore activations.
  placeholder:
    rule: If an image is missing, use a square placeholder and write the intended image in brackets.
motion:
  timing:
    quick: "180ms ease"
    standard: "220ms ease"
    rich: "240ms ease"
  properties:
    - background-color
    - border-color
    - color
    - opacity
    - transform
    - box-shadow
  rule: All color changes, scaling, hover states, focus states, and UI animations should ease smoothly.
accessibility:
  focus: Every interactive element needs a visible focus state, usually a green outline.
  contrast: Body text must stay readable on black, white, green, yellow, and brown surfaces.
  text: Use real HTML text over images whenever possible.
product:
  market: India
  home_city: Bangalore
  can_size: 250 ml
  price: Rs. 125
  flavours:
    - Lemon Lime
    - Pineapple Coconut
  packs:
    - Lemon Lime four-pack
    - Pineapple Coconut four-pack
    - Mixed four-pack
  formula:
    sugar: Zero sugar
    extract: Green tea extract
    caffeine: Equal to 1.5 shots of espresso or one large cup of coffee
    vitamins:
      - Vitamin C
      - Niacin
      - Pantothenic acid
      - B6
      - Biotin
      - B12
positioning:
  line: Soft power in a cold can.
  audience: Ambitious people putting in high-effort work.
  tone: Nike meets Red Bull and Celsius energy drink.
  attributes:
    - Soft yet powerful
    - Gender-neutral
    - Focused
    - High-energy
    - Direct
content:
  headline_style:
    - Short
    - Active
    - Confident
    - Never stuffed with benefits
  body_style:
    - Concrete
    - Useful at the point of decision
    - No oversell
    - No unsupported health or crash claims
  banned:
    - Em dash
    - Overly verbose copy
    - Claims that are not substantiated
dawn_avoidance:
  - Do not use Dawn's default card proportions, color schemes, generic gray borders, or default button look.
  - Do not let Shopify defaults define spacing, section rhythm, product cards, or typography.
  - Do not use generic e-commerce filler sections.
  - Prefer GiGi's existing full-band sections, tight tile grids, bold Bebas headings, Poppins body copy, pill CTAs, and crisp brand colors.
---

# GiGi Design File

This file defines the GiGi storefront and media-kit design language. It should be used as a working spec for new pages, sections, tiles, buttons, and campaign surfaces.

It is not a Dawn theme spec. Dawn can provide Shopify mechanics, but the visual result must feel GiGi-owned: black, white, green, sharp energy, soft power, bold typography, compact copy, and purpose-built sections.

## Core Rules

- Use only black `#000000`, white `#FFFFFF`, and green `#8CD201` for core UI.
- Use yellow `#FEF278` and brown `#AD6B3B` only for Pineapple Coconut flavour cues.
- Do not introduce extra UI colours.
- Use Bebas Neue for main headers and titles.
- Use Poppins for body copy and interface text.
- Keep display letter spacing at `0`.
- Use tight heading line-height, usually `0.86` to `0.95`.
- Use readable body line-height, usually `1.43` to `1.55`.
- Keep tiles at `8px` radius unless the surface is a larger feature card.
- Keep feature cards at `12px` to `16px` radius.
- Never make mobile buttons or CTA links full-width unless explicitly requested. Use content-width buttons with intentional horizontal padding, usually `16px` per side, and center them when mobile forms stack vertically.
- Use pill CTAs for primary actions.

## Layout

Sections should be full-width bands or clean white layouts with constrained inner content. Avoid floating page sections that look like generic Dawn cards.

Default section padding is `6.4rem 2.4rem` on desktop and `4.8rem 1.6rem` on mobile. Compact informational bands can use `3.2rem` vertical padding.

Use these max-widths:

- `64rem` for narrow copy.
- `76rem` for hero support copy and readable blocks.
- `89.6rem` for hero content.
- `115.2rem` for page grids and media-kit sections.

## Typography

Hero titles should feel oversized, direct, and compressed. Use Bebas Neue with uppercase, `letter-spacing: 0`, and line-height around `0.86`.

Section titles should also use Bebas Neue, uppercase, and line-height around `0.95`.

Body text should use Poppins. Short cards and captions can use `line-height: 1.43`; longer copy should use `1.5` to `1.55`.

Avoid Dawn-like text hierarchy where every section has the same small heading, paragraph, and button stack. GiGi sections need sharper contrast between headline and body.

## Tiles And Cards

Tiles are functional surfaces. They should be flat, compact, and scan-friendly.

- Small controls: `6px` radius.
- Standard tiles: `8px` radius.
- Standard cards: `12px` radius.
- Feature cards: `16px` radius.
- Large media: up to `24px` radius.
- Pills: `9999px` radius.

Do not nest cards inside cards. Do not make whole page sections look like cards. Use cards for repeated items, asset grids, product choices, forms, and modal content only.

## Buttons

Primary actions use green background, black text, pill radius, and compact line-height.

Secondary actions can be white with black text and black border. Small utilities can use `6px` to `8px` radius.

Glass buttons are only for black hero surfaces or media overlays. Build them from transparent white, transparent black, or transparent green. They should still read clearly and keep a visible green focus outline.

## Imagery

Product images should show the real can clearly. Lifestyle images should show actual high-effort moments: gym, coding, office fridge, party setup, Bangalore activations, delivery, or creator content.

Do not use dark, vague, cropped, stock-like hero images when the product needs to be inspected.

If an image is suggested but not yet available, add a square placeholder and describe the image in brackets.

## Motion

All hover, focus, color, transform, opacity, and shadow changes should ease smoothly.

Use `180ms ease` for quick button response, `220ms ease` for normal UI, and `240ms ease` for richer cards or media surfaces.

Avoid abrupt state changes unless the user explicitly asks for instant behavior.

## Dark Mode

The storefront ships with a user-toggleable dark mode. Every new section, snippet, and component must support it from day one.

### Contract

- The mode lives on the root element: `html[data-gigi-theme='dark']` or `html[data-gigi-theme='light']`. An inline script in `layout/theme.liquid` sets it from `localStorage['gigi:theme-mode']` before first paint, so there is never a light flash.
- Toggle buttons are rendered with `{% render 'gigi-theme-toggle' %}` (header and menu drawer already have one). The logic lives at the top of `assets/global.js`; toggle styling and all global dark overrides live in `assets/gigi-theme-mode.css`.
- Never use `@media (prefers-color-scheme: dark)`. The attribute is the single source of truth.

### How to build a dark-ready component

1. Prefer the theme tokens over hardcoded colors. They flip automatically in dark mode:
   - `--gigi-theme-surface` white surface, black in dark.
   - `--gigi-theme-ink` black text, white in dark.
   - `--gigi-theme-muted` 72% ink for secondary copy.
   - `--gigi-theme-line` hairline borders.
   - `--gigi-theme-soft` faint fills, hover washes.
   - `--gigi-theme-image-outline` 10% outline around media.
   - `--gigi-input-surface`, `--gigi-input-border`, `--gigi-input-shadow` form fields.
   - Dawn scheme vars (`--color-background`, `--color-foreground`, `--color-button`, ...) also flip globally.
2. Where a hardcoded color is unavoidable, append a `/* Dark mode */` block at the end of the component's own CSS file (or its `{% style %}` block) using `html[data-gigi-theme='dark']`-prefixed selectors.
3. Add the surfaces you re-color to a `html.gigi-theme-transitioning :where(...)` rule in the same file (360ms, `cubic-bezier(0.2, 0, 0, 1)`, properties: background-color, border-color, box-shadow, color, outline-color) so toggling eases instead of snapping.

### Color mapping rules

- White surfaces become black. Black text becomes white.
- Black or dark primary CTAs become green `#8CD201` with black text.
- Full-band panels that are black in light mode invert to white with black text, so the page keeps its light and dark rhythm. Buttons inside inverted panels go green with black text.
- Green stays green in both modes. Text sitting on green is always black.
- Pineapple Coconut yellow `#FEF278` and brown `#AD6B3B` keep their hues in both modes. Text on yellow stays black.
- Black transparent overlays become white transparent equivalents at a similar strength.
- Black box-shadows are invisible on black. Replace them with `rgba(255, 255, 255, 0.08)` to `0.12` shadows or a `0.1rem` `--gigi-theme-line` border.
- Monochrome black logos and icon images get `filter: invert(1)`. Never filter photography.
- Email previews are the one exemption: rendered email frames stay light in both modes because email clients do not follow the site theme.

## Copy

Write like Nike meets Red Bull and Celsius.

Keep lines short:

- `Fuel the work.`
- `Cold cans. Zero sugar.`
- `Stock the office fridge.`

Never use an em dash. Do not oversell. Do not claim no crash unless substantiated.