# html.to.design — Design System
> A Figma plugin that converts any website into fully editable Figma designs.
- **Canonical:** https://uiuxskills.com/library/html-to-design
- **Source:** https://html.to.design/home
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:18:29.555Z

---

---
version: alpha
name: html.to.design
description: A Figma plugin that converts any website into fully editable Figma designs.
tone: >-
  Direct, efficient, and helpful. The voice is technical yet accessible, focusing on time-saving
  benefits for product designers.
color-scheme: light
colors:
  primary: "#000000"
  surface: "#FFFFFF"
  surface-container: "#F4F4F4"
  on-surface: "#1A1A1A"
  outline: "#E0E0E0"
  error: "#D32F2F"
  success: "#388E3C"
  info: "#1976D2"
  on-primary: "#FFFFFF"
  focus-ring: "#007AFF"
typography:
  display-lg:
    fontFamily: system-ui, sans-serif
    fontSize: 48px
  display-md:
    fontFamily: system-ui, sans-serif
    fontSize: 36px
  headline-lg:
    fontFamily: system-ui, sans-serif
    fontSize: 30px
  headline-md:
    fontFamily: system-ui, sans-serif
    fontSize: 24px
  body-md:
    fontFamily: system-ui, sans-serif
    fontSize: 16px
  label-md:
    fontFamily: system-ui, sans-serif
    fontSize: 14px
  label-sm:
    fontFamily: system-ui, sans-serif
    fontSize: 12px
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  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}"
    rounded: "{rounded.md}"
  input-field:
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.info}"
  link-hover:
    textColor: "#0056b3"
  badge:
    backgroundColor: "{colors.surface-container}"
    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
  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 4px 6px rgba(0,0,0,0.1)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

html.to.design is a utility-focused tool for designers, emphasizing speed and efficiency. Its visual identity is clean, functional, and professional, mirroring the Figma ecosystem it integrates with.

## Colors

The color palette is strictly functional, prioritizing high contrast and readability to ensure the interface remains secondary to the user's design work.

