# Ambrook

> # Ambrook — Style Reference

## Prompt Content

```
# Ambrook — Style Reference
> sổ cái thu hoạch trên giấy bọc thịt

**Theme:** light

Ambrook nói bằng thổ ngữ thị giác của vùng trung tâm nước Mỹ: nền canvas ấm như giấy da, chữ đậm như mực, và một điểm nhấn màu hổ phách thu hoạch duy nhất sưởi ấm mọi hành động chính. Bảng màu được giảm bão hòa có chủ đích — xanh olive, vàng lúa mì, nâu vỏ cây — như thể chính giao diện được in trên giấy bọc thịt tái chế và đóng dấu bằng mực đậu nành. Headline dùng một display face custom với uy quyền lặng lẽ (weight 500, không phải 700 như thường thấy), và mỗi section mở đầu bằng một eyebrow chữ in hoa nhỏ, trải rộng trên trang với tracking rộng. Ảnh chụp mang phong cách tài liệu (documentary), không phải khát vọng — thợ hàn, chủ trại, tài xế xe tải, không tạo dáng và đầy nắng. Kết quả là một giao diện có cảm giác gốc rễ, không bóng bẩy: đáng tin cậy qua sự ấm áp thay vì qua chrome.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Parchment | `#fcfaf1` | `--color-parchment` | Canvas trang và bề mặt card — off-white ấm thay thế #ffffff thuần để giữ hệ thống gắn với chất liệu giấy, nông nghiệp |
| Bone | `#efe9e0` | `--color-bone` | Bề mặt phụ cho footer, soft sections, và hairline borders cần tách biệt khỏi canvas parchment mà không có độ tương phản gắt |
| Pure White | `#ffffff` | `--color-pure-white` | Bề mặt elevated card và product-mockup — dùng có chừng mực để nâng các panel cụ thể (như ảnh chụp Ledger) lên trên nền parchment |
| Loam | `#c7bcaf` | `--color-loam` | Dividers nhẹ, cạnh card, và borders ít nhấn mạnh giữa canvas và content blocks |
| Bark | `#96897b` | `--color-bark` | Helper text nhạt, metadata, và supporting labels khi cần giọng nói nhẹ nhàng hơn body copy chính |
| Saddle | `#50463c` | `--color-saddle` | Body text phụ và subdued icon fills — nâu xám ấm lùi về sau mà không biến mất |
| Ink | `#211b15` | `--color-ink` | Primary text, heading strokes, và dominant border color trong toàn hệ thống. Gần đen ấm pha chút nâu đất (umber) giữ cho giao diện không bị lâm sàng |
| Charcoal Olive | `#252a23` | `--color-charcoal-olive` | Dark mode–style panels, product UI containers, và high-emphasis icon fills — dùng khi một section cần đảo ngược trang ấm thành thứ gì đó tập trung vào sản phẩm |
| Deep Olive | `#434f40` | `--color-deep-olive` | Navigation borders, icon strokes, và neutral divider được dùng nhiều nhất trong hệ thống — tối màu rêu, đọc là hữu cơ chứ không công nghiệp |
| Sage | `#7a9779` | `--color-sage` | Green accent cho outlined action borders, linked labels, và lightweight interactive emphasis. Không nâng lên thành primary CTA color |
| Honey Amber | `#e8b672` | `--color-honey-amber` | Primary action button fill — điểm nhấn màu duy nhất của hệ thống cho CTAs, thu hút chú ý qua sự ấm áp thay vì bão hòa |
| Wheat | `#f0c891` | `--color-wheat` | Amber nhạt hơn dùng cho heading borders, icon accents, và subtle decorative strokes khi honey quá nặng |

## Tokens — Typography

