# Viewport — Design System
> A visual workspace for designers to organize, document, and share their creative process.
- **Canonical:** https://uiuxskills.com/library/viewport
- **Source:** https://viewport.co
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:14:18.567Z

---

---
version: alpha
name: Viewport
description: A visual workspace for designers to organize, document, and share their creative process.
tone: Professional, clear, encouraging, and design-centric.
color-scheme: light
colors:
  primary: "#4D4DFF"
  secondary: "#D9F7FD"
  surface: "#FFFFFF"
  on-surface: "#7F8087"
  error: "#FF5733"
  success: "#00C853"
  outline: "#E3E6EC"
  focus-ring: "#4D4DFF"
  surface-container: "#F8FAFC"
  on-primary: "#FFFFFF"
typography:
  display-lg:
    fontFamily: HK Sentiments Bold
    fontSize: 48px
  display-md:
    fontFamily: HK Sentiments Bold
    fontSize: 36px
  headline-lg:
    fontFamily: HK Sentiments Bold
    fontSize: 32px
  headline-md:
    fontFamily: HK Sentiments Bold
    fontSize: 24px
  body-md:
    fontFamily: Silka Medium
    fontSize: 16px
  body-sm:
    fontFamily: Silka Medium
    fontSize: 14px
  label-sm:
    fontFamily: Silka Medium
    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.surface}"
    typography: "{typography.body-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#3B3BCC"
    textColor: "{colors.surface}"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#3B3BCC"
  badge:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.primary}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FFEBE8"
    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-on-surface:
    backgroundColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-on-primary:
    backgroundColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 150ms
  duration-medium: 300ms
  easing-standard: cubic-bezier(0.4, 0, 0.2, 1)
elevation:
  sm: 0 1px 3px rgba(0,0,0,0.1)
  md: 0 3px 6px rgba(0,0,0,0.2)
  lg: 0 10px 20px rgba(0,0,0,0.3)
---

## Overview

Viewport is a clean, modern productivity tool designed for creative professionals. Its visual identity is defined by a high-contrast, professional aesthetic that prioritizes clarity and structure, mirroring the product's goal of organizing messy design workflows.

## Colors

The color palette is built on a high-contrast foundation of deep primary accents against a crisp white surface, designed to keep the focus on user-generated content.

