Skip to content

Now in the official shadcn registry directory.

Start free
ai2v0.7
Back to gallery
ai

Comet

Perplexity's AI browser product page — a cinematic dark canvas, dramatic display typography, scroll-orchestrated reveals, a single product surface as protagonist. Film-trailer marketing.

www.perplexity.ai/cometAdded 2026-05-17
Comet - Desktop

Editorial disclaimer

Editorial note

This entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm - do not reproduce brand identity, logo, product copy, or proprietary features.

Fair Use & Gallery Policy
FreePrompt kit

Copy the full design language into your agent

A typed, paste-ready design system brief - philosophy, tokens, rules, techniques, and fitness checks. Drop it into Claude, Cursor, v0 or any coding agent and it builds in Comet’s language, not just a screenshot.

Paste into your agent. No signup, no cost.
Comet's design language is cinematic AI-browser ambition. Dark dramatic canvas; large display typography for hero moments; restrained accent palette; scroll-orchestrated motion reveals; single product surface anchors the page. The marketing surface treats the launch as a film trailer, not a feature comparison.
Main prompt
Use this capture as a design language transfer brief for my project. Adopt the palette (pure black ground dominant, near-white text for primary content, restrained Perplexity-adjacent accent palette — deep blue + warm cream highlight tones, no garish neon), dramatic display typography for hero moments (48-96px), scroll-orchestrated motion (Framer Motion or GSAP for section reveals with cinematic timing 600-1200ms), single product surface as page anchor (no feature comparison grids), Tailwind-standard breakpoints, dark cinematic atmospheric depth via gradients. Treat the page as a film trailer — every transition carries narrative weight, every accent is scarce. Apply the language, not the source brand's copy.
Layout
Single-column cinematic flow with scroll-triggered section reveals; product surface as protagonist.
Content width
Wide cinematic canvas — 1280-1440px hero, narrower 720-960 reading zones.
Framing
Film trailer for a product — dark canvas, dramatic display, single hero surface.
Grid strength
Implicit — motion timing carries rhythm, not column grid.

Dark dramatic canvas with restrained Perplexity-adjacent accents; near-white text; scarce chromatic.

Mode strategyDark-only — cinematic canvas depends on dark ground.
  • Pure #000000 or near-black dominant ground
  • #ffffff near-white primary text and surfaces
  • Deep blue accent (Perplexity brand-adjacent) scarce usage
  • Warm cream highlight tones for body emphasis
  • Restrained chromatic — no garish neon or saturated gradients

Gradients (paste-ready)

Atmospheric cinematic depth zones — radial dark-warm spots, no decorative chromatic
  • Premium grotesque or display serif for hero (48-96px)
  • Body 14-16px with generous line-height 1.6
  • Weight ladder restrained — 400 body, 500-600 emphasis
  • Letter-spacing -0.02em for display, 0 for body
  • Generous tracking for kicker labels (0.18em uppercase)
  • Generous vertical rhythm — 160-240px between major sections
  • Hero breathing room 120-160px above/below
  • Card padding 32-48px
  • Cinematic pacing requires large gaps
Surface styleFlat with atmospheric gradient depth. No card drop shadows on marketing chrome.
  • 0 drop shadow on marketing surfaces
  • Atmospheric radial gradients for hero depth
  • Product screenshot mounted with subtle border + soft inner glow

Techniques

Hero product mount

Product screenshot framed with 1px white/8 border, 16-24px radius, subtle 0 24px 80px rgba(0,0,0,0.4) inner glow.

Atmospheric depth zone

Radial gradient — warm cream at 8-12% opacity radiating from hero anchor.

