Plogig logo
Brand Guidelines

The Plogig design system

A single reference for our logo, colors, typography, and components — so every screen and touchpoint feels unmistakably Plogig.

Brand at a glance

Tagline

"Bringing you closer to the help you need"

Mission

Empowering communities by making services accessible, affordable, and competitive.

Contact & identity

Name
Plogig
Former name
Tranzit-EZ (retired)
Website
https://www.plogig.com
Email
info@plogig.com
Phone
904-335-8085

Logo

Use the wordmark on marketing surfaces and the icon in the app header and as the favicon. Always keep clear space around the logo and never stretch, recolor, or add effects.

Wordmark — on lightWordmark — on light
Wordmark — on navyWordmark — on navy
Icon — on lightIcon — on light
Icon — on navyIcon — on navy

Brand colors

The expressive palette used across marketing pages. Navy anchors the brand; mint and emerald provide energetic accents on dark surfaces.

Navy
#1B2B36

Primary brand surface, hero, section backgrounds, primary buttons

Deep Navy
#0F1922

Footer, darkest surface

Navy Card
#243842

Cards on dark sections

Navy Hover
#2C424D

Card hover on dark sections

Navy Button Hover
#2C3E4A

Primary button hover state

Mint
#E8FFEA

Accent — buttons & highlights on dark backgrounds

Mint Hover
#D0F0D5

Mint accent hover state

Emerald
#34D399

Text accents & links on dark surfaces

UI tokens

Semantic design tokens (shadcn/Radix, defined in globals.css). Always style components with these variables rather than raw hex, so the whole product stays consistent. Swatches below render live from the CSS variables.

Primary
--primary
Secondary
--secondary
Accent
--accent
Muted
--muted
Background
--background
Card
--card
Destructive
--destructive
Border
--border

Data & charts

Ordered categorical palette for dashboards and recharts visualizations.

chart-1
chart-2
chart-3
chart-4
chart-5

Typography

Sans (UI & headings)

System sans-serif stack (Tailwind font-sans). Intended: Geist Sans.

Mono (code)

System monospace stack (Tailwind font-mono). Intended: Geist Mono.

Display — AaHero H1 — 3.75rem/bold
H2 — AaSection titles — 2.25rem/bold
H3 — AaSub-sections — 1.5rem/semibold
H4 — AaCard titles — 1.25rem/semibold
Body Large — AaIntro paragraphs — 1.125rem
Body — AaDefault body — 1rem
Small — AaMeta & captions — 0.875rem

Buttons

Variants and sizes from the shared Button component. Use default for primary actions, outline/secondary for secondary, and destructive for irreversible actions.

Marketing accent buttons (on-brand gradients & mint)

Badges & status

DefaultSecondaryOutlineDestructive
Demand status:PendingAcceptedCompletedCancelled

Corner radius

Base radius is 0.65rem. Use the scale below for consistent rounding.

sm

calc(0.65rem - 4px)

md

calc(0.65rem - 2px)

lg

0.65rem

xl

calc(0.65rem + 4px)

full

9999px

Iconography

We use Lucide icons — outline style, consistent stroke, sized in multiples of 4px (16/20/24). Never mix icon libraries.

Voice & tone

Warm & human

Speak like a helpful neighbor, not a bureaucracy. Plain language over jargon.

Empowering

Center the person seeking help. Frame services as steps forward, not handouts.

Culturally aware

Respect language, culture, and context. Inclusivity is a core promise.

Clear & actionable

Every screen should make the next step obvious. Reduce friction and confusion.