Kulay

Isang brand green ang gumagawa ng lahat ng accent work. Ang iba pa ay isang neutral scale na naglilipat sa pagitan ng light at dark. Ang mga value sa ibaba ay binabasa mula sa stylesheet sa build time.

Brand green

Ang berde ang tanging accent. Pinupuno nito ang mga primary button, minamarkahan ang aktibong tab, ginuguhit ang bar sa ilalim ng title ng pahina at pumapalibot bilang ring sa isang focused na control. Dahil iyon lang ang ibig sabihin nito, natututunan ng mambabasa na basahin ang berde bilang “may ginagawa ito”.

  • --color-green Light Dark Ang tanging accent: mga primary button, aktibong tab, ang title bar, mga focus ring.
  • --color-green-dark Light Dark Hover at pressed na berde sa mga solid button.
  • --color-green-light Light Dark Isang mas magaan na tint, ginagamit nang matipid.
  • --color-green-text Light Dark Berde para sa text at mga link: nababasa sa light, brand lime sa dark.
  • --color-green-text-hover Light Dark Hover na berde para sa text at mga link.
  • --color-white Light Dark Purong puti, kadalasan para sa text sa solid na berde.

Maliwanag ang lime green, at sa laki ng body-text sa puting background ay hindi nito naaabot ang contrast bar. Kaya may hiwalay na text green: sa light mode ay ibinababa ang berde para sa text at mga link, habang sa dark mode ay pinananatili ang brand lime. Ang dahilan kung bakit ito umiiral ay nakalahad sa accessibility page. Accessibility.

Mga neutral at surface

Ang mga neutral token ay may dalawang value, isa kada theme, kaya ang isang surface ay dinidisenyo sa dalawa mula sa simula. Ang text ay nasa tatlong weight ng diin; ang mga background ay humahakbang mula sa pahina, papunta sa mga tinted band, hanggang sa mga raised card.

  • --bg-primary Light Dark Ang background ng pahina.
  • --bg-secondary Light Dark Mga tinted band, specimen stage, code header.
  • --bg-card Light Dark Mga card at sheet surface.
  • --bg-nav Light Dark Ang na-blur na nav backdrop.
  • --text-primary Light Dark Mga heading at high-emphasis na text.
  • --text-secondary Light Dark Body copy.
  • --text-muted Light Dark Meta, mga caption, disabled na label.
  • --border-color Light Dark Mga hairline at card border.
  • --badge-bg Light Dark Fill ng badge, tag at table-header.
  • --badge-text Light Dark Text ng badge at tag.
  • --code-bg Light Dark Background ng inline at block code.
  • --timeline-line Light Dark Ang timeline rail ng karanasan sa trabaho.
  • --device-edge Light Dark Ang panlabas na ring sa phone frame.
  • --device-button Light Dark Ang mga side button ng phone frame.

Ang mga elevation token (ang mga naka-theme na shadow) ay nakadokumento sa Hugis at elevation page.

Interaksyon

Ang mga link at solid button ay dumadaan sa mga berde kapag naka-hover. Pareho ang mga state kahit saan, kaya laging sinasabi ng isang control kung ano ang gagawin nito.

State Mga link Mga solid button
Default --color-green-text --color-green
Hover --color-green-text-hover --color-green-dark
Disabled Nabawasang opacity; hindi nagbabago ang kulay.

Mga callout

Ang mga long-form na artikulo ay gumagamit ng apat na kulay ng callout upang tukuyin ang isang bitag, isang aside, isang pag-iingat o isang neutral na tala. Ito ang tanging lugar kung saan may kahulugan ang isang kulay maliban sa berde.

Callout Border Kailan ito gagamitin
Red flag Isang pagkakamali o bitag na dapat paghintuan ng mambabasa.
Tip Isang nakakatulong na aside na hindi essential.
Babala Isang bagay na dapat gawin nang may pag-iingat.
Info Neutral na konteksto o isang pointer sa ibang lugar.

Saklaw: ang mga kulay ng callout ay nabubuhay lamang sa prosa ng artikulo. Hindi kailanman lumilitaw ang mga ito sa interface chrome, kung saan ang berde at ang mga neutral ang gumagawa ng lahat ng trabaho.

Ang mga dokumentong ito ay gumagawa ng isang sinadyang eksepsiyon sa rule na iyon. Ang mga Gawin at Huwag na card sa ibaba ay gumagamit ng berde at pula, dahil ang isang sistema ng disenyo na nagdodokumento sa sarili nito ang tanging lugar kung saan nararapat ang mga signal na iyon sa labas ng prosa.

Kulay ng illustration

Ang interface ay nakatayo sa iisang berde, pero ang mga hero illustration ng blog ay may sariling palette. Pareho ang paraan sa maliit na sukat: isang fixed pool na sampu, laging kasama ang brand lime, at isang malambot na background bawat serye. Ang paraan ng pagguhit ng mga hero ay nasa Media page.

Ang shared palette

Ang sampu, binabasa mula sa mga totoong post sa build time. Ilan lang dito ang ginagamit ng bawat illustration: doon nanggagaling ang pagkakaiba-iba ng mga hero; ang pool mismo ay hindi nagbabago.

  • Lime
  • Navy
  • Coral
  • Teal
  • Plum
  • Amber
  • Blush
  • Sky
  • Charcoal
  • Sand

Isang background bawat serye

Ang mga background ay sadyang nasa labas ng palette: malalambot na tint na halos puti, na mababasa bilang background at hindi bilang isa sa sampu. Bawat na-publish na serye ay may sariling tint, kaya ang isang serye ay mababasa bilang isang set sa feed: ang identity nito ay nasa background na iyon. Sa ibaba, ang buong pool ay nakapatong sa bawat background: nagbabago ang timpla bawat imahe, hindi kailanman ang pamilya.

  • State Management
  • RN Module Federation
  • RN Foundations
  • Hiring

Paggamit ng kulay

Gawin

Body copy stays neutral.
Hayaang mangahulugan ang berde ng isang bagay: interaksyon o diin. Kung ito ay berde, dapat itong ma-tap o sulit pansinin.

Huwag

Magpasok ng pangalawang accent. Ninanakaw ng bagong kulay ang kahulugang dala ng berde.

Gawin

A readable green link
Gamitin ang text green para sa berdeng text at mga link, upang manatili itong nababasa sa light na background.

Huwag

Small lime text on white fails the bar
Ipinta ang brand lime sa maliit na text sa puti. Bumabagsak ito sa contrast bar; para diyan ang text green.

Gawin

Idisenyo ang bawat surface sa dalawang theme nang sabay. Ginagawa ng mga token pair na default iyon, hindi isang afterthought.

Huwag

Gumamit ng kulay ng callout sa interface. Nabibilang ang mga iyon sa prosa ng artikulo.