# Artboard Studio — Design System
> Online mockup generator and design editor.
- **Canonical:** https://uiuxskills.com/library/artboard-studio
- **Source:** https://artboard.studio
- **Category:** Design & Creative Tools
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:18:23.325Z

---

---
version: alpha
name: Artboard Studio
description: Online mockup generator and design editor.
tone: Professional, creative, efficient, and modern.
color-scheme: light
colors:
  primary: "#AAFF00"
  surface: "#FFFFFF"
  surface-dim: "#F5F5F5"
  on-surface: "#1A1A1A"
  on-primary: "#000000"
  outline: "#E0E0E0"
  error: "#D32F2F"
  success: "#388E3C"
  warning: "#FBC02D"
  info: "#1976D2"
typography:
  display-lg:
    fontFamily: Inter, sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: Inter, sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: Inter, sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: Inter, sans-serif
    fontSize: 1.5rem
  body-md:
    fontFamily: Inter, sans-serif
    fontSize: 1rem
  label-md:
    fontFamily: Inter, sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: Inter, sans-serif
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 24px
  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: "#99E600"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#88CC00"
  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
  badge-warning:
    backgroundColor: "{colors.warning}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-info:
    backgroundColor: "{colors.info}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
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

Artboard Studio is a high-energy, design-centric platform that empowers creatives to build professional mockups. The visual identity is defined by a bold, high-contrast aesthetic, utilizing a signature electric lime as a primary accent against clean, neutral surfaces to maintain a professional yet creative atmosphere.

## Colors

The color strategy focuses on high-contrast accessibility, using a neutral palette to ground the interface while reserving the vibrant primary accent for critical interactive elements.

*   Primary (#AAFF00): Signature electric lime used for primary CTAs and highlights.
*   Surface (inferred) (#FFFFFF): Primary background color for clean content presentation.
*   Surface-dim (inferred) (#F5F5F5): Subtle background for secondary sections.
*   On-surface (inferred) (#1A1A1A): High-contrast text color for readability.
*   On-primary (inferred) (#000000): Dark text for high contrast on primary buttons.
*   Outline (inferred) (#E0E0E0): Neutral border color for cards and inputs.
*   Error (inferred) (#D32F2F): Standard semantic error color.

## Typography

Typography is set in a clean, sans-serif stack to ensure maximum legibility across all screen sizes, prioritizing hierarchy through scale rather than font variety.

*   Display-lg (inferred): Used for primary hero headlines.
*   Headline-lg (inferred): Used for category titles.
*   Body-md (inferred): Primary body text for content.
*   Label-md (inferred): Button labels and primary UI elements.
*   Label-sm (inferred): Small captions and secondary metadata.

## Layout

The layout follows a responsive grid system optimized for high-density visual content. Sections are separated by consistent vertical spacing (2xl) to maintain focus on mockup galleries. The page pattern follows a logical flow: navigation, hero, categories, gallery, and footer. The design is mobile-first, with grid layouts that collapse into single columns on smaller viewports to ensure usability.

## Elevation & Depth

Depth is used sparingly to differentiate interactive cards from the background, relying on subtle shadow weights to create a clean, modern SaaS aesthetic.

*   Elevation.sm: Subtle lift for minor UI elements.
*   Elevation.md: Standard card lift for gallery items and interactive cards.
*   Elevation.lg: Used for modal or drawer overlays to provide clear focus.

## Shapes

A moderate corner radius is applied to cards and UI elements to balance professional structure with a friendly, accessible feel. The system utilizes a scale ranging from 4px to 24px, with the {rounded.md} (8px) token serving as the standard for most interactive components.

## 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
The primary button uses {colors.primary} with {typography.label-md} to ensure high visibility. Use these for main conversion points; secondary buttons should utilize {colors.surface} and {colors.outline} to maintain a clean, secondary hierarchy.

### Card
Cards are the primary container for mockup previews, utilizing {rounded.md} and {colors.outline} for structure. Use {card-elevated} when a component needs to stand out from the background grid.

### Input Field
Input fields use {colors.surface} with a subtle {colors.outline} border. Upon interaction, the border should transition to {colors.primary} to provide immediate visual feedback to the user.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for primary CTAs to drive conversion. | Do not use {colors.primary} for body text. |
| Apply {rounded.md} to all card components for consistency. | Avoid using sharp corners on interactive components; use {rounded.md} instead. |
| Use {typography.display-lg} for primary hero headlines. | Do not mix multiple font families; stick to the primary sans-serif stack. |
| Maintain {spacing.md} between grid items in mockup galleries. | Avoid excessive use of {elevation.lg} which can clutter the UI. |
| Use {colors.on-surface} for body text to ensure readability. | Do not use {colors.error} for non-destructive actions. |
| Apply {elevation.md} to cards that require visual separation. | Never use {typography.label-sm} for primary navigation labels. |
| Use {input-field-focus} to indicate active input states. | Do not use {colors.outline} for primary button backgrounds. |
| Use {badge-success} for confirming completed actions. | Do not use {typography.display-lg} for secondary body copy. |

## Content Style

CTA labels are action-oriented, concise, and direct, typically using a single verb to describe the outcome.

Headings are benefit-driven and professional, designed to clearly communicate the value of the mockup tools to the user.

Copy density is kept low, utilizing short, scannable paragraphs and bulleted lists to maintain a high-efficiency flow throughout the interface.

## Imagery & Icons

The imagery style is mixed, combining high-quality product photography with animated GIFs to showcase the interactivity of the mockups. Assets should be presented cleanly within cards, allowing the visual content to serve as the primary focal point of the interface.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Artboard Studio, a minimal-yet-bold online mockup generator with a professional, design-centric 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.display-lg}`, `{rounded.md}` — never hardcode hex values, pixel sizes, or raw font strings.
2. Use only components listed under `components:`. Do not invent variants (e.g. a `button-ghost`) unless the spec defines them; surface the gap and ask instead.
3. Follow the Layout section for page structure: navigation → hero → categories → gallery → footer. Use `{spacing.2xl}` between major sections; `{spacing.md}` between grid items.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g. using `{colors.primary}` for body text), flag the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If the product provides an authoritative theme file or component source, those values override the spec.

## Output contract

**Must:**
- Use token names for every color, radius, spacing, and typography decision.
- Render all interactive components with hover, focus, and disabled states when defined (e.g. `button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{rounded.md}` to cards and buttons; `{rounded.sm}` to inputs — matching the Shapes narrative.
- Apply `{elevation.md}` to gallery cards requiring separation; reserve `{elevation.lg}` for modals and drawers only.
- Write CTAs as concise, single-verb labels per the Content Style section.

**Must NOT:**
- Invent colors, fonts, radii, or spacing values outside the spec.
- Use generic system defaults when a brand token exists.
- Add emoji, filler copy, or unsolicited marketing language.
- Use `{colors.primary}` for body text or decorative purposes.
- Rewrite, replace, or reorganize existing page copy, headings, or navigation items.
- Alter information architecture as a side effect of applying tokens.

## When in doubt
- If a value is unspecified, ask the user before introducing anything new.
- Prefer composing existing components over adding tokens.
- Default to `{colors.surface}` for backgrounds, `{colors.on-surface}` for body text, `{colors.primary}` for the headline CTA.
- Follow mobile-first layout; collapse grids to a single column below 768px unless the spec states otherwise.