Style identity
Utility Craft
A documentation-led utility CSS study where responsive code, token-level control, and examples carry the product story.
Light and dark technical minimalism with code UI and restrained gradients themeDesign system Pro AI Kit8 components
Utility Craft — Tailwind CSS-inspired AI Kit
8 focused, original elements for Utility Craft; categories are retained only when supported by the live reference. Published flags remain disabled.
Desktop · 1440 × 11649
Foundations
The visual decisions behind the system
A public overview of the typography, palette, icon language, spacing, shape, and motion used throughout this AI Kit.
Visit website
Typography
Font families
Inter
Primary UI, navigation, copy, and calls to action
inter, "inter Fallback", system-ui, sans-serif- Weights
- 400, 500, 600, 700; variable 100–900
- Sizes
- 12px labels; 14px controls; 16px body; 40px section; 96px display
- Line height
- 1.25 display; 1.5 body
- Tracking
- -0.05em display; normal body
Fallback: "inter Fallback", system-ui, sans-serif
Plex Mono
Code examples, keyboard hints, and implementation metadata
plexMono, "Plex Mono Fallback", ui-monospace, monospace- Weights
- 400, 500, 600
- Sizes
- 11px metadata; 12–13px code
- Line height
- 1.55–1.7
- Tracking
- normal
Fallback: "Plex Mono Fallback", ui-monospace, SFMono-Regular, Menlo, monospace
Palette
Core colors
canvas / light
#fffffflight page backdrop
surface / light
#f9fafblight card/control surface
border / light
#e5e7eblight hairline separation
text / light
#111827light primary text
muted / light
#4b5563light supporting text
accent / light
#0ea5e9light action signal
accent2 / light
#a855f7light secondary action signal
canvas / dark
#030712dark page backdrop
surface / dark
#111827dark card/control surface
border / dark
#374151dark hairline separation
text / dark
#f9fafbdark primary text
muted / dark
#cbd5e1dark supporting text
accent / dark
#38bdf8dark action signal
accent2 / dark
#c084fcdark secondary action signal
Success
#16a34apositive completion
Warning
#d97706caution
Type scale
Responsive hierarchy
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Display | 96px | 400 | 96px | -4.8px |
| Section | 40px | 500 | 40px | -2px |
| Body | 16px | 400 | 24px | 0 |
| Control | 14px | 500 | 20px | -0.01em |
| Code | 13px | 400 | 20px | 0 |
Spacing & shape
Layout rhythm
- Density
- Compact documentation rhythm
- Base unit
- 4px
- Max width
- 1280px
- Section gap
- 96px
- Card padding
- 24px
- Element gap
- 16px
Iconography
Crisp outline marks and compact utility glyphs
1.5px–2px stroke · 16px / 20px / 24px
Use currentColor inline SVG for unfamiliar actions; pair icon-only controls with an accessible name.
System metrics
Radius
Control 6pxCard 12pxFeature 16pxShowcase 24px
Spacing
Base unit 4pxInline gap 8pxControl gap 12pxCard padding 24pxSection gap 96px
Motion
Interaction 160ms ease-outReveal 500ms cubic-bezier(.2,.8,.2,1)
Elevation
Soft
0 4px 16px rgba(15,23,42,.08)quiet surface separation
Lifted
0 18px 48px rgba(15,23,42,.14)focused proof surface
Surfaces & shape
Canvas
#ffffff / #030712page backdrop
Surface
#f9fafb / #111827card and control surfaces
Accent
#0ea5e9 / #38bdf8action and status emphasis
Guidelines
Do
- Show the observed mechanism beside its claim.
- Keep states and next actions close to their explanation.
- Use semantic color and explicit focus in both themes.
- Let long content wrap or scroll without clipping.
Don't
- ×Do not copy brand marks or protected text.
- ×Do not add generic categories just to increase the count.
- ×Do not make decorative gradients carry essential meaning.
Imagery
Prefer original CSS grids, code panels, color swatches, and abstract gradients; do not reuse Tailwind logos, screenshots, or site illustrations.
Layout
A generous documentation container, compact utility navigation, oversized display statement, live code proof, and responsive demo sections that collapse to one readable column.
Concept
A complete visual language, ready to inspect.
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
Utility Craft Interface Elements
8 published components in collection order
Components
Built from the same system
Production-ready specimens from this AI Kit's approved collection.
More like this
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 17 retained, evidence-backed interface patterns.
Borderless Ledger — Wise-inspired AI Kit
13 focused, original elements for Borderless Ledger; categories are retained only when supported by the live reference. Published flags remain disabled.
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.