### Lateral — Workhorse sans cho body, nav, buttons, inputs, và secondary headings. Weight 400 cho running text, 500 cho buttons và emphasis. Custom letterforms tạo nên sự ấm áp tinh tế mà một sans chung chung sẽ thiếu — tỷ lệ hơi humanist thay vì geometric cơ khí. · `--font-lateral`
- **Thay thế:** Inter hoặc Söhne
- **Weights:** 400, 500
- **Cỡ chữ:** 11px, 13px, 15px, 17px, 19px, 30px, 68px
- **Line height:** 1.20–1.71
- **Letter spacing:** -0.0110em cho 19px và 30px; 0.0580em và 0.1070em cho uppercase labels ở 11px và 13px
- **Vai trò:** Workhorse sans cho body, nav, buttons, inputs, và secondary headings. Weight 400 cho running text, 500 cho buttons và emphasis. Custom letterforms tạo nên sự ấm áp tinh tế mà một sans chung chung sẽ thiếu — tỷ lệ hơi humanist thay vì geometric cơ khí.

### Lateral Narrow — Biến thể condensed cho tighter column headings và subhead text khi không gian ngang bị giới hạn nhưng vẫn muốn giọng body. · `--font-lateral-narrow`
- **Thay thế:** Inter (condensed) hoặc Söhne Buch
- **Weights:** 400, 500
- **Cỡ chữ:** 19px, 30px, 34px
- **Line height:** 1.40, 1.50
- **Letter spacing:** -0.0090em đến -0.0100em
- **Vai trò:** Biến thể condensed cho tighter column headings và subhead text khi không gian ngang bị giới hạn nhưng vẫn muốn giọng body.

### Lateral Display — Hero và section display face. Dùng ở weight 500 (không phải 700 mặc định) cho các headline lớn — sự kiềm chế này là signature: chữ thì thầm uy quyền thay vì la hét. Đặc tính serif nhẹ ở đầu nét chữ tạo cảm giác editorial, gần như newspaper-headline, phù hợp với giọng thương hiệu nông nghiệp. · `--font-lateral-display`
- **Thay thế:** Tiempos Text hoặc Source Serif Pro
- **Weights:** 400, 500, 700
- **Cỡ chữ:** 38px, 53px, 68px
- **Line height:** 1.00, 1.10, 1.14
- **Letter spacing:** -0.0110em ở mọi cỡ
- **OpenType features:** `"ss01" on`
- **Vai trò:** Hero và section display face. Dùng ở weight 500 (không phải 700 mặc định) cho các headline lớn — sự kiềm chế này là signature: chữ thì thầm uy quyền thay vì la hét. Đặc tính serif nhẹ ở đầu nét chữ tạo cảm giác editorial, gần như newspaper-headline, phù hợp với giọng thương hiệu nông nghiệp.

### Type Scale

| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 11px | 1.5 | 0.107px | `--text-caption` |
| eyebrow | 13px | 1.6 | 0.058px | `--text-eyebrow` |
| body | 15px | 1.71 | — | `--text-body` |
| body-lg | 17px | 1.6 | — | `--text-body-lg` |
| subheading | 19px | 1.43 | -0.21px | `--text-subheading` |
| heading-sm | 30px | 1.33 | -0.33px | `--text-heading-sm` |
| heading | 38px | 1.14 | -0.42px | `--text-heading` |
| heading-lg | 53px | 1.1 | -0.58px | `--text-heading-lg` |
| display | 68px | 1 | -0.75px | `--text-display` |

## Tokens — Spacing & Shapes

**Đơn vị cơ bản:** 4px

**Mật độ:** thoải mái

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 40 | 40px | `--spacing-40` |
| 60 | 60px | `--spacing-60` |
| 68 | 68px | `--spacing-68` |
| 120 | 120px | `--spacing-120` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| cards | 7.5px |
| pills | 9999px |
| inputs | 3.75px |
| buttons | 3.75px |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 60-90px
- **Card padding:** 30-45px
- **Element gap:** 8-15px

## Components

### Primary Action Button
**Vai trò:** Filled amber CTA cho email signup, trial start, và get-started flows.

