# Studio.Design — Design System
> A no-code web design platform for building portfolios and landing pages.
- **Canonical:** https://uiuxskills.com/library/studio-design
- **Source:** https://studio.design
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:15:44.260Z

---

---
version: alpha
name: Studio.Design
description: A no-code web design platform for building portfolios and landing pages.
tone: Professional, minimalist, and empowering.
color-scheme: light
colors:
  primary: "#000000"
  surface: "#FFFFFF"
  on-surface: "#000000"
  surface-dim: "#F5F5F5"
  outline: "#E0E0E0"
  error: "#D32F2F"
  success: "#388E3C"
  on-primary: "#FFFFFF"
  surface-container: "#FAFAFA"
  focus-ring: "#000000"
typography:
  display-lg:
    fontFamily: Helvetica Neue, sans-serif
    fontSize: 48px
  display-md:
    fontFamily: Helvetica Neue, sans-serif
    fontSize: 36px
  headline-lg:
    fontFamily: Helvetica Neue, sans-serif
    fontSize: 30px
  headline-md:
    fontFamily: Helvetica Neue, sans-serif
    fontSize: 24px
  body-md:
    fontFamily: Helvetica Neue, sans-serif
    fontSize: 16px
  label-md:
    fontFamily: Helvetica Neue, sans-serif
    fontSize: 14px
  label-sm:
    fontFamily: Helvetica Neue, sans-serif
    fontSize: 12px
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#333333"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
  input-field:
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#666666"
  badge:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FFEBEE"
    textColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  card-container:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

Studio.Design is a high-performance, no-code platform that prioritizes creative clarity. Its visual identity is defined by a stark, monochromatic palette and generous white space, creating a professional and empowering environment for designers to build without technical friction.

## Colors

The color strategy relies on a strict high-contrast, black-and-white foundation to ensure content remains the primary focus.

