A space to try things.

Change the preview theme and width. Move through the tabs with your keyboard. Submit the form to see local feedback.

Workspace

Make room for your next idea.

A few good defaults. Every detail yours.

YOUR CODE. YOUR DESIGN.

Take it beyond the defaults.

Edit the CSS and HTML, apply your changes, then take the result into your project.

CSS

.my-workspace {
  --dvy-brand: #087565;
  --dvy-on-brand: #ffffff;
  --dvy-radius-md: .75rem;
  --dvy-glass-radius: 1.5rem;
  --dvy-glass-blur: 12px;
  --dvy-glass-opacity: .88;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: radial-gradient(ellipse at top right, #a4dfcc, transparent 70%), #edf3ee;
}
.custom-card { width: min(100%, 25rem); }
.custom-card .dvy-card-content { padding: 2rem; }
.custom-card h1 { font-size: 2rem; line-height: 1.1; letter-spacing: -.05em; margin: 1.25rem 0 1rem; }
.custom-card p { color: var(--dvy-muted); line-height: 1.7; }
.custom-card .dvy-label { display: block; margin-top: 1.5rem; }
.custom-card .dvy-input { margin: .5rem 0 1rem; }

Preview is up to date

Live previewISOLATED CANVAS

Uses real DEVVY styles. HTML and CSS run in an isolated preview; scripts, form submissions and external assets are blocked. For React logic, edit and download the TSX source on any component page.

Keep exploring

Each component page has a focused live example, prop reference and complete source.

Browse the component foundation →

A space to try things.

Component preview

Make room for your next idea.

Your space, your people.

Take it beyond the defaults.

Keep exploring