petfeed/DESIGN.md

name, description, colors, typography, rounded, spacing, components

name	description	colors	typography	rounded	spacing	components
PawFeed	Where pets are the stars — a warm, ad-free social platform built for the animal, not the algorithm.	marigold-orange marigold-orange-hover marigold-tint marigold-deep porch-white pure-white ink hairline-gray whisper-gray quiet-gray alert-red oklch(0.7024 0.1967 41.45) #ea580c #ffedd5 #c2410c oklch(0.9882 0 0) oklch(1 0 0) oklch(0.145 0 0) oklch(0.922 0 0) oklch(0.9529 0 0) oklch(0.556 0 0) oklch(0.577 0.245 27.325)	display headline title body label fontFamily fontSize fontWeight lineHeight letterSpacing Inter, system-ui, sans-serif 1.875rem 800 1.2 -0.025em fontFamily fontSize fontWeight lineHeight letterSpacing Inter, system-ui, sans-serif 1.5rem 700 1.25 -0.025em fontFamily fontSize fontWeight lineHeight Inter, system-ui, sans-serif 1.25rem 600 1.4 fontFamily fontSize fontWeight lineHeight Inter, system-ui, sans-serif 0.875rem 400 1.6 fontFamily fontSize fontWeight letterSpacing Inter, system-ui, sans-serif 0.75rem 600 0.025em	sm md lg xl 2xl 3xl 4xl 6px 8px 10px 14px 18px 22px 26px	card-sm card-default 12px 16px	button-primary button-primary-hover button-outline badge-default badge-tint card input backgroundColor textColor rounded height padding {colors.marigold-orange} {colors.pure-white} {rounded.lg} 32px 0 10px backgroundColor {colors.marigold-orange-hover} backgroundColor textColor rounded height {colors.porch-white} {colors.ink} {rounded.lg} 32px backgroundColor textColor rounded height padding {colors.marigold-orange} {colors.pure-white} {rounded.4xl} 20px 2px 8px backgroundColor textColor rounded height padding {colors.marigold-tint} {colors.marigold-deep} {rounded.4xl} 24px 4px 12px backgroundColor rounded padding {colors.pure-white} {rounded.xl} 16px backgroundColor rounded height padding transparent {rounded.lg} 32px 4px 10px

Design System: PawFeed

Overview

Creative North Star: "The Spotlight Porch"

PawFeed reads like warm porch light, not a stage floodlight: a single, calm pool of light where one animal at a time gets to be the whole picture, away from the loud street of an algorithmic feed outside. The system is deliberately quiet — soft neutral canvases, gentle rounded edges, and a single confident marigold-orange accent used sparingly enough that it always reads as "this matters" rather than as house color washed over everything. Definition comes from thin rings and warm neutrals, not drop shadows; nothing fights for attention the way an ad or a sponsored post would.