Background #e8b672, text #211b15, border-radius 3.75px, padding 15px 30px, Lateral weight 500 ở 15px. Không shadow. Khi hover, tối hơn thành amber đậm hơn. Ký tự mũi tên (→) sau label là chi tiết signature — button luôn chỉ về phía trước.

### Ghost Outline Button
**Vai trò:** Secondary action (Sign Up, Log In) khi primary amber quá chói.

Transparent background, 1px border màu #211b15, text #211b15, border-radius 3.75px, padding 9px 15px. Hình chữ nhật mỏng, hơi bo tròn là đối trọng lặng lẽ của hệ thống với CTA honey-amber.

### Email Capture Input
**Vai trò:** Hero-level signup field với embedded submit button.

Container là 1px border #211b15 với 3.75px radius. Bên trái: Lateral 15px placeholder "Enter your email" màu #96897b. Bên phải: amber Primary Action Button nhúng sát cạnh input. Không đổi màu focus ring — border vẫn ink-dark khi focus.

### Section Eyebrow Label
**Vai trò:** Tag chữ in hoa nhỏ phía trên mỗi section heading (ví dụ "ACCOUNTING SOFTWARE", "WHO WE SERVE").

Lateral weight 400 ở 13px, letter-spacing 0.058em, color #211b15, uppercase. Canh giữa phía trên heading. Tracking rộng tạo nhịp điệu như dòng ngày tháng trên báo — một thiết bị nhịp điệu lặng lẽ xuyên suốt trang.

### Section Heading
**Vai trò:** Headline editorial hai dòng cho mỗi content section.

Lateral Display weight 500 ở 38px hoặc 53px, line-height 1.14, letter-spacing -0.42px đến -0.58px, color #211b15, canh giữa. Weight 500 (không phải 700) là sự kiềm chế signature — uy quyền qua sự lặng lẽ, không qua âm lượng.

### Trust Signal Row
**Vai trò:** Thanh ngang gồm icon + label assurances bên dưới hero CTA.

Flex row với 8px gap, Lateral 13px, color #211b15. Mỗi item là một outlined icon 14px theo sau bởi label text ("30-day free trial", "Live onboarding", "US-based support", "4.7 Trustpilot"). Icons là thin-stroke, monochrome ink.

### Brand Logo Strip
**Vai trò:** Scroller ngang các brand mark của khách hàng để xây dựng social proof.

Logos grayscale trong container oval/tròn trên nền parchment, canh giữa xung quanh headline "Over 7,000 businesses rely on Ambrook". Logos hiển thị màu #50463c hoặc #211b15 trên parchment. Không card backgrounds, không shadows — logos nằm trực tiếp trên trang.

### Industry Illustration Card
**Vai trò:** Grid 3 cột các industry categories (Farming, Ranching, Construction, Trucking, Property Management, Services).

Mỗi card là một divider grid cell 1px #efe9e0, không card background, padding 45px 30px. Giữa: monochrome line-art illustration của ngành nghề (tractor, cow, crane, truck, keys, newspaper) hiển thị với stroke #211b15 ở ~1.5px weight. Bên dưới: tên ngành bằng Lateral weight 500 ở 15px với mũi tên →. Phong cách illustration là hand-drawn line art, không filled hoặc colorful.

### Product Showcase Panel
**Vai trò:** Dark inverted panel previewing actual product UI (Ledger view).

Background #252a23 (charcoal olive), border-radius 7.5px, padding 45px. Cột trái: section heading "Bookkeeping that makes sense." màu #fcfaf1 (inverted text). Cột phải: product screenshot (Ledger table) với light table UI trên nền trắng, hơi chồng lên hoặc sát cạnh phải của dark panel.

### Documentary Photo Collage
**Vai trò:** Hero bottom strip — các ảnh tài liệu chồng lên nhau, hơi xoay, của người lao động thực tế.