*   Primary (#4D4DFF): The core brand accent used for primary CTAs and active states.
*   Secondary (#D9F7FD): Used for background highlights and container fills to create a soft, approachable contrast.
*   Surface (#FFFFFF): The primary background color for the application and marketing site.
*   On-Surface (#7F8087): The primary text color for body copy and secondary information.
*   Outline (#E3E6EC): Used for borders, dividers, and subtle structural separation.
*   Error (inferred) (#FF5733): Semantic color for error states and negative indicators.
*   Success (inferred) (#00C853): Semantic color for success states and positive indicators.
*   Focus-ring (inferred) (#4D4DFF): The focus ring color for interactive elements.
*   Surface-container (inferred) (#F8FAFC): A subtle off-white for card backgrounds and section containers.
*   On-primary (inferred) (#FFFFFF): Text color for elements placed on primary-colored backgrounds.

## Typography

The typography system pairs a bold, geometric display face with a highly legible, medium-weight sans-serif for body copy to ensure professional clarity.

*   Display-lg (inferred) (HK Sentiments Bold): Used for hero headlines to establish strong visual hierarchy.
*   Headline-lg (HK Sentiments Bold): Primary headline size for major page sections.
*   Body-md (Silka Medium): Standard body text for readability.
*   Body-sm (Silka Medium): Secondary text for captions and metadata.
*   Label-sm (inferred) (Silka Medium): Small labels and UI helper text.

## Layout

The site utilizes a centered container layout with a maximum width of 1200px. Spacing follows a 4px base unit, creating a consistent rhythm of 16px, 32px, and 48px for section margins and gutters. The page structure follows a logical flow: nav, hero, feature-comparison, feature-list, testimonial-carousel, and footer. The hero pattern features a centered headline and subhead with a primary CTA, followed by a large product screenshot. The design is mobile-responsive, with navigation collapsing on smaller screens.

## Elevation & Depth

Depth is used sparingly to highlight interactive elements and cards, utilizing a soft, modern shadow system.

*   Elevation.sm: Subtle card lift for secondary elements.
*   Elevation.md: Standard depth for interactive cards and popovers.
*   Elevation.lg: Stronger depth for modal or drawer overlays.

## Shapes

The brand employs a consistent border-radius strategy to maintain a friendly, modern feel. A scale of 4px to 16px is used, with {rounded.lg} (12px) being the standard for cards and {rounded.md} (8px) for input fields, ensuring no sharp corners appear in the UI.

## 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
Primary buttons use {colors.primary} with {typography.body-md} text. They are action-oriented and should be used for the most important page tasks.

### Card
Cards use {colors.surface} with {rounded.lg} corners. Use these to group related content or feature highlights.

### Input Field
Input fields feature {colors.outline} borders and {rounded.md} corners. When focused, the {colors.primary} border should be applied to indicate active state.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for all primary CTAs. | Use {colors.error} for non-destructive actions. |
| Apply {rounded.lg} to all card components. | Use sharp 0px corners on buttons or cards. |
| Use {typography.headline-lg} for main headers. | Mix font families outside of Silka and HK Sentiments. |
| Maintain at least {spacing.md} between sections. | Use {colors.on-surface} for primary headings. |
| Use {colors.outline} for dividers and borders. | Use excessive shadows beyond {elevation.md}. |
| Use {typography.body-md} for body copy. | Clutter the layout; keep to the 1200px container. |
| Use {rounded.md} for input fields. | Use {colors.secondary} for primary text. |
| Apply {elevation.sm} for subtle card depth. | Use {elevation.lg} for standard content blocks. |

## Content Style

CTA labels should be imperative and action-oriented, such as "Start for free" or "Explore Quickshot." Keep them concise to maintain the clean interface.

Headings should be benefit-driven, addressing user pain points directly rather than using abstract marketing language.

Copy density should be scannable. Use short, punchy paragraphs and leverage bold text for emphasis to guide the user's eye through the narrative.

## Imagery & Icons

The imagery style is mixed, combining clean UI mockups with high-quality testimonial avatars. UI mockups should be presented with soft shadows and rounded corners to emphasize the product interface. Icons should maintain a minimal, geometric aesthetic that aligns with the overall design-centric tone.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Viewport, a minimal, design-centric productivity tool with a professional and encouraging 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}`, `{spacing.lg}` — never hardcode hex values, pixel sizes, or raw strings.
2. Render only the component variants defined under `components:`. Do not invent new button styles, badge variants, or card types the spec does not list.
3. Follow the Layout narrative: center content in a 1200px max-width container, use `{spacing.md}` / `{spacing.xl}` / `{spacing.2xl}` for section margins and gutters, and apply mobile-first responsive behavior with navigation collapsing below 768px.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g., using `{colors.on-surface}` for a heading), surface the conflict before proceeding.
5. Apply motion tokens — `{motion.duration-short}`, `{motion.easing-standard}` — to all transitions on interactive elements.

## Output contract

**Must:**
- Use token names for every color, type style, radius, spacing, elevation, and motion value.
- Include hover, focus, and disabled states for every interactive component the spec defines (e.g., `button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{rounded.lg}` to cards, `{rounded.md}` to inputs, and follow the shapes narrative — no 0px corners anywhere.
- Apply `{elevation.sm}` to cards by default; escalate only when the spec calls for it.
- Write CTA copy in the imperative, action-oriented style defined in Content Style.

**Must NOT:**
- Invent colors, font families, or radii outside the spec.
- Substitute generic utility defaults when a brand token exists.
- Use `{elevation.lg}` on standard content blocks.
- Use `{colors.on-surface}` for primary headings or `{colors.secondary}` as text color.
- Add emoji, filler copy, or unsolicited marketing language.
- Rewrite existing page copy, button labels, or headings, or alter navigation structure and routes.

## When in doubt
- If a value isn't defined in the spec, ask before inventing it.
- For backgrounds, prefer `{colors.surface-container}` before introducing anything new.
- For text on primary-colored surfaces, default to `{colors.on-primary}`.
- Tokens marked "(inferred)" are visual approximations; if an authoritative source (theme file, Storybook) exists, defer to it over the spec.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px.