An unofficial, original Perplexity-inspired interface study with 13 focused specimens supported by the live product and content experience.
Foundations
A public overview of the typography, palette, icon language, spacing, shape, and motion used throughout this AI Kit.
Style identity
A research workspace language: deep charcoal canvas, near-flat surfaces, a quiet teal action signal, persistent rail navigation, and a centered question composer with mode and project controls.
dark workspace first with warm light fallback themeTypography
pplxSans
workspace navigation, question composer, controls, and answer-oriented UI
pplxSans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serifFallback: ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif
System monospace
command hints, source identifiers, model metadata, and compact tool labels
ui-monospace, SFMono-Regular, Menlo, Consolas, monospaceFallback: SFMono-Regular, Menlo, Consolas, monospace
Palette
Charcoal canvas
#0d1111workspace ground
Desk surface
#151d1dcomposer and cards
Raised desk
#1e2a2ahover, mode, and selected surfaces
Desk border
#344244quiet workspace rules
Paper text
#f0faf7primary copy on dark
Muted text
#a9beb9helper text and inactive rail
Research teal
#2fadb1search, active mode, and primary action
Bright teal
#5bd8d2hover and focus
Coral signal
#ed8b6bsecondary tool or alert cue
Success
#6bc997complete research state
Warning
#ddb45bsource or tool attention
Danger
#dc756bfailed search or unavailable tool
Type scale
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Question hero | 56px | 500 | 1.0 | -0.05em |
| Question mobile | 32px | 500 | 1.04 | -0.04em |
| Section | 30px | 600 | 1.08 | -0.035em |
| Card title | 18px | 600 | 1.2 | -0.02em |
| Body | 15px | 400 | 1.55 | 0 |
| Tool label | 13px | 500 | 1.35 | 0 |
| Command hint | 11px | 500 | 1.4 | 0.03em |
Spacing & shape
Iconography
Use icon plus text in the rail, keep tool buttons at 44px on mobile, and provide accessible names for every icon-only command or file action.
System metrics
Radius
Spacing
Motion
Elevation
flat workspace
1px border; no shadowcomposer
0 18px 48px rgba(0,0,0,.28)command menu
0 16px 48px rgba(0,0,0,.38)focus
0 0 0 3px rgba(47,173,177,.3)Surfaces & shape
charcoal canvas
#0d1111workspace ground
desk surface
#151d1dcomposer and cards
raised desk
#1e2a2aactive modes and hover
light canvas
#f7faf9explicit light fallback
light surface
#fffffflight cards and controls
light border
#d9ebe5light workspace rule
Guidelines
Imagery
Use original source cards, abstract research notes, minimal tool diagrams, and source-aware status chips. Do not reuse the source product mark, live user sessions, answer content, or proprietary illustrations.
Layout
Keep the rail persistent on desktop with a 260–320px column and let the question composer sit on a calm centered canvas. Collapse the rail to a top utility row below 720px, preserve mode controls, and let tool chips wrap without horizontal overflow.
Concept
Use the file tree to move between the full reference preview, implementation guidance, portable tokens, and framework-ready styles. Each surface stays focused, so you can understand the system before copying code.
Assigned collection
13 published components in collection order
Components
Production-ready specimens from this AI Kit's approved collection.
More like this
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
An unofficial, original v0-inspired Prompt Workshop system grounded in 17 retained, evidence-backed interface patterns.
13 focused, original elements for Borderless Ledger; categories are retained only when supported by the live reference. Published flags remain disabled.
A high-contrast studio language for a platform that moves between creative production, developer workflows, robotics, research, and enterprise. The system uses a dark stage, warm action color, and compact cross-platform wayfinding without copying Runway's wordmark, content, or media. Responsive previews and 8 evidence-backed interface elements.
An original, unofficial Observable-inspired system for reactive notebooks, executable explanations, and data visualization surfaces. It retains only 11 focused elements supported by Observable's live notebook and chart workflows.
A friendly builder language for moving from prompt to app: vivid purple/green accents, a prominent idea field, artifact type selection, parallel execution, built-in infrastructure, team plans, agent chat, and a clear publish handoff. It is an original study without Replit's logo, pixel font, testimonials, screenshots, or protected copy. Responsive previews and 14 evidence-backed interface elements.