*   Primary (#000000): Deep ink used for primary CTAs and headings.
*   Surface (#FFFFFF): The primary background color for the application interface.
*   Surface-container (inferred) (#F4F4F4): Used for card backgrounds and secondary sections to provide subtle depth.
*   On-surface (#1A1A1A): Primary text color for high readability against white surfaces.
*   Outline (inferred) (#E0E0E0): Used for borders and dividers to separate content blocks.
*   Error (inferred) (#D32F2F): Semantic color for error states.
*   Success (inferred) (#388E3C): Semantic color for success states.
*   Info (inferred) (#1976D2): Semantic color for informational elements.
*   On-primary (inferred) (#FFFFFF): Text color for buttons with primary background.
*   Focus-ring (inferred) (#007AFF): Standard focus indicator for accessibility.

## Typography

The typography uses the system-ui stack to maintain a native, performant feel that aligns with Figma's own interface.

*   Display-lg (inferred): Used for main hero headlines.
*   Display-md (inferred): Used for secondary section headers.
*   Headline-lg (inferred): Used for feature titles.
*   Headline-md (inferred): Used for sub-headers.
*   Body-md (inferred): Standard body text for readability.
*   Label-md (inferred): Used for button labels and metadata.
*   Label-sm (inferred): Used for small captions or footer links.

## Layout

The site follows a mobile-first responsive grid with a max-width container to ensure consistent readability. Spacing is governed by a 4px-based scale, using {spacing.md} (16px) as the primary gutter and section separator. The page structure follows this order: nav, hero, social-proof, how-it-works, features, pricing, testimonials, and footer. The hero utilizes a centered composition with a clear primary CTA, and the navigation collapses into a menu on smaller viewports.

## Elevation & Depth

Elevation is used sparingly to differentiate cards from the background, using soft shadows to maintain a clean, modern look.

*   elevation.sm — subtle lift for small UI elements.
*   elevation.md — standard card lift.
*   elevation.lg — modal or drawer overlay.

## Shapes

The design system employs a moderate 8px corner radius ({rounded.md}) for most components. This balance provides a professional, precise aesthetic while remaining approachable for a tool-heavy interface.

## 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`


### Buttons
Buttons use {colors.primary} for the primary action and a transparent background with a primary border for secondary actions. They are designed for high-frequency interaction and feature a clear hover state transition to #333333.

### Cards
Cards utilize {rounded.md} and are differentiated from the background using {colors.outline} borders or subtle elevation. Use these to group related feature sets or pricing tiers.

### Input Fields
Inputs are styled with {rounded.sm} and a {colors.outline} border. On interaction, the border transitions to {colors.focus-ring} to meet accessibility standards.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for all primary CTAs. | Use {colors.error} for non-destructive actions. |
| Apply {typography.body-md} for all long-form text. | Avoid mixing too many font weights. |
| Use {rounded.md} for card components. | Do not use {rounded.full} on standard content cards. |
| Maintain consistent {spacing.md} between sections. | Never apply {typography.display-lg} for body text. |
| Use {colors.outline} for all subtle dividers. | Avoid using low-contrast colors for text on {colors.surface}. |
| Ensure {colors.focus-ring} is visible on all interactive elements. | Do not ignore {spacing.sm} for internal component padding. |
| Use {colors.surface-container} for secondary background blocks. | Use high-elevation shadows on flat content areas. |
| Apply {typography.label-md} for button labels. | Use {typography.label-sm} for primary navigation items. |

## Content Style

CTA labels use imperative verbs (e.g., "Launch," "Install") in sentence case, keeping them short and direct. Headings are benefit-led and concise, focusing on the time-saving value of the plugin.

Copy density is kept low; paragraphs are short and scannable, supported by frequent bullet points to break up technical instructions.

## Imagery & Icons

Imagery consists of a mixed treatment of UI screenshots and clean, minimal iconography. Screenshots should clearly demonstrate product functionality within the Figma interface. Note: Ensure all logo assets are sourced from the official brand repository to avoid display issues.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for html.to.design, a minimal, accessibility-focused Figma plugin brand. Match its direct, utility-first tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by token name — `{colors.primary}`, `{typography.body-md}`, `{spacing.md}` — never hardcode hex values, pixel sizes, or raw numbers.
2. Respect the components block exactly. `button-primary`, `button-secondary`, `card`, `card-elevated`, `input-field`, and `badge` are the only defined variants; do not invent others.
3. Follow the Layout narrative for page structure (nav → hero → social-proof → how-it-works → features → pricing → testimonials → footer) and spacing rhythm. Use `{spacing.md}` as the default gutter; `{spacing.lg}` and above for section separation.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g., applying `{rounded.full}` to a content card), surface the conflict before proceeding.
5. Apply elevation tokens (`{elevation.sm}`, `{elevation.md}`, `{elevation.lg}`) per the Elevation & Depth narrative — sparingly, and never high-elevation shadows on flat content areas.

## Output contract

**Must:**
- Use token names for every color, type style, radius, spacing, and shadow value.
- Render all interactive components with their defined states: `button-primary-hover` (#333333), `input-field-focus` (`{colors.focus-ring}`), `link-hover` (#0056b3).
- Apply `{colors.focus-ring}` as a visible focus ring on every interactive element.
- Use `{rounded.md}` for cards, `{rounded.sm}` for inputs, as specified.
- Match CTA copy style from Content Style: imperative verbs, sentence case, concise.

**Must NOT:**
- Invent colors, radii, font sizes, or spacing values absent from the spec.
- Substitute generic utility defaults when a brand token exists.
- Add emoji, decorative flourishes, or filler marketing copy.
- Reference any framework, library, or tooling by name.
- Rewrite existing page copy, button labels, or headings, or alter navigation structure as a side effect of applying tokens.

## When in doubt
- If the spec doesn't define a needed value, ask the user before inventing one.
- For background colors, default to `{colors.surface-container}` for secondary sections and `{colors.surface}` for primary areas.
- For text on any surface, default to `{colors.on-surface}`.
- Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook, component metadata) exists, those values take precedence.
- For unspecified breakpoints, use mobile-first layout with one breakpoint at 768px.