Pocket Status
Design System

Product Name

Logo Variants

Full Mark

/pockedtstatus-logo-full.png

Compact / No BG

/pocketstatus-logo-nobg-small.png

Three-Dot Mark

Inline CSS / SVG

Three-Dot Mark Sizes

Status Colors — Primary Brand Palette

Plan Tier Accents

Status Derived Tokens

Each status has muted, glow, and strong variants for layered depth effects.

Surface Colors

Text Colors

Typefaces

Type Scale

Font Weights

Letter Spacing

Interactive Status Squircles

The primary status picker. Order follows the traffic light logo: Red, Amber, Green, Offline. Click to select.

Compact Squircles (Header/Menu)

Circular Status Picker (Profile Page)

Owner-only circular variant used on the profile page. Four 3D glass-sphere buttons in a horizontal row — each sits inside a translucent circular housing. Selected state has a colored ring, glow halo, a centered white dot on the sphere, and a bold colored label beneath. Inactive spheres are subtly desaturated. Every sphere has a specular highlight (top-left crescent) for depth.

Status Indicator Dot (Header)

Small indicator overlaid on avatar with border matching background.

Buttons — Primary CTA

rounded-full px-8 py-3.5 text-sm font-medium
bg-gradient-to-b from-{color}-500 to-{color}-600
text-white shadow-lg shadow-{color}-900/20
hover:shadow-{color}-900/40 transition-all duration-300

Buttons — Secondary / Ghost

Buttons — Disabled / Current Plan

Cards

Status Panels

Frosted glass cards for displaying a person's status. Used in team boards, widgets (iOS/Android), notification views, and the Chrome extension popup. Each panel shows a status dot, name, message, and status label.

/* Glass panel — adapts to any background */
<div className="flex items-center gap-4 px-5 py-4
  rounded-2xl border border-white/15
  backdrop-blur-xl"
  style={{ background: "rgba(255,255,255,0.08)" }}
>
  {/* Status dot with glow */}
  <div className="w-3.5 h-3.5 rounded-full"
    style={{
      backgroundColor: statusColor,
      boxShadow: "0 0 8px ${glowColor}, ..."
    }}
  />

  {/* Name + message */}
  <div className="flex-1 min-w-0">
    <p className="text-sm font-semibold text-white">Name</p>
    <p className="text-xs text-white/50 truncate">Message</p>
  </div>

  {/* Status label */}
  <span className="text-xs font-semibold"
    style={{ color: statusColor }}>
    Available
  </span>
</div>

Step Cards

Numbered walkthrough cards used in the "How it works" section. Each has a floating step badge, an icon region, title, and description.

Benefit Cards

Feature/benefit cards used in the "Why it matters" section. Each has a colored icon square, title, and description. Icons use a per-card accent color.

Form Inputs

Badges & Pills

Verified Badge

Blue checkmark shown next to name for Pro+ subscribers. Rendered inline via the VerifiedBadge component.

Feature Detail Tags

Inline feature descriptors used in pricing cards.

Quick Link Icons

Used in header dropdown and mobile menu grids.

Header Layout — Desktop

Fixed three-zone layout: logo left, navigation center (landing only), user avatar right. Transparent over hero, gains backdrop on scroll.

Header Layout — Mobile

Fixed header with two elements: a search icon on the left and the three-dot menu trigger centered in the viewport. When search activates, the dots smoothly glide to the right via a GPU-accelerated transform transition, making room for the expanding search field.

Mobile Search — Inline Expansion

The search icon lives in the mobile header bar (not the overlay menu). Tapping it triggers a fluid expansion into a full search field with auto-focus. The three-dot menu trigger smoothly animates from center to the right edge, remaining accessible at all times.

Logo Placement & Function

Navigation Items

Center-aligned pill navigation. Only visible on landing page variant. Scroll-tracked — the active item updates as the user scrolls through sections.

User Avatar & Status Ring

The avatar is the primary menu trigger. A status indicator dot sits at bottom-right. On hover/open, a colored ring appears matching the user's current status.

Dropdown Menu — Structure

The dropdown is a layered panel anchored top-right below the avatar. It contains 5 zones stacked vertically, each with distinct functionality.

Zone 1 — Status Picker

Zone 2 — Profile Row & Edit Toggle

Tapping the profile row navigates to /{handle}. The pencil icon toggles inline editing. When editing, the pencil cross-fades into Cancel (X) and Save (check) buttons.

Zone 3 — Inline Edit Form

