tailwind system

PawKlubs design system

A reusable visual foundation for `pawklubs.com`, built with Tailwind tokens and shared React primitives so marketing, contests, and account flows all speak the same language.

Core intent

Friendly enough for proud pet parents, polished enough to feel like a club, and structured enough that new features can ship without inventing visual rules each time.

Warm club palette

Creamy neutrals, teal leadership, and apricot highlights make the brand feel alive without drifting into generic startup blues.

Editorial hierarchy

Fraunces carries display moments while Plus Jakarta Sans handles interface density, giving pages more personality with good readability.

Soft depth and motion

Rounded surfaces, subtle lift shadows, and short hover travel keep the interface friendly while still feeling polished and intentional.

Tokens

Palette and typography

Tailwind v4 theme tokens

Color roles

Primary

oklch(0.58 0.13 188)

Primary actions, navigation accents, and active states.

Accent

oklch(0.77 0.13 50)

Moments of celebration, highlights, and premium CTA contrast.

Surface

oklch(0.967 0.016 90)

Raised panels, informational strips, and softer neutral sections.

Foreground

oklch(0.255 0.034 250)

Primary copy, icons, and anchors for layout hierarchy.

Type scale

Display

Celebrate every champion

Body

Interface copy stays legible and airy, with enough warmth in the typography to feel branded even inside dense product surfaces like forms, lists, and metadata blocks.

Components

Shared primitives

Actions and badges

Buttons carry the main hierarchy, while badges label status in a consistent uppercase treatment.

NeutralPrimaryLiveUpcomingJudgingClosed

Fields

Rounded inputs sit on quiet surfaces and use a narrow uppercase label style for a cleaner form rhythm.

Stored as a local `datetime-local` field and displayed in `dd/mm/yyyy HH:mm`.

Formatted: 16/04/2026 14:35

Posted16/04/2026 14:35

Flow controls

Filter chips and segmented controls help contest, directory, and profile views stay interactive without falling back to custom one-off button groups.

Filter chips

Segmented control

Breadcrumb

Optional
0 / 280

Use this when a plain textarea needs a little more structure around actions and helper copy.

Support both lightweight discussion threads and moderation notes.

Context menu

Right-click this panel, or focus it and press the context-menu key, to open a reusable action menu for cards, entries, or moderation surfaces.

AM

Ayla Moreno

@aylapaws

Curator pick

2m ago

The framing on this entry is so good. You can tell the pet is relaxed, and the motion still feels sharp instead of overly staged.
12 likes
Club hostā€¢09:14
Submissions close tonight, so if you want to leave feedback for finalists, now is the perfect window.
Youā€¢Seen
Iā€™m finishing one last comment now. The new thread components feel much more polished than a plain card stack.

Flow-ready states

Metric cards and empty states round out the interface pieces used by richer product surfaces like contests and account dashboards.

Entries

48

Approved gallery submissions.

Voting window

3 days left

Closes on Sunday at midnight.

Contest state

No entries yet

Use this state for galleries, leaderboards, or any surface that needs a welcoming empty moment before real content arrives.

Submission

Content submission components

Submission flow

Feature story submission

A reusable scaffold for creator, moderator, or editorial submission flows. Pair it with the existing media picker, date input, and rich field set to build full submission experiences.

Draft in progress

Details

Core entry information

Use this section for title, summary, scheduled publish timing, and any high-signal metadata that should be completed first.

Use this for moderation queues or scheduled publishing.

Formatted: 16/04/2026 14:35

Media

Attach supporting media

Swap in the mobile-first picker for phone flows or keep the desktop upload box for heavier editorial workflows.

No media selected

This example supports attaching multiple images and videos together for a single submission.

Preview

Media preview

0 assets
Add images or videos to see a submission preview here.

Checklist

Before you submit

2/3 ready

Title and summary added

Give reviewers enough context to approve quickly.

At least one image or video attached

Mixed image and video attachments are supported in the same submission.

Publish time selected

Useful for scheduling or staged releases.

Review

Submission summary

Publish date

Queued16/04/2026 14:35

Media attached

0 items

This summary card is useful in sticky sidebars, approval drawers, or final review steps before a submission is published.

Media

Rounded video player

Soft-framed video surface

Use this for contest highlights, featured member clips, or editorial media where a plain browser video element feels too raw against the rest of the interface.

Weekend winners recap

Rounded corners, soft framing, and a subtle media badge help embedded video feel native to the rest of the club interface.

Video

Reel standard

A classic 9:16 portrait player for featured clips, creator reels, or contest shorts.

Reel standard

A classic 9:16 portrait player for featured clips, creator reels, or contest shorts.

Video

Story card

A slightly tighter portrait crop that feels at home in story trays or profile highlights.

Story card

