Priority Post

Overview

Priority Post is an intelligent Gmail triage platform that transforms email chaos into calm, organized clarity. It serves professionals drowning in inbox volume by automatically categorizing, prioritizing, and surfacing only the messages that demand immediate attention. The design aesthetic is "Calm Minimalism with Glassmorphic Depth"—a nature-inspired visual language that combines a serene teal accent (#087b72) with soft, frosted glass surfaces (backdrop-filter: blur(18px), background: rgba(255, 255, 255, 0.54)) to evoke both sophistication and approachability. The emotional response is one of control: users feel empowered, not overwhelmed.

The brand voice is precise, reassuring, and human-centered. Priority Post speaks in active, declarative sentences that respect the user's time. Vocabulary leans toward clarity over jargon: "Urgent queue" not "High-priority message thread"; "Needs Reply" not "Action Required Items". The tone is calm but authoritative—like a trusted assistant who has already done the hard work of thinking. Example sentence in brand voice: "23 changes synced. Your urgent queue is clear."

Colors

The color system is rooted in a "nature-inspired calm" philosophy: a dominant teal primary (#087b72) paired with warm supporting accents (amber #b66a1e for notifications, red #b3392f for security alerts, blue #3f5e91 for metadata). The surface stack uses a subtle warm-white gradient (background: linear-gradient(135deg, rgba(236, 226, 238, 0.86) 0%, rgba(248, 250, 248, 0.92) 34%, rgba(228, 243, 239, 0.9) 67%, rgba(249, 239, 229, 0.78) 100%)) to create visual warmth without distraction. Primary (#087b72) is used exclusively for CTAs (the "Run" button), active states (nav-item.active with inset 3px 0 0 teal), and focus indicators. Secondary (#b66a1e) appears as badge backgrounds and notification counts to signal actionable items. Tertiary (#3f5e91) is reserved for metadata and secondary infor

Typography

The type system uses Inter exclusively across all weights (400, 500, 600, 700, 800) to create a cohesive, modern voice. Display (60px, 700, -0.04em letter-spacing) is reserved for hero moments; Headline-lg (32px, 700, -0.02em) anchors major sections like "Urgent queue"; Headline-md (24px, 700) is used for summary card numbers; Title-lg (19px, 600) labels subsections; Body-lg (16px, 400) is the default reading size; Body-md (13px, 400) is used for secondary copy and descriptions; Label-md (13px, 700, 0.08em) is applied to all button text and navigation labels to create visual weight and scannability; Label-sm (11px, 800, 0.08em) is used for metadata, timestamps, and category tags. The letter-spacing progression (tighter at display sizes, looser at label sizes) creates visual hierarchy and i

Layout

The page uses a fixed 4-column grid layout (62px rail + 218px sidebar + minmax(560px, 1fr) workspace + 372px inspector) to create a stable, scannable information architecture. The container max-width is 1180px, constrained within a 1720px outer shell with 14px margin on all sides. White-space is semantic: lg spacing (20px) separates major sections (topbar from summary-strip, summary-strip from message-list); md spacing (14px) separates cards and list items; sm spacing (8px) separates inline elements (icon + label in nav-item). The workspace uses a 12-column grid internally for flexible content layout. Padding is consistent: 20px on main workspace, 18px on sidebar and inspector, 16px on rail. The gutter between grid columns is 18px, creating breathing room without excessive whitespace. The

Elevation & Depth

Depth is achieved through a layered glassmorphic system rather than traditional shadows. Level 1 (Base): The dynamic gradient background (linear-gradient with 4 color stops) provides the foundational energy. Level 2 (Standard Cards): backdrop-filter: blur(18px), background: rgba(255, 255, 255, 0.54–0.70), border: 1px solid rgba(255, 255, 255, 0.78), with an inset highlight (box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset) to suggest light refraction. Level 3 (Elevated/Selected): backdrop-filter: blur(18px), background: rgba(255, 255, 255, 0.94), border: 1px solid rgba(15, 118, 110, 0.72), w

Shapes

The shape philosophy is "Soft-Technical Precision"—rounded corners that feel approachable without sacrificing clarity. Buttons and pills use 14px radius (rounded.lg) to create a friendly, clickable appearance; cards and containers use 18px radius (rounded.xl) for major surfaces; inputs and small components use 8px radius (rounded.DEFAULT) for a more technical feel; the rail and sidebar use sharp corners (0px) to anchor the interface as a structural frame. The app-shell itself uses 22px radius to create a unified, app-like container. Badges and notification counts use full radius (999px) to sig

Components

Action Elements Buttons use a consistent 40px height with 0 14px padding for primary actions, and 36px height with 9px 11px padding for secondary actions. Primary buttons (button-primary) use a teal gradient (linear-gradient(180deg, #149489, #087b72)) with white text and a shadow (0 10px 22px rgba(8, 123, 114, 0.18)). On hover, the background shifts to the darker teal (#075952) with the same shadow maintained. The "Run" button is the most prominent CTA and uses this treatment. Secondary buttons (button-secondary) use a transparent background with a 1px border (rgba(214, 209, 199, 0.74)) and dark text; on hover, the background becomes rgba(255, 255, 255, 0.62). Ghost buttons (button-ghost) use a semi-transparent white background (rgba(255, 255, 255, 0.11)) with white text for use on the

Do's and Don'ts

**Do**

• Do use the teal primary (#087b72) exclusively for CTAs, active states, and focus indicators—it's the visual anchor that guides user attention.
• Do apply the glassmorphic treatment (backdrop-filter: blur(18px), semi-transparent white background, 1px border) consistently across all cards and surfaces to create visual cohesion.
• Do use label-md (13px, 700, 0.08em) for all button text and navigation labels to create visual weight and improve scannability.
• Do maintain the 14px margin between major sections (topbar, summary-strip, message-list) to create breathing room and reduce cognitive load.
• Do use the full-radius badge treatment (999px) for notification counts and alerts to signal urgency and draw attention.

**Don't**

• Don't use shadows alone for depth—rely on the glassmorphic layer stack (backdrop-filter + semi-transparent backgrounds + borders) to create visual hierarchy.
• Don't apply the primary teal to non-interactive elements or backgrounds; it's reserved for CTAs and active states only.
• Don't mix rounded corner sizes within a single component family (e.g., don't use 8px on some buttons and 14px on others).
• Don't exceed 0.94 opacity on card backgrounds; maintain the frosted glass effect by keeping backgrounds semi-transparent.
• Don't use system fonts or fallback sans-serif; Inter is the only approved typeface across all weights and sizes.