Calm & grounded
Sage green and warm stone neutrals reduce visual noise. The interface feels steady, not clinical.
Design principles
Guiding decisions for a product used in stressful, time-sensitive rehabilitation workflows.
Readable in the field
High-contrast type, generous tap targets, and clear status colors work on phones in bright outdoor light.
Status at a glance
Animal care states use consistent color coding — in care, released, transferred — so nothing gets missed.
Warmth with structure
Serif display type adds humanity; Inter keeps data-dense screens scannable and efficient.
Color palette
Brand colors drawn from natural tones — sage green, warm stone, and charcoal — with semantic colors for animal status and alerts.
Brand
Bramble
#545A50
Primary actions, brand mark, in-care status
Bramble Dark
#494E46
Hover states, pressed buttons
Charcoal
#393E41
Display headlines, marketing copy, footer
Charcoal Dark
#32373A
Dark variant hover states
Warm Taupe
#BCB6AD
Auth screens, ambient backgrounds
Cream
#F7F5F0
Marketing sections, subtle panels
Semantic & status
Released
#4CAF50
Successful release status
Transferred
#f97316
Transfer in progress
Deceased
#EF4444
Deceased animal status (red-500)
Error
#DC2626
Login errors, form validation (red-600)
Transport
#54476B
Transport alerts & banners
Archived
#6b7280
Inactive / archived records
Typography
Three-font system: serif for brand warmth, display serif for marketing headlines, sans-serif for UI and data.
Bramble
Wildlife rehabilitation, organized.
Track the animals in your care, log every treatment, and keep a complete history for each one — all in one place. Built for individual wildlife rehabbers.
Type scale
3.5rem
Hero headline
2.25rem
Section heading
1.5rem
Card title
1rem
Body text — default reading size across the app
0.875rem
Labels, buttons, table cells
0.75rem
BADGES · CAPTIONS · METADATA
Design tokens
CSS custom properties used in the Tailwind v4 theme. Tokens ensure consistency between marketing pages, auth flows, and the dashboard.
Color tokens
| Token | Value | Usage |
|---|---|---|
--color-bramble | #545A50 | Primary brand, CTA buttons, theme-color |
--color-bramble-dark | #494E46 | Hover / active states |
--color-bramble-foreground | #545A50 | In-care status badges |
--color-charcoal | #393E41 | Marketing headlines, hero accent text |
--background | #FFFFFF | Page background (oklch(1 0 0)) |
--foreground | #252525 | Primary text (oklch(0.145 0 0)) |
--muted | #F7F7F7 | Empty states, subtle panels |
--border | #E5E5E5 | Dividers, input borders |
--destructive | oklch(0.577 0.245 27.325) | Delete actions (shadcn default) |
--ring | #A1A1A1 | Focus rings (oklch(0.708 0 0)) |
Radius tokens
| Token | Computed | Usage |
|---|---|---|
--radius | 0.625rem (10px) | Base radius |
--radius-sm | 6px | Compact elements |
--radius-md | 8px | Buttons, inputs |
--radius-lg | 10px | Cards, dialogs |
--radius-xl | 14px | Auth cards, feature cards |
Spacing & radius
4px base grid. Component padding typically uses 16–24px; section rhythm uses 80px vertical spacing on marketing pages.
Spacing scale
4px
8px
16px
24px
32px
48px
80px
Border radius
sm · 6px
md · 8px
lg · 10px
xl · 14px
full
Components
Representative UI patterns from the production app — built on shadcn/ui primitives with Bramble-specific variants.
Buttons
Primary uses brand sage (#545A50). Large CTAs appear on marketing pages; compact sizes in dashboard toolbars.
Button variants · default, lg, sm
Form inputs
Rounded-lg fields with bramble focus ring. Used on login, signup, and animal care forms.
Default input fields
Welcome Back
Login to your account
Auth card on warm taupe surface
Status badges
Pill badges communicate animal disposition. Color is never the only indicator — labels are always present.
In Care
Released
Transferred
Deceased
Archived
Needs Care
Animal status badges
Alert banners
Contextual banners for medical urgency and transport coordination.
Medical attention required
Weight loss detected — review care log from yesterday.
Transport scheduled
Pickup at 2:00 PM — Eastern Gray Squirrel (#1042)
Incorrect email or password
Please try again.
Medical, transport, and error alerts
Cards
Marketing feature cards and pricing use cream section backgrounds with white elevated surfaces.
Detailed care logs
Record feedings, medications, and observations as they happen.
Feature card
Individual
For solo rehabbers
$4.99/month
- Unlimited animals in care
- Care logs & medical notes
- Cancel anytime
Pricing card
No animals in care
Add your first animal to start tracking their recovery.
Empty state