Năm đến sáu bức ảnh sắp xếp thành hàng chồng lên nhau ở page break bên dưới hero. Mỗi ảnh có viền trắng hoặc parchment mỏng 2-4px (kiểu polaroid), xoay ngẫu nhiên nhẹ (-3° đến +3°), không border-radius. Chủ thể là candid, full-sun, unposed — tia lửa hàn, người chăn nuôi đội mũ cao bồi, tài xế xe tải, thợ máy. Nhiếp ảnh là neo cảm xúc của thương hiệu.

### Footer Link
**Vai trò:** Link có gạch chân trong khu vực footer.

Lateral 13px, color #50463c, 1px underline màu #efe9e0, 15px row gap giữa các link. Gạch chân tinh tế — đường màu bone ấm, không phải ink — giữ cho footer mềm mại và dễ quét.

## Do's and Don'ts

### Nên
- Dùng #fcfaf1 parchment làm page canvas cho mọi section — không bao giờ chuyển sang #ffffff thuần cho toàn bộ trang.
- Đặt primary action buttons thành #e8b672 honey amber với text #211b15 và 3.75px radius.
- Mở mỗi section bằng uppercase eyebrow label ở 13px Lateral với 0.058em letter-spacing trước heading.
- Dùng Lateral Display ở weight 500 (không phải 700) cho headlines ở 38px, 53px, và 68px.
- Render industry illustrations dưới dạng monochrome line art với stroke #211b15 — không fills, không màu.
- Áp dụng border-radius 3.75px cho buttons, inputs, và small surfaces; 7.5px cho cards và panels lớn hơn.

### Không nên
- Không dùng #ffffff thuần làm page background — parchment #fcfaf1 là canvas signature.
- Không đặt headlines ở weight 700 — uy quyền của hệ thống đến từ 500 và sự kiềm chế.
- Không đưa vào xanh dương, đỏ, hoặc các primary colors bão hòa khác — điểm nhấn màu duy nhất là honey amber #e8b672.
- Không dùng pill-shaped (9999px) buttons — hệ thống được định nghĩa bởi bo tròn 3.75px tinh tế.
- Không tô màu illustrations — chúng phải giữ nguyên monochrome line art màu #211b15.
- Không dùng stock-polished hoặc studio photography — chỉ chụp documentary, full-sun, candid subjects.
- Không thêm drop shadows vào cards hoặc panels — hệ thống dựa vào border color và surface warmth để phân tách.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Parchment Canvas | `#fcfaf1` | Base page background — off-white ấm làm surface mặc định. |
| 1 | Pure White Panel | `#ffffff` | Elevated cards và product-mockup containers cần nâng lên trên canvas. |
| 2 | Bone Footer | `#efe9e0` | Section dividers và footer band — ấm hơn canvas một bậc để báo hiệu ranh giới section. |
| 3 | Charcoal Olive Panel | `#252a23` | Inverted product UI panels đảo ngược trang ấm thành bề mặt làm việc tối, tập trung. |

## Elevation

Hệ thống cố tình tránh drop shadows. Hệ thống phân cấp thị giác được xây dựng qua độ tương phản surface ấm (parchment → bone → white → charcoal olive) và hairline borders màu #efe9e0 và #211b15. Elevation được truyền đạt qua sự dịch chuyển nhiệt độ màu sắc, không qua độ sâu shadow — thẩm mỹ phẳng, in trên giấy phù hợp với giọng thương hiệu nông nghiệp.

## Imagery

Nhiếp ảnh mang phong cách documentary và full-sun: thợ hàn thực tế với tia lửa bay, người chăn nuôi đội mũ cao bồi, tài xế xe tải, nông dân, thợ máy — candid, unposed, ấm áp giờ vàng. Ảnh được sắp xếp thành các dải collage chồng lên nhau với xoay nhẹ, tạo cảm giác polaroid-scrapbook. Industry illustrations là hand-drawn monochrome line art — máy kéo, gia súc, cần cẩu, xe tải, chìa khóa, báo — hiển thị với stroke #211b15 mỏng, không fills. Không 3D renders, không abstract gradient art, không stock-polished lifestyle photography. Ngôn ngữ thị giác bắt nguồn từ công việc thực tế của nước Mỹ, không phải vẻ bóng bẩy khát vọng.

