# Svelte

> Svelte — Style Reference

## Prompt Content

```
# Svelte — Style Reference
> Editorial broadsheet trên nền marble trắng — giọng serif, điểm nhấn một tia lửa

**Theme:** light

Trang web của Svelte mang phong cách như một tờ broadsheet văn học được chuyển thể thành landing page của framework. Serif typography — EB Garamond cho body text, DM Serif Display cho hero headlines — giữ vai trò chủ đạo, trong khi một sans-serif gọn gàng (Fira Sans) xử lý phần chrome: nav, buttons, tags, search. Canvas là màu trắng tinh, surface hiếm khi xuất hiện, và elevation gần như không tồn tại; phân cấp đến từ kích thước và weight của type chứ không phải cards hay shadows. Một màu cam rực (#d43008) duy nhất tạo điểm nhấn cho trang đơn sắc: nó chiếm logo, mũi tên GET STARTED, wordmark /svelte/, và link documentary. CTA là text links có hậu tố mũi tên, không bao giờ là boxed buttons. Trang web thở — nhịp dọc rộng rãi, serif headlines căn giữa, logo tài trợ grayscale, và rất ít trang trí giữa các section.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Svelte Ember | `#d43008` | `--color-svelte-ember` | Accent màu cam hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng cấp nó thành màu CTA chính |
| Ink | `#262626` | `--color-ink` | Text chính, nav items, body copy, button labels — soft black tránh độ chói của #000 nhưng vẫn giữ tỷ lệ tương phản 15:1 trên nền trắng |
| Carbon | `#141414` | `--color-carbon` | Headlines và display copy — hơi đậm hơn Ink để tạo trọng lượng thị giác cho serif wordmarks trên nền trắng |
| Paper | `#ffffff` | `--color-paper` | Canvas trang, card surfaces, nav background — background chủ đạo ở mọi nơi |
| Fog | `#f2f2f2` | `--color-fog` | Surface elevation nhẹ, hover wash cho button, background search/input field |
| Slate | `#666666` | `--color-slate` | Secondary text mờ, helper labels, breadcrumb text |
| Ash | `#808080` | `--color-ash` | Text giảm nhấn, disabled labels, tertiary metadata |
| Obsidian | `#000000` | `--color-obsidian` | Border input field, focus states form, text input text |

## Tokens — Typography

### EB Garamond — Body text và section copy — Garamond mang đến cho framework giọng văn học, editorial mà không hệ thống font sans-serif nào có thể sao chép được; 22px với line-height 1.5 là nhịp đọc của trang, lớn và serif một cách bất thường cho một trang devtool · `--font-eb-garamond`
- **Thay thế:** Source Serif Pro, Crimson Pro, Lora
- **Weights:** 400
- **Kích thước:** 10px, 22px
- **Line height:** 1.50
- **Vai trò:** Body text và section copy — Garamond mang đến cho framework giọng văn học, editorial mà không hệ thống font sans-serif nào có thể sao chép được; 22px với line-height 1.5 là nhịp đọc của trang, lớn và serif một cách bất thường cho một trang devtool

### Fira Sans — Toàn bộ UI chrome — nav links, search input, button labels, tag ADJECTIVE, section eyebrows. Fira Sans là font workspace; nó giữ các phần tử tương tác yên lặng để giọng serif dẫn dắt · `--font-fira-sans`
- **Thay thế:** Inter, system-ui, -apple-system
- **Weights:** 400
- **Kích thước:** 10px, 12px, 13px, 14px, 16px, 20px
- **Line height:** 1.00–1.70
- **Vai trò:** Toàn bộ UI chrome — nav links, search input, button labels, tag ADJECTIVE, section eyebrows. Fira Sans là font workspace; nó giữ các phần tử tương tác yên lặng để giọng serif dẫn dắt

### DM Serif Display — Hero và section display headlines — được dùng có chừng mực (chỉ 4 lần xuất hiện trên trang) như một dấu chấm than typographic; serif slab đậm ở 54px tương phản với body Garamond nhẹ hơn để tạo căng thẳng editorial · `--font-dm-serif-display`
- **Thay thế:** Playfair Display, Cormorant Garamond Bold
- **Weights:** 500
- **Kích thước:** 54px
- **Line height:** 1.20
- **Vai trò:** Hero và section display headlines — được dùng có chừng mực (chỉ 4 lần xuất hiện trên trang) như một dấu chấm than typographic; serif slab đậm ở 54px tương phản với body Garamond nhẹ hơn để tạo căng thẳng editorial

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 10px | 1.5 | — | `--text-caption` |
| subheading | 20px | 1.2 | — | `--text-subheading` |
| body | 22px | 1.5 | — | `--text-body` |
| display | 54px | 1.2 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** compact

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 5 | 5px | `--spacing-5` |
| 7 | 7px | `--spacing-7` |
| 8 | 8px | `--spacing-8` |
| 10 | 10px | `--spacing-10` |
| 17 | 17px | `--spacing-17` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 100 | 100px | `--spacing-100` |
| 115 | 115px | `--spacing-115` |