Radii8 / 12 / 16 / 24Icon treatmentMinimal — icons reserved for navigation, brand mark.Icon setsCustom set, brand-specific
  • Buttons 8-12px radius
  • Product mount 16-24px radius
  • Hero anchor frames 12-16px radius
  • Primary CTA (try Comet / sign up)
    background
    #ffffff
    textColor
    #000000
    fontFamily
    premium-grotesque, sans-serif
    fontWeight
    500
    fontSize
    15px
    padding
    12px 24px
    borderRadius
    10px
    shadow
    0 8px 24px rgba(255,255,255,0.12)
    hover
    subtle warm glow expansion

    Tailwind

    inline-flex items-center gap-2 rounded-[10px] bg-white px-6 py-3 text-[15px] font-medium text-black shadow-[0_8px_24px_rgba(255,255,255,0.12)] transition-all hover:shadow-[0_12px_32px_rgba(255,255,255,0.18)]
  • Cinematic display headline
    fontFamily
    premium-grotesque or display serif
    fontSize
    clamp(48px, 8vw, 96px)
    fontWeight
    400
    letterSpacing
    -0.02em
    lineHeight
    1.05
    color
    #ffffff

    Tailwind

    text-5xl font-normal leading-tight tracking-tight text-white md:text-7xl lg:text-8xl
  • Product hero mount
    border
    1px solid rgba(255,255,255,0.08)
    borderRadius
    20px
    background
    #0a0a0a
    shadow
    0 24px 80px rgba(0,0,0,0.4)
    padding
    0

    Tailwind

    rounded-[20px] border border-white/[0.08] bg-[#0a0a0a] shadow-[0_24px_80px_rgba(0,0,0,0.4)]
LevelexpressiveDurations400ms / 600ms / 900ms / 1200ms

Easings

cubic-bezier(0.16, 1, 0.3, 1)cubic-bezier(0.22, 1, 0.36, 1)
HoverSubtle glow expansion on CTAs, No scale, no position shift

Scroll patterns

  • Cinematic section reveals — fade + 24px translate, timed to scroll position
  • Hero product surface parallax or zoom-in
  • Restraint between sections — long pauses between reveals
  • Motion is narrative weight
  • Respect prefers-reduced-motion — collapse all reveals to instant
  • Each section transition carries story
  • Hover changes glow/colour, never position
  • Focus rings: 2px white ring at 2px offset
  • Active state 95% opacity
Approachmobile-first

Tailwind defaults (640/768/1024/1280/1536) — cinematic respects all breakpoints.

  • <768: hero headline scales to 48-56px, single column cinematic flow
  • 768-1024: 720px content rail, hero 64-80px
  • ≥1024: full cinematic canvas 1280-1440px, hero 80-96px
  • Near-white on black passes WCAG AAA
  • Focus visible always present even on dark surfaces
  • Cinematic motion respects prefers-reduced-motion globally
Next.js (assumed)Framer Motion or GSAP for scroll choreographyWebGL or video for hero product surface (potential)

Typography + cinematic motion + single product surface = identity. Minimal illustration.

  • Hero display webfont preloaded
  • Scroll-triggered reveals via Framer Motion or GSAP
  • Product screenshot/video mounted with priority loading
  • Trust the product surface to do the marketing
  • Use cinematic display typography for hero moments
  • Reserve accents scarcely
  • Treat each section transition as narrative
  • Don't add feature comparison grids
  • Don't use garish neon gradients
  • Don't ship half-baked scroll-trigger motion
  • Don't add product feature checkboxes — cinema over commerce
  • Dark-only — cinematic canvas non-negotiable
  • Restrained accent usage — no chromatic decoration
  • Single product surface as page anchor
  • Background dominant: pure dark canvas
  • Display typography 48-96px on hero
  • Scroll-triggered reveals present
  • Single hero product surface visible
  • No feature comparison table

Design tokens

Observed token system

Color, type, spacing, gradients, and stacking order captured from the live page and rendered here as living, paste-ready previews.

Inspector

Observable layers

Structure, breakpoints, motion, fonts, and images captured from the live page and kept paste-ready alongside the tokens.

Depth-first walk of the meaningful sections. 2 nodes across 2 levels, shallow to deep by color.

  • body1
    • div (×2)main

Accessibility

Contrast matrix

4 combinations - 4 pass AA - 2 pass AAA. Each pair is previewed with its real foreground on background; APCA Lc sits alongside the WCAG 2.1 ratio for draft WCAG 3 awareness.

Normal text passes AAALarge text passes AAA
fg
#313131
bg
#D9D9D9
APCA Lc
+77
Use
foreground on neutral
Normal text passes AAALarge text passes AAA
fg
#D9D9D9
bg
#313131
APCA Lc
-78
Use
neutral on foreground
Normal text passes AALarge text passes AAA
fg
#0000EE
bg
#D9D9D9
APCA Lc
+66
Use
brand on neutral
Normal text passes AALarge text passes AAA
fg
#D9D9D9
bg
#0000EE
APCA Lc
-68
Use
neutral on brand
Industry
ai
Theme
Dark
Added
2026-05-17
www.perplexity.ai/comet

FAQ

Questions people ask about Comet

3questions

Answers are pulled from the curator verdict and design brief - the same text your AI agent sees when it paste-reads this page.

Compare this with

Side-by-side reads sharing this design signal.