## Layout

Canh giữa, layout contained max-width 1200px với khoảng trống dọc rộng rãi. Trang mở đầu bằng full-bleed parchment canvas — một headline stack canh giữa (eyebrow → display headline → subtext → email input → trust signals) không có side navigation. Bên dưới hero, một documentary photo collage phá vỡ grid với các ảnh chồng lên nhau, xoay nhẹ. Các section xen kẽ giữa text-only blocks canh giữa và industry cards 3 cột được phân cách bằng hairline dividers. Một dark inverted product showcase panel ngắt nhịp kem ấm để giới thiệu actual product UI. Navigation là top bar tối giản với wordmark bên trái, links giữa, và Log In / Sign Up bên phải. Nhịp điệu tổng thể là: text canh giữa lặng lẽ → collage ấm → text canh giữa → grid cards → text canh giữa → dark product panel — một nhịp editorial có nhịp độ thay vì dense feature grid.

## Agent Prompt Guide

**Quick Color Reference**
- text: #211b15
- background: #fcfaf1
- border: #efe9e0 (nhạt) / #211b15 (đậm)
- accent: #e8b672 (honey amber)
- brand green: #434f40
- primary action: #e8b672 (filled action)

**Example Component Prompts**

1. **Hero section**: Background Parchment #fcfaf1. Eyebrow label "ACCOUNTING SOFTWARE" bằng Lateral 13px weight 400, uppercase, letter-spacing 0.058em, color #211b15. Headline "Financial tools worthy of your work." bằng Lateral Display 68px weight 500, line-height 1.0, letter-spacing -0.75px, color #211b15, canh giữa. Subtext bằng Lateral 17px weight 400, color #50463c. Email input với 1px border #211b15, 3.75px radius, Lateral 15px placeholder #96897b. Embedded amber submit button #e8b672 với text #211b15, 3.75px radius, mũi tên → sau label.

2. **Industry category card**: Divider 1px #efe9e0 ở mọi cạnh, padding 45px 30px, không card background. Monochrome line-art illustration của máy kéo với stroke #211b15 ở 1.5px, canh giữa, cao ~120px. Bên dưới: tên ngành "Farming" bằng Lateral 15px weight 500 #211b15, theo sau bởi ký tự mũi tên →.

3. **Dark product showcase panel**: Background #252a23, border-radius 7.5px, padding 45px. Cột trái: heading "Bookkeeping that makes sense." bằng Lateral Display 38px weight 500, color #fcfaf1, letter-spacing -0.42px. Cột phải: product screenshot (Ledger table) trên surface #ffffff, hơi chồng lên cạnh phải của dark panel.

4. Tạo Primary Action Button: background #e8b672, text #211b15, 9999px radius, compact pill padding. Dùng filled treatment này cho main CTA.

5. **Documentary photo collage**: Năm bức ảnh chồng lên nhau ở page break bên dưới hero. Mỗi ảnh có viền 3px #fcfaf1, xoay nhẹ (-3° đến +3°), không border-radius. Chủ thể: thợ hàn, nông dân, người chăn nuôi, tài xế xe tải, thợ máy — candid, full-sun, documentary style.

## Similar Brands

