# Image Reference Guidelines

**IMPORTANT**: When I provide an image for reference, it is for design reference only. Do NOT use that image inside any image section in the code. The image is provided to help understand the layout, styling, and visual direction - not to be embedded as an actual image in the application.

# CityCards Typography Guidelines

**Project**: Typography Guidelines for CityCards Travel Website

## Font System

### Primary Font
- **Poppins**: Used for all text including headings (H1–H6), body text, buttons, labels, and forms - Clean, readable, and consistent throughout

### Font Weight Scale & Usage
- **font-light (300)**: Hero headings only - For creating dynamic contrast in H1/H2
- **font-normal (400)**: Standard body text - Default weight for paragraphs
- **font-medium (500)**: Buttons, navigation links, subtle emphasis
- **font-semibold (600)**: Section headings, primary buttons
- **font-bold (700)**: Hero keywords, strong emphasis

## Heading Typography Specifications

### H1 - Hero/Main Page Headings
- **Font**: Poppins
- **Size**: `text-5xl md:text-6xl lg:text-7xl` (48px/60px/72px - targeting ~64px)
- **Line Height**: `leading-tight`
- **Pattern**: Dynamic multi-weight with gradient/italic accents (max 2 emphasis styles)

```jsx
<h1 className="font-poppins text-5xl md:text-6xl lg:text-7xl leading-tight">
  <span className="font-light">Discover</span>{' '}
  <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
    Melbourne's
  </span>{' '}
  <span className="font-normal">Best Experiences</span>
</h1>
```

### H2 - Section Headings
- **Font**: Poppins
- **Size**: `text-2xl md:text-3xl lg:text-4xl` (24px/36px/48px)
- **Line Height**: `leading-tight`
- **Pattern**: Mixed weights with gradient emphasis

```jsx
<h2 className="font-poppins text-2xl md:text-3xl lg:text-4xl leading-tight">
  <span className="font-light">Explore</span>{' '}
  <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
    Amazing
  </span>{' '}
  <span className="font-normal">Cities</span>
</h2>
```

### H3 - Subsection Headings
- **Font**: Poppins
- **Size**: `text-xl md:text-2xl` (24px/30px)
- **Line Height**: `leading-snug`
- **Weight**: `font-semibold`

```jsx
<h3 className="font-poppins text-xl md:text-2xl leading-snug font-semibold">
  Feature Title
</h3>
```

### H4 - Component Headings
- **Font**: Poppins
- **Size**: `text-lg md:text-xl` (20px/24px)
- **Line Height**: `leading-snug`
- **Weight**: `font-medium` or `font-semibold`

```jsx
<h4 className="font-poppins text-lg md:text-xl leading-snug font-medium">
  Component Heading
</h4>
```

### H5 - Card/Item Titles
- **Font**: Poppins
- **Size**: `text-lg` (18px)
- **Line Height**: `leading-snug`
- **Weight**: `font-medium`

```jsx
<h5 className="font-poppins text-lg leading-snug font-medium">
  Card Title
</h5>
```

### H6 - Small Headings
- **Font**: Poppins
- **Size**: `text-base` (16px)
- **Line Height**: `leading-snug`
- **Weight**: `font-medium`

```jsx
<h6 className="font-poppins text-base leading-snug font-medium">
  Small Heading
</h6>
```

## Body Typography Specifications

### Large Body Text
- **Font**: Poppins
- **Size**: `text-xl` (20px)
- **Line Height**: `leading-relaxed`
- **Weight**: `font-normal`

```jsx
<p className="font-poppins text-xl leading-relaxed font-normal">
  Large descriptive text for important sections
</p>
```

### Regular Body Text
- **Font**: Poppins
- **Size**: `text-base` (16px)
- **Line Height**: `leading-relaxed`
- **Weight**: `font-normal`

```jsx
<p className="font-poppins text-base leading-relaxed font-normal">
  Regular body text content
</p>
```

### Small Body Text
- **Font**: Poppins
- **Size**: `text-sm` (14px)
- **Line Height**: `leading-relaxed`
- **Weight**: `font-normal` or `font-light`

```jsx
<p className="font-poppins text-sm leading-relaxed font-normal">
  Caption or meta information
</p>
```

## Interactive Element Typography

### Buttons
- **Font**: Poppins
- **Primary Weight**: `font-semibold`
- **Secondary Weight**: `font-medium`
- **Min Size**: 16px

```jsx
// Primary Button
<Button className="font-poppins font-semibold">
  Primary Action
</Button>

// Secondary Button
<Button className="font-poppins font-medium">
  Secondary Action
</Button>
```

### Navigation Links
- **Font**: Poppins
- **Weight**: `font-medium`
- **Size**: `text-base` (16px)

```jsx
<a className="font-poppins font-medium text-base">
  Navigation Link
</a>
```

### Form Labels
- **Font**: Poppins
- **Weight**: `font-light` or `font-normal`
- **Size**: `text-sm` or `text-base` (14px/16px)

