Layout
Mobile first, isang column, nakasentro ang nilalaman habang lumalawak ang gutter. Tatlong fixed na column ang sumasaklaw sa phone, tablet at desktop. Ang spacing ramp sa ibaba ay binabasa mula sa stylesheet.
Mga column
Ang pahina ay isang nakasentrong column na may fixed na maximum na lapad kada band. Sa ilalim ng lapad na iyon, ang gutter lamang ang lumalawak, kaya nananatiling komportable ang sukat ng pagbabasa sa halip na umunat mula gilid hanggang gilid sa isang malapad na screen. Ang mga artikulo ay mas makitid pa, hanggang sa isang 720-pixel na reading column; ang mga full-bleed na block lamang tulad ng code ang lumalabas dito.
| Band | Column | Gutter | Top bar |
|---|---|---|---|
| Mobile | 430px | 20px | 56px |
| Tablet | 960px | 24px | 60px |
| Desktop | 1100px | 24px | 64px |
Mga breakpoint
Tatlong band, sinabi kung ano talaga sila. Ang tablet band ay umaabot hanggang 1279 pixel, kaya ang isang 1024-pixel na window ay nakakakuha ng tablet sizing, hindi desktop. Ang tab dock ay isang affordance sa phone at tablet; ang desktop nav ang pumapalit sa 1280.
| Mobile | ≤ 699px |
| Tablet | 700–1279px |
| Desktop | ≥ 1280px |
Spacing
Ang espasyo ay binuo sa isang four-pixel na base. Ang mga token sa ibaba ang nagtatakda ng ritmo sa pagitan ng mga section at heading; dahil isang-panig ang section padding, ang dalawang magkatabing section ay nasa doble ng token ang layo.
| Token | Desktop | Tablet | Mobile | Itinatakda |
|---|---|---|---|---|
--sp-section | 28px | 22px | 22px | Padding sa isang section (ang dalawa ay nagsasalansan sa doble nito). |
--sp-band | 56px | 32px | 24px | Padding sa loob ng isang tinted band. |
--sp-heading | 24px | 18px | 14px | Puwang mula sa isang section heading hanggang sa nilalaman nito. |
Ang ritmo, may anotasyon
Ang mga may-guhit na banda ay ang mismong sinusukat na espasyo, hindi drawing nito: ang taas ng mga ito ay galing sa live na tokens, kaya bumababa ito bawat banda nang eksaktong tulad ng site. Ang mga label ay binabasa nang desktop / tablet / mobile.
Nagkakaantas-antas ang ritmo: section, tapos card, tapos group, tapos element, bawat isa ay may mas kaunting hangin kaysa sa nakapaligid dito.
Mga touch target
Ang mga pangunahing touch control ay may 44-pixel na floor: ang mga tab ng dock, ang mga control ng reading bar, ang mga icon ng footer sa phone. Ang glyph sa loob ay nananatiling 15 hanggang 20 pixels; ang padding ang bahala sa iba. Ang mga compact na pointer-first na control (ang mga arrow ng shelf at series, ang search ng top bar) ay nasa 38 hanggang 42 pixels na may maluwag na espasyo sa paligid.
Logo sa isang bilog
Ang mark ay nasa isang bilog na frame, pinupuno ang halos dalawang-katlo nito na may hairline na ring sa paligid ng gilid. Lumilitaw ito sa 48 pixel katabi ng isang role, 96 sa isang card, at 120 bilang isang timeline anchor.