skills/tocbien-ui-ux/references/styles/newsprint.md

# Newsprint (`newsprint`)

Kiểu báo giấy, cột chữ và đường kẻ

- Hợp với: Hợp khi đang dùng AI để dựng website cho tòa soạn, quán văn hóa và blog dài cần thứ bậc như báo in.
- Ngành minh hoạ: Báo, tạp chí, blog
- Trang minh hoạ làm việc gì: Tạp chí nghề sáng tạo có số báo, bộ lọc và chế độ đọc bài
- Thang (1–10): biến tấu bố cục 7 · chuyển động 2 · mật độ 8
- Xem mẫu: https://tocbien.cloud/phong-cach/newsprint/

## Đặc tả

Newsprint: nền giấy ngà #F9F9F7, mực đen #111111 và đỏ biên tập #CC0000 chỉ cho nhãn hoặc hành động cần chú ý. Dùng Playfair Display cho tên báo và headline, Lora cho bài đọc, Inter hoặc monospace cho metadata. Mở đầu bằng masthead, ngày/địa điểm, câu chuyện chính và ảnh; sau đó chia nội dung thành các cột có đường kẻ thật, phối bài dài với tin ngắn, danh mục và lịch hoạt động. Mọi khối giữ góc vuông, không gradient, không bóng mềm, không card nổi rời rạc; đường kẻ dùng chung để tránh viền kép. Có thể dùng một drop cap và ticker ngang như chi tiết báo giấy, nhưng không biến mọi đoạn thành hiệu ứng. Màn rộng dùng hai hoặc ba cột; điện thoại chuyển thành một cột theo thứ tự đọc, giữ headline, nhãn và nút tối thiểu 44px.

**Chi tiết cần giữ:** Đường kẻ phải gộp sát nhau như lưới cột báo, đừng để mỗi khối một viền riêng rời rạc. Nhãn chữ hoa nhỏ phải để line-height ít nhất 1.4 kẻo cắt mất dấu tiếng Việt.

**Lưu ý khi áp dụng:** Bo góc một chỗ là hỏng cả trang. Kiểu này sống bằng góc vuông và các đường kẻ sát nhau.

## Đặc tả gốc chi tiết (giữ đầy đủ)

# Design Style: Newsprint

## 1. Design Philosophy

**"All the News That's Fit to Print."**

This style is an ode to the golden age of print journalism, reimagined for the web. It embodies **absolute clarity, hierarchy, and structure** through its unwavering commitment to high-contrast typography, grid-based layouts, and sharp geometric precision.

### Core DNA
The newsprint aesthetic rejects modern web trends of soft shadows, blurred backgrounds, and rounded corners. Instead, it embraces:

- **Stark Geometry**: Zero border radius. Every element is a perfect rectangle with sharp 90-degree corners.
- **High Information Density**: Tight padding, collapsed grid borders, and efficient use of space mimic newspaper column layouts.
- **Typographic Drama**: Massive serif headlines (up to 9xl on desktop) paired with smaller, highly legible body text create extreme hierarchy.
- **Visible Structure**: Grid lines aren't hidden—they're celebrated. Borders between columns and sections are explicit and prominent.
- **Editorial Authority**: The design feels serious, timeless, and trustworthy—like a publication of record.
- **Paper Texture**: Subtle grain overlays and line patterns simulate the tactile quality of newsprint without being overly skeuomorphic.

### Vibe
Authoritative, intellectual, urgent, timeless. It feels like holding a fresh morning newspaper—crisp, organized, and information-rich. The design exudes confidence and credibility.

## 2. Design Token System (The DNA)

### Colors (Single Palette)
**Mode:** Light (Permanent - no dark mode)

- **Background:** `#F9F9F7` (Newsprint Off-White)
  A warm off-white that mimics aged paper. Not pure white—adds subtle warmth and reduces eye strain.

- **Foreground:** `#111111` (Ink Black)
  Very deep black, not pure `#000`. Used for all text and borders.

- **Muted:** `#E5E5E0` (Divider Grey)
  Light grey for secondary borders and subtle backgrounds.

