Vertical Timeline

STYLEKIT_STYLE_REFERENCE
style_name: Vertical Timeline
style_slug: timeline-vertical
style_source: /styles/timeline-vertical

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

You are a frontend expert specializing in Vertical Timeline layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT break the connecting line
- Do NOT use inconsistent node sizes
- Do NOT keep alternating layout on mobile
- Do NOT omit time/date labels
- Do NOT make content too long per node

## Must Follow

- Central line: absolute positioned pseudo-element or div
- Node dots: aligned with center line
- Mobile: single-side layout (all items on right)
- Desktop: can alternate left/right
- Consistent spacing between nodes
- Clear time/date indicators

## Structure

Container:
- relative positioning
- padding-left for line space (mobile)
- centered line (desktop alternating)

Central Line:
- Pseudo-element or div
- Absolute positioned
- 2px width, subtle color

Node:
- Circular dot (w-4 h-4)
- Aligned with line center
- Different colors for status
- White border for contrast

Content Card:
- Connected visually to node
- Date/time label
- Title and description
- Optional action button

## Responsive

Mobile:
- All items on one side
- Line on left
- Full-width cards

Desktop:
- Optional alternating sides
- Line in center
- Cards 50% width

## Animation

Scroll-triggered:
- Items fade in on scroll
- Stagger animation
- Node pulse on current

## Animation & Interaction Rules

- Node Synchronization: When hovering a card, the timeline node must synchronize with highlight, scale, or glow, establishing a strong connection.
- Pull-out Effect: Card hover can slightly lift and shift along the horizontal axis (translate-x), simulating a node being pulled out for examination.
- Sequential Smoothness: Transitions use duration-200 ease-out, supporting stable feedback during fast scrolling browsing.
- Connected Focus: Focused card border color must match the timeline main line, ensuring narrative continuity.

## Self-Check

After generating code, verify:
1. Line is continuous
2. Nodes are aligned
3. Mobile is single-side
4. All items have dates
5. Scroll animation works

---

# Vertical Timeline Design System

> Vertical timeline layout connecting time nodes through a connecting line. Ideal for displaying historical progress, project milestones, work experience, and process steps.

## Design Philosophy

Vertical Timeline is a layout approach for displaying time sequences or process steps, guiding reading through visual connecting lines.

Core principles:
- Linear narrative: Clear chronological or process order
- Node emphasis: Each important moment has a clear marker
- Connected relationships: Visual lines link all events together
- Progressive reveal: Supports scroll-triggered animations

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-zinc-100
Radius: rounded-xl
```

### Shadow
```
sm: shadow-sm
md: shadow-sm
lg: shadow-md
hover: hover:shadow-md
focus: focus:shadow-sm
```

### Interaction
```
Hover translate: hover:-translate-y-0.5
Hover scale: (none)
Hover opacity: (none)
Transition: transition-all duration-300
Active: active:scale-95
```

### Typefaces
```
Heading: font-semibold tracking-tight
Body: font-sans
Mono: font-mono
```

### Type scale
```
Hero: text-3xl md:text-4xl lg:text-5xl
H1: text-2xl md:text-3xl
H2: text-xl md:text-2xl
H3: text-lg md:text-xl
Body: text-sm md:text-base
Small: text-xs md:text-sm
```

### Spacing
```
Section: py-12 md:py-16 lg:py-20
Container: px-4 md:px-6 lg:px-8
Card: p-6
Gap sm: gap-4
Gap md: gap-6 md:gap-8
Gap lg: gap-8 md:gap-12
```

### Color roles
```
Background primary: bg-slate-50
Background secondary: bg-white
Background accent: bg-blue-500, bg-emerald-500, bg-amber-500, bg-red-500
Text primary: text-zinc-900
Text secondary: text-zinc-600
Text muted: text-zinc-400
Button primary: bg-blue-500 text-white
Button secondary: bg-zinc-100 text-zinc-700
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `rounded-none`
- `border-4`
- `border-8`
- `shadow-2xl`
- `font-black`

### Banned patterns
- matches `^border-[48]`
- matches `^shadow-2xl`

### Why they are banned
- `rounded-none`: Timeline Vertical uses soft rounded corners (rounded-xl) for cards
- `border-4`: Timeline Vertical uses subtle thin borders (border)
- `shadow-2xl`: Timeline Vertical uses subtle shadows, not dramatic ones

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
inline-flex items-center gap-2
text-sm font-medium
text-blue-600
transition-colors
```

### Every card must include
```
relative
bg-white
rounded-xl
shadow-sm
border border-zinc-100
```

### Every input must include
```
border border-zinc-200
rounded-lg
text-zinc-900
focus:outline-none
focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500
```

---

## [COMPARE] Vertical Timeline wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
 Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="inline-flex items-center gap-2 text-sm font-medium text-blue-600 transition-colors bg-blue-500 text-white">
 Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
 <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="relative bg-white rounded-xl shadow-sm border border-zinc-100 p-6">
 <h3 class="font-semibold tracking-tight text-lg md:text-xl">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="border border-zinc-200 rounded-lg text-zinc-900 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Vertical Timeline page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-slate-50 text-zinc-900 border border-zinc-100 px-4 md:px-6 lg:px-8">
 <div class="flex items-center justify-between max-w-6xl mx-auto gap-6 md:gap-8">
 <a href="/" class="font-semibold tracking-tight text-lg md:text-xl">
 {LOGO_TEXT}
 </a>
 <div class="flex gap-6 md:gap-8 font-sans text-xs md:text-sm">
 {NAV_LINKS}
 </div>
 </div>
</nav>
```

