---
name: Fly By Jing
description: "Worth including for its masterful use of bold, expressive typography and a highly distinctive, high-chroma color system that perfectly matches the brand's spicy product identity."
version: alpha

colors:
  background: "#E52228"
  primary: "#FFFFFF"
  tertiary: "#FFCD35"
  neutral: "#F2F2F2"
  line: "rgba(0,0,0,1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 88px
    lineHeight: 0.8
    fontWeight: 700
    letterSpacing: "-1px"
  heading:
    fontFamily: transitional-serif
    fontSize: 44px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-0.5px"
  body:
    fontFamily: transitional-serif
    fontSize: 22px
    lineHeight: 1.45
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Premium Sichuan pantry staples with bold, expressive, and unapologetically spicy branding.

*A vibrant, bold street food market stall elevated with premium packaging and modern DTC branding.*

## Colors

High-chroma, spicy-inspired color palette using vibrant reds, yellows, and bold blacks to convey flavor and energy.

- **Background (`#E52228`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Accent (`#FFCD35`)** — uses `accent` token
- **Muted (`#F2F2F2`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** transitional-serif
- **Mono:** grotesque-sans

- Uppercase all primary navigation and action labels
- Use high-contrast white text on red backgrounds
- Maintain a tight, bold typographic hierarchy

## Layout

Full-width hero sections with centered typography or side-by-side image/text layouts, transitioning to stacked columns on mobile.

*Rhythm:* Generous vertical padding (44px) in sections to let large typography and photography breathe.

## Elevation & Depth

- rgb(204, 204, 204) 0px 0px 2px 2px
- Borders: Minimal visible borders, relying on color contrast and typography for separation.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

## Components

- **button:** Bold, uppercase text labels, often with pill-shaped (large border-radius) or rectangular backgrounds with high-contrast colors.
- **card:** Simple containers with generous internal padding, often showcasing food photography.
- **chip:** N/A
- **input:** Simple text fields with subtle borders.
- **hero:** Immersive, full-bleed background colors or large product photography with massive, bold, centered or left-aligned headlines.

## Do's and Don'ts

**Don't:**
- Don't use thin or light font weights for headlines — the screenshot shows thick, bold, 700-weight grotesque-sans for all major titles.
- Don't use small, understated typography — the screenshot shows massive, tightly set display type (88px+).
- Don't rely on a neutral, monochromatic palette — the screenshot is dominated by high-chroma red (#E52228) and yellow (#FFCD35).
- Don't use elegant, high-contrast serif fonts for display — the screenshot uses a bold grotesque-sans for headlines.
- Don't use standard casing for navigation — the screenshot shows all uppercase text for menu items and category links.
- Don't use thin, 1px borders for primary separation — the screenshot relies on solid blocks of vibrant color.

---

## System Prompt (paste into AI agent)

```
Fly By Jing is a premium, direct-to-consumer brand for Sichuan chili crisp and pantry staples. Its design DNA is defined by an unapologetically bold, high-chroma palette centered around a vibrant spicy red (#E52228) and a punchy, high-visibility yellow (#FFCD35). The typography pairs a thick, bold grotesque-sans for massive display headlines with a sturdy transitional-serif for body copy. The layout is immersive, featuring full-bleed color blocks and large product photography. Critical constraints: never use thin or light font weights for headlines; avoid small, understated typography; and do not use a muted or monochromatic color palette. The brand voice is confident, direct, and expressive, always using uppercase for primary actions and navigation.
```