Design system · live

Brand Guide

Everything here is rendered from the same tokens as the site and the same files you download. Change a value at the source and this page changes with it — there is no stale version. Click any value to copy it.

The mark

Downloadable file

PadsAmbiente

Rendered by the site

The grid is the mark. It is not ornament: these are pads forming a cross, and it is the same 24-key grid that structures the product and the layout of this site.

DoUse the symbol on its own when the context already says the name.
DoPaint it blue or white on a dark background.
DoUse the light-background version when the background is light — that is what it is for.
NeverChange the corner radius of the slots — they are almost square.
NeverPut the two words of the wordmark on a single line.
NeverThicken the outlined slots so they show up at small sizes — use the small file, which already carries the cross alone.
NeverRecolor outside the palette on this page.

Download

Generated by script from the vector and the tokens. The app has no vector of the mark — this is the only one that exists, so every piece comes from here.

Full kitEvery file below, plus the usage rules in plain text.832 KB

Symbol

Horizontal lockup

Colorvector SVG1200px PNG2400px PNG
Light backgroundvector SVG1200px PNG2400px PNG
Whitevector SVG1200px PNG2400px PNG
Blackvector SVG1200px PNG2400px PNG

Stacked lockup

Colorvector SVG1200px PNG2400px PNG
Light backgroundvector SVG1200px PNG2400px PNG
Whitevector SVG1200px PNG2400px PNG
Blackvector SVG1200px PNG2400px PNG

Store icons

ios 102420 KB PNG
maskable 1922 KB PNG
maskable 5128 KB PNG
play 51213 KB PNG

Usage

Clear spaceOne step of the grid itself on every side. The mark breathes in its own measure, not in an arbitrary number.25.4%

100px +< 100px

Minimum sizeBelow 100px the stroke on the outlined slots falls below one pixel and turns to grey mush. At those sizes the file already carries the cross alone — do not thicken the stroke to compensate.

What not to do

NeverStretch or squash
NeverRotate
NeverRecolor outside the palette
NeverOn a background without contrast

Colors

Read straight from the design system source at build time — this list cannot drift from the site.

Background

Text

Blue — the brand color

Tonality — inherited from the app

State

Typography

Fraunces

Display. Hero, headings and quotes — the human moments.

Archivo

Text and interface. Body, navigation, buttons.

IBM Plex Mono

Technical. Labels, data, key tables.

Poppins

Wordmark. Brand only — it is the app’s typeface.

Scale

Fluid with clamp() — there is no font-size breakpoint.

Aa--step-6Home hero
Aa--step-5Page title
Aa--step-4Section title
Aa--step-3Subheading
Aa--step-2Card name
Aa--step-1Lead text
Aa--step-0Body
Aa--step--1Support

Radius, elevation and motion

The rest of the design system, from the same source.

Radius

Elevation

Motion

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

Email signature

Click “Copy signature” and paste it straight into Gmail, Outlook or Proton’s signature field — it pastes formatted, not as code.

		Your Name Role · Pads Ambiente contato@padsambiente.com.br padsambiente.com
Crescimento do Reino Software e Tecnologia LTDA · CNPJ 65.301.296/0001-26

Trademark

“Pads Ambiente” and the grid symbol are trademarks of Crescimento do Reino Software e Tecnologia LTDA. The files on this page are provided to make correct use of the brand easier — they do not transfer ownership of it.

DoUse the brand to refer to the product — in an article, tutorial, review, class or integration.
DoUse the files on this page as they are, unaltered.
NeverImply a partnership, sponsorship or endorsement that does not exist.
NeverIncorporate the brand into the logo, name or identity of another product.
NeverUse the brand in a domain, app or company name.
NeverAlter the artwork, the proportions or the colors of the files.

For any use beyond this, or if in doubt, write to contato@padsambiente.com.br