### Hero section
```html
<section class="bg-blue-500 text-zinc-900 py-12 md:py-16 lg:py-20 px-4 md:px-6 lg:px-8">
 <div class="max-w-4xl mx-auto">
 <h1 class="font-semibold tracking-tight text-3xl md:text-4xl lg:text-5xl">
 {HEADLINE}
 </h1>
 <p class="font-sans text-sm md:text-base max-w-xl">
 {SUBHEADLINE}
 </p>
 <button class="inline-flex items-center gap-2 text-sm font-medium text-blue-600 transition-colors bg-blue-500 text-white">
 {CTA_TEXT}
 </button>
 </div>
</section>
```

### Card grid
```html
<section class="bg-slate-50 text-zinc-900 py-12 md:py-16 lg:py-20 px-4 md:px-6 lg:px-8">
 <div class="max-w-6xl mx-auto">
 <h2 class="font-semibold tracking-tight text-xl md:text-2xl">{SECTION_TITLE}</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
 <!-- Card template - repeat for each card -->
 <div class="relative bg-white rounded-xl shadow-sm border border-zinc-100 p-6">
 <h3 class="font-semibold tracking-tight text-lg md:text-xl">{CARD_TITLE}</h3>
 <p class="font-sans text-sm md:text-base text-zinc-400">{CARD_DESCRIPTION}</p>
 </div>
 </div>
 </div>
</section>
```

### Form input
```html
<input class="border border-zinc-200 rounded-lg text-zinc-900 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-white text-zinc-600 py-12 md:py-16 lg:py-20 px-4 md:px-6 lg:px-8">
 <div class="max-w-6xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
 <div>
 <span class="font-semibold tracking-tight text-lg md:text-xl">{LOGO_TEXT}</span>
 <p class="font-sans text-xs md:text-sm">{TAGLINE}</p>
 </div>
 <div>
 <h4 class="font-semibold tracking-tight text-lg md:text-xl">{COLUMN_TITLE}</h4>
 <ul class="font-sans text-xs md:text-sm">
 {FOOTER_LINKS}
 </ul>
 </div>
 </div>
 </div>
</footer>
```

---

## [CHECKLIST] Vertical Timeline post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `inline-flex items-center gap-2 text-sm font-medium text-blue-600 transition-colors`
- [ ] Card includes: `relative bg-white rounded-xl shadow-sm border border-zinc-100`
- [ ] Input includes: `border border-zinc-200 rounded-lg text-zinc-900 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500`

### Forbidden check
- [ ] Not using `rounded-none`
- [ ] Not using `border-4`
- [ ] Not using `border-8`
- [ ] Not using `shadow-2xl`
- [ ] Not using `font-black`

### Style rule check
- [ ] Use pseudo-elements or divs to create the central connecting line
- [ ] Node dots align with the connecting line
- [ ] Alternating left-right layout adds visual variety
- [ ] Mobile switches to single-side layout
- [ ] Add scroll-triggered entrance animations

### Style drift check
- [ ] Does not violate: Do not break or misalign the connecting line
- [ ] Does not violate: Do not use inconsistent node sizes
- [ ] Does not violate: Do not keep alternating layout on mobile
- [ ] Does not violate: Do not omit time/sequence labels
- [ ] Does not violate: Do not make content too long causing excessively long connecting lines

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as Vertical Timeline

---

## [EXAMPLES] Example prompts

### 1. 

```
Create a company history timeline:
1. Vertical timeline with central line
2. Alternating left/right layout on desktop
3. Single side on mobile
4. Each node: year, event title, description
5. Different node colors for different types (funding, product, team)
6. Scroll animation: fade in as visible
7. Year navigation at top
Use subtle colors, professional styling
```

### 2. 

```
Create a career timeline for resume:
1. Single-side vertical timeline
2. Each node: date range, company, role, achievements
3. Company logo in node instead of dot
4. Current job highlighted
5. Skills tags for each role
6. Smooth scroll animation
7. Download resume button at end
Clean minimal design, professional look
```

### 3. 

```
Create a project progress timeline:
1. Vertical timeline showing project phases
2. Nodes: phase number, name, status (complete/current/upcoming)
3. Complete phases: green nodes with checkmark
4. Current phase: blue pulsing node
5. Upcoming: gray nodes
6. Progress percentage at top
7. Click node to expand details
Interactive with hover states
```

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

- break or misalign the connecting line
- use inconsistent node sizes
- keep alternating layout on mobile
- omit time/sequence labels
- make content too long causing excessively long connecting lines
- decouple node and card interactions (only card changes without node response)
- use sluggish or dragging transition timing

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] do not break or misalign the connecting line
- [ ] do not use inconsistent node sizes
- [ ] do not keep alternating layout on mobile
- [ ] do not omit time/sequence labels
- [ ] do not make content too long causing excessively long connecting lines