*   Primary (#000000): The core color for CTAs, text, and interactive elements.
*   Surface (#FFFFFF): The base background color providing a clean, neutral canvas.
*   On-Surface (#000000): Primary text color for maximum readability against white.
*   Surface-Dim (inferred) (#F5F5F5): A subtle background for secondary sections and container backgrounds.
*   Outline (inferred) (#E0E0E0): Used for borders, dividers, and subtle structural separation.
*   Error (inferred) (#D32F2F): Semantic red reserved strictly for critical errors.
*   Success (inferred) (#388E3C): Semantic green for positive status indicators.
*   Focus-Ring (inferred) (#000000): High-contrast indicator for keyboard navigation and active states.

## Typography

The typography system uses Helvetica Neue exclusively to maintain a neutral, timeless, and professional aesthetic across all interface levels.

*   Display-lg (inferred): Large-scale hero headlines.
*   Display-md (inferred): Secondary section headers.
*   Headline-lg (inferred): Feature section titles.
*   Headline-md (inferred): Card and module titles.
*   Body-md (inferred): Standard paragraph and interface text.
*   Label-md (inferred): Button labels and primary UI metadata.
*   Label-sm (inferred): Small UI labels and status indicators.

## Layout

The layout follows a centered, mobile-first responsive grid that emphasizes vertical rhythm and generous whitespace. The page structure follows a consistent flow: nav, hero, features, social-proof, and footer. The hero pattern centers the headline and CTA above a prominent product visual, while responsive behavior relies on stacking content blocks and collapsing navigation into a drawer on smaller viewports.

## Elevation & Depth

Depth is used sparingly to maintain a flat, modern aesthetic, utilizing subtle single-layer shadows across three levels.

*   Elevation.sm: Subtle lift for small UI elements.
*   Elevation.md: Standard lift for cards and interactive containers.
*   Elevation.lg: Pronounced lift for modals or active overlays.

## Shapes

The brand favors a geometric, clean look with a restrained approach to rounding. Corners are kept sharp or only slightly rounded to reflect the precision of a professional design tool.

The `rounded` scale ranges from 2px for tight inputs to 16px for larger cards, with `rounded.full` reserved for circular UI elements. Avoid using radii larger than `rounded.xl` on standard UI cards to maintain the platform's professional, minimalist feel.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use {colors.primary} for primary actions with high-contrast text. Secondary buttons utilize a transparent background with a {colors.primary} border to maintain a minimalist footprint.

### Card
Cards are defined by a {colors.surface} background and {rounded.md} corners. Use {colors.outline} for borders to provide subtle separation from the background.

### Input Field
Input fields prioritize clarity with {rounded.sm} corners and {colors.outline} borders. On focus, the border transitions to {colors.focus-ring} to provide immediate visual feedback.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for all primary CTAs. | Never use {colors.error} for non-destructive actions. |
| Apply {typography.display-lg} for main hero headlines. | Avoid mixing too many font weights; stick to {typography.body-md} weights. |
| Use {spacing.md} for consistent component padding. | Do not use excessive shadows; keep elevation at {elevation.sm} or {elevation.md}. |
| Apply {rounded.md} to all card components. | Avoid using {colors.surface-dim} as a primary background for text-heavy sections. |
| Use {colors.outline} for all subtle dividers. | Do not use rounded corners larger than {rounded.xl} on standard UI cards. |
| Maintain high contrast between {colors.surface} and {colors.on-surface}. | Never use low-contrast text on {colors.surface} backgrounds. |
| Use {input-field-focus} for active form states. | Never use {colors.surface-container} for high-priority call-to-action buttons. |
| Use {badge-success} for positive status feedback. | Avoid using {typography.label-sm} for primary body copy. |

## Content Style

CTA labels are imperative and action-oriented, typically kept short (e.g., "Start For Free"). They should clearly communicate the benefit of the action.

Headings are direct, concise, and benefit-focused. They avoid marketing fluff, instead stating clearly what the user can achieve with the tool.

Copy is structured for high scannability, utilizing short paragraphs and frequent lists to break up information. Whitespace is used liberally to ensure the content remains the focal point.

## Imagery & Icons

The imagery style is mixed, combining clean product screenshots with Lottie animations and abstract geometric shapes. This approach reinforces the platform's role as a creative design tool. Icons should follow a minimal, geometric line-art style that aligns with the Helvetica Neue typography and the overall monochromatic brand palette.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Studio.Design, a minimal, professional no-code platform. Match its restrained, monochromatic tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.md}` — never hardcode hex values, pixel sizes, or shadow strings.
2. Use only the component variants defined under `components:`. Do not invent a filled secondary button, a ghost card, or any variant the spec omits.
3. Follow the Layout narrative: centered mobile-first grid, consistent page flow (nav → hero → features → social-proof → footer), and content-stacking on small viewports. Use the spacing scale `{spacing.xs}` through `{spacing.2xl}` for all padding and gap values.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it — e.g., asking for `{colors.error}` on a non-destructive action or a radius larger than `{rounded.xl}` on a card — surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (component metadata, Storybook, theme file) exists, those values take precedence.

## Output contract

**Must:**
- Use token names for every color, type scale, radius, spacing, and elevation value.
- Cover hover, focus, and disabled states for all interactive components where the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply a visible `{colors.focus-ring}` outline on all keyboard-focusable elements.
- Keep card radii at `{rounded.md}`; limit radii to `{rounded.xl}` maximum on standard UI cards.
- Use `{elevation.sm}` or `{elevation.md}` for depth; reserve `{elevation.lg}` for modals and active overlays only.

**Must NOT:**
- Invent colors, font families, radii, or shadow values outside the spec.
- Use generic system defaults when a token exists.
- Add emoji, decorative flourishes, or marketing filler copy.
- Reference any specific framework, library, or toolchain.
- Rewrite, replace, or extend page copy, button labels, headings, or navigation items.
- Alter information architecture as a side effect of applying tokens.

## When in doubt
- If the spec doesn't define a value, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous background roles, default to `{colors.surface-container}`; for text on those backgrounds, use `{colors.on-surface}`.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px, per the Layout section.
- If a requested component state isn't in the spec, use the closest semantic token and flag the assumption to the user.