- **Farmers Business Network** — Cùng đối tượng nông nghiệp và earthy palette ấm, dù Ambrook nghiêng về editorial hơn và ít data-dense hơn.
- **Indigo Agriculture** — Chung cách tiếp cận documentary-photography và giọng thương hiệu ấm, gốc rễ nhắm đến growers Mỹ.
- **Patagonia** — Cùng documentary portraiture của người lao động thực tế, unposed và full-sun, kết hợp với restrained editorial typography.
- **Mailchimp** — Cùng cream canvas ấm, illustrative line-art category icons, và editorial headline restraint (weight 500, không phải 700).
- **Square (Block)** — Vị trí accounting-fintech tương tự với palette ấm, dễ tiếp cận thay vì blue corporate register điển hình.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-parchment: #fcfaf1;
  --color-bone: #efe9e0;
  --color-pure-white: #ffffff;
  --color-loam: #c7bcaf;
  --color-bark: #96897b;
  --color-saddle: #50463c;
  --color-ink: #211b15;
  --color-charcoal-olive: #252a23;
  --color-deep-olive: #434f40;
  --color-sage: #7a9779;
  --color-honey-amber: #e8b672;
  --color-wheat: #f0c891;

  /* Typography — Font Families */
  --font-lateral: 'Lateral', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-lateral-narrow: 'Lateral Narrow', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-lateral-display: 'Lateral Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 11px;
  --leading-caption: 1.5;
  --tracking-caption: 0.107px;
  --text-eyebrow: 13px;
  --leading-eyebrow: 1.6;
  --tracking-eyebrow: 0.058px;
  --text-body: 15px;
  --leading-body: 1.71;
  --text-body-lg: 17px;
  --leading-body-lg: 1.6;
  --text-subheading: 19px;
  --leading-subheading: 1.43;
  --tracking-subheading: -0.21px;
  --text-heading-sm: 30px;
  --leading-heading-sm: 1.33;
  --tracking-heading-sm: -0.33px;
  --text-heading: 38px;
  --leading-heading: 1.14;
  --tracking-heading: -0.42px;
  --text-heading-lg: 53px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -0.58px;
  --text-display: 68px;
  --leading-display: 1;
  --tracking-display: -0.75px;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-40: 40px;
  --spacing-60: 60px;
  --spacing-68: 68px;
  --spacing-120: 120px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 60-90px;
  --card-padding: 30-45px;
  --element-gap: 8-15px;

  /* Border Radius */
  --radius-md: 3.75px;
  --radius-lg: 7.5px;
  --radius-xl: 11.25px;

  /* Named Radii */
  --radius-cards: 7.5px;
  --radius-pills: 9999px;
  --radius-inputs: 3.75px;
  --radius-buttons: 3.75px;

  /* Surfaces */
  --surface-parchment-canvas: #fcfaf1;
  --surface-pure-white-panel: #ffffff;
  --surface-bone-footer: #efe9e0;
  --surface-charcoal-olive-panel: #252a23;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-parchment: #fcfaf1;
  --color-bone: #efe9e0;
  --color-pure-white: #ffffff;
  --color-loam: #c7bcaf;
  --color-bark: #96897b;
  --color-saddle: #50463c;
  --color-ink: #211b15;
  --color-charcoal-olive: #252a23;
  --color-deep-olive: #434f40;
  --color-sage: #7a9779;
  --color-honey-amber: #e8b672;
  --color-wheat: #f0c891;

  /* Typography */
  --font-lateral: 'Lateral', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-lateral-narrow: 'Lateral Narrow', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-lateral-display: 'Lateral Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 11px;
  --leading-caption: 1.5;
  --tracking-caption: 0.107px;
  --text-eyebrow: 13px;
  --leading-eyebrow: 1.6;
  --tracking-eyebrow: 0.058px;
  --text-body: 15px;
  --leading-body: 1.71;
  --text-body-lg: 17px;
  --leading-body-lg: 1.6;
  --text-subheading: 19px;
  --leading-subheading: 1.43;
  --tracking-subheading: -0.21px;
  --text-heading-sm: 30px;
  --leading-heading-sm: 1.33;
  --tracking-heading-sm: -0.33px;
  --text-heading: 38px;
  --leading-heading: 1.14;
  --tracking-heading: -0.42px;
  --text-heading-lg: 53px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -0.58px;
  --text-display: 68px;
  --leading-display: 1;
  --tracking-display: -0.75px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-40: 40px;
  --spacing-60: 60px;
  --spacing-68: 68px;
  --spacing-120: 120px;

  /* Border Radius */
  --radius-md: 3.75px;
  --radius-lg: 7.5px;
  --radius-xl: 11.25px;
}
```