An unofficial, original Superhuman-inspired product system with 13 evidence-backed elements for Focusline's focused workflow language.
Foundations
A public overview of the typography, palette, icon language, spacing, shape, and motion used throughout this AI Kit.
Style identity
An original work suite shaped by Superhuman's current Mail, Grammarly, Docs, and Go story: warm high-contrast surfaces, fast writing flows, compact message states, and proactive AI beside the active context.
light-first with an expressive dark companion themeTypography
Super Sans VF
Observed Superhuman family for body copy, navigation, hero, product headings, controls, and message content.
Super Sans VF, system-ui, -apple-system, Segoe UI, Roboto, sans-serifFallback: system-ui, -apple-system, Segoe UI, Roboto, sans-serif
Super Serif VF
Observed expressive editorial option for campaign accents and long-form statements.
Super Serif VF, Georgia, serifFallback: Georgia, serif
Super Sans Mono VF
Observed technical metadata and compact product detail family.
Super Sans Mono VF, SFMono-Regular, ui-monospace, monospaceFallback: SFMono-Regular, ui-monospace, monospace
Palette
Paper
#fffefdObserved light page canvas
Ink
#292827Primary message and body text
Quiet panel
#f1efedGrouped navigation, metadata, and secondary content
Dark canvas
#101112Explicit dark theme background
Coral action
#ff6b5fPrimary action and contextual emphasis
Warm signal
#ffb26bScheduling and proactive assistant state
Healthy
#5dd5a2Complete or ready state
AI violet
#a89cffGo assistant and contextual AI accent
Type scale
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Hero | 64px | 540 | 0.96 | -0.04em |
| Hero mobile | 42px | 540 | 1.0 | -0.035em |
| Section heading | 40px | 540 | 1.06 | -0.03em |
| Product heading | 26px | 460 | 1.3 | 0 |
| Body | 16px | 460 | 1.5 | 0 |
| Interface label | 14px | 540 | 1.35 | 0 |
| Metadata | 12px | 460 | 1.45 | 0.03em |
Spacing & shape
Iconography
Use currentColor and align icons to message baselines. Pair icon-only actions with accessible labels and keep status dots secondary to text.
System metrics
Radius
Spacing
Motion
Elevation
Thread
0 1px 0 rgba(41,40,39,.06)Default message and task separation
Context panel
0 14px 34px rgba(27,22,22,.14)Assistant, schedule, and focused side panel
Focus ring
0 0 0 3px rgba(255,107,95,.34)Keyboard focus and active composition
Surfaces & shape
Paper canvas
#fffefdLight-first suite background
Quiet group
#f1efedNavigation and secondary content
Dark canvas
#101112Dark theme background
Dark raised
#27292aSelected and grouped content in dark mode
Guidelines
Imagery
Use original message rows, assistant bubbles, writing surfaces, and abstract warm/coral shapes. Avoid bundled product screenshots, portraits, customer logos, and downloaded campaign photography.
Layout
Use a 1200px rail with 24px desktop and 16px mobile gutters. Keep message density high in product specimens, while suite sections breathe at 64–96px. Collapse side panels below 760px and keep the active thread first in reading order.
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.