A slightly tighter portrait crop that feels at home in story trays or profile highlights.

Editorial portrait

A taller card variation for spotlighted interviews, narrated updates, or premium member stories.

Editorial portrait

A taller card variation for spotlighted interviews, narrated updates, or premium member stories.

Video

Feed media

Scroll autoplay video feed

TikTok-like vertical browsing

Use this when a page needs immersive, one-clip-at-a-time browsing instead of a grid or carousel. The dominant in-view item auto-plays while the rest pause.

Scroll autoplay feed

The feed advances clip-by-clip instead of relying on default continuous scrolling. Use swipe, wheel, or arrow keys while the feed is focused.

Now playingClip 1

@pawklubs.live

Champion parade warm-up

A scroll-snapped hero clip for event recaps, finalist spotlights, or creator-led story feeds.

2.4k
184
QueuedClip 2

@trainer.notes

Training moment of the week

The active panel auto-plays once it becomes the dominant item in view, while the others pause.

2.4k
184
QueuedClip 3

@club.stories

Behind the scenes at check-in

This pattern works well for mobile-first story feeds where every panel should feel immersive and fast.

2.4k
184

Portrait highlight variation

A narrower portrait feed works well for featured reels, member spotlights, or sidecar media columns where the browsing pattern should stay immersive but take up less width.

Scroll autoplay feed

The feed advances clip-by-clip instead of relying on default continuous scrolling. Use swipe, wheel, or arrow keys while the feed is focused.

Now playingClip 1

@pawklubs.live

Champion parade warm-up

A scroll-snapped hero clip for event recaps, finalist spotlights, or creator-led story feeds.

2.4k
184
QueuedClip 2

@trainer.notes

Training moment of the week

The active panel auto-plays once it becomes the dominant item in view, while the others pause.

2.4k
184
QueuedClip 3

@club.stories

Behind the scenes at check-in

This pattern works well for mobile-first story feeds where every panel should feel immersive and fast.

2.4k
184

Carousel

Compact card carousel

Min 200 x 300 cards

Media-ready cards

Each card supports optional imagery, an optional action button, and a four-line description clamp to keep the row tidy as content lengths vary.

Abstract gradient artwork representing a winners feature card.

Spotlight

Weekend winners circle

Highlight top pets, recent event recaps, or member stories in a compact carousel card that still feels polished and easy to scan on smaller screens.

234 x 320

Abstract gradient artwork representing a training series card.

Classes

Training series

Use the image area for event posters, tutorial thumbnails, or campaign visuals while the body keeps a tidy hierarchy for the headline and supporting copy.

Optional action

Abstract gradient artwork representing a nutrition article card.

Editorial

Nutrition notes

Longer descriptions are clamped to four lines, which keeps every card aligned even when one item has more context than the rest of the row and would normally stretch the layout too far.

4-line clamp

Text-first variation

The same primitive also works without media, which makes it useful for editorial lists, membership perks, and short updates.

No image

Member story

Text-only cards still keep a compact silhouette, so they work well for testimonials, club notes, reminders, or any content feed that does not have media ready yet.

Minimum 200 x 300

Announcement

Breeder note

The top accent rail helps cards without images feel intentional instead of empty, while the bottom slot can stay empty or host a small action button when the flow needs it.

Action optional

Utility

Judge reminder

Card width and height are customizable through props, but the component protects the minimum size so it stays readable and touch friendly across carousel uses.

Size props

Uploads

Upload box form component

Drag-and-drop media surface

The upload box is designed as a reusable form field for contests, profile setup, or content submission flows. It handles local file selection, drag state, and selected file previews without assuming a specific upload backend.

Invite users to drag in a hero photo, video clip, or supporting document.

No files selected

This demo stores selected files in local component state only.

Built for

Contest submission forms, pet gallery editors, document uploads, and any flow where the site needs a styled drop area before wiring in real storage.

Behavior

Click to browse, drag files over the surface, preview selected files, and clear or remove them individually while keeping native form compatibility.

Current demo

No files staged yet.

Mobile media

Image/video picker

Bottom-sheet media chooser

This component is tuned for phones: it opens a media action sheet, separates photo and video choices, and still shows selected previews back in the form.

Use this for mobile-first onboarding, entry submission, or chat attachment flows.

No media selected

Photo and video actions open as explicit sheet options so users are not dropped into a generic file browser first.

Usage notes

How to extend it

Reach for semantic tokens first

Prefer `bg-primary`, `bg-surface`, and `text-muted-foreground` over one-off Tailwind color scales inside product UI.

Reuse primitives for flow screens

Buttons, badges, cards, inputs, and dialogs are already wired to the tokens, so new pages inherit the system by default.

Keep the visual rhythm soft

Rounded corners, restrained shadows, and short hover motion are part of the brand language and should stay consistent.