Design system Paid source13 components

Perplexity-inspired Research Desk

An unofficial, original Perplexity-inspired interface study with 13 focused specimens supported by the live product and content experience.

Includes DESIGN.md, tokens.json, full CSS, Tailwind v4 token mapping and matching UI specimens. Preview for free; protected guidance and style downloads require Starter or Super. Framework installation and theme support are verified only where listed.

Theme support:: Unverified
Installation:: No verified installation path listed

Delivered component specimen

129

Synthesize path

HTML/CSS · JavaScript

FFrontend Forever

Design foundations

Inspect the kit's typography, palette, icons, spacing and motion.

Style identity

Perplexity-inspired Research Desk

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.

Reference style: dark workspace first with warm light fallback

Visit website

Typography

Font families

pplxSans

workspace navigation, question composer, controls, and answer-oriented UI

pplxSans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

Font website

Weights: 400, 500, 600
Sizes: 12–56px
Line height: 1.05–1.6
Tracking: -0.035em to 0

Fallback: 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, monospace

Font website

Weights: 400, 500
Sizes: 11–14px
Line height: 1.3–1.5
Tracking: 0 to 0.04em

Fallback: SFMono-Regular, Menlo, Consolas, monospace

Palette

Core colors

Charcoal canvas

#0d1111

workspace ground

Desk surface

#151d1d

composer and cards

Raised desk

#1e2a2a

hover, mode, and selected surfaces

Desk border

#344244

quiet workspace rules

Paper text

#f0faf7

primary copy on dark

Muted text

#a9beb9

helper text and inactive rail

Research teal

#2fadb1

search, active mode, and primary action

Bright teal

#5bd8d2

hover and focus

Coral signal

#ed8b6b

secondary tool or alert cue

Success

#6bc997

complete research state

Warning

#ddb45b

source or tool attention

Danger

#dc756b

failed search or unavailable tool

Type scale

Responsive hierarchy

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

Layout rhythm

Density: dense workspace rails with generous question focus
Base unit: 4px
Max width: 1280px
Section gap: 32–72px
Card padding: 16–20px
Element gap: 8–12px

Iconography

compact utility line icons with geometric workspace symbols

1.5px with rounded joins stroke · 16px / 20px / 24px

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.

Perplexity custom inline SVG icon set npm package

System metrics

Radius

control 8pxcard 12pxcomposer 18pxpanel 20pxpill 999px

Spacing

micro 4pxtool gap 8pxcontrol inset 12pxcard inset 16pxgrid gap 20px

Motion

tool 120ms ease-outmode 180ms cubic-bezier(.2,.8,.2,1)answer reveal 360ms cubic-bezier(.2,.8,.2,1)reduced motion remove transforms and pulsing

Elevation

flat workspace

1px border; no shadow

composer

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

#0d1111

workspace ground

desk surface

#151d1d

composer and cards

raised desk

#1e2a2a

active modes and hover

light canvas

#f7faf9

explicit light fallback

light surface

#ffffff

light cards and controls

light border

#d9ebe5

light workspace rule

Guidelines

Do

Make the question composer the clear first action.
Use the rail to reveal product scope without competing with the question.
Keep surfaces near-flat and use teal only for active research intent.
Pair answer or tool states with readable labels and source context.

Don't

×Do not capture or reproduce authenticated session history.
×Do not turn the rail into a dashboard full of metrics.
×Do not use teal as ambient decoration across every surface.
×Do not let mode controls hide their selected state from keyboard users.

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.

Assigned collection

Perplexity-inspired Research Desk Elements

13 published components in collection order

Components

Built from the same system

These working component previews are supplied with the kit. Open a component to inspect its code; the reference screenshots show the original website.

Open collection

129

Synthesize path

HTML/CSS · JavaScript

HTML/CSS · JavaScript

Frontend Forever

More AI Kits

Postman-inspired API Orbit

An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.

v0-inspired Prompt Workshop

An unofficial, original v0-inspired Prompt Workshop system grounded in 16 retained, evidence-backed interface patterns.

Borderless Ledger — Wise-inspired AI Kit

13 focused, original elements for Borderless Ledger.

Runway-inspired Real-World Studio

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.

Observable-inspired Signal Notebook

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.

Replit-inspired Build Canvas

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.