Design system · buhay

Gabay sa tatak

Lahat dito ay iginuhit mula sa parehong tokens ng site at sa parehong mga file na inyong dina-download. Baguhin ang halaga sa pinagmulan at magbabago rin ang pahinang ito — walang lumang bersyon. Pindutin ang anumang halaga para kopyahin.

Ang simbolo

File na maida-download
PadsAmbiente
Iginuhit ng site

Ang grid mismo ang simbolo. Hindi ito palamuti: mga pad ito na bumubuo ng krus, at ito rin ang grid ng 24 na tono na humuhubog sa produkto at sa layout ng site na ito.

  • GawinGamitin ang simbolo nang mag-isa kapag sinasabi na ng konteksto ang pangalan.
  • GawinKulayan ito ng asul o puti sa madilim na background.
  • GawinGamitin ang bersyon para sa maliwanag na background kapag maliwanag ang background — para riyan ito ginawa.
  • Huwag kailanmanBaguhin ang radius ng sulok ng mga kahon — halos parisukat ang mga ito.
  • Huwag kailanmanIpilit ang dalawang salita ng wordmark sa isang linya.
  • Huwag kailanmanPalapurin ang mga naka-outline na kahon para makita sa maliit na sukat — gamitin ang maliit na file, na may dalang krus lamang.
  • Huwag kailanmanKulayan sa labas ng paleta ng pahinang ito.

I-download

Ginawa ng script mula sa vector at sa tokens. Walang bersyong vector ng simbolo sa app — ito lang ang umiiral, kaya rito nagmumula ang lahat.

Buong kitLahat ng file sa ibaba, kasama ang mga tuntunin sa paggamit bilang payak na teksto.832 KB

Simbolo

Pahalang na lockup

Patayong lockup

Mga icon sa store

Paggamit

Espasyong malayaIsang hakbang ng mismong grid sa bawat gilid. Humihinga ang simbolo sa sarili nitong sukat, hindi sa isang basta-bastang numero.25.4%
100px +< 100px
Pinakamaliit na sukatSa ibaba ng 100px, ang linya ng mga naka-outline na kahon ay nagiging mas manipis pa sa isang pixel at nagiging kulay-abong labo. Sa ganoong sukat, ang file ay may dalang krus na lamang — huwag palapurin ang linya bilang pantapal.

Ang hindi dapat gawin

  • Huwag kailanmanBatakin o ipitin
  • Huwag kailanmanIikot
  • Huwag kailanmanKulayan sa labas ng paleta
  • Huwag kailanmanSa background na walang kontrast

Mga kulay

Direktang binabasa mula sa pinagmulan ng design system habang nagbi-build — hindi maaaring lumihis ang listahang ito sa site.

Background

Teksto

Asul — ang kulay ng tatak

Tono — minana mula sa app

Katayuan

Tipograpiya

Fraunces

Display. Hero, pamagat, at sipi — ang mga sandaling pantao.

Archivo

Teksto at interface. Katawan, nabigasyon, button.

IBM Plex Mono

Teknikal. Mga label, datos, talahanayan ng tono.

Poppins

Wordmark. Para sa tatak lamang — ito ang tipo ng app.

Sukatan

Umaagos sa pamamagitan ng clamp() — walang breakpoint sa laki ng teksto.

  • Aa--step-6Hero ng home
  • Aa--step-5Pamagat ng pahina
  • Aa--step-4Pamagat ng seksyon
  • Aa--step-3Subtitulo
  • Aa--step-2Pangalan ng card
  • Aa--step-1Panimulang teksto
  • Aa--step-0Katawan
  • Aa--step--1Pantulong

Radius, elevation, at galaw

Ang natitirang bahagi ng design system, mula sa parehong pinagmulan.

Radius

Elevation

Galaw

  • --dur-fast
  • --dur-base
  • --dur-slow
  • --ease-out

Lagda sa email

Pindutin ang “Kopyahin ang lagda” at i-paste nang diretso sa signature field ng Gmail, Outlook, o Proton — naka-format itong nadidikit, hindi bilang code.

Pads Ambiente 
Pangalan ninyo
Tungkulin · Pads Ambiente
Crescimento do Reino Software e Tecnologia LTDA · CNPJ 65.301.296/0001-26

Trademark

Ang “Pads Ambiente” at ang simbolong grid ay mga trademark ng Crescimento do Reino Software e Tecnologia LTDA. Ibinibigay ang mga file sa pahinang ito para mapadali ang tamang paggamit ng tatak — hindi nito inililipat ang pagmamay-ari nito.

  • GawinGamitin ang tatak para tukuyin ang produkto — sa artikulo, tutorial, review, klase, o integrasyon.
  • GawinGamitin ang mga file sa pahinang ito nang buo, walang binabago.
  • Huwag kailanmanMagpahiwatig ng partnership, sponsorship, o pag-endorso na wala naman.
  • Huwag kailanmanIsama ang tatak sa logo, pangalan, o pagkakakilanlan ng ibang produkto.
  • Huwag kailanmanGamitin ang tatak sa isang domain, app, o pangalan ng kompanya.
  • Huwag kailanmanBaguhin ang guhit, proporsyon, o kulay ng mga file.

Para sa anumang paggamit na lampas dito, o kung nagdududa, sumulat sa contato@padsambiente.com.br