- **Accent:** `#CC0000` (Editorial Red)
  Bright, unapologetic red used extremely sparingly—only for breaking news badges, CTAs, and hover states. 99% of the design is black and white.

- **Border:** `#111111` (Ink Black)
  The primary structural element. Borders define the grid and create visual rhythm.

- **Neutral Shades:**
  `neutral-100`: `#F5F5F5` (hover backgrounds)
  `neutral-200`: `#E5E5E5` (image placeholders)
  `neutral-400`: `#A3A3A3` (muted text in dark sections)
  `neutral-500`: `#737373` (metadata, captions)
  `neutral-600`: `#525252` (body text variations)
  `neutral-700`: `#404040` (secondary headings)

### Typography

**Font Stack:**
- **Serif (Headlines & Display):** `'Playfair Display', 'Times New Roman', serif`
  High-contrast, elegant, authoritative. Used for all major headings.

- **Serif (Body):** `'Lora', Georgia, serif`
  Highly legible serif for long-form reading text and paragraphs.

- **Sans-Serif (UI):** `'Inter', 'Helvetica Neue', sans-serif`
  Clean, modern sans for labels, buttons, navigation, and metadata.

- **Monospace (Data):** `'JetBrains Mono', 'Courier New', monospace`
  For stats, dates, edition numbers, and technical information.

**Scale Strategy:**
- **H1 (Hero Headlines):** `text-5xl sm:text-6xl lg:text-9xl` (80px → 128px)
  Massive, viewport-dominating. Use `leading-[0.9]` for ultra-tight line height. Apply `tracking-tighter` for condensed feel.

- **H2 (Section Headers):** `text-4xl lg:text-5xl` (36px → 48px)
  Bold, `font-black`, uppercase or sentence case depending on context.

- **H3 (Card Titles):** `text-2xl lg:text-3xl` (24px → 30px)
  `font-bold`, serif.

- **Body Text:** `text-sm` to `text-lg` (14px → 18px)
  Body font (Lora), `leading-relaxed` (line-height: 1.625).

- **Metadata/Labels:** `text-xs` (12px)
  Uppercase, `tracking-widest`, monospace or sans.

**Text Transform:**
- Uppercase for: Navigation, labels, metadata, badges, small caps for author bylines.
- Sentence case for: Headlines, article titles, body text.

### Radius & Border

**Border Radius:** `0px` everywhere. No exceptions.
Use inline styles or a `.sharp-corners` utility class to enforce zero radius on all components.

**Border Width:**
- Standard: `1px` solid black (`border`, `border-r`, `border-b`)
- Heavy emphasis: `border-b-4` or `border-4` (4px solid) for major section dividers
- Collapsed grids: Adjacent elements share borders to avoid double lines

**Border Style:**
Always solid. Never dashed or dotted except for rare decorative elements (e.g., `border-dashed` inside pricing cards for feature dividers).

### Shadows/Effects

**Philosophy:** Flat design. No soft drop shadows.

**Hover Effects:**
- **Hard Offset Shadow:** `box-shadow: 4px 4px 0px 0px #111111`
  Applied on hover to blog cards or interactive elements. Creates a "lifted" newspaper cutout effect.

- **Implementation:**
  ```css
  .hard-shadow-hover:hover {
    box-shadow: 4px 4px 0px 0px #111111;
    transform: translate(-2px, -2px);
  }
  ```

**No Effects:**
- No blur
- No inner shadows (except for rare decorative purposes)
- No gradient overlays

### Textures & Patterns

**Critical for Depth:** The newsprint style avoids "flat generic web design" through layered textures.

**1. Dot Grid Pattern (Main Background):**
```html
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23111111' fill-opacity='0.04' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E")`
```
Subtle 4×4px dot pattern applied to the body background.

**2. Line Grid Overlay (Section Texture):**
```css
.newsprint-texture {
  position: relative;
}
.newsprint-texture::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(0deg, transparent 98%, rgba(0,0,0,0.02) 100%),
    linear-gradient(90deg, transparent 98%, rgba(0,0,0,0.02) 100%);
  background-size: 3px 3px;
  pointer-events: none;
  opacity: 0.5;
}
```
Apply `.newsprint-texture` to major sections for a fine graph-paper effect.

**3. Radial Dot Pattern (Image Placeholders):**
```html
<div className="bg-[radial-gradient(#000_1px,transparent_1px)] opacity-10 [background-size:16px_16px]" />
```
Used in placeholder images to simulate halftone printing.

**4. Ornamental Dividers:**
Use serif ornaments between major sections:
```html
<div className="py-8 text-center font-serif text-2xl text-neutral-400 tracking-[1em]">
  &#x2727; &#x2727; &#x2727;
