# until

> until — Style Reference

## Prompt Content

```
# until — Style Reference
> Ấn phẩm giấy da ấm áp dưới một gốc ô liu đơn độc.

**Theme:** light

Until mang một bản sắc biotech mang phong cách editorial ấm áp: nền giấy kem (#f7f3ec) phủ gần như mọi bề mặt, chữ gần đen (#121212), và một tông olive duy nhất (#6c853b) đóng vai trò điểm nhấn thực vật trên heading và đường viền. Hệ thống về cơ bản là nhiếp ảnh — ảnh lifestyle chụp từ trên xuống full-bleed thay thế cho illustration, và nội dung chạy trực tiếp lên ảnh không có lớp phủ tint. Typography gánh trọng lượng: Neue Haas Display với tracking nén, line-height gần 1.0 tạo nhịp điệu editorial kiểu Thụy Sĩ, trong khi Neue Haas Text ở 14–16px giữ body content nhẹ nhàng. Mọi thứ đều được bo tròn rộng rãi — 32px trên card, 64px trên button — tạo ra UI pill mềm mại, mang cảm giác như một chuyên khảo khoa học in ấn hơn là một dashboard. Shadow gần như không thể nhận thấy; sự phân lớp cream-on-cream và đường viền dày (1px solid #121212) tạo sự phân cách thay vì độ cao.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|-----|---------|-------|---------|
| Parchment | `#f7f3ec` | `--color-parchment` | Nền trang, bề mặt card, nav container — màu trắng ấm thay thế trắng tinh, làm mềm toàn bộ hệ thống |
| Ink | `#121212` | `--color-ink` | Chữ chính, mọi đường viền, outline card, nav links — gần đen pha chút ấm, dẫn dắt mọi đường nét cấu trúc trên trang |
| Black | `#000000` | `--color-black` | Đường viền link, điểm nhấn footer, icon fill — đen tuyền dành riêng cho micro element có độ nhấn cao |
| Paper | `#ffffff` | `--color-paper` | Button fill, bề mặt nâng cao, nền footer — trắng tinh dùng tiết kiệm để tạo điểm nhấn tương phản trên nền kem |
| Mist | `#bebebe` | `--color-mist` | Body text phụ hoặc disabled, divider nhẹ — nằm dưới đường ink |
| Olive Branch | `#6c853b` | `--color-olive-branch` | Màu heading và đường viền accent — nốt màu duy nhất, một tông olive hữu cơ mang lại cảm giác thực vật, phi công ty |
| Bone | `#121c0f` | `--color-bone` | Chữ đậm trên nền sáng khi cần thêm trọng lượng — gần đen với undertone xanh lá hòa hợp với olive |

## Tokens — Typography

### neueHaasDisplay — Display và heading — từ subhead 24px đến hero 69px, với line-height chặt (0.90–1.10) và negative tracking mạnh (lên đến -0.037em) tạo cảm giác Swiss-editorial nén · `--font-neuehaasdisplay`
- **Thay thế:** Neue Haas Grotesk Display Pro, hoặc Inter với weight tương ứng + letter-spacing chặt
- **Weights:** 400, 500
- **Sizes:** 16px, 24px, 32px, 39px, 56px, 69px
- **Line height:** 0.90–1.50
- **Letter spacing:** -2.55px ở 69px, -0.96px ở 32px, -0.4px ở 16px
- **Vai trò:** Display và heading — từ subhead 24px đến hero 69px, với line-height chặt (0.90–1.10) và negative tracking mạnh (lên đến -0.037em) tạo cảm giác Swiss-editorial nén

### neueHaasText — Body copy, nav links, button labels, card text — 14px và 16px với negative tracking vừa phải (-0.025em ở 14px, -0.009em ở 16px), đọc như một grotesque sạch sẽ nhưng không lâm sàng · `--font-neuehaastext`
- **Thay thế:** Neue Haas Grotesk Text Pro, hoặc Inter
- **Weights:** 400, 500
- **Sizes:** 14px, 16px
- **Line height:** 1.43–1.50
- **Letter spacing:** -0.35px ở 14px, -0.14px ở 16px
- **Vai trò:** Body copy, nav links, button labels, card text — 14px và 16px với negative tracking vừa phải (-0.025em ở 14px, -0.009em ở 16px), đọc như một grotesque sạch sẽ nhưng không lâm sàng

