An open model-community language built around search, resource type switching, trending lists, maintainer identity, and clear routes into models, datasets, Spaces, docs, compute, and team plans. It is an original system and does not copy Hugging Face marks, avatars, model names, or source imagery. Responsive previews and 12 evidence-backed interface elements.
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
An open model-community language built around search, resource type switching, trending lists, maintainer identity, and clear routes into models, datasets, Spaces, docs, compute, and team plans. It is an original system and does not copy Hugging Face marks, avatars, model names, or source imagery.
Reference style: open community discovery with dense metadata and yellow semantic accentTypography
Noto Sans
Community headings, navigation, resource cards, and body copy
Noto Sans, ui-sans-serif, system-ui, sans-serifFallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif
System monospace
Technical metadata, counts, command cues, and code-like labels
SFMono-Regular, Menlo, Consolas, monospaceFallback: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
Palette
Dark canvas
#0b0f19Primary dark page background
Dark surface
#111827Card, code, and specimen surfaces
Dark raised
#182235Hover, selected, and raised control surface
Dark border
#27344aHairline structure on dark mode
Dark text
#f3f5faPrimary dark-mode content
Dark muted
#aab4c8Secondary dark-mode content
Light canvas
#fbfbf8Primary light page background
Light surface
#ffffffLight card and specimen surface
Light raised
#f1f2edHover, selected, and raised light surface
Light border
#dedfd7Hairline structure on light mode
Accent
#ffd21fPrimary action and selected state
Accent secondary
#78a8ffFocus, secondary action, or supporting signal
Warm
#ff9f68Attention and editorial emphasis
Ready
#67d7a2Success, ready, or healthy state
Type scale
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Display | 76px | 400 | 0.94 | -0.075em |
| Hero mobile | 38px | 400 | 1.02 | -0.05em |
| Section heading | 48px | 500 | 1.04 | -0.06em |
| Product heading | 24px | 600 | 1.2 | -0.025em |
| Body large | 18px | 400 | 1.6 | -0.01em |
| Body | 16px | 400 | 1.55 | 0 |
| Interface label | 14px | 500 | 1.4 | -0.01em |
| Metadata | 12px | 500 | 1.45 | 0.02em |
Spacing & shape
Iconography
Use compact outline icons for resource types and utility routes, keep them currentColor, and pair unfamiliar symbols with text. Do not reproduce Hugging Face's logo or avatar art.
System metrics
Radius
Spacing
Motion
Elevation
Panel
0 18px 50px rgba(0, 0, 0, 0.18)Large preview and focused content frame
Overlay
0 24px 80px rgba(0, 0, 0, 0.32)Menu, dialog, or floating command surface
Focus ring
0 0 0 3px #ffd21f55Keyboard focus indication
Surfaces & shape
Dark canvas
#0b0f19Dark-first page and specimen background
Dark panel
#111827Primary dark content surface
Light canvas
#fbfbf8Light page and specimen background
Light panel
#ffffffPrimary light content surface
Guidelines
Imagery
Use original abstract modality tiles, resource glyphs, and contributor initials. Avoid downloading live model thumbnails or organization avatars.
Layout
Use a 1200px discovery rail with search-first hierarchy, dense three-column desktop resource sections, and one-column mobile stacking. Keep mega-menu groups readable with explicit headings.
Assigned collection
12 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.
