An unofficial, original OpenAI-inspired interface study with 9 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.
Delivered component specimen
Inspect the kit's typography, palette, icons, spacing and motion.
Style identity
A prompt-first AI platform language: black canvas, warm white type, rounded composer controls, restrained content grids, and concise routes into research, products, stories, and developer work.
Reference style: dark-first editorial canvas with explicit light fallbackTypography
OpenAI Sans
hero question, navigation, product cards, body copy, and controls
OpenAI Sans, Arial, sans-serifFallback: Arial, ui-sans-serif, system-ui, sans-serif
System monospace
developer labels, dates, code-adjacent metadata, and compact technical values
ui-monospace, SFMono-Regular, Menlo, Consolas, monospaceFallback: SFMono-Regular, Menlo, Consolas, monospace
Palette
Black canvas
#060607primary page and prompt canvas
White ink
#f7f7f2primary inverse text
Dark surface
#101012composer, footer, and content blocks
Raised dark
#1b1b1ehover, active, and card surfaces
Dark border
#2c2c31quiet structure
Muted ink
#a6a69fsecondary copy and metadata
Model lime
#b9e93dselected pathway and rare semantic accent
Lime highlight
#d4fa65focus and active emphasis
Violet signal
#9b8cffsecondary research/product accent
Success
#8bd36dcomplete state
Warning
#e2ad54attention state
Danger
#ed7067error state
Type scale
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Prompt hero | 72px | 500 | 0.98 | -0.06em |
| Prompt mobile | 34px | 500 | 1.04 | -0.045em |
| Section | 40px | 500 | 1.0 | -0.045em |
| Card title | 20px | 500 | 1.22 | -0.025em |
| Body | 16px | 400 | 1.55 | 0 |
| Pathway label | 13px | 500 | 1.35 | 0 |
| Metadata | 11px | 500 | 1.4 | 0.03em |
Spacing & shape
Iconography
Use icon-only actions only when the accessible name is explicit; keep the composer arrow and pathway marks quiet so the prompt remains the focal point.
System metrics
Radius
Spacing
Motion
Elevation
flat
1px border; no shadowcomposer
0 16px 40px rgba(0,0,0,.28)menu
0 18px 56px rgba(0,0,0,.36)focus
0 0 0 3px rgba(185,233,61,.3)Surfaces & shape
black canvas
#060607prompt and page ground
composer surface
#101012input and prompt container
raised surface
#1b1b1ecards and active pathways
light canvas
#fbfbfaexplicit light mode fallback
light surface
#fffffflight cards and controls
light border
#dedfdalight structural rule
Guidelines
Imagery
Use original abstract model diagrams, editorial cards, and quiet image placeholders that explain a product or research story. Do not reuse source marks, photography, live cards, or page imagery.
Layout
Treat the prompt composer as the first anchor, then use a long editorial rail with consistent left edges. Keep the global header quiet, allow content grids to step from three columns to one, and preserve 44px controls on mobile.
Assigned collection
9 published components in collection order
Components
These working component previews are supplied with the kit. Open a component to inspect its code; the reference screenshots show the original website.
More AI Kits
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 16 retained, evidence-backed interface patterns.
13 focused, original elements for Borderless Ledger.
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.
