Back Packly.
Design System
v1.0 · September 2026
Packly Design System

Brand. Color. Type. Components.

The governing reference for all Packly visual decisions. Merges the style guide, brand guidelines, and design token spec into one document. When this conflicts with any earlier export, this document takes precedence.

Brand Identity
Color System & Tokens
Typography
Component Patterns
Usage Rules
01 - Brand Identity

Care without sentimentality. Structure without rigidity.

Packly is a pet health and habits platform for engaged adult pet owners. The brand is helpful, informed, and quietly confident. Not clinical. Not cutesy.

Tone
Helpful. Informed. Quietly confident.
Not clinical. Not cutesy. Packly speaks like a knowledgeable friend, not a health app or a pet store.
Audience
Adult pet owners who take it seriously.
All species, all life stages. They want structure, not sentiment.
Single Design Job
One primary action per view.
Surfaced with coral. Everything else is neutral. The eye goes exactly where it needs to go.

Logo Mark

Three stacked isometric tiles. Top tile: cat head (Ocean Ink #0A3B4A). Middle tile: nutrition label (Sky #5DAED4). Bottom tile: network node (Teal #4ECDC4). The "y" descender carries a teal accent dot. Never remove it. These are placeholder PNGs -- replace with SVG masters before production use.

PPackly

packly-logo-color-light.png -- use on light surfaces

PPackly

packly-logo-color-dark.png -- use on dark surfaces

Packly icon

packly-icon-color-light.png -- favicons, avatars, tight spaces

Logo Rules
xNever recolor the tiles. Ocean / sky / teal is the canonical mark palette.
xNever remove or recolor the teal "y" accent dot.
xNever crop or overlap the stacked tile mark.
+Minimum clear space: half the mark height on all sides.
+Dark variant on dark photos, light variant on light photos. When in doubt, prefer dark-background variant.
02 - Color System & Tokens

Two canonical inks. Every decision traces back to these.

Ocean ink (#0A3B4A) means "read this." Coral (#FF6B6B) means "do this." Click any swatch to copy its hex value.

Ocean Ink
#0A3B4A
Text, icons, dark surfaces, mark base tile, nav bar, footer. The brand dark.
Coral
#FF6B6B
CTAs, active states, selected chips, focus rings. One coral moment per view. Primary action color.

Supporting Palette

Teal #4ECDC4
brand.teal
Mark accent, active/success tint, constructive states
Sky #5DAED4
brand.sky
Mark mid tile, info state, sky-tinted text
Amber #FFBE55
brand.amber
Activity entry type chip only
Mist #F2F4F7
page bg
Page background scaffold
Sage #73C27D
Reserved - not in active use
Violet #9D7BFF
Reserved - not in active use

Color Ramps Click to copy

Coral ramp (coralRamp) -- 500 (#FF6B6B) is canonical

Neutral ramp (neutralRamp) -- 900 (#0A3B4A) is brand ink anchor

Teal ramp (tealRamp) -- 400 (#4ECDC4) is canonical

Usage Ratios

~40% Surface / page bg
~22% Card fills
~18% Text / ink
~10% Coral action
~10% Teal accent
One coral CTA per view. Teal for success states, active toggles, and mark decoration only. All other color is neutral.

Color Accessibility

Use #C23C3C for coral-colored text smaller than 18px or lighter than 700 weight on light surfaces.

Color PairRatioResultPolicy
#0A3B4A on white
 10.4:1AAAAll uses - passes
#FF6B6B on white
 ~3.1:1Fails AA smallUse #C23C3C for small coral text
White on #FF6B6B
 ~3.1:1AA large onlyButtons (large/bold) acceptable
03 - Typography

Plus Jakarta Sans. One family, all roles.

Single font family throughout the app and all brand materials. Weight is the differentiator -- 800 for display, 700 for headings, 600 for labels and actions, 400 for body. No secondary typeface.

Display 56/800 Packly
Display 40/800 Pet Health, Simplified
H2 28/800 Your pet's complete health record.
H3 20/700 Care Vault: Vaccines and records
H4 17/600 Buddy's last vet visit
Body 16/400 Add your pet's weight, breed, and date of birth to unlock habit tracking.
Label 15/700 Morning Walk
Caption 12/500 67.20 kcal/treat · 930 kcal/kg
Eyebrow 11/700 Health Records

Border Radius Tokens

Buttons, badges, and chips always use pill (9999px). This is the single most visible signature of the Packly UI.

sm
10px
Chips, inner elements
md
16px
Cards, inputs
lg
20px
Modals, drawers
xl
28px
Hero containers
pill
9999px
All buttons, badges, chips
04 - Component Patterns

Live component reference.

All components rendered at full fidelity. Two fill variants for buttons: coral for primary actions, ocean for save/confirm. All chips, badges, and buttons are pill-shaped.

Buttons
Entry Type Chips - Active
Activity Training Playtime Vet Meds
Activity  Playtime
Status Badges
Logged Pending Recall alert Verified

Status badges never use coral. Coral means action, not state.

Day Selector
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Input + Label

Focus state: coral border. All inputs use 16px radius (md token).

Surface Pattern
White card on mist page
Selected: coral border only

#FFFFFF on #F2F4F7. No border, no shadow. Elevation from contrast alone.

Bottom Navigation

Pill-within-pill. Ocean ink container, white pill inset for active tab. This pattern is characteristic and must be preserved across platforms.

Hub
Timeline
Records
Settings

Icon System

Flutter App
Phosphor Icons 1.4
1,047 icons · phosphor_flutter package · Regular/stroke weight
PhosphorIcon(PhosphorIcons.pawPrint) PhosphorIcon(PhosphorIcons.heartbeat) PhosphorIcon(PhosphorIcons.barcode)
Web / HTML
Lucide Icons 0.475
1,400+ icons · lucide.dev · Regular/stroke weight
<i data-lucide="paw-print"></i> <i data-lucide="heart-pulse"></i> <i data-lucide="scan-barcode"></i>
Shared rules (both surfaces)
+Sizes: 16px inline, 20px default, 24px feature
+Color default: moss-lt (#5E93AA). Coral for primary interactive. Teal for constructive/positive.
+Regular/stroke weight only. No filled variants in standard UI.
xNever mix Phosphor and Lucide on the same surface.

Motion

120ms
ease-out
Hover states, toggles, focus rings. Immediate response to input.
200ms
ease-out
Panel reveals, theme switch, sheet open. Deliberate transitions.
300ms
ease-out
Modal entry, page transitions. Full-screen context changes.
Always include @media (prefers-reduced-motion: reduce) to disable non-essential transitions.
05 - Usage Rules

Brand voice, do/don'ts, and open decisions.

UI copy follows consistent conventions. Errors say what went wrong and how to fix it. No em dashes anywhere.

Brand Voice

xAvoid
"We're sorry, something went wrong. Please try again later."
Apologies slow people down. State the problem and point to the fix.
+Use
"Couldn't connect to the server. Check your connection and tap Retry."
Direct. Tells the user what happened and what to do.
xAvoid
"Your log entry has been successfully saved to the system."
Passive. Too many words for a confirmation toast.
+Use
"Entry saved"
Past tense. Two words. Exactly what the user needed to hear.
Copy conventions
+Action labels are imperative: "+ Add New", "Save Entry", "Scan Barcode"
+Toast and confirmation messages use past tense: "Entry saved", "Log updated"
+Use hyphens for ranges: "Mon - Sun" not an em dash
xNo em dashes anywhere in UI copy or brand materials

Open Decisions

O-1
Mark vs. UI color separation
The mark uses ocean/sky/teal. The app's action color is coral. These are intentionally different -- mark identity vs. UI action signal. Should coral ever appear in the mark?
Recommendation: Keep mark as ocean/sky/teal (3-tier product story) and coral as UI-only accent. Never import mark colors into the component system.
O-2
Icon-on-light placeholder is inconsistent
packly-icon-color-light.png uses a dog head and a coral bottom tile -- inconsistent with canonical cat head and ocean/sky/teal palette.
Recommendation: Replace when SVG masters are produced. Use packly-icon-color-dark.png on dark surfaces only in the meantime.
O-3
Coral small text contrast
Coral #FF6B6B fails WCAG AA for small text on white (3.1:1). Accept this for button labels only, or require the accessible variant everywhere coral appears as text?
Recommendation: Coral buttons are large and bold -- acceptable. Use #C23C3C on light and #FF8080 on dark for any coral text under 18px or below 700 weight.
Copied!