Menu
QR Code!
Thông số thiết kế The Washington Post
Những thông số cơ bản theo quy định.
Base size
| Tên | Giá trị | Miêu tả |
|---|---|---|
| kích thước cơ sở | 16px | Giá trị gốc xác định các mã thông báo như khoảng cách, kích thước, bán kính và cỡ chữ |
Size
Mã thông báo kích thước có liên quan đến baseSize . Sử dụng mã thông báo kích thước để chỉ định chiều rộng hoặc chiều cao cố định khi thiết kế thành phần hoặc bố cục.
Khi sử dụng mã thông báo kích thước trong mã, bạn có thể truy cập chúng bằng cách sử dụng theme.sizes[tokenName]
| Tên | Giá trị | tính toán | Sự miêu tả |
|---|---|---|---|
| 025 | 0,25rem | 4px | kích thước nhỏ nhất |
| 050 | 0,5rem | 8px | 50% giá trị cơ bản |
| 075 | 0,75rem | 12px | 75% giá trị cơ sở |
| 087 | 0,875rem | 14px | 87,5% giá trị cơ bản |
| 100 | 1rem | 16px | 100% giá trị cơ bản |
| 125 | 1,25rem | 20px | 125% giá trị cơ bản |
| 150 | 1.5rem | 24px | 150% giá trị cơ bản |
| 175 | 1,75rem | 28px | 175% giá trị cơ bản |
| 200 | 2rem | 32px | 200% giá trị cơ bản |
| 225 | 2,25rem | 36px | 225% giá trị cơ bản |
| 250 | 2.5rem | 40px | 250% giá trị cơ bản |
| 275 | 2,75rem | 44px | 275% giá trị cơ bản |
| 300 | 3rem | 48px | 300% giá trị cơ bản |
| 350 | 3.5rem | 56px | 350% giá trị cơ bản |
| 400 | 4rem | 64px | 400% giá trị cơ bản |
| 450 | 4.5rem | 72px | 450% giá trị cơ bản |
| 500 | 5rem | 80px | 500% giá trị cơ bản |
Space (Khoảng cách)
Space có liên quan đến baseSize. Sử dụng dấu cách để xác định phần đệm hoặc lề khi thiết kế một thành phần hoặc bố cục. Khi sử dụng mã thông báo space trong mã, bạn có thể truy cập chúng bằng cách sử dụng theme.space.[tokenName]
| Name | Value | Calculated | Description |
|---|---|---|---|
| 025 | 0.25rem | 4px | — |
| 050 | 0.5rem | 8px | — |
| 075 | 0.75rem | 12px | — |
| 100 | 1rem | 16px | — |
| 125 | 1.25rem | 20px | — |
| 150 | 1.5rem | 24px | — |
| 175 | 1.75rem | 28px | — |
| 200 | 2rem | 32px | — |
| 225 | 2.25rem | 36px | — |
| 250 | 2.5rem | 40px | — |
| 275 | 2.75rem | 44px | — |
| 300 | 3rem | 48px | — |
| 350 | 3.5rem | 56px | — |
| 400 | 4rem | 64px | — |
| 450 | 4.5rem | 72px | — |
| 500 | 5rem | 80px | — |
Màu
Giá trị mã thông báo màu được xác định theo ngữ cảnh của chúng. Có hai bối cảnh “ánh sáng” và bối cảnh “tối”.
- Chủ đề và mã thông báo ngữ nghĩa
- Mã thông báo màu
- Mã thông báo màu tĩnh
Typography (Kiểu chữ)
Font
| Tên | Giá trị | Miêu tả |
|---|---|---|
| body | georgia, Times New Roman, serif | — |
| headline | Postoni, garamond, serif | — |
| magazine | PostoniDisplayMag, garamond, serif | — |
| meta | Franklin, arial, sans-serif | — |
| subhead | Franklin, arial, sans-serif | — |
Font size
| Name | Giá trị | Px | Description |
|---|---|---|---|
| 075 | 0.75rem | 12px | — |
| 087 | 0.875rem | 14px | — |
| 100 | 1rem | 16px | — |
| 112 | 1.125rem | 18px | — |
| 125 | 1.25rem | 20px | — |
| 150 | 1.5rem | 24px | — |
| 175 | 1.75rem | 28px | — |
| 200 | 2rem | 32px | — |
| 225 | 2.25rem | 36px | — |
| 250 | 2.5rem | 40px | — |
| 275 | 2.75rem | 44px | — |
| 300 | 3rem | 48px | — |
| 350 | 3.5rem | 56px | — |
| 400 | 4rem | 64px | — |
| 450 | 4.5rem | 72px | — |
| 500 | 5rem | 80px | — |
Font weight
| Name | Value | Description |
|---|---|---|
| bold | 700 | — |
| light | 300 | — |
| regular | 400 | — |
| ultra | 800 | — |
Line height
| Name | Value | Description |
|---|---|---|
| 100 | 1 | — |
| 110 | 1.1 | — |
| 125 | 1.25 | — |
| 150 | 1.5 | — |
| 160 | 1.6 | — |
| 175 | 1.75 | — |
| 200 | 2 | — |
| 240 | 2.4 | — |
Radius
| Name | Value | Calculated | Description |
|---|---|---|---|
| 012 | 0.125rem | 2px | — |
| 025 | 0.25rem | 4px | — |
| 050 | 0.5rem | 8px | — |
| 075 | 0.75rem | 12px | — |
| 100 | 1rem | 16px | — |
| 125 | 1.25rem | 20px | — |
| 150 | 1.5rem | 24px | — |
| round | 9999px | NaNpx | — |
Shadow
| Name | Value | Description |
|---|---|---|
| 100 | 0px 1px 2px 0px rgba(102, 102, 102, 0.25) | Shadow 2 – Extra small base shadow |
| 200 | 0px 2px 4px 0px rgba(102, 102, 102, 0.25) | Shadows 3 – Small |
| 300 | 0px 4px 8px 0px rgba(102, 102, 102, 0.25) | Shadows 4 – Medium |
| 400 | 0px 8px 16px 0px rgba(102, 102, 102, 0.25) | Shadows 5 – Large |
| 50 | 0px 2px 0px 0px #D5D5D5 | Shadow 1 – Card shadow |
| 500 | 0px 16px 32px 0px rgba(102, 102, 102, 0.25) | Shadows 6 – Extra large |
Z-index
| Tên | Giá trị | Miêu tả |
|---|---|---|
| ads | 200 | Lớp này được dành riêng cho quảng cáo không có trên trang |
| offer | 400 | Lớp này chỉ dành riêng cho các ưu đãi như paywalls, overlays, v.v. |
| page | 100 | Bất kỳ nội dung nào trên trang chính đó |
| shell | 300 | Lớp này được dành riêng cho các mục trình bao như điều hướng chính cố định |
Breakpoints
WPDS có 5 điểm dừng với các giá trị sau:
- sm : 768px
- md : 900px
- lg : 1024px
- xl : 1280px
- xxl : 1440px
Quy tắc phương tiện
| Tên | Giá trị | Sự miêu tả |
|---|---|---|
| sm | (chiều rộng tối đa: 767px) | Chỉ nhắm mục tiêu điểm dừng nhỏ |
| md | (chiều rộng tối thiểu: 768px) và (chiều rộng tối đa: 899px) | Chỉ nhắm mục tiêu điểm dừng trung bình |
| lg | (chiều rộng tối thiểu: 900px) và (chiều rộng tối đa: 1023px) | Chỉ nhắm mục tiêu điểm dừng lớn |
| xl | (chiều rộng tối thiểu: 1024px) và (chiều rộng tối đa: 1279px) | Chỉ nhắm mục tiêu điểm ngắt cực lớn |
| xxl | (chiều rộng tối thiểu: 1280px) và (chiều rộng tối đa: 1440px) | Chỉ nhắm mục tiêu điểm ngắt cực lớn |
| minSm, notSm | (chiều rộng tối thiểu: 768px) | Điểm dừng kiểu “di động đầu tiên” nhắm mục tiêu điểm ngắt nhỏ trở lên |
| minMd, notMd | (chiều rộng tối thiểu: 900px) | Điểm dừng kiểu “di động đầu tiên” nhắm mục tiêu điểm dừng trung bình trở lên |
| minLg, notLg | (chiều rộng tối thiểu: 1024px) | Điểm dừng kiểu “di động đầu tiên” nhắm mục tiêu điểm ngắt lớn trở lên |
| minXl, notXl | (chiều rộng tối thiểu: 1280px) | Điểm ngắt kiểu “di động đầu tiên” nhắm mục tiêu điểm ngắt cực lớn trở lên |
| minXxl, notXxl | (chiều rộng tối thiểu: 1441px) | Điểm dừng kiểu “di động đầu tiên” nhắm mục tiêu điểm ngắt cực lớn trở lên |
| maxSm | (chiều rộng tối đa: 767px) | Điểm dừng kiểu “máy tính để bàn đầu tiên” nhắm mục tiêu điểm ngắt nhỏ trở xuống |
| maxMd | (chiều rộng tối đa: 900px) | Điểm dừng kiểu “máy tính để bàn đầu tiên” nhắm mục tiêu điểm ngắt trung bình trở xuống |
| maxLg | (chiều rộng tối đa: 1024px) | Điểm dừng kiểu “máy tính để bàn đầu tiên” nhắm mục tiêu điểm dừng lớn trở xuống |
| maxXl | (chiều rộng tối đa: 1280px) | Điểm dừng kiểu “máy tính để bàn đầu tiên” nhắm mục tiêu điểm ngắt cực lớn trở xuống |
| maxXxl | (chiều rộng tối đa: 1441px) | Điểm dừng kiểu “máy tính để bàn đầu tiên” nhắm mục tiêu điểm ngắt cực lớn trở xuống |