</div>
```

## 3. Component Stylings

### Buttons

**Primary Button (Default):**
```tsx
className="bg-[#111111] text-[#F9F9F7] border border-transparent hover:bg-white hover:text-[#111111] hover:border-[#111111]"
```
- Solid black background, white text
- On hover: Inverts to white background, black text and border
- Sharp corners (enforced)
- Uppercase text with `tracking-widest`
- Transition: `transition-all duration-200`

**Secondary Button (Outline):**
```tsx
className="border border-[#111111] bg-transparent hover:bg-[#111111] hover:text-[#F9F9F7]"
```
- Transparent background, black border and text
- On hover: Fills with black, text turns white

**Ghost Button:**
```tsx
className="hover:bg-[#E5E5E0] hover:text-[#111111]"
```
- No border, subtle grey background on hover

**Link Button:**
```tsx
className="text-[#111111] underline-offset-4 decoration-2 decoration-[#CC0000] hover:underline"
```
- Text-only, red underline on hover

**Touch Targets:**
Ensure minimum `min-h-[44px]` and `min-w-[44px]` for mobile accessibility.

### Cards/Containers

**Standard Card:**
```tsx
<div className="border border-[#111111] bg-[#F9F9F7] p-6">
```
- Sharp black border
- Off-white background
- Tight padding (p-4 to p-8)

**Newspaper Column Grid:**
- Use `border-r` and `border-b` to create collapsed grid layouts
- Example: 4-column feature grid where each cell has `border-r` except the last, and all have `border-b` on mobile

**Hover States:**
- Add `hover:bg-neutral-100` to interactive cards
- Optionally add `.hard-shadow-hover` for dramatic lift effect

### Inputs

**Style:**
```tsx
className="border-b-2 border-[#111111] bg-transparent px-3 py-2 font-mono text-sm focus-visible:bg-[#F0F0F0] focus-visible:outline-none"
```
- Transparent background
- Only bottom border (2px solid black)
- Monospace font
- On focus: Light grey background (`#F0F0F0`), no ring

**No Radius:** Enforce `borderRadius: 0px` inline.

### Icons

**Library:** `lucide-react`

**Style:**
- `stroke-width={1.5}` or `stroke-1` class
- Color: Always black (`text-[#111111]`) except in inverted sections (white)
- Size: `h-6 w-6` standard, `h-4 w-4` for small

**Icon Containers:**
- Wrap in bordered boxes: `border border-black h-12 w-12 flex items-center justify-center`
- Hover effect: `hover:bg-black hover:text-white transition-all`

## 4. Non-Genericness (The "Bold" Factor)

### Mandatory Bold Choices

**1. Vertical Grid Dividers:**
Don't just separate sections horizontally. Use `border-r` to create strict vertical columns even within the same row. The page should feel like a newspaper grid, not a typical website.

**2. Drop Caps:**
Apply massive drop caps (`text-7xl`, `float-left`) to the first letter of key paragraphs (hero intro, product detail). Accent color optional.

**3. Marquee Ticker:**
Use a horizontal scrolling ticker (e.g., `react-fast-marquee`) for stats. Black background, white text, red accent badges. Mimics stock ticker or breaking news crawl.

**4. Edition Metadata:**
Add newspaper-style metadata:
- "Vol. 1 | [Date] | New York Edition" in header
- "Edition: Vol 1.0 | Printed in NYC" in footer
- "Fig. 1.1" captions on images

**5. Justified Text:**
Use `text-justify` for multi-column body text (blog descriptions, product detail) to create that newspaper column look.