### Border Radius

| Phần tử | Giá trị |
|---------|-------|
| nav | 56px |
| tags | 4px |
| inputs | 4px |
| buttons | 4px |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 40px
- **Card padding:** 48px
- **Element gap:** 10px

## Components

### Text Link CTA
**Vai trò:** Primary action

Text IN HOA màu Svelte Ember (#d43008), 14px Fira Sans weight 400, letter-spacing hơi rộng, theo sau bởi mũi tên phải (→). Không background, không border, không padding. Mũi tên animate khi hover bằng cách dịch phải. Ví dụ: 'GET STARTED', 'Watch the full Svelte Origins documentary'.

### Ghost Navigation Link
**Vai trò:** Top nav item

Fira Sans 14px, màu Ink (#262626), không gạch chân mặc định, gạch chân xuất hiện khi hover. Các mục: Docs (với dropdown caret), Tutorial, Packages, Playground, Blog. Căn phải: search field, Discord, GitHub, Open collective, Apple icon.

### Search Field
**Vai trò:** Site search

Hình pill (56px radius), background Fog (#f2f2f2), placeholder text màu Ink (#141414) hiển thị 'search', 8px horizontal padding, chiều cao ~32px. Cmd+K shortcut hint hiển thị bên trong.

### Adjective Tag
**Vai trò:** Highlight label

Pill nhỏ cạnh wordmark /svelte/: background Ink đậm (#262626), text trắng, Fira Sans 10-12px in hoa, 4px radius, 5px vertical / 8px horizontal padding. Hiển thị 'ADJECTIVE' như một placeholder có thể điền.

### Section Heading
**Vai trò:** Display headline

DM Serif Display weight 500 ở 54px, màu Carbon (#141414), căn giữa. Line-height 1.2. Dùng cho hero ('web development for the rest of us') và section tài trợ ('used by companies you've heard of').

### Body Paragraph
**Vai trò:** Editorial copy

EB Garamond 22px weight 400, màu Ink (#262626), line-height 1.5. Căn đều hoặc căn trái tùy theo cột. Độ rộng generous (~600-680px). Màu Svelte Ember làm nổi bật các thuật ngữ inline như '/svelte/'.

### Code Terminal Card
**Vai trò:** Product screenshot frame

Background Ink đậm (#262626) hoặc gần đen, monospace syntax highlighting bên trong, 4px radius nhẹ, không shadow. Chứa kết quả REPL hoặc so sánh framework. Nằm cạnh editorial text trong layout hai cột.

### Logo Grid
**Vai trò:** Social proof

Một hàng ngang duy nhất các logo tài trợ grayscale (overflow, yelp, Square, Apple, Spotify, NYT, IKEA) với kích thước đồng đều, cách nhau ~115px. Tất cả logo được giảm bão hòa xuống ~50% gray. Căn giữa trong section với headline phía trên.

### Hero Illustration
**Vai trò:** Brand visual

3D isometric render của một dây chuyền sản xuất nhà máy với màu Svelte Ember (#d43008) và Ink, với logo 'S' của Svelte như một tòa nhà. Nằm ở nửa phải của hero trên canvas gradient xanh-xám rất nhạt. Phong cách full-color, dimensional, photorealistic rendering.

### Two-Column Content Section
**Vai trò:** Feature explanation

Cột trái: wordmark /svelte/ (DM Serif Display, màu Ember orange) + Adjective Tag + 2-3 đoạn body EB Garamond. Cột phải: stacked code terminal cards và chart screenshots. 48px horizontal padding trong các cột.

### Footer Link
**Vai trò:** Secondary navigation

Fira Sans 14px, màu Ink (#262626), không decoration, hover underline. Căn trái trong footer band.

## Do's and Don'ts

### Nên làm
- Dùng EB Garamond 22px / line-height 1.5 cho tất cả paragraph copy — body serif là giọng nói của trang
- Dùng Svelte Ember #d43008 độc quyền cho brand wordmark, in-text links, và arrow CTAs — không bao giờ dùng làm fill color cho buttons hay cards
- Đặt hero và section headlines bằng DM Serif Display weight 500 ở 54px, căn giữa, màu Carbon #141414
- Dùng Fira Sans 14px cho tất cả UI chrome: nav, buttons, tags, inputs, helper text
- Xây dựng CTA dưới dạng text links in hoa với mũi tên theo sau, không phải boxed buttons — 'GET STARTED →' chứ không phải 'Get Started' trên nền màu
- Giữ canvas trắng tinh #ffffff và để Fog #f2f2f2 xử lý biến thể surface duy nhất (inputs, hover washes)
- Duy trì 40px giữa các section và 48px horizontal padding bên trong content columns

### Không nên làm
- Không dùng DM Serif Display cho body text — chỉ dành cho display headlines ở 54px
- Không thêm drop shadows, card elevations, hay gradient backgrounds — thiết kế phẳng và dựa vào whitespace để phân cách
- Không dùng boxed primary buttons với fill — actions là text links với mũi tên
- Không giới thiệu thêm accent colors — Svelte Ember là token màu sắc duy nhất; mọi thứ khác là grayscale
- Không dùng border-radius trên 4px cho content elements; 56px chỉ dành cho search pill
- Không căn trái section display headlines như 'used by companies you've heard of' — căn giữa chúng
- Không dùng sans-serif fonts cho headlines — sự tương phản serif/serif giữa Garamond body và DM Serif Display là đặc trưng

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|---------|---------|
| 1 | Paper | `#ffffff` | Canvas trang chính và surface mặc định |
| 2 | Fog | `#f2f2f2` | Input fields, button hover states, subtle dividers |
| 3 | Slate | `#666666` | Surface đảo ngược cho dark code blocks hoặc footer panels |
| 4 | Ink | `#262626` | Dark code terminal và product screenshot frames |

## Elevation

Trang web tránh hoàn toàn shadows. Phân cấp thị giác đạt được thông qua typographic weight (Garamond 22px body so với DM Serif 54px display) và whitespace (40px section gaps), không phải elevation. Độ sâu duy nhất đến từ product screenshots và 3D hero illustration, là các asset được render sẵn — không phải UI elevation.

## Imagery

Imagery thưa thớt và có chủ đích. Hero sử dụng một 3D isometric illustration lớn duy nhất về một nhà máy dây chuyền sản xuất với màu cam Svelte Ember và xám đậm, lấp đầy nửa phải viewport trên canvas xanh-xám gần trắng. Product screenshots (REPL, framework comparison charts) xuất hiện dưới dạng code-terminal cards có khung với background tối. Phần tài trợ sử dụng logo grayscale giảm bão hòa trong một hàng duy nhất. Không có lifestyle photography, không có stock imagery — ngôn ngữ thị giác là illustration + product UI, không gì khác. Phong cách icon xuyên suốt là tối giản: outlined 16-20px line icons trong nav (search, Discord, GitHub, v.v.), không có biến thể icon filled.

## Layout

Single-column căn giữa với max-width khoảng 1200px. Hero là split hai cột: nửa trái chứa headline và mũi tên GET STARTED, nửa phải chứa 3D illustration. Bên dưới, các section xen kẽ giữa layout centered display-headline + content và layout hai cột text+product-screenshot. Phần logo tài trợ là một hàng ngang duy nhất các marks grayscale với display headline căn giữa phía trên. Navigation là một top bar fixed-height duy nhất với logo + 5 nav items căn trái và search + social icons căn phải. Vertical rhythm rộng rãi: ~100px top/bottom padding trên các section chính, 40px giữa các phần tử xếp chồng. Trang đọc từ trên xuống dưới trong một lần cuộn liên tục, không có sidebar, không có modals hiển thị.

## Agent Prompt Guide

## Quick Color Reference
- text: #262626 (Ink) / #141414 (Carbon cho headlines)
- background: #ffffff (Paper)
- border: #000000 (Obsidian, cho inputs)
- accent / link: #d43008 (Svelte Ember)
- muted text: #666666 (Slate)
- primary action: không có màu CTA riêng biệt

## Example Component Prompts
1. **Hero Section**: Background trắng (#ffffff). Cột trái: headline 'web development for the rest of us' bằng DM Serif Display weight 500, 54px, #141414, line-height 1.2. Bên dưới, text link 'GET STARTED →' bằng Fira Sans 14px in hoa, #d43008. Cột phải: 3D isometric Svelte factory illustration lấp đầy cột. 48px horizontal padding, 100px vertical padding.
2. **Sponsor Logos Row**: Centered DM Serif Display 54px headline 'used by companies you've heard of' màu #141414. Bên dưới, một hàng ngang duy nhất gồm 7 logo tài trợ (overflow, yelp, Square, Apple, Spotify, NYT, IKEA), tất cả giảm bão hòa thành grayscale, kích thước đồng đều ~60px chiều cao, cách nhau 115px, căn giữa.
3. **Two-Column Feature Section**: Cột trái (60% width): wordmark /svelte/ bằng DM Serif Display 54px #d43008, theo sau là tag nhỏ tối 'ADJECTIVE' (4px radius, background #262626, text trắng, Fira Sans 10px), sau đó 2-3 đoạn EB Garamond 22px #262626, line-height 1.5. Cột phải (40% width): code terminal card tối (background #262626, 4px radius) chứa screenshot của Svelte REPL hoặc framework comparison.
4. **Top Navigation**: Một hàng duy nhất, background trắng, 56px chiều cao. Trái: Svelte Ember logo + wordmark 'SVELTE', sau đó Fira Sans 14px links (Docs▾, Tutorial, Packages, Playground, Blog) màu #262626. Phải: search field hình pill (56px radius, background #f2f2f2, 8px padding) theo sau là icon links (Discord, GitHub, Open collective, Apple).
5. **Footer Link Group**: Fira Sans 14px #262626 links, căn trái, 10px gap giữa các mục, cách biệt với content phía trên bằng 1px #f2f2f2 hairline divider. Không background fill, không border.

## Similar Brands

- **Evan You's personal site / Vite** — Cùng cách tiếp cận editorial serif-headline + monochrome-canvas với một accent color duy nhất, UI rất hạn chế
- **Astro** — Cả hai đều là devtool sites từ chối aesthetic dark dashboard điển hình, sử dụng whitespace rộng rãi và tương phản typographic serif/sans
- **Stripe Press** — Cùng ngôn ngữ literary-broadsheet — serif display headlines, màu sắc hạn chế, canvas trắng, phân cấp dựa trên type
- **Observable** — Cả hai đều sử dụng centered serif display headlines phía trên content, với product screenshots là yếu tố thị giác chính

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-svelte-ember: #d43008;
  --color-ink: #262626;
  --color-carbon: #141414;
  --color-paper: #ffffff;
  --color-fog: #f2f2f2;
  --color-slate: #666666;
  --color-ash: #808080;
  --color-obsidian: #000000;

  /* Typography — Font Families */
  --font-eb-garamond: 'EB Garamond', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-fira-sans: 'Fira Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-dm-serif-display: 'DM Serif Display', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.5;
  --text-subheading: 20px;
  --leading-subheading: 1.2;
  --text-body: 22px;
  --leading-body: 1.5;
  --text-display: 54px;
  --leading-display: 1.2;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* Spacing */
  --spacing-5: 5px;
  --spacing-7: 7px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-17: 17px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-100: 100px;
  --spacing-115: 115px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 40px;
  --card-padding: 48px;
  --element-gap: 10px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-full: 56px;

  /* Named Radii */
  --radius-nav: 56px;
  --radius-tags: 4px;
  --radius-inputs: 4px;
  --radius-buttons: 4px;

  /* Surfaces */
  --surface-paper: #ffffff;
  --surface-fog: #f2f2f2;
  --surface-slate: #666666;
  --surface-ink: #262626;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-svelte-ember: #d43008;
  --color-ink: #262626;
  --color-carbon: #141414;
  --color-paper: #ffffff;
  --color-fog: #f2f2f2;
  --color-slate: #666666;
  --color-ash: #808080;
  --color-obsidian: #000000;

  /* Typography */
  --font-eb-garamond: 'EB Garamond', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-fira-sans: 'Fira Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-dm-serif-display: 'DM Serif Display', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.5;
  --text-subheading: 20px;
  --leading-subheading: 1.2;
  --text-body: 22px;
  --leading-body: 1.5;
  --text-display: 54px;
  --leading-display: 1.2;

  /* Spacing */
  --spacing-5: 5px;
  --spacing-7: 7px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-17: 17px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-100: 100px;
  --spacing-115: 115px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-full: 56px;
}
```