Expands below the profile row using CSS grid animation (gridTemplateRows: 0fr → 1fr). Contains Display Name, Handle with live availability check, and read-only Email.

Zone 4 — Quick Links Grid

4-column icon grid. Active items use full opacity, disabled/paid items are dimmed with an amber dot indicator. On landing page mobile menu, a second 4-column row adds section anchors.

Zone 5 — Sign Out

Landing Page Mobile Menu Extras

On mobile, the landing page adds a second 4-column icon row below the standard quick links. These anchor to landing page sections.

Bottom Navigation Bar — Mobile

Owner-only bottom navigation bar on profile pages (mobile). Four icon tabs: Home, History, Metrics, and Share. Positioned fixed at the bottom of the screen with a frosted glass background.

Screen Architecture

The profile screen is a scrollable view with a fixed header. Content flows vertically: identity pill, social icons row, circular status picker (owner only), status message text, share button + social sharing bar, then tabbed content (Timeline / Links).

Atmosphere Effect

Full-screen radial gradients centered near the top of the page, tinting the background with the current status color. Two overlapping ellipses create a soft ambient wash.

Identity Pill

Prominent pill at the top of the profile containing avatar (with status-colored ring glow), name + verified badge, handle, stats row (updates/followers/following), and a time-since indicator badge.

Editable Status Text

Large, fluid status message displayed as a gradient heading. Owner can tap to edit inline. Text auto-scales based on character count.

Autosave Behavior

Text changes are debounced and auto-persisted via API. Visual feedback shows saving state.

Character Limits

Free users get 140 characters, Pro users get 280. Counter pill appears only during editing.

{message.length > charLimit ? (
  <>
    <span className="status-gradient">{message.slice(0, charLimit)}</span>
    <span className="text-red-500/80">{message.slice(charLimit)}</span>
  </>
) : (
  <span className="status-gradient">{message}</span>
)}

Textarea Overlay Technique

The editable text uses a hidden textarea stacked on top of the visible gradient heading. This preserves the gradient rendering while enabling native text editing.

Mention Autocomplete (@mentions)

Typing @ followed by characters triggers a dark glassmorphic dropdown of matching users. Used inside the status message editor for tagging other users. Results fetched via debounced API call.

Platform Notes — Profile

Supported Platforms

Defined in src/lib/social-platforms.tsx. Each platform has a key, label, SVG icon, and URL builder. The “website” platform is excluded from the icon row and shown separately in the Links tab.

Icon Row Layout

Centered horizontal row displayed on the profile page between the identity pill and the status text. Only visible when the user has at least one social link configured (excluding website).

Edit Mode — Social Links Management

In profile edit mode, social links appear as editable fields. Each field shows the platform icon, label, and an input for the handle/URL. Empty fields show placeholder text. A grid layout arranges platforms two per row on larger screens.

Tab Bar

Two-tab bar switching between TIMELINE and LINKS views. Full-width with equal tab distribution and a status-colored underline indicator.

Date Groupings

Status entries are grouped by date. Group headers appear as centered, small-caps labels above each cluster. Relative labels for recent dates, explicit dates for older ones.

Timeline Entry

Each entry shows the status message in gradient text, a relative timestamp, and optional metadata. Entries are tappable to expand and reveal actions and state-change history.

Expanded Entry — Metadata & Actions

When expanded, a timeline entry reveals full metadata (date, location, platform) and an action button row. A state-change history panel may appear on the right with a vertical timeline.

Delete Confirmation

Destructive actions use an inline confirmation pill that replaces the button text. The pill contains a label, confirm (check), and cancel (X) button.

State Change History

Right-side panel showing status transitions for a given entry. Uses a vertical timeline with colored dots and status labels.

Timeline Empty & Loading States

Links Tab

The second tab shows the user's website and custom links. Website link appears first as a prominent card, followed by any custom links. Defined in src/components/custom-links.tsx.

Status Share Bar (Inline)

A compact, inline sharing popover used in the profile status area and timeline entry actions. Distinct from the full Share Modal — this is a small pill that expands into a horizontal row of social platform buttons.

Page Layout

Full-page feed at /hashtag/[tag]. SharedHeader at top, back link, centered hashtag heading with icon, then a vertical feed of status items with infinite scroll.

Hashtag Header

Centered icon badge + large heading with the tag name, plus a subtitle line.

Feed Item Anatomy

Each feed item contains a user row (avatar with status ring, name with verified badge, handle, time-ago) and the gradient status message text.

Infinite Scroll & Animation

Items load in pages of 20. IntersectionObserver triggers next page fetch. First batch enters with staggered slide-up animation.

Modal Structure

Full-screen overlay with a centered card. Opened via the Share button on the profile page. Lazy-loaded with next/dynamic — only mounted when opened.

Orchestrated Entry Animation

The modal uses a 4-stage animation sequence orchestrated via animationStage state.

// Open sequence
requestAnimationFrame → setAnimationStage(1)  // Backdrop
setTimeout(180ms)    → setAnimationStage(2)  // Modal
setTimeout(380ms)    → setAnimationStage(3)  // Content
setTimeout(750ms)    → setAnimationStage(4)  // Complete

// Close sequence
setAnimationStage(0)       // Reverse all
setTimeout(350ms) → unmount

Social Preview Card

Shows how the profile will look when shared. Includes avatar with status dot, name, status badge, optional message, and branding footer.

QR Code

Centered QR code generated from the profile URL. White container with prominent shadow.

Social Sharing Buttons

Five platform icons in a grid. Each opens a popup window for sharing.

Action Row — Copy Link, Embed, More

Three-button row at the bottom of the social section.

Embed Panel

Expandable panel below the action row. Uses CSS grid gridTemplateRows: 0fr → 1fr for smooth expand/collapse.

<img src="https://pocketstatus.com/api/badge/{handle}" alt="{handle}'s status" />

Platform Notes — Share Modal

Layout & Visual Hierarchy

Centered single-column section positioned after the FAQ. Combines the traffic light motif, a short emotional headline, reassurance copy, and one prominent CTA button.

Ambient Background Glow

A blurred gradient blob sits behind the text, using all three brand colors. Positioned at absolute center, pushed behind content with -z-10.

<div className="absolute left-1/2 top-1/2
  -translate-x-1/2 -translate-y-1/2
  w-96 h-40 rounded-full blur-3xl -z-10
  bg-gradient-to-r
    from-emerald-200/40 dark:from-emerald-500/20
    via-amber-200/30  dark:via-amber-500/10
    to-rose-200/30    dark:to-rose-500/15" />

Three-Dot Motif

The traffic light dots appear at 12px (w-3 h-3) above the headline — larger than the footer micro dots, reinforcing brand identity at the conversion moment.

Headline & Copy

CTA Button — Contextual

The button copy and destination change based on authentication state — personalized for returning users vs. new visitors.

<span className="absolute inset-x-0 top-0 h-[1px]
  bg-gradient-to-r from-transparent via-white/30 to-transparent" />

Footer Variants

The footer ships as a single SharedFooter component with a variant prop. The landing page uses the full variant; all other pages use the micro variant.

Landing Footer — Design

Multi-section footer with atmospheric effects, brand storytelling, and conversion opportunity.

Landing Footer — Zone 1: Brand Column

Left column of the top grid. Contains the large logo, tagline paragraph, and three trust badges.

Landing Footer — Zone 2: CTA Card

Right column of the top grid. A frosted card with headline, body copy, and a “Get started free” button — a second conversion opportunity for users who scrolled past the hero and pricing.

Landing Footer — Zone 3: Link Grid

Four-column navigation grid below the brand row. Organized by category with consistent styling.

Landing Footer — Zone 4: Social Icons

Three social/contact icons in the Connect column. Rounded square buttons with hover state.

Landing Footer — Zone 5: Bottom Bar

Three-column bar at the very bottom. Copyright, brand sentiment, and system status indicator.

Micro Footer — Design

Minimal single-row footer for non-landing pages. Maximum information density with minimum visual weight.

Footer — Design Language Principles

The footer design reflects key PocketStatus principles and should be replicated across all platforms.

Platform Notes — Footer

Breakpoints

Container

Grid Systems

Spacing Scale

1 unit = 4px. Tailwind default scale.

Border Radius

Transition Durations

Easing Curves

Keyframe Animations

Interactive Patterns

Mobile vs Desktop Header

Touch Targets

Responsive Scaling

Theme Switching

Surface Treatment — Glass Morphism

Cards and panels use semi-transparent backgrounds with backdrop blur for depth.

bg-white/70 dark:bg-slate-900/70
backdrop-blur-xl
border border-stone-200/50 dark:border-white/6

bg-[#F5F3EF]/80 dark:bg-slate-950/80
backdrop-blur-xl
border-b border-stone-200/50 dark:border-white/6

Dark Mode Color Map

Icon Library

File Assets

Dependencies