**6. Grayscale Images:**
Apply `grayscale` filter to all images by default. On hover, add `sepia-[50%]` for a vintage newspaper photo effect.

**7. Asymmetric Layouts:**
Don't default to 50/50 splits. Use 8-col/4-col, 5-col/7-col splits for editorial feel.

**8. Uppercase Labels:**
Liberally use `uppercase tracking-widest text-xs font-mono` for section labels, navigation, and metadata.

**9. Inverted Sections:**
Flip at least one major section to black background with white text (e.g., How It Works). Use red accent for numbered steps.

## 5. Layout Strategy

### Container
**Max Width:** `max-w-screen-xl` (1280px)
Centered with `mx-auto`, horizontal padding `px-4`

### Grid System
**Base:** 12-column grid
Use Tailwind's `grid-cols-12` with `col-span-*` for precise control.

**Common Splits:**
- Hero: `lg:col-span-8` / `lg:col-span-4`
- Benefits: `lg:col-span-5` / `lg:col-span-7`
- Footer: `col-span-2` for logo/description, `col-span-1` for link columns

**Collapsed Borders:**
Adjacent grid cells share borders. Use `border-r` on all but the last column, `border-b` on all rows.

### Spacing
**Philosophy:** High information density. Tighter than typical web design.

- Section padding: `py-16` (vertical)
- Card padding: `p-6` to `p-8`
- Gap between items: `gap-6` to `gap-8`
- Mobile: Reduce to `p-4`, `gap-4`

### Z-Index Layers
- Header (sticky): `z-40`
- Overlays/modals: `z-50`

## 6. Effects & Animation

### Motion Philosophy
Fast, snappy, mechanical. No bouncy or organic easing.

**Transition Classes:**
```tsx
"transition-all duration-200 ease-out"
"transition-colors duration-200"
```

**Hover Behaviors:**
1. **Color Inversion:** Buttons, icons flip between black/white instantly
2. **Hard Shadows:** Cards gain offset shadow + slight translate
3. **Underlines:** Links gain thick underline (`decoration-2 decoration-[#CC0000]`)
4. **Scale:** Small elements like dots can `hover:scale-150`
5. **Background:** Containers get subtle grey background (`hover:bg-neutral-100`)

**No Floating:** Elements don't "lift" with soft shadows. They snap into place with hard shadows.

**Accordion Animation:**
```tsx
className="grid transition-all duration-300 ease-in-out"
// Open: grid-rows-[1fr] opacity-100
// Closed: grid-rows-[0fr] opacity-0
```

### Micro-Interactions
- FAQ plus icons rotate 45° when open
- Blog card images scale 105% on hover
- Feature icon boxes invert colors on hover
- Navigation links turn red on hover

## 7. Spacing, Layout & Iconography

### Default Max-Width
`max-w-screen-xl` (1280px) for primary content container.

### Spacing System
Use an 8px grid system. Common values:
- Tight: `gap-2` (8px), `p-2` (8px)
- Standard: `gap-4` (16px), `p-4` (16px)
- Comfortable: `gap-8` (32px), `p-8` (32px)
- Spacious: `gap-16` (64px), `py-16` (64px)

**Mobile:** Reduce by one step (e.g., `p-8` → `p-6`)

### Iconography
**Integration:**
- Icons inside bordered boxes (feature cards)
- Icons as section markers (small squares, bullets)
- Icons in navigation (minimal use)
- Icons in social links (bordered boxes in footer)

**Style Consistency:**
- All icons from `lucide-react`
- Consistent stroke width (`stroke-1`)
- Black color by default, white in inverted sections

## 8. Responsive Strategy

### Breakpoints
- Mobile: `< 768px` (default)
- Tablet: `md:` (768px+)
- Desktop: `lg:` (1024px+)

### Mobile Adaptations
1. **Grid Collapse:**
   Multi-column grids collapse to single column (`grid-cols-1`)

2. **Border Removal:**
   Remove `border-r` on mobile, keep `border-b` for horizontal separators
   ```css
   @media (max-width: 767px) {
     .grid-border-r { border-right: none; }
   }
   ```

