Lumio Studio
A warm, editorial design system: a tinted cream canvas, warm-ink text, a single confident coral accent, and dark navy surfaces for product chrome.
{
"tokens": {
"color": 25,
"type": 14,
"radius": 7,
"spacing": 8
}
}The token palette
Every swatch below is a live color token. Edit, add, remove or randomize them in the sidebar and the whole sheet re-themes.
Type scale
Each role pairs machine-readable metadata with a live sample rendered in the exact token.
Buttons
Accent fill for primary actions, canvas + hairline for secondary. Dark surfaces get an elevated variant.
Cards, mockups & model tiles
Reason through complexity
Multi-step reasoning across long context — the cream card is the workhorse content tile.
Understand the codebase
From small refactors to large migrations, read code with the depth of a senior engineer.
async function migrate(file) {
const code = read(file)
// plan, then rewrite
return agent.refactor(code)
}Opus
The most capable tier for complex agentic tasks and long-horizon reasoning.
View capabilities →Sonnet
Balanced speed and capability — the everyday workhorse for production systems.
View capabilities →Start building today
Full-bleed accent surface with a canvas-button CTA. The single loudest moment in the system.
Connect everything
Drive
Read, summarize and draft across all your docs.
Slack
Bring the assistant into team conversations.
Notion
Search, edit and reorganize your knowledge base.
GitHub
Review PRs, run refactors, fix issues.
Linear
Triage tickets and draft replies in your voice.
Figma
Read design specs and translate them to code.
Plans
Free
- Limited daily usage
- Web access
- Mobile + desktop apps
Pro
- 5× more usage
- Project workspaces
- Advanced features
Team
- Centralized billing
- Admin console
- Priority bandwidth
Enterprise
- SOC 2 + HIPAA
- SSO + IDP
- Custom integrations
Inputs
Badges
Pill badges on a card surface, or accent fill with uppercase for emphasis.
Spacing Scale
The spacing tokens, drawn to scale. Compose layouts from these steps.
Border Radius
The rounding tokens. Tighter radii for controls, larger radii for content cards.
Elevation & Depth
Color-block first, shadow rare. The canvas-vs-dark contrast does most of the elevation work.
Flat / Canvas
Body sections, top nav.
Card surface
Feature cards, content cards.
Dark mockup
Code editors, model cards, footer.
Accent callout
Full-bleed CTA card.
Hairline border
Canvas card with 1px hairline.
Focus ring
3px accent at 22% alpha around inputs.
Responsive behavior
| Name | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Single column; nav collapses; CTAs + tiers stack full-width. |
| Tablet | 768–1023px | Grids collapse toward 2-up; nav condenses. |
| Laptop | 1024–1279px | Tightened gutters; 3-up grids retained. |
| Wide | ≥ 1280px | Full multi-column grids; centred 1200px column. |
Touch targets
- Primary CTA at min 40 × 40px.
- Icon button 36 × 36 — visually centered.
- Text input height 40px.
Collapsing strategy
- Top nav collapses below 1024px container width.
- Grids reduce columns rather than scaling content.
- Pricing tiers collapse 4 → 2 → 1; featured stays distinct.