Studio
Studio/Kits
New kit
JJADEInterface system
Tactile · depth-first · light-native

Built to be
touched.

A complete interface system for precise products. Every surface sits on a real plane: raised at rest, seated into a well on contact. Nothing floats by accident.

126
components
3
depth planes
1
bold color
Good morning, Scott3 devices · all connected
MX Master 4Battery
68%
Smart actionsAdaptive shortcuts
Foundations

The rules everything obeys

Four systems make every Jade component predictable before a person touches it.

01

Depth, not borders

Sunken, canvas, and raised are distinct planes. Light comes from above, so elevation is felt instead of outlined.

SunkenCanvasRaised
02

One bold color

Jade marks the primary action, selected state, or live signal. Neutral ink carries everything else.

03

4px grid. 44px targets.

Spacing follows one scale. Interactive controls never shrink below a comfortable mobile target.

481216243244
04

Motion with intent

Touch responds quickly; traveling surfaces take longer. Reduced motion turns every transition into a clean cut.

Type system
Display / Relay BoldTouch the surface
Heading / Relay SemiboldClear structure at every size
Body / Relay Regular

Concise interface copy stays readable without competing with the object or task.

Data / system mono68% · 110ms · #10DEBF
Complete visual inventory

Every component. Nothing hidden.

Explore the live kit first. Open Build only when you need code, a prompt, anatomy, or framework translation.

Actions

Things you press

Raised at rest, seated into a well on contact. The press is part of the product.

8 components
Actions

Button

Actions

Icon button

Actions

Floating action button

Actions

Split button

Actions

Button group

Actions

Toggle button

Actions

Response feedback actions

Forms

Things you fill and flip

Inputs live below the canvas while switches, sliders, and steppers keep their physical response.

19 components
Forms

Text field

Forms

Textarea

Forms

Select

Forms

Affixed field

Forms

Prompt composer

Forms

Checkbox

Forms

Radio group

Density
Forms

Switch

Forms

Slider

Forms

Bounded range

Budget range$24k - $78k
Forms

Numeric stepper

0
Forms

One-time code

One-time code
Forms

Tag input

Forms

File dropzone

Forms

Date pill

Forms

Color swatch picker

Forms

Rating control

Forms

Software keyboard

Selection

Small things that label and live

Identity, status, and choice stay compact, legible, and touchable.

11 components
Selection

Chip

Selection

Filter chip

Selection

Removable chip

Selection

Avatar chip

Selection

Badge

Badge
Selection

Status pill

Status pill
Selection

Status dot

Status dot
Selection

Avatar

AL
Selection

Avatar group

ALSKMJ
Selection

Model selector

Selection

Category tag

Category tag
Feedback

Things that tell you what happened

Progress, recovery, confirmation, and empty states answer the next user question.

14 components
Feedback

Toast

✓ToastThe latest Jade draft has been saved.
Feedback

Banner

Feedback

Inline alert

✓Inline alertThe latest Jade draft has been saved.
Feedback

Progress bar

Feedback

Progress ring

Feedback

Gauge

68System health
Feedback

Spinner

Feedback

Skeleton

Feedback

Empty state

Feedback

Tooltip

Feedback

Thinking indicator

Feedback

Streaming response

Jade is assembling the complete product surface

Feedback

Inline confirmation

✓Inline confirmationThe latest Jade draft has been saved.
Feedback

Notification item

JJade is ready for review126 component fixtures passed automated checks.
Overlays

Things that rise above

Bounded decisions enter with depth, contain focus, and return people to the work beneath.

4 components
Overlays

Dialog

Overlays

Bottom sheet

Overlays

Action sheet

Overlays

Popover

Data

Things that organize information

Cards, lists, tables, details, and editorial surfaces keep comparison calm and precise.

17 components
Data

Card

Card

Card

Organizes information for inspection.

Data

Feature card

Feature card

Feature card

Organizes information for inspection.

Data

Glass card

Glass card

Glass card

Organizes information for inspection.

Data

Spotlight card

Spotlight card

Spotlight card

Organizes information for inspection.

Data

Stat card

Stat card

Stat card

Organizes information for inspection.

Data

List

  • OverviewReady
  • ActivityReady
  • SourcesReady
Data

Table

Table
NameStatusUpdated
OverviewReady1h
ActivityReady2h
SourcesReady3h
Data

Actionable data grid

Actionable data grid
NameStatusUpdated
OverviewReady1h
ActivityReady2h
SourcesReady3h
Data

Key-value details

Overview
1
Activity
2
Sources
3
Data

Timeline

  1. OverviewRecorded with provenance
  2. ActivityRecorded with provenance
  3. SourcesRecorded with provenance
Data

Accordion

Overview

Organizes information for inspection.

Activity

Organizes information for inspection.

Sources

Organizes information for inspection.

Data

Divider

