# PencilBooth — Design System
> A visual-first email newsletter platform designed for artists and creative professionals.
- **Canonical:** https://uiuxskills.com/library/pencilbooth
- **Source:** https://www.pencilbooth.com
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:16:09.459Z

---

---
version: alpha
name: PencilBooth
description: A visual-first email newsletter platform designed for artists and creative professionals.
tone: >-
  Direct, transparent, artist-friendly, and pragmatic. The tone is refreshingly honest about
  business models and prioritizes creator autonomy.
color-scheme: light
colors:
  primary: "#000000"
  surface: "#FFFFFF"
  surface-container: "#F4F4F4"
  on-surface: "#000000"
  on-primary: "#FFFFFF"
  outline: "#E5E5E5"
  error: "#D93025"
  success: "#1E8E3E"
  muted: "#757575"
  focus-ring: "#000000"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 3rem
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.5rem
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
  body-sm:
    fontFamily: sans-serif
    fontSize: 0.875rem
  label-md:
    fontFamily: sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: sans-serif
    fontSize: 0.75rem
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: "{colors.primary}"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.muted}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.primary}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-success:
    backgroundColor: "#E6F4EA"
    textColor: "{colors.success}"
  badge-error:
    backgroundColor: "{colors.error}"
    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 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

PencilBooth is a minimalist, artist-centric platform designed to prioritize visual content over text. The design language is intentionally understated, favoring high-contrast, functional clarity to ensure the user's creative work remains the primary focus.

## Colors

The color palette is strictly neutral, designed to act as a gallery-like canvas that allows user-generated imagery to stand out.

*   Primary (`{colors.primary}`): The core black used for text, primary CTAs, and high-contrast UI elements.
*   Surface (`{colors.surface}` - inferred): The base background color for the application, providing a clean white canvas.
*   Surface Container (`{colors.surface-container}` - inferred): A light gray used for secondary containers and subtle UI backgrounds.
*   Muted (`{colors.muted}`): Used for secondary metadata and timestamps to reduce visual noise.
*   Outline (`{colors.outline}` - inferred): Used for borders and dividers to maintain structure without heavy shadows.
*   Error (`{colors.error}` - inferred): Semantic red reserved strictly for destructive actions or error states.
*   Success (`{colors.success}` - inferred): Semantic green for positive status indicators.
*   Focus Ring (`{colors.focus-ring}` - inferred): High-contrast black ring for keyboard navigation accessibility.

## Typography

The typography system relies on a clean, sans-serif stack to maintain readability and a professional, pragmatic tone.

*   Display LG (`{typography.display-lg}` - inferred): Used for hero headlines to create immediate visual impact.
*   Headline LG/MD (`{typography.headline-lg}`, `{typography.headline-md}` - inferred): Used for section headers and sub-headers.
*   Body MD (`{typography.body-md}` - inferred): The standard size for long-form reading text.
*   Body SM (`{typography.body-sm}`): Used for secondary text and captions.
*   Label MD/SM (`{typography.label-md}`, `{typography.label-sm}` - inferred): Used for button labels, UI controls, and small metadata.

## Layout

The layout follows a clean, single-column focus for content, utilizing generous whitespace to let imagery breathe. It employs a responsive grid that centers content on desktop and stacks elements on mobile. The section order generally follows: nav, hero, value-prop, features, social-proof, comparison-table, faq, and footer. Use `{spacing.md}` as the standard gap between content blocks to maintain vertical rhythm.

## Elevation & Depth

Elevation is used sparingly, relying on subtle borders (`{colors.outline}`) and color contrast to define structure rather than heavy shadows. The values are inferred from the design system.

*   `{elevation.sm}`: Used for subtle card lift.
*   `{elevation.md}`: Used for dropdowns and popovers.
*   `{elevation.lg}`: Used for modal and drawer overlays.

## Shapes

The brand uses a distinct mix of radii to balance professional utility with approachable creative flair. Sharp corners (`{rounded.sm}`) are applied to structural elements like cards and input fields to maintain a grid-aligned, minimal aesthetic.