```jsx
<Label className="font-poppins font-light text-sm">
  Form Label
</Label>
```

### Form Inputs
- **Font**: Poppins
- **Weight**: `font-normal`
- **Size**: `text-base` (16px)

```jsx
<Input className="font-poppins font-normal text-base" />
```

## Accessibility Standards

### Text Size Requirements
- **Minimum Text Size**: 14px
- **Interactive Minimum Size**: 16px
- **Contrast**: WCAG AA or higher
- **Heading Hierarchy**: Maintain semantic order (H1 → H2 → H3 etc.)

### Implementation Requirements
```jsx
// Always include explicit font and size classes to override defaults
<p className="font-poppins text-base font-normal leading-relaxed">
  Content with explicit styling
</p>
```

## Typography Rules

### DO ✅
- Use Poppins for all text (headings and body)
- Apply max 2 emphasis styles per heading
- Use gradient effects sparingly
- Keep line-heights consistent
- Always specify explicit font classes to override component defaults

### DON'T ❌
- Don't use font-light in small text
- Don't mix more than 3 weights in one heading
- Don't go below 14px for captions
- Don't override font sizes without Tailwind classes
- Don't break semantic heading hierarchy

## Implementation Guidelines

### Component Styling Override
**IMPORTANT**: Always explicitly set typography classes to override component defaults:

```jsx
// ✅ CORRECT - Explicit typography classes
<Card>
  <CardHeader>
    <CardTitle className="font-poppins text-xl font-semibold">
      Card Title
    </CardTitle>
  </CardHeader>
  <CardContent>
    <p className="font-poppins text-base font-normal leading-relaxed">
      Card content with explicit styling
    </p>
  </CardContent>
</Card>

// ❌ INCORRECT - Relying on defaults
<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
  </CardHeader>
  <CardContent>
    <p>Card content without explicit styling</p>
  </CardContent>
</Card>
```

### Dynamic Heading Patterns
```jsx
// Pattern 1: Light → Bold (H1/H2 only)
<h1 className="font-poppins text-4xl md:text-5xl lg:text-6xl leading-tight">
  <span className="font-light">Discover</span>{' '}
  <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
    Amazing
  </span>{' '}
  <span className="font-normal">Destinations</span>
</h1>

// Pattern 2: Normal → Semibold (H3/H4)
<h3 className="font-poppins text-xl md:text-2xl leading-snug">
  <span className="font-normal">Experience</span>{' '}
  <span className="font-semibold">Melbourne's Culture</span>
</h3>
```

### Responsive Typography
```jsx
// Mobile-first responsive scaling
<h1 className="font-poppins text-3xl sm:text-4xl md:text-5xl lg:text-6xl leading-tight">
  Responsive Heading
</h1>

<p className="font-poppins text-sm sm:text-base md:text-lg leading-relaxed font-normal">
  Responsive body text
</p>
```

**Add your own guidelines here**
<!--

System Guidelines

Use this file to provide the AI with rules and guidelines you want it to follow.
This template outlines a few examples of things you can add. You can add your own sections and format it to suit your needs

TIP: More context isn't always better. It can confuse the LLM. Try and add the most important rules you need

# General guidelines

Any general rules you want the AI to follow.
For example:

* Only use absolute positioning when necessary. Opt for responsive and well structured layouts that use flexbox and grid by default
* Refactor code as you go to keep code clean
* Keep file sizes small and put helper functions and components in their own files.

--------------

# Design system guidelines
Rules for how the AI should make generations look like your company's design system

Additionally, if you select a design system to use in the prompt box, you can reference
your design system's components, tokens, variables and components.
For example:

* Use a base font-size of 14px
* Date formats should always be in the format “Jun 10”
* The bottom toolbar should only ever have a maximum of 4 items
* Never use the floating action button with the bottom toolbar
* Chips should always come in sets of 3 or more
* Don't use a dropdown if there are 2 or fewer options

You can also create sub sections and add more specific details
For example:


## Button
The Button component is a fundamental interactive element in our design system, designed to trigger actions or navigate
users through the application. It provides visual feedback and clear affordances to enhance user experience.

### Usage
Buttons should be used for important actions that users need to take, such as form submissions, confirming choices,
or initiating processes. They communicate interactivity and should have clear, action-oriented labels.

### Variants
* Primary Button
  * Purpose : Used for the main action in a section or page
  * Visual Style : Bold, filled with the primary brand color
  * Usage : One primary button per section to guide users toward the most important action
* Secondary Button
  * Purpose : Used for alternative or supporting actions
  * Visual Style : Outlined with the primary color, transparent background
  * Usage : Can appear alongside a primary button for less important actions
* Tertiary Button
  * Purpose : Used for the least important actions
  * Visual Style : Text-only with no border, using primary color
  * Usage : For actions that should be available but not emphasized
-->
