Fast Food Brand Design System

Create a comprehensive style guide for a 9-part professional brand visual identity and UI/UX design system for a large fast food brand. The layout should be structured as a neat, grid-based display with clearly numbered sections (01 to 09). The overall aesthetic must be bold, iconic, and highly structured.

### 01 Brand Header (BRAND HEADER)
- Include a bold and prominent logo on a striking background (such as red and white stripes).
- Display a recognizable brand mascot or character illustration.
- Include a memorable brand slogan (such as "It's Finger Lickin' Good") written in a casual handwritten script font.
- List three core brand keywords below the slogan, separated by slashes (e.g., BOLD / ICONIC / REAL).

### 02 Color System
- **Main Tones:** Display 4 main colors with hexadecimal codes and label them according to their function (e.g., base color, accent color).
- **Secondary Tones:** 4 auxiliary colors with hexadecimal codes, marked according to mood and atmosphere.
- **Accent Tones:** Four popular colors for specific annotations, each with a hexadecimal code.
- **Gradient:** Displays a visual spectrum of brand gradient transitions.
- **Color Pairing:** Small contrast blocks that display text/background compatibility (e.g., red + white, black + gold), including interface previews for light and dark modes.

### 03 Typography System
- **Heading:** A heavy, tightly spaced sans-serif font for maximum visual impact (for example: "REAL CHICKEN. REAL GOOD.” ）。
- **Subheading:** A neat, trustworthy sans-serif font using contrasting colors (e.g., "Hand-breaded."] Freshly prepared. Every single day.” ）。
- **Main Text:** A highly readable, friendly, everyday sans-serif font that showcases a brief segment of brand philosophy.
- **Font Sample Panel:** Displays examples of "AA" font sizes for Display Bold, Sans Bold, and Sans Regular next to the placeholder logo.

### 04 Visual Language
- **Photography and Art Guidelines:** Detail the rules for image styles (e.g., bold, editorial, mouthwatering), lighting (e.g., dramatic directional light with deep shadows), and textures (e.g., crispy, tactile food textures, wood, metal accents).
- **Image Grid:** Contains five unique, high-contrast horizontal sequences of editorial food and portrait photography, each labeled with brand pillars (e.g., bold, authentic, confident, mouthwatering, iconic).

### 05 Brand Applications
- Demonstrate the practical application of visual identity across various media:
  - **Product Packaging:** 3D models of branded food buckets and boxes.
  - **Website Hero Area:** A clean desktop landing page layout with a strong title, product images, and a "Order Now" button.
  - **Mobile app screen:** Modern smartphone UI displaying the delivery interface.
  - **Social Media Posts:** Models for Instagram (1:1 square post), Stories (9:16 vertical), and Banner (16:9 widescreen).
  - **Stationery and Outdoor:** Minimalist corporate business cards and dramatic, high-impact nighttime billboard ads.

### 06 DESIGN SYSTEM (UI COMPONENTS)
- **Button:** Changes in state for primary, secondary, and text button styles (default, hover, disabled).
- **Card:** Food menu item UI card with high-quality images, titles, prices, and a promotional "Today's Special" tag.
- **Input Box:** Text input box for default, focus, and error states.
- **Navigation Bar:** A desktop navigation bar layout with logos, menu links, and actionable CTA buttons.
- **Spacing Ratio:** A visual 8pt mesh system scale showing increasing interior margin blocks (8px, 16px, 24px, up to 96px).

### 07 Iconography
- A clean grid containing 10 minimalist, unified line art icons representing core operations and product categories: chicken, barrel, burgers, fries, drinks, location, delivery, discounts, accounts, and favorites.

### 08 Patterns & Tones (PATTERNS & MOTIFS)
- Five rectangular samples showing duplicate brand assets:
  - **Striped Pattern:** Neat vertical lines.
  - **Colonel/Mascot Pattern:** Repeating line art logo patterns on a solid color background.
  - **Texture Patterns:** Subtle raw material textures (such as wood grain or paper grain).
  - **Shape Tone:** Geometric herringbone/ribbon design elements.
  - **Separator:** Slim, practical line breaks and UI indicators.

### 09 MATERIAL & DEPTH
- Four visual examples demonstrating physical spatial rendering:
  - **True Shadows:** Product packaging that projects natural, directed environmental shadows.
  - **Textured Surfaces:** Close-ups of tactile materials such as paper, cardboard, and wood.
  - **Reflection:** Subtle shine and polishing effects on plastic or glass beverage cups.
  - **Layer Depth:** Displays depth, layers, and overlapping elements in the mobile app UI.

### Footer Quote
- End the table with a solid red accent block containing a large white reference block of the company's founder, flanked by a neat vector line illustration of the brand mascot.