news.ycombinator.com Sample

# Design Thinking
Before coding, understand the context and define a bold aesthetic direction:
- **Purpose**: What problem does this interface solve? Who is using it?
- **Style**: Choose an extreme style: minimalism, maximalism, retro-futurism, organic/natural, luxury/artisanal, playful/toy-like, magazine/editorial, raw/rough, art deco/geometric, soft pastel, industrial/practical, etc. There are many styles to choose from. You can draw inspiration from them, but ensure your design truly aligns with the selected aesthetic direction.
- **Constraints**: Technical requirements (frameworks, performance, accessibility).
- **Differentiation**: What makes it memorable? What one thing will people remember?
**Key**: Choose a clear conceptual direction and execute it precisely. Both bold maximalism and refined minimalism are viable — the key is intention, not intensity.
## Aesthetic Default Settings
- Start with composition, not components.
- Prioritize full-bleed hero images or full-canvas visual anchors.
- Make the brand or product name the most prominent text.
- Keep copy concise for quick scanning.
- Use white space, alignment, scaling, cropping, and contrast before adding borders.
- Default constraint system: no more than two fonts and one accent color.

# Overall Atmosphere
## Design System
### 1. Core Style
Brutalist utilitarianism with early-web nostalgia. Table-based layouts prioritized for information density over visual polish. Zero decorative imagery except the iconic "Y" logo. Raw HTML aesthetic with visible structural elements.

