A bright, editorial form language for asking one useful question at a time, adapting the path, and turning responses into action.
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 bright, editorial form language for asking one useful question at a time, adapting the path, and turning responses into action.
Reference style: Warm editorial minimalism, high-contrast purple action, and a conversational rhyTypography
Twklausanne
Primary editorial UI, navigation, question copy, and body text.
Twklausanne 500, Twklausanne, Arial, Helvetica, sans-serifFallback: Arial, Helvetica, sans-serif
Apercu Pro
Supporting utility and form-builder text observed in the live site font declarations.
Apercu Pro, Arial, Helvetica, sans-serifFallback: Arial, Helvetica, sans-serif
Apercu Mono Pro
Eyebrows, progress metadata, and compact response-system cues.
Apercu Mono Pro, ui-monospace, SFMono-Regular, Menlo, monospaceFallback: ui-monospace, SFMono-Regular, Menlo, monospace
Palette
Canvas light
#fffaf2Primary light page or work field
Canvas dark
#1d1424Primary dark page or work field
Surface light
#ffffffRaised content surface in light mode
Surface dark
#271b30Raised content surface in dark mode
Border
#e7dcd1Low-contrast separation and control edges
Ink
#251c2aPrimary text and interface content
Muted ink
#766a76Supporting copy and metadata
Accent
#7352d6Primary action, selection, or brand signal
Accent strong
#5935b7Pressed and high-contrast action state
Accent soft
#ece5ffTinted selection or supporting surface
Secondary signal
#c1e86cCollaboration, health, or growth cue
Tertiary signal
#f28f72Human, warm, or threat cue
Type scale
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Hero | 72px / 44px mobile | 700 | 0.98 / 1.05 | -0.055em |
| Section | 48px / 34px mobile | 700 | 1.02 / 1.08 | -0.045em |
| Question | 32px / 26px mobile | 500 | 1.1 | -0.03em |
| Body large | 20px / 18px mobile | 500 | 1.45 | -0.01em |
| Body | 16px / 15px mobile | 500 | 1.5 | 0 |
| Mono label | 12px | 400 | 1.25 | 0.04em |
Spacing & shape
Iconography
Use currentColor and keep icons secondary to the question or CTA. Preserve a text label for branching, upload, and navigation actions; the pack uses original CSS shapes rather than copied marks.
System metrics
Radius
Spacing
Motion
Elevation
Question card
0 12px 36px rgba(71,42,91,.10)Lift a focused response surface
Floating action
0 6px 18px rgba(71,42,91,.14)Separate one primary CTA from warm background
Surfaces & shape
Warm canvas
#fffaf2Editorial page field
Quiet panel
#f5ede4Chapter or helper grouping
Ink
#251c2aQuestion and response copy
Action
#7352d6Primary progress and CTA signal
Guidelines
Imagery
Use CSS-built question cards, response chips, progress marks, branching arrows, and restrained editorial color fields. Avoid real screenshots, Typeform marks, copied photography, or proprietary illustrations. Visuals should clarify asking, adapting, measuring, or activating a response.
Layout
Use a compact navigation, editorial hero, clear ASK / ACT / LEARN chapters, product/form visual moments, template and research proof, analytics, and plan CTA. Keep the respondent path narrower than the marketing grid. At 760px and below, stack chapters and controls, keep one next action per section, and do not make branching logic depend on horizontal scrolling.
Assigned collection
13 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.