### Geist Mono — Caption, chú thích, label dạng code, scroll prompt — 12–14px với +0.05em tracking ở size 12px, thêm điểm nhấn kỹ thuật/phòng thí nghiệm · `--font-geist-mono`
- **Thay thế:** JetBrains Mono, IBM Plex Mono
- **Weights:** 400, 500
- **Sizes:** 12px, 14px
- **Line height:** 1.40–1.50
- **Letter spacing:** -0.3px ở 12px (normal), +0.7px ở 12px (annotation)
- **OpenType features:** `"ss01" on`
- **Vai trò:** Caption, chú thích, label dạng code, scroll prompt — 12–14px với +0.05em tracking ở size 12px, thêm điểm nhấn kỹ thuật/phòng thí nghiệm

### Type Scale

| Vai trò | Size | Line Height | Letter Spacing | Token |
|---------|------|-------------|----------------|-------|
| caption | 12px | 1.4 | -0.3px | `--text-caption` |
| body-sm | 14px | 1.43 | -0.35px | `--text-body-sm` |
| body | 16px | 1.5 | -0.14px | `--text-body` |
| subheading | 24px | 1.1 | -0.6px | `--text-subheading` |
| heading-sm | 32px | 1 | -0.96px | `--text-heading-sm` |
| heading | 39px | 1 | -1.17px | `--text-heading` |
| heading-lg | 56px | 1 | -1.68px | `--text-heading-lg` |
| display | 69px | 0.9 | -2.55px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 8px

**Density:** compact

### Spacing Scale

| Tên | Giá trị | Token |
|-----|---------|-------|
| 8 | 8px | `--spacing-8` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 96 | 96px | `--spacing-96` |
| 128 | 128px | `--spacing-128` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| nav | 64px |
| cards | 32px |
| small | 6px |
| badges | 50px |
| images | 24px |
| buttons | 64px |

### Shadows

| Tên | Giá trị | Token |
|-----|---------|-------|
| subtle | `rgba(255, 255, 255, 0.1) 0px -1px 2px 0px inset, rgba(255...` | `--shadow-subtle` |
| xl | `rgba(0, 0, 0, 0.043) 0px 7.5px 30px 0px, rgba(255, 255, 2...` | `--shadow-xl` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 48px
- **Card padding:** 24px
- **Element gap:** 8px

## Components

### Pill Navigation Bar
**Vai trò:** Navigation chính của site

Container capsule nổi với border-radius 64px, fill trắng hoặc kem, viền 1px solid #121212, padding dọc 16px. Brand wordmark bên trái, nav links căn giữa ở 14px Neue Haas Text weight 400, button 'Join Us' bo tròn bên phải. Nằm trên hero với highlight inset nhẹ.

### Pill Primary Button
**Vai trò:** Call-to-action chính

Border-radius 64px (full pill), fill trắng #ffffff, viền 1px solid #121212, padding ngang 8px–16px, 14px Neue Haas Text weight 500, màu #121212. Dùng cho CTA, hành động liên hệ, và lời mời vào team.

### Pill Ghost Button
**Vai trò:** Hành động phụ

Cùng radius 64px và border như primary, nhưng fill trong suốt trên nền kem. Dùng trong nav cho 'Join Us' khi không fill, và cho các hành động ít nhấn mạnh hơn như link FAQ.

### Hero Display Headline
**Vai trò:** Headline editorial màn hình đầu

Neue Haas Display 69px weight 400, line-height 0.90, letter-spacing -2.55px, màu #121212 hoặc #ffffff tùy độ sáng ảnh. Nằm ở góc dưới-bên trái của hero image, thường đi kèm caption Geist Mono 12px như '[ Scroll to discover ]'.

### Editorial Image Card
**Vai trò:** Card ảnh team / lab

Border-radius 32px, viền 1px solid #121212, không shadow. Ảnh phủ kín card edge-to-edge. Label Geist Mono nhỏ (vd '| 3 |') nằm phía trên màu olive #6c853b hoặc ink.

### Feature Image Card Grid
**Vai trò:** Trình diễn lab/team bốn cột

Bốn card trên một hàng, mỗi card radius 32px, viền 1px solid #121212, chiều rộng bằng nhau với gap 16–24px. Chú thích đánh số màu olive phía trên mỗi card: '| 1 | A remarkably interdisciplinary lab'.

### Recruitment Copy Block
**Vai trò:** Khối văn bản tuyển dụng

Layout hai cột: câu tuyên bố đậm bên trái bằng Neue Haas Display 32–39px weight 500, đoạn văn hỗ trợ bên phải bằng Neue Haas Text 16px weight 400, màu #121212. Đi kèm với primary pill button bên dưới.