The tone is warm, calm, and a little playful — the playfulness lives in small, earned moments (the paw-print story ring, the spring-and-burst paw reaction, the founder's own voice on the About page) rather than in loud graphics or forced trends. This is explicitly not the visual language of an algorithmic, ad-heavy feed: no dense card grids competing for eyeballs, no aggressive color blocking, no urgency-driven UI. It is closer to a real photo wall than a curated gallery — personal, unpretentious, and built around the animal in frame.

Key Characteristics:

• A single accent color (marigold orange), used deliberately and sparingly — never as a wash.
• Flat, ring-defined surfaces; shadows appear only as a hover/interaction response, never at rest.
• Soft, consistently rounded geometry at every scale, from 6px controls to fully pill-shaped badges.
• One typeface (Inter) doing all the work — hierarchy comes from weight and size, not from mixing families.
• Warm and calm by default, with small, specific moments of playfulness (paw motifs, spring animations) rather than constant visual noise.

Colors

A quiet, mostly neutral palette with one warm, confident accent — the accent is the point precisely because it is rare.

Primary

• Warm Marigold Orange (oklch(0.7024 0.1967 41.45), ≈ #f97316): the one color that means "act here" or "this is alive" — primary buttons, active/selected states, the paw-reaction fill, focus rings, and the recurring paw-print/iconography motif. Also appears as a light wash, Marigold Tint (#ffedd5), for kicker pills and soft badges, and as a deeper step, Marigold Deep (#c2410c), in the rare full-bleed CTA gradient panel.

Neutral

• Porch White (oklch(0.9882 0 0)): the app's resting canvas — a hair off pure white, never stark.
• Pure White (oklch(1 0 0)): cards, popovers, and anything meant to sit visibly above the canvas.
• Ink (oklch(0.145 0 0)): primary text.
• Hairline Gray (oklch(0.922 0 0)): borders and input strokes — always thin, never a heavy divider.
• Whisper Gray (oklch(0.9529 0 0)): secondary surfaces and muted backgrounds (pills, subtle fills).
• Quiet Gray (oklch(0.556 0 0)): secondary/muted text — timestamps, captions, helper copy.
• Alert Red (oklch(0.577 0.245 27.325)): the one status color, reserved for destructive actions and validation errors — always shown as a soft tint (/10–/20 opacity), never a solid alarming block.

Named Rules

The One Accent Rule. Marigold Orange is the only color allowed to mean "important" or "active." It is never used decoratively or as a large fill — if orange is on screen, it is doing a job (CTA, active state, reaction, focus).

The Dark-Mode Drift Fact. This is an observed inconsistency, not a design decision to imitate: in dark mode, the --primary and --ring CSS variables currently fall back to neutral grayscale (oklch(0.922 0 0) / oklch(0.556 0 0)) instead of carrying the marigold hue forward. The product's actual orange identity survives in dark mode only because most CTAs and accents are hardcoded with literal orange-500/600 Tailwind utility classes rather than the semantic bg-primary/text-primary tokens. Treat the semantic primary/ring tokens as unreliable for brand color in dark mode until this is reconciled; use the literal Marigold Orange value directly when a dark-mode element must stay on-brand.

Typography

Display/Body Font: Inter (Google Font, latin subset, loaded via next/font), with a system-ui fallback stack. One family for the entire product — there is no separate display or mono face in active use.

Character: Confident but unfussy — a standard humanist grotesque doing hierarchy through weight and scale rather than personality. It reads as approachable and modern, never corporate-cold or ornamental.

Hierarchy

• Display (800, text-3xl → sm:text-4xl → lg:text-5xl, tight tracking): hero headlines on marketing pages (Landing, Über uns).
• Headline (700, text-2xl → sm:text-3xl, tight tracking): section headings within marketing pages, CTA banners.
• Title (600, text-xl): in-app page titles (e.g. "Meine Tiere", pet Insights, Health) and card titles.
• Body (400, text-sm for UI copy; text-base → sm:text-lg with relaxed line-height for marketing prose): the default reading size throughout the app; marketing paragraphs run slightly larger and looser.
• Label (600, text-xs, uppercase, tracking-wide): kicker pills, section eyebrows, stat captions — always paired with a soft-tint background (see Marigold Tint).

Named Rules

The One-Family Rule. Every weight and size comes from Inter. Hierarchy is built with scale and weight, never by introducing a second typeface.

Layout

Content is column-constrained and centered, not full-bleed — the platform never asks the eye to travel edge-to-edge. In-app utility pages (pet list, profile, health, insights, messages, notifications) sit in a max-w-[640px] centered column; marketing sections widen slightly (max-w-2xl–max-w-4xl) for breathing room around prose and stat grids; the post detail view is the one deliberately wide surface (max-w-[960px]), splitting into an image column plus a fixed side panel on desktop and stacking on mobile.

Responsive padding follows a consistent px-4 → sm:px-6 step, and grids resize by adding columns rather than by changing density: pet cards go grid-cols-2 → md:grid-cols-3, stat tiles go single-column → sm:grid-cols-3. Mobile-first throughout; nothing depends on a hover-only affordance to be usable.

Elevation & Depth

Flat by default. Surfaces are separated with a 1px ring (ring-1 ring-foreground/10 on cards) rather than a resting drop shadow — depth is tonal and linear, not lit. A shadow only appears as a direct response to interaction (e.g. a stat card lifting slightly with hover:shadow-md and hover:-translate-y-1 on the About page), never at rest.

Named Rules

The Ring-Not-Shadow Rule. A resting surface gets a thin ring for definition, not a box-shadow. Shadows are earned by interaction (hover, active elevation), never applied by default.

Shapes

Soft and consistently rounded at every scale, driven by a single --radius base (10px) that every other step multiplies: 6px (small controls) → 8px → 10px (buttons, inputs, the system default) → 14px (cards) → 18–22px (larger containers/dialogs) → 26px (badges, pills — effectively full round on their height). Borders are hairline and low-contrast (hairline-gray) rather than heavy outlines; nothing in the system uses a sharp, unrounded corner.

Components

Buttons

• Shape: rounded-lg (10px), 32px default height.
• Primary: Marigold Orange fill, white text; many hero/CTA buttons instead hardcode the orange literal directly rather than routing through the default variant — see the Dark-Mode Drift Fact above for why that matters.
• Hover / Focus: hover darkens toward Marigold Orange Hover (#ea580c-equivalent, via /80 opacity on the token); focus shows a soft 3px ring in the accent color plus a matching border. A pressed button nudges down by 1px — a small, tactile confirmation rather than a color flash.
• Secondary / Outline / Ghost: outline uses a hairline border on the canvas color; ghost has no resting fill at all, appearing only on hover; destructive actions use a soft red tint (/10–/20), never a solid red block.

Chips / Badges

• Style: fully pill-shaped (rounded-4xl, 26px — effectively a stadium shape at badge height). Default variant is a solid Marigold Orange fill with white text; the more common "kicker" variant is a soft Marigold Tint background with Marigold Deep text, paired with uppercase Label type.
• State: no distinct selected/unselected treatment observed outside dropdown/filter contexts; badges are primarily informational, not interactive controls.

Cards / Containers

• Corner Style: rounded-xl (14px).
• Background: Pure White on the Porch White canvas.
• Shadow Strategy: none at rest — see Elevation & Depth. Definition comes from ring-1 ring-foreground/10.
• Border: the ring itself; no separate border token.
• Internal Padding: 16px default, 12px in the compact (size="sm") variant — both driven by a --card-spacing custom property, not a hardcoded utility.

Inputs / Fields

• Style: rounded-lg (10px), transparent background, hairline border, 32px height.
• Focus: border shifts to the accent ring color plus a soft 3px glow ring — the same focus language as buttons.
• Error / Disabled: invalid fields get a red border and red-tinted ring; disabled fields fade to 50% opacity with a faint tinted fill.

Paw Reaction (signature)

The product's core "like" action is a paw-print icon that snaps into a filled, saturated Marigold Orange with a quick spring (scale 1 → 1.3 → 0.92 → 1, ~0.4s) plus a second ghost paw that bursts outward and fades (scale 0.6 → 2.1, opacity 0.9 → 0, ~0.5s) — a small, specific piece of delight rather than a generic heart-burst animation, and it respects prefers-reduced-motion by disabling both.

Paw Ring (signature)

Story indicators are not a generic solid-color ring around the avatar; they are drawn as an actual paw-print outline (a main pad circle plus four toe-bean circles) in SVG — Marigold Orange for an unseen story, neutral gray once all of a pet's stories have been seen, and no ring at all when there is nothing to see. This is the single most on-brand piece of UI in the product: the "paw" motif is literal, not just a name.

Do's and Don'ts

Do:

• Do treat Marigold Orange as rare and meaningful — one clear "this is the action" per view, not a wash of brand color.
• Do define surface separation with a hairline ring, and reserve shadows for hover/interaction states only.
• Do keep every corner rounded, scaling the radius with the element's size rather than mixing sharp and soft shapes.
• Do carry the paw motif (icon, ring, reaction animation) as literal iconography, not just a name — it is the product's signature.
• Do respect prefers-reduced-motion on every custom animation, matching the existing paw-reaction and scroll-reveal treatments.

Don't:

• Don't introduce a second typeface — hierarchy comes from Inter's weight/size scale alone.
• Don't trust bg-primary/--ring for brand-orange in dark mode without checking — they currently resolve to neutral gray (see the Dark-Mode Drift Fact); use the literal Marigold Orange value when the dark-mode result must stay on-brand.
• Don't add resting drop shadows to cards or panels — depth is tonal (rings, warm neutrals), not lit.
• Don't fill large areas with solid orange (banners, hero backgrounds) outside the one existing gradient CTA panel — the accent's power comes from scarcity.
• Don't use sharp, unrounded corners anywhere in the system.