3. **Typography Scaling:**
   Headlines shrink dramatically: `text-5xl` → `text-6xl` → `text-9xl`

4. **Padding Reduction:**
   `p-16` → `p-8` → `p-6` on smaller screens

5. **Touch Targets:**
   All interactive elements minimum `44x44px` (`min-h-[44px] min-w-[44px]`)

6. **CTA Buttons:**
   Full width on mobile (`w-full md:w-auto`)

7. **Navigation:**
   Show hamburger menu icon on mobile (44px tap target)
   Hide main nav links, show mobile menu

### Maintaining Aesthetic
Even on mobile, preserve:
- Sharp corners (zero radius)
- High contrast
- Grid-based layout (just single column)
- Horizontal rule separators between sections
- Uppercase labels and metadata

## 9. Accessibility & Best Practices

### Contrast Ratios
- Black `#111111` on Off-White `#F9F9F7`: **AAA compliant** (>17:1)
- Red `#CC0000` on Off-White: **AA compliant** (>5:1)
- Never put red text on black background

### Focus States
```tsx
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2"
```
- Thick black ring (2px)
- 2px offset for visibility
- Only visible when using keyboard navigation (`:focus-visible`)

### Semantic HTML
- Use `<header>`, `<nav>`, `<section>`, `<footer>`
- Use `<h1>` through `<h6>` in proper hierarchy
- Use `<button>` for interactive elements, not divs
- Use `<a>` for links with proper `href`

### ARIA Labels
- Add `aria-label` to icon-only buttons
- Add `alt` text to all images (even decorative ones)
- Add `role="img"` and `aria-labelledby` to SVG icons

### Keyboard Navigation
- All interactive elements must be keyboard accessible
- Visible focus states (see above)
- Accordion items use `button` with proper `aria-expanded`

## 10. Implementation Constraints

### Font Import
Use `@import` in inline `<style>` tag:
```css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400&family=Lora:ital,wght@0,400;0,600;1,400&display=block');
```

Define font classes:
```css
.font-serif { font-family: 'Playfair Display', serif; }
.font-body { font-family: 'Lora', serif; }
.font-sans { font-family: 'Inter', sans-serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }
```

### Tailwind Utilities
Create custom utilities in `<style>` block:
- `.sharp-corners { border-radius: 0px !important; }`
- `.newsprint-texture { ... }` (see Textures section)
- `.hard-shadow-hover:hover { ... }` (see Effects section)

### Border Collapse Logic
To avoid double borders in grids:
1. Use `border-l` and `border-t` on the container
2. Use `border-r` and `border-b` on children
3. Remove `border-r` on last column
4. Remove `border-b` on last row (if needed)

### Component Structure (React 19+)
- Use ref as prop, not `forwardRef`
- Use `class-variance-authority` for button/card variants
- Use `tailwind-merge` to merge className props

### Performance
- Lazy load images below the fold
- Use `transform` and `opacity` for animations (GPU accelerated)
- Avoid animating `box-shadow` directly (use `will-change` if needed)

## Đặc tả áp dụng chi tiết

CÁCH ÁP DỤNG PHONG CÁCH NEWSPRINT
Bố cục và nhận diện: Masthead Playfair Display, body Lora, UI Inter; nền giấy #F9F9F7, đen #111111 và đỏ #CC0000. Desktop ba cột tỷ lệ 6/3/3, các rule 1 px/4 px có phân cấp; bài đọc max-width 68 ch.

## 3. Nội dung mở đầu

**H1:** TỜ NGHỀ

**Lời dẫn:** Những câu chuyện về người làm sáng tạo và cách một dự án nhỏ thành hình.

**Hành động chính:** Đọc câu chuyện / Thử đăng ký nhận bài

## 4. Đặc tả từng vùng nội dung và tác vụ

### 1. Trang nhất

**Bố cục và hành vi:** Masthead trọn một dòng khi đủ chỗ; ngày/số phát hành nhỏ; bài dẫn và ảnh halftone lớn ở cột chính.

**Nội dung và đầu ra:** Bài chủ đề: Khi một ý tưởng cần ít thứ hơn. Dòng giới thiệu kể việc rút phạm vi một dự án, không tin thời sự bịa.