### Scroll Prompt Caption
**Vai trò:** Micro-label editorial

Geist Mono 12px, màu #ffffff trên hero images, thường được bọc trong ngoặc '[ Scroll to discover ]' với +0.05em letter-spacing — hoạt động như một ornament typographic.

### Top Header Strip
**Vai trò:** Thanh tiện ích phía trên nav

Dải ngang mỏng với brand wordmark và ba chấm nhỏ bên trái, nav links giữa, pill 'Join Us' bên phải. Fill kem #f7f3ec, viền dưới 1px #121212.

### Full-Bleed Hero Image
**Vai trò:** Hình ảnh viewport đầu tiên

Ảnh chụp edge-to-edge (lifestyle từ trên xuống, cảnh cỏ/dã ngoại), không có lớp phủ tint, không border-radius trên chính ảnh. Headline phủ trực tiếp lên ảnh ở góc dưới-bên trái.

### Nav Pill Container
**Vai trò:** Capsule navigation nổi

Pill trắng #ffffff với radius 64px, viền 1px #121212, nổi căn giữa ở đầu các trang nội bộ (không phải hero). Chứa hai chấm nhỏ (page indicator) và CTA 'Join Us'.

### Borderless Stacked Section
**Vai trò:** Bộ phân cách khối nội dung

Các section chảy vào nhau chỉ bằng khoảng trắng — không có divider nhìn thấy được. Nhịp điệu dọc được dẫn dắt bởi gap 48–96px giữa các section.

## Do's and Don'ts

### Do
- Dùng #f7f3ec làm nền trang trên mọi màn hình; không bao giờ thay thế bằng trắng tinh cho canvas chính.
- Đặt tất cả heading bằng Neue Haas Display với letter-spacing từ -0.020em đến -0.037em — negative tracking là chữ ký editorial của thương hiệu.
- Bo tròn tất cả interactive element thành 64px (full pill) và tất cả card thành 32px; sự mềm mại là bắt buộc.
- Dùng #6c853b olive chỉ trên heading text, gạch dưới heading, và label chú thích nhỏ — không bao giờ dùng làm button fill hoặc bề mặt lớn.
- Dùng Geist Mono 12px với +0.05em tracking cho micro-label trong ngoặc như '[ Scroll to discover ]' — đây là điểm nhấn trang trí kiểu research-journal.
- Giữ shadow ở dạng inset-highlight duy nhất (rgba(255,255,255,0.1) inset trên và dưới + rgba(0,0,0,0.05) 0 3px 17px outer); tránh drop-shadow nặng.
- Duy trì gap dọc 48–96px giữa các section chính; trang thở như một trang tạp chí in.