### 2. Color Palette
- **Primary Accent:** Bright traffic-cone orange (#ff6600) used exclusively for header background and upvote interactions
- **Background:** Warm off-white/beige (#f6f6ef) reducing eye strain during long reading sessions
- **Text:** Near-black (#000000) for titles, medium gray (#828282) for metadata and secondary text
- **Utility:** Standard link blue for unvisited states, purple for visited

### 3. Font Stack
System sans-serif stack (Verdana, Geneva, sans-serif) at small point sizes (10pt-12pt). Monospace reserved for code blocks and input fields. No font smoothing or anti-aliasing enhancements.

### 4. Texture
Flat 2D planes with zero depth effects. No gradients, shadows, or border-radius. Sharp 1px borders and table grid lines visible. High contrast between orange header and content area.

### 5. Motion Design
Static page architecture with minimal interaction states. Hover effects limited to text decoration underlines and color shifts on the upvote triangle. No transitions, animations, or scroll-triggered effects.

## Component Guidelines
### Navigation
Horizontal pipe-separated text links ("new | past | comments | ask | show | jobs | submit") embedded directly in the orange header bar. No dropdown menus or hamburger icons.

### Content List
Numbered ranking system (1-30) with right-aligned numerals. Each item occupies two visual rows: title row and metadata row. Upvote mechanism uses unicode triangle (▲) rather than icon fonts or SVGs.

### Typography
Hierarchical sizing achieved through font weight and color value rather than size changes. Story titles in bold black; domains and metadata de-emphasized through gray color and smaller sizing.

## Distinctive Element Few-shot Examples

### 1. Orange Header Bar with Y-Logo
**Purpose:** Brand identification and primary navigation container establishing immediate site recognition
**Evidence:** Screenshot shows full-width orange bar containing boxed "Y" logo, bold "Hacker News" title, pipe-separated navigation links (new | past | comments | ask | show | jobs | submit), and right-aligned "login" link
**Visual Rules:**
- Layout: Full-width table structure with two columns (left: branding+nav, right: auth)
- Color: Solid bright orange background, black text for navigation, white "Y" on black-bordered square logo
- Typography: Bold weight for site name, regular for navigation links
- Spacing: Compact vertical padding (~2-3px), tight horizontal spacing between pipe separators
- Radius / border / shadow: Sharp 90-degree corners, no shadows, logo has visible border
- Motion: None - static rendering
**Recreation Prompt:**
> Generate a full-width header using table layout with bright orange background. Left cell: display a square containing the letter "Y" with black border and white fill, followed by bold "Hacker News" text, then pipe-separated navigation links. Right cell: align "login" text to the right. Use 1990s web aesthetic with no rounded corners, minimal padding, and high contrast.
**Structure Sketch:**
```html
<table width="100%" bgcolor="#ff6600" cellspacing="0" cellpadding="0">
  <tr>
    <td style="padding: 2px;">
      <span style="border: 1px solid #000; padding: 0 4px; background: #fff; color: #000;">Y</span>
      <b>Hacker News</b>
      new | past | comments | ask | show | jobs | submit
    </td>
    <td align="right" style="padding: 2px;">
      login
    </td>
  </tr>
</table>
```

### 2. Story List Item with Hierarchical Metadata
**Purpose:** Dense information display for ranked content showing vote status, title, source domain, and engagement metrics
**Evidence:** DOM shows structure with ranking number (1.), upvote triangle (▲), title link, domain in parentheses, and subline containing points (84 points), username (by rolph), timestamp (1 hour ago), hide action, and comment count (30 comments)
**Visual Rules:**
- Layout: Table row with three cells (rank number right-aligned, upvote center-aligned, content left-aligned)
- Color: Black title text, gray metadata (#828282), orange upvote triangle on hover
- Typography: Story title bold and larger, domain smaller and lighter in parentheses, metadata line significantly smaller (0.8em equivalent)
- Spacing: 5-7px vertical padding between items, metadata line indented to align with title start
- Radius / border / shadow: None, clean separation through whitespace only
- Motion: Upvote triangle color change on hover, underline on link hover
**Recreation Prompt:**
> Create a list item row with three columns: right-aligned ranking number (e.g., "1."), centered upvote triangle symbol (▲), and main content area. Content area contains bold story title followed immediately by gray domain in parentheses on same line. Below that, a metadata line in small gray text showing: point count, "by" username, relative timestamp, pipe, "hide" link, pipe, and comment count with "comments" label. Use table cells for precise alignment.
**Structure Sketch:**
```html
<tr>
  <td align="right" valign="top">1.</td>
  <td valign="top"><a>▲</a></td>
  <td>
    <a class="story-title">Agents can now create Cloudflare accounts...</a>
    <span class="domain">(cloudflare.com)</span>
    <div class="meta">
      84 points by <a>rolph</a> 1 hour ago | <a>hide</a> | <a>30 comments</a>
    </div>
  </td>
</tr>
```

### 3. Job Listing Row (Simplified Format)
**Purpose:** Special content type for YC job postings with reduced interaction options (no voting)
**Evidence:** Item 29 in screenshots shows "Proliferate (YC S25) Is Hiring- 200k for junior engineers" with metadata "11 hours ago | hide" lacking points count and username attribution typical of standard stories
**Visual Rules:**
- Layout: Same table structure as stories but upvote cell empty or omitted, ranking number present but no interaction triangle
- Color: Same as stories but without the engagement metrics color coding
- Typography: Title format identical to stories, metadata line excludes "points by [user]" prefix
- Spacing: Consistent with story items but visually distinct through missing upvote element
- Radius / border / shadow: None
- Motion: Standard link hover behavior
**Recreation Prompt:**
> Display a job listing similar to news stories but without the upvote triangle. Show ranking number, then title text "[Company] ([YC Batch]) Is Hiring- [Role]" followed by domain. Metadata line shows only timestamp and hide link, omitting points and username. Maintain same gray color and font size as regular story metadata.
**Structure Sketch:**
```html
<tr>
  <td align="right" valign="top">29.</td>
  <td valign="top"></td>
  <td>
    <a>Proliferate (YC S25) Is Hiring- 200k for junior engineers</a>
    <span class="domain">(ycombinator.com)</span>
    <div class="meta">
      11 hours ago | <a>hide</a>
    </div>
  </td>
</tr>
```

### 4. Footer Utility Navigation
**Purpose:** Secondary site navigation and search access point with legal/administrative links
**Evidence:** Bottom of page showing horizontal separator line followed by "Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact" and search input field
**Visual Rules:**
- Layout: Centered or content-aligned horizontal text flow with pipe separators
- Color: Standard link colors against beige background, horizontal line in medium gray
- Typography: Small sans-serif text (smaller than story metadata), uniform weight
- Spacing: Generous top margin separating from content, compact internal spacing
- Radius / border / shadow: 1px solid horizontal rule above, no other borders
- Motion: Text decoration underline on hover
**Recreation Prompt:**
> Create a footer section separated from content by a horizontal line. Below the line, display inline links separated by vertical pipes: Guidelines, FAQ, Lists, API, Security, Legal, Apply to YC, Contact. End with a text input field for search. Text should be small and gray, centered horizontally within the content width.
**Structure Sketch:**
```html
<footer>
  <hr/>
  <center>
    <a>Guidelines</a> | 
    <a>FAQ</a> | 
    <a>Lists</a> | 
    <a>API</a> | 
    <a>Security</a> | 
    <a>Legal</a> | 
    <a>Apply to YC</a> | 
    <a>Contact</a>
    <br/><br/>
    <form><input type="text" name="q" placeholder="Search"/></form>
  </center>
</footer>
```

## Engineering CSS Evidence

Compressed from live DOM computed styles. This section keeps high-frequency tokens and intent, not raw CSS dumps.

### Compressed Design Tokens

**Mode:** light

#### Color Roles
- **color.text.primary:** #828282 (201)
- **color.text.secondary:** #828282 (1)
- **color.surface.base:** #f6f6ef (1)
- **color.accent:** #828282 (294)
- **color.border.default:** #828282 (198)
- **color.focus.ring:** #828282 (201)

#### Typography Roles
- **font.family.primary:** Verdana (279)
- **font.family.secondary:** monospace (1)
- **font.size.display:** 9.33px (133)
- **font.size.body:** 13.33px (1)
- **font.size.label:** 10.67px (37)
- **ratio:** display is 0.7x body

#### Spacing Rhythm
- **base unit:** 4px
- **space.1:** 2px (8)
- **space.2:** 8px (5)
- **space.3:** 1px (3)

#### Radius Roles
- Not enough evidence

#### Shadow Intent
- **level:** none
- **usage:** 0
- **note:** flat surfaces dominate

#### Motion Intent
- **level:** none
- **range:** Not enough evidence
- **common durations:** Not enough evidence
- **easing style:** Not enough evidence

### Distinctive Implementation Signals

- Flat surfaces are preferred over decorative depth.
- Type hierarchy is ratio-driven: display is 0.7x body.

### Extraction Diagnostics

- Sampled 280 visible elements from 807 total DOM elements.
- Confidence: high.
- No extraction warnings.

## Core Principles
1. Firmly Refuse (Negative Constraints):
- Prohibit using purple/blue gradients on white backgrounds
- Prohibit using common fonts (Inter, Roboto, Arial, system-ui)
- Prohibit using predictable hero-CTA-feature-review templates
- Prohibit using common geometric shapes or abstract spots
- Prohibit using visual effects that look like stock images or clichés
## Performance Optimization
- Ensure pages load quickly, avoid unnecessary large resources
- Use modern image formats (WebP) and appropriate compression
- Implement lazy loading techniques for long page content
**Important Note**: The implementation complexity should match the aesthetic vision. Maximalist designs require complex code as well as a lot of animations and effects. Minimalist or refined designs require restraint, precision, and attention to spacing, typography, and subtle details. Elegance comes from a perfect interpretation of the vision.