### 2. Chuyên mục

**Bố cục và hành vi:** Tabs Thiết kế/Người làm/Công cụ; bài phụ có tiêu đề đủ ý và mô tả 2 câu.

**Nội dung và đầu ra:** Mỗi nhóm có hai bài, filter cập nhật kết quả thật thay đổi màu tab đơn thuần.

### 3. Bài đọc

**Bố cục và hành vi:** Mở bài trong vùng nội dung có heading, lời dẫn, ba đoạn và một pull quote của nhân vật hư cấu.

**Nội dung và đầu ra:** Ghi tác giả minh họa; không quote gán cho người thật. Có trở về vị trí trang nhất.

### 4. Số báo trước

**Bố cục và hành vi:** Hai số mẫu với chủ đề khác và cùng hệ masthead.

**Nội dung và đầu ra:** Đổi số thay dataset, không đổi toàn bộ aesthetic.

### 5. Nhận số mới

**Bố cục và hành vi:** Form email giản dị như phiếu đăng ký báo, nhãn thử rõ.

**Nội dung và đầu ra:** Xác nhận chỉ kiểm định dạng và hiển thị xem trước, không tuyên bố đã vào mailing list.

## 5. Dữ liệu và trạng thái tương tác

Mỗi bài có slug local/selectedId; filter kết hợp số báo, empty có cách trở về. Escape/Back từ bài trả vị trí đọc trước, không lên đầu mất ngữ cảnh.

Phân biệt rõ dữ liệu dựng sẵn với hành động thực: chức năng thử trong mẫu không gửi tin, tạo đơn, đặt lịch hoặc thực thi workflow bên ngoài. Nếu phiên bản khách sau này kết nối dịch vụ thật, đó là phần tích hợp riêng cần quyền và kiểm lỗi phù hợp.

## 6. Responsive và thứ tự đọc

768 px hai cột,390 px một cột; bỏ justify đoạn ngắn, body 18 px/1.7. Giữ phân cấp rule/masthead, không biến bài thành card SaaS.

Kiểm thêm 320 px và 1280×720 để phát hiện cắt chữ/đáy panel. Thứ tự DOM phải theo việc người xem cần làm, không chỉ sắp lại bằng CSS rồi khiến Tab đi lộn. Bảng/log dài cuộn bên trong vùng có nhãn.

## 7. Chuyển động và phản hồi

Đổi chuyên mục không animation dài; underline 150 ms. Nếu có ticker, tốc độ chậm và pause; reduced-motion hiển thị câu tĩnh.

Không để motion làm chậm thao tác hoặc che lỗi. Lưu trạng thái pause trong phiên khi có vòng lặp; reduced-motion phải giữ toàn bộ thông tin và thứ tự nội dung.

## 8. Art direction và ảnh đại diện

**Tài sản nội dung:** Ảnh AI editorial có chú thích minh họa; ba bài ngắn có tác giả hư cấu ghi rõ; không tin thời sự bịa.

**Cover:** Giữ nguyên masthead và một lead image; chỉ 2–3 cột đủ lớn. Không thu ảnh toàn trang báo dài thành chữ li ti.

**Bộ xuất:** cover 1200×750; cover dọc 900×1200; OG 1200×630; screenshot QA riêng ở viewport thực. Chụp/compose từ đúng phiên bản đã dựng, không ảnh hero hứa một thiết kế khác trang thật.

## 9. Trường hợp nghiệm thu riêng

1. Filter mỗi mục trả đúng bài và số đếm.
2. Back từ bài giữ vị trí.
3. Cover không mất chữ TỜ NGHỀ và ảnh halftone vẫn rõ.

Ngoài ba trường hợp này, chạy bộ kiểm chung của kế hoạch: tải ảnh/font lỗi, focus, reduced-motion, zoom200%, trạng thái trống và quay lại/reset. Không ghi đạt nếu chưa có bằng chứng.

Các tên, ngành và tác vụ ở trên là ví dụ có thể chuyển sang dự án của người dùng. Giữ ngôn ngữ thị giác gốc; không ép dự án thật thành nội dung của trang minh họa.