Conversely, fully rounded corners (`{rounded.full}`) are reserved for interactive elements like buttons and user avatars, providing a softer, more human touch to the 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 primary actions and a transparent background with a `{colors.primary}` border for secondary actions. They utilize `{rounded.full}` to distinguish them from structural elements.

### Cards
Cards are simple, clean containers using `{colors.surface}` and `{rounded.sm}`. They rely on `{colors.outline}` borders rather than shadows to separate content from the background.

### Input Fields
Inputs are designed for clarity, featuring a `{colors.surface}` background and `{rounded.sm}` corners. On focus, the border transitions to `{colors.focus-ring}` to indicate active state.

### Badges
Badges use `{colors.surface-container}` as a base with `{typography.label-sm}`. They are used for status indicators or labels, with semantic variants like `{badge-success}` and `{badge-error}` for specific states.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Use primary colors for secondary or tertiary buttons. |
| Apply `{typography.body-md}` for all long-form content. | Use `{typography.display-lg}` for body text. |
| Use `{rounded.sm}` for all card containers. | Use large border radii on cards or input fields. |
| Maintain `{spacing.md}` between content blocks. | Crowd the interface with excessive UI chrome. |
| Use `{colors.muted}` for secondary metadata and timestamps. | Use high-contrast black for non-essential text. |
| Use `{colors.outline}` to define card boundaries. | Use heavy drop shadows on cards. |
| Use `{colors.error}` only for destructive actions. | Use `{colors.error}` for non-destructive UI elements. |
| Ensure imagery is high-resolution. | Hide images behind complex, high-opacity overlays. |

## Content Style

CTA labels are imperative, action-oriented, and benefit-focused (e.g., "Start your visual newsletter"). They should be concise and direct.

Headings are written to be benefit-driven and conversational. They avoid marketing jargon, favoring a direct, transparent tone that speaks to the creator's autonomy.

Copy density is optimized for scanning. Use short paragraphs and frequent lists to break up information, ensuring the content remains accessible and easy to digest.

## Imagery & Icons

Imagery is the core of the brand. The treatment is mixed, supporting full-bleed layouts, galleries, and thumbnails. Icons are simple, clean, and often paired with text to provide context. Avoid complex overlays on images; let the creative work be the primary visual anchor.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for PencilBooth, a minimal, artist-centric newsletter platform with a direct and pragmatic 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.md}` — never hardcode hex, pixel, or rem values.
2. Apply radii strictly per context: `{rounded.sm}` on cards and inputs; `{rounded.full}` on buttons and avatars. Do not apply `{rounded.lg}` or `{rounded.xl}` to structural elements.
3. Follow the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g., adding drop shadows to cards or using `{colors.error}` decoratively), surface the conflict before proceeding.
4. Use the section order from Layout (nav → hero → value-prop → features → social-proof → comparison-table → faq → footer) when scaffolding full pages, and maintain `{spacing.md}` between content blocks.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (Storybook, theme file) is available, defer to it over the spec.

## Output contract

**Must:**
- Use token names for every color, type scale, spacing, radius, and elevation value.
- Include hover, focus, and disabled states for all interactive components where the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`, `swatch-focus-ring`).
- Apply `{colors.focus-ring}` as a visible keyboard-focus indicator on all interactive elements.
- Use `{elevation.sm}` for cards, `{elevation.md}` for dropdowns, `{elevation.lg}` for modals.
- Write CTAs as short, imperative, benefit-focused phrases per the Content Style section.

**Must NOT:**
- Invent colors, type sizes, radii, or spacing values outside the spec.
- Use generic utility defaults (e.g., `gray-500`, `rounded-md`) when a brand token exists.
- Place heavy drop shadows on cards; use `{colors.outline}` borders instead.
- Add emoji, decorative overlays on images, or marketing filler copy.
- Rewrite existing page copy, button labels, or navigation items, or alter page structure as a side effect of applying tokens.

## When in doubt
- Ask the user before introducing any value not present in the spec.
- For ambiguous backgrounds, default to `{colors.surface}`; for secondary containers use `{colors.surface-container}`.
- For unspecified breakpoints, go mobile-first with one breakpoint at 768px.
- Prefer composing existing components over proposing new tokens.
- Inferred tokens are approximations — flag them if precision matters for the output.