### Don't
- Không dùng đen tuyền (#000000) cho body text — dùng #121212, có chút ấm hòa hợp với nền kem.
- Không thêm màu sắc khác; olive là accent duy nhất và lạm dụng sẽ làm loãng sự kiềm chế thực vật.
- Không dùng góc nhọn (0–6px radius) trên card, button, hoặc ảnh — ngôn ngữ bo tròn định nghĩa sự mềm mại.
- Không đặt text trên lớp phủ tint trên ảnh; headline nằm trực tiếp trên ảnh hoặc trên nền kem.
- Không đặt body text dưới 14px hoặc trên 16px; type scale cố tình hẹp và editorial.
- Không dùng button màu fill — mọi CTA là pill với viền 1px #121212, hoặc trắng hoặc ghost.
- Không dùng box-shadow nặng hơn combo inset/outer đã định; hệ thống dựa vào phân lớp cream-on-cream, không phải độ cao.

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-----|-----|---------|----------|
| 0 | Parchment Canvas | `#f7f3ec` | Nền trang cơ bản — mọi trang, mọi section |
| 1 | Paper Elevation | `#ffffff` | Capsule nav nổi, primary button fill, footer, badge nâng cao |
| 2 | Olive Accent | `#6c853b` | Điểm nhấn heading trang trí và label chú thích |

## Elevation

- **Editorial Image Card:** `rgba(255, 255, 255, 0.1) 0px -1px 2px 0px inset, rgba(255, 255, 255, 0.1) 0px 1px 2px 0px inset, rgba(0, 0, 0, 0.1) 0px 0px 2px 0px, rgba(0, 0, 0, 0.05) 0px 3px 17px 0px`
- **Floating Nav Pill:** `rgba(0, 0, 0, 0.043) 0px 7.5px 30px 0px, rgba(255, 255, 255, 0.3) 0px 1px 1px 0px inset`

## Imagery

Nhiếp ảnh chiếm ưu thế trong ngôn ngữ thị giác: ảnh lifestyle full-bleed chụp từ trên xuống về con người trong thiên nhiên (một cặp đôi trên chăn picnic trên cỏ, nhà khoa học trong phòng thí nghiệm) làm toàn bộ hero và section visual. Không illustration, không product render, không đồ họa trừu tượng. Ảnh được xử lý thô — không overlay, không duotone, không crop bo tròn ngoại trừ bên trong card (24–32px). Phong cách nhiếp ảnh ấm áp, ánh sáng tự nhiên, hơi hoài niệm, chụp từ trên xuống hoặc ngang tầm mắt trong môi trường thực tế. Icon tối giản và inline; hầu hết dấu câu thị giác là typographic (ngoặc, pipe, mono annotation). Mật độ nhiều ảnh ở hero và card grid, nhiều text ở body section.

## Layout

Container căn giữa max-width 1200px, hero full-bleed, sau đó các dải kem xen kẽ. Hero là ảnh full-viewport với display headline góc dưới-bên trái và nav pill nổi căn giữa ở trên. Content section dùng card grid 4 cột cho trình diễn visual (lab/team), sau đó chuyển sang block text 2 cột cho copy tuyển dụng. Navigation là header strip mỏng trên trang chủ và capsule pill trắng nổi trên trang nội bộ. Nhịp điệu dọc rộng rãi (48–96px giữa các section) tạo nhịp điệu magazine-spread. Trang đọc từ trên xuống dưới như: ảnh hero → card grid 4-up → block copy tuyển dụng → footer.

## Agent Prompt Guide

Tham chiếu màu nhanh:
- text: #121212
- background: #f7f3ec
- border: #121212
- accent: #6c853b
- surface (elevated): #ffffff
- primary action: không có màu CTA riêng

Ví dụ Component Prompts:

1. Tạo hero section: nền ảnh full-bleed, không lớp phủ tint. Headline ở 69px neueHaasDisplay weight 400, màu #ffffff, letter-spacing -2.55px, line-height 0.90, đặt góc dưới-bên trái. Bên dưới headline, thêm caption Geist Mono 12px màu trắng với +0.7px tracking: '[ Scroll to discover ]'.

2. Tạo card grid ảnh bốn cột: mỗi card border-radius 32px, viền 1px solid #121212, inset highlight 1px rgba(255,255,255,0.1). Phía trên mỗi card, một label olive nhỏ bằng Geist Mono 12px: '| 1 |', '| 2 |', v.v., màu #6c853b. Gap 24px giữa các card, tất cả trên nền #f7f3ec.

3. Tạo nav pill nổi: fill trắng #ffffff, border-radius 64px, viền 1px solid #121212, padding ngang 24px, padding dọc 8px. Chứa hai chấm đen nhỏ (hình tròn 8px) bên trái và button text 'Join Us' bên phải bằng 14px neueHaasText weight 500, màu #121212.

4. Tạo recruitment copy block: layout hai cột trên nền #f7f3ec. Cột trái: headline ở 39px neueHaasDisplay weight 500, màu #121212, letter-spacing -1.17px. Cột phải: body text ở 16px neueHaasText weight 400, màu #121212, line-height 1.5. Bên dưới cột trái, một pill button: fill trắng, radius 64px, viền 1px #121212, padding 8px 16px, label 'Join the team' bằng 14px neueHaasText weight 500.

5. Tạo secondary ghost button: fill trong suốt, border-radius 64px, viền 1px solid #121212, padding 8px 16px, label bằng 14px neueHaasText weight 500, màu #121212. Nằm trên nền kem.

## Gradient System

Một gradient trang trí duy nhất xuất hiện trên site: linear-gradient(90deg, rgb(203, 53, 15) 0%, rgb(244, 224, 155) 50%, rgb(171, 193, 227) 100%) — một dải sunset ấm sang mát (terracotta → kem → xanh nhạt). Gradient này được dùng làm đường viền accent mỏng hoặc section divider, không phải bề mặt. Coi nó như một ornament typographic hiếm, không phải fill.

## Similar Brands

- **Ginkgo Bioworks** — Cùng thẩm mỹ biotech editorial nền kem với display type lớn và bảng màu tối giản
- **Modern Meadow** — Nền trắng ấm tương tự, card bo tròn mềm mại, và ảnh phòng thí nghiệm trong bối cảnh lifestyle
- **Notion (marketing site)** — CTA hình pill, border-radius rộng trên card, và bảng màu gần đơn sắc với một accent duy nhất
- **Arc Browser** — Nền kem với chữ gần đen, tracking display chặt kiểu Neue-Haas, và hero ảnh full-bleed

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-parchment: #f7f3ec;
  --color-ink: #121212;
  --color-black: #000000;
  --color-paper: #ffffff;
  --color-mist: #bebebe;
  --color-olive-branch: #6c853b;
  --color-bone: #121c0f;

  /* Typography — Font Families */
  --font-neuehaasdisplay: 'neueHaasDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-neuehaastext: 'neueHaasText', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.4;
  --tracking-caption: -0.3px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --tracking-body-sm: -0.35px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.14px;
  --text-subheading: 24px;
  --leading-subheading: 1.1;
  --tracking-subheading: -0.6px;
  --text-heading-sm: 32px;
  --leading-heading-sm: 1;
  --tracking-heading-sm: -0.96px;
  --text-heading: 39px;
  --leading-heading: 1;
  --tracking-heading: -1.17px;
  --text-heading-lg: 56px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -1.68px;
  --text-display: 69px;
  --leading-display: 0.9;
  --tracking-display: -2.55px;

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

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-96: 96px;
  --spacing-128: 128px;

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

  /* Border Radius */
  --radius-md: 6px;
  --radius-2xl: 18px;
  --radius-3xl: 24px;
  --radius-3xl-2: 32px;
  --radius-full: 50px;
  --radius-full-2: 64px;

  /* Named Radii */
  --radius-nav: 64px;
  --radius-cards: 32px;
  --radius-small: 6px;
  --radius-badges: 50px;
  --radius-images: 24px;
  --radius-buttons: 64px;

  /* Shadows */
  --shadow-subtle: rgba(255, 255, 255, 0.1) 0px -1px 2px 0px inset, rgba(255, 255, 255, 0.1) 0px 1px 2px 0px inset, rgba(0, 0, 0, 0.1) 0px 0px 2px 0px, rgba(0, 0, 0, 0.05) 0px 3px 17px 0px;
  --shadow-xl: rgba(0, 0, 0, 0.043) 0px 7.5px 30px 0px, rgba(255, 255, 255, 0.3) 0px 1px 1px 0px inset;

  /* Surfaces */
  --surface-parchment-canvas: #f7f3ec;
  --surface-paper-elevation: #ffffff;
  --surface-olive-accent: #6c853b;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-parchment: #f7f3ec;
  --color-ink: #121212;
  --color-black: #000000;
  --color-paper: #ffffff;
  --color-mist: #bebebe;
  --color-olive-branch: #6c853b;
  --color-bone: #121c0f;

  /* Typography */
  --font-neuehaasdisplay: 'neueHaasDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-neuehaastext: 'neueHaasText', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.4;
  --tracking-caption: -0.3px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --tracking-body-sm: -0.35px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.14px;
  --text-subheading: 24px;
  --leading-subheading: 1.1;
  --tracking-subheading: -0.6px;
  --text-heading-sm: 32px;
  --leading-heading-sm: 1;
  --tracking-heading-sm: -0.96px;
  --text-heading: 39px;
  --leading-heading: 1;
  --tracking-heading: -1.17px;
  --text-heading-lg: 56px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -1.68px;
  --text-display: 69px;
  --leading-display: 0.9;
  --tracking-display: -2.55px;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-96: 96px;
  --spacing-128: 128px;

  /* Border Radius */
  --radius-md: 6px;
  --radius-2xl: 18px;
  --radius-3xl: 24px;
  --radius-3xl-2: 32px;
  --radius-full: 50px;
  --radius-full-2: 64px;

  /* Shadows */
  --shadow-subtle: rgba(255, 255, 255, 0.1) 0px -1px 2px 0px inset, rgba(255, 255, 255, 0.1) 0px 1px 2px 0px inset, rgba(0, 0, 0, 0.1) 0px 0px 2px 0px, rgba(0, 0, 0, 0.05) 0px 3px 17px 0px;
  --shadow-xl: rgba(0, 0, 0, 0.043) 0px 7.5px 30px 0px, rgba(255, 255, 255, 0.3) 0px 1px 1px 0px inset;
}
```