Divider
Data

Callout

Callout

Callout

Organizes information for inspection.

Data

Code block

const system = "jade";
const state = "ready";
Data

Usage meter

Data

Metadata row

Overview
1
Activity
2
Sources
3
Data

Article card

Article card

Article card

Organizes information for inspection.

Visualization

Relationships you can read

Charts spend color on meaning and preserve the tactile surface around the data.

10 components
Visualization

Sparkline

24.8k+12.4% this month
Visualization

Mini bar chart

Weekly activity
Visualization

Bar chart

Total transactionsWeekly overview
+18.2%
MTWTFSS
Visualization

Stacked bar chart

WorkloadDesign and engineering
DesignEngineering
Visualization

Line chart

RetentionLast seven weeks
84%
Visualization

Area chart

ConversionCompared with last month
+20.3%
Visualization

Heatmap

Contribution rhythm28 active days
Visualization

Gantt timeline

Release timelineJul 14 - Aug 08
ResearchBuildShip
Visualization

Calendar

July 2026
  1. 13
  2. 14
  3. 15
  4. 16
  5. 17
  6. 18
  7. 19
  8. 20
  9. 21
  10. 22
  11. 23
  12. 24
  13. 25
  14. 26
Visualization

Date-range calendar

July 2026
  1. 13
  2. 14
  3. 15
  4. 16
  5. 17
  6. 18
  7. 19
  8. 20
  9. 21
  10. 22
  11. 23
  12. 24
  13. 25
  14. 26
August 2026
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
Compositions

Everything assembled around a task

Application surfaces prove that the kit can organize complete products, not only isolated controls.

17 components
Product compositions

Jade, assembled around real work.

Switch contexts to inspect how the same foundations organize analytics, planning, communication, and billing.

Thursday, July 16

Good morning, Scott.

Revenue$88.5k+18%
Orders124k+12%
Reach32.8k+8%
PerformanceLast seven weeks
+20.3%
Recent activity

1Jade mobile proof passed2h ago

2Token set versioned3h ago

3Release evidence added4h ago

Application

Application shell

Search workspaceSC
Dashboard$88.5k
Application

KPI tile

Total revenue+24%
$42.5k
Application

Project list

Project list
1Jade mobileActive›
2Design tokensReady68%
3Release evidenceReady›
Application

Kanban board

Backlog1
PrioritySystem audit
In progress2
PrioritySystem audit
PriorityMobile proof
Done3
CompleteSystem audit
Application

Mail layout

SJSarah JohnsonReview is ready
MCMichael ChenTimeline updated
EWEmma WilsonSee you at 12:30
Application

Plan and billing

Current planStudio Pro/month

72 of 100 team seats

Application

Pricing card

Professional$24/month

72 of 100 team seats

Application

Profile card

SCScott EllingDesign engineering
Systems
14
Components
126
Application

Media player

Jade in motion00:38 / 01:42
Application

Weather widget

San Francisco64°Clear · feels like 63°
  1. 10a 62°
  2. 12p 64°
  3. 2p 65°
Application

Activity or media card

Activity or media card
1Source importedActive›
2Tokens reviewedReady68%
3Preview approvedReady›
Application

Task card

Task card
1Verify mobile statesActive›
2Review motionReady68%
3Publish evidenceReady›
Application

Focus card

Deep work24:18

Jade component audit

Application

Itinerary card

Itinerary card
108:30 StudioActive›
211:00 ReviewReady68%
315:30 ReleaseReady›
Application

Agent card

Agent card
1AnalyzerActive›
2Design directorReady68%
3Release verifierReady›
Application

Note preview

Jade release notes

Distinct specimens, complete state fixtures, richer product compositions, and verified mobile behavior.

5 min read
Application

Device dashboard

Device dashboard
1MX Master 4Active›
2Studio DisplayReady68%
3Magic KeyboardReady›
Conversation

Interfaces that listen and respond

Human and assistant turns remain distinct without turning the exchange into decoration.

8 components
Conversation

Chat thread

What should we focus on?
I’ll turn the source into a clear, evidenced system.
Conversation

Message bubble

Supports a clear exchange.
Conversation

Citation list

  1. 1Overview
  2. 2Activity
  3. 3Sources
Conversation

Voice orb

Conversation

Suggested prompts

Conversation

Agent roster

What should we focus on?
I’ll turn the source into a clear, evidenced system.
Conversation

AI action

Conversation

Source provenance

  1. 1Overview
  2. 2Activity
  3. 3Sources
Hardware

Controls with a physical memory

Device state, dials, and batteries make the signature tactile language explicit.

5 components
Hardware

Battery indicator

Hardware

Device card

DEVICEDevice cardOnline · 74%
Hardware

Detent dial

Interaction

Reorderable list

Interaction

Draggable card

JJADE

126 components · 3 depth planes · 1 bold color