Sketch design skill for AI agents

Overview

Sketch is a friendly, hand-drawn design system skill file that instructs AI coding assistants to generate interfaces that feel like pencil illustrations arranged on warm cream paper. Its aesthetic is soft, tactile, approachable, and intentionally imperfect: warm paper backgrounds, soft teal brand accents, hand-written headings, rounded pill controls, dashed card outlines, chunky offset pencil-drawn shadows, and simple sketch-style illustration marks.

Where many modern systems rely on polished gradients, glass panels, precise geometric cards, or sleek neutral surfaces, Sketch embraces a more human visual language. It should feel like a thoughtful product interface drawn into a notebook: clear enough to use, structured enough to scale, and warm enough to feel personal.

When you feed this skill file to an AI assistant, every generated component — buttons, cards, forms, navigation, modals, onboarding screens, dashboards, empty states, settings pages, educational flows, and landing pages — should inherit the Sketch personality: cream paper canvas, teal interaction cues, dashed outlines, rounded controls, hand-drawn typography, simple pencil-like marks, and accessible interaction states.

The result is a UI system that feels friendly, handmade, calm, and useful without becoming messy, childish, or hard to read.

Design Tokens

Color Palette

Sketch uses a warm, restrained palette built around cream paper, soft teal accents, white foreground surfaces, and dark readable text. The palette should feel like pencil, paper, and a single friendly marker color.

The most important visual relationship is between warm cream paper, white sketch surfaces, dark graphite-like text, and soft teal interaction accents. The interface should never feel like a cold white SaaS dashboard. The cream background is part of the brand’s warmth and should be present across the whole experience.

The teal primary color #1DAD97 should be used as a friendly signal for action, focus, selection, and emphasis. It should not be scattered randomly across every decoration. Sketch works best when teal feels like a single marker color added to a pencil drawing.

Recommended Sketch Semantic Tokens

Implementations should define semantic aliases so the hand-drawn visual language stays consistent.

Use these roles instead of scattering raw colors throughout the codebase. Sketch should feel handmade, but the implementation should remain disciplined.

Color Usage Principles

Sketch color usage follows five rules:

1. Cream is the paper — use secondary as the dominant page and section background.
2. Dark ink carries readability — body text, labels, and critical content should use text or ink.
3. Teal drives interaction — primary actions, focus, selected states, and friendly emphasis use primary.
4. White creates sketch objects — cards, panels, modals, and form controls sit on the cream canvas.
5. Semantic colors remain semantic — success, warning, and danger communicate real state only.

Do not use teal as small body text unless contrast is tested. Teal is excellent for accents, fills, outlines, focus rings, and large labels, but dark text is often safer for long reading.

Typography

Sketch uses Delicious Handrawn for both primary and display typography. This gives the system a handwritten, notebook-like personality. Typography should feel friendly and human, but it must remain readable.

Font Families

Delicious Handrawn is central to the brand. It should be used consistently enough that the interface feels sketched rather than merely decorated.

JetBrains Mono should be reserved for technical content. Do not use monospace as a decorative alternative to the handwritten style unless the content is explicitly technical.

Type Scale

Sketch uses a clear, compact type scale:

Because Delicious Handrawn is expressive, small text can become harder to read than a neutral sans-serif. Use 16px or larger for important body copy and input text. Use 12px only for short metadata or captions.

Weight

The foundation lists weights from 100 through 900, but handwritten fonts often render fewer meaningful weights. Use weight carefully.

Recommended usage:

• 400 for default body copy
• 500 for labels and navigation where supported
• 600 for buttons and card headings
• 700 for section headings and important callouts
• 800–900 only for large display moments if the font renders clearly

If the font does not provide strong weight differences, use size, spacing, outline, underline, or teal accent rather than forcing many weights.

Handwritten Readability Rules

Sketch typography should feel hand-written, not illegible.

Rules:

• Keep labels short.
• Avoid long all-caps text.
• Use generous line height for body copy.
• Avoid very light weights.
• Do not use handwriting effects for dense technical tables.
• Do not rotate or distort functional text.
• Test readability on mobile screens.
• Use JetBrains Mono only for technical data, code, or IDs.
• Use fallback fonts in CSS.

Example type setup:

:root {
  --font-primary: "Delicious Handrawn", cursive;
  --font-mono: "JetBrains Mono", monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;
}

Spacing

Sketch uses a 4px-based spacing scale:

Spacing should feel relaxed and notebook-like. Hand-drawn outlines, dashed borders, pencil shadows, and illustration marks need room to breathe.

Use larger spacing around:

• Handwritten display headings
• Dashed-outline cards
• Pill buttons
• Empty-state illustrations
• Step-by-step flows
• Form groups
• Modal actions
• Sketch callouts

A Sketch interface should feel loose and friendly, but not disorganized. All spacing should still come from the defined scale.

The Sketch Look

Sketch has a distinct visual identity built around paper, pencil, teal marker accents, dashed outlines, and rounded interaction.

Warm Cream Paper Canvas

The full interface should sit on the warm cream secondary background.

Do:

• Use #F4EDE0 as the page background.
• Let major sections share the same paper surface.
• Use white cards and panels as sketch objects.
• Use pencil-like marks and spacing to create rhythm.
• Keep text contrast strong.

Do not:

• Use pure white as the dominant full-page background.
• Use cold gray app shells.
• Alternate every section with unrelated background colors.
• Add glossy or glass-like surfaces.
• Use heavy photographic backgrounds that fight the paper feeling.

The cream paper surface is the emotional base of the system.

Pencil-Drawn Structure

Sketch uses dark pencil-like lines to create structure. These lines may be solid or dashed, but they should feel like drawn marks rather than mechanical dividers.

Use pencil structure for:

• Card outlines
• Input borders
• Section dividers
• Illustration marks
• Underlines
• Callout frames
• Modal boundaries
• Empty-state drawings

Recommended line styles:

:root {
  --line-solid: 2px solid var(--ink);
  --line-dashed: 2px dashed var(--graphite);
  --line-soft: 1px solid var(--graphite-soft);
}

Use dashed outlines for cards and callouts. Use solid outlines when a component needs stronger affordance, such as inputs, buttons, and focused states.

Dashed Card Outlines

Dashed card outlines are a signature Sketch treatment. They should make surfaces feel hand-framed and informal.

Rules:

• Use 2px dashed outlines for standard cards.
• Use dark graphite or ink for readable contrast.
• Use generous radius.
• Keep dashes consistent across the system.
• Do not use low-contrast dashed borders for important interactive cards.
• Avoid mixing many dash patterns in one layout.
• Use solid outlines for selected or focused cards.

Dashed outlines should feel friendly, not flimsy.

Chunky Offset Pencil Shadows

Sketch uses chunky offset shadows that feel like hand-drawn pencil shading. These are not soft material shadows.

Recommended shadow tokens:

:root {
  --pencil-shadow-sm: 3px 3px 0 var(--pencil-shadow);
  --pencil-shadow-md: 6px 6px 0 var(--pencil-shadow);
  --pencil-shadow-lg: 9px 9px 0 var(--pencil-shadow);
}

Rules:

• Use no blur.
• Keep shadows low-contrast and pencil-like.
• Use shadows on cards, modals, callouts, and important buttons.
• Avoid heavy black neobrutalist shadows.
• Avoid soft SaaS elevation.
• Leave enough space so offset shadows do not collide with nearby components.

The shadow should feel like graphite pressure, not a digital drop shadow.

Rounded Pill Controls

Interactive controls should use rounded pill geometry. This gives the sketch system a friendly, conversational feel.

Use pill shapes for:

• Buttons
• Search fields
• Filter chips
• Tags
• Selects
• Segmented controls
• Toggle-like controls
• Navigation pills

Recommended radius roles:

Do not use sharp corners unless a component is intentionally mimicking a paper note or sketch frame.

Soft Teal Accent

Teal is the system’s marker color. It should feel soft, friendly, and active.

Use teal for:

• Primary actions
• Focus-visible states
• Selected chips
• Active navigation
• Checkbox and radio selected states
• Friendly highlights
• Progress indicators
• Important links
• Sketch-style icons or markers

Do not use teal for every heading, border, icon, and background. Too much teal makes the interface feel less pencil-drawn and more generic.

Hand-Drawn Illustrations

Sketch should include hand-drawn-feeling illustrations where useful. These should be simple, supportive, and light.

Illustration motifs may include:

• Pencil arrows
• Loops and circles
• Stars
• Notes
• Check marks
• Speech bubbles
• Simple characters
• Plants
• Paper clips
• Sticky notes
• Underlines
• Wavy dividers
• Small object sketches

Rules:

• Illustrations should not carry essential information alone.
• Decorative illustrations should be hidden from assistive technologies.
• Illustrations must not cover text, controls, or focus outlines.
• Use teal sparingly inside illustrations.
• Keep pencil marks consistent with the rest of the UI.
• Avoid detailed clip art that clashes with the hand-drawn style.

Friendly Imperfection

Sketch may include slight asymmetry, dashed lines, offset marks, and informal spacing, but these should be controlled.

Use imperfection through:

• Dashed outlines
• Offset pencil shadows
• Handwritten headings
• Sketch icons
• Wavy underlines
• Simple hand-drawn arrows

Do not use imperfection to justify poor alignment, inconsistent spacing, unclear hierarchy, or broken responsive behavior.

Component Coverage

The Sketch skill file should guide full interface generation across product UI, dashboards, onboarding flows, education tools, creative apps, documentation, landing pages, and settings screens.

Buttons

Buttons should feel like friendly marker-highlighted controls. They are rounded, clear, and tactile.

Button variants:

Primary button rules:

• Use pill radius.
• Use teal as the main fill, border, or accent.
• Use readable text with verified contrast.
• Use Delicious Handrawn at 16px or larger.
• Use clear action-oriented labels.
• Use solid outline when needed for affordance.
• Use optional pencil shadow for emphasis.
• Avoid glossy gradients and soft shadows.
• Preserve clear hover, focus-visible, active, disabled, loading, and error states.

Recommended button states:

Good button labels:

Avoid vague labels like Submit, Click here, or Go.

Links

Links should feel like handwritten underlines or teal marks.

Link rules:

• Use teal for link emphasis.
• Add underline for inline links.
• Use visible focus-visible treatment.
• Do not rely on color alone.
• Keep labels specific.
• Avoid tiny low-contrast links.

Good examples:

Cards

Cards should feel like hand-framed paper panels placed on the cream canvas.

Card rules:

• Use white surface fill.
• Use 2px dashed graphite outline for standard cards.
• Use solid outline for selected or interactive emphasis.
• Use generous radius, usually 16px to 24px.
• Use optional chunky pencil shadow.
• Keep padding on the spacing scale.
• Use clear handwritten headings.
• Include small sketch marks only when useful.
• Ensure long content wraps cleanly.
• Interactive cards must use proper button or link semantics.

Card variants:

Featured cards may use a larger pencil shadow, but most cards should remain light and readable.

Forms

Forms should feel approachable and low-pressure. The hand-drawn style should make forms friendlier, not less clear.

Form rules:

• Labels must always be visible.
• Placeholder text must not replace labels.
• Inputs should use white fill, rounded corners, and dark outline.
• Input text should use 16px or larger.
• Focus-visible states should use teal and must be obvious.
• Error messages must be linked to fields programmatically.
• Required fields must be indicated accessibly.
• Disabled fields must remain understandable.
• Long labels and helper text must wrap cleanly.
• Validation must not rely on color alone.

Recommended input styling:

.input {
  background: var(--paper-card);
  color: var(--text);
  border: 2px solid var(--graphite);
  border-radius: 999px;
  padding: 12px 16px;
  font-family: var(--font-primary);
  font-size: 16px;
}

.input:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-color: var(--ink);
}

For multiline textareas, use 16px to 20px radius instead of a full pill:

.textarea {
  border-radius: 20px;
}

This keeps the friendly rounded feel without creating awkward capsule-shaped large fields.

Search and Filter Controls

Search and filters should use rounded pill geometry and teal active states.

Search rules:

• Use pill-shaped input.
• Use visible label or accessible name.
• Keep placeholder copy specific.
• Use teal focus state.
• Keep icons simple and sketch-like.
• Ensure suggestions are keyboard navigable.
• Avoid low-contrast placeholder text.

Filter chip rules:

• Use pill shape.
• Use dashed or solid outline depending on emphasis.
• Selected chips should use teal fill, teal outline, or a clear check mark.
• Selected state must use more than color.
• Chips must wrap cleanly on small screens.

Example placeholders:

Navigation

Navigation should feel like friendly notebook wayfinding.

Navigation patterns may include:

• Rounded top nav
• Pill tabs
• Dashed active marker
• Sidebar with sketch labels
• Breadcrumbs as handwritten links
• Bottom mobile nav
• Teal active underline

Navigation rules:

• Use Delicious Handrawn at 14px or 16px.
• Use short labels.
• Use teal for active state.
• Reinforce active state with underline, pill fill, check mark, or border.
• Keep focus-visible states obvious.
• Preserve keyboard navigation.
• Avoid tiny subtle text links.
• Avoid overdecorated nav with too many sketch marks.

Active navigation must use more than color alone.

Hero Sections

Hero sections should feel like the first page of a friendly sketchbook.

Hero rules:

• Use warm cream paper background.
• Use large handwritten display heading.
• Use one clear teal primary CTA.
• Include a simple sketch illustration when helpful.
• Keep supporting copy short.
• Use dashed or pencil-framed panels.
• Avoid large glossy imagery that breaks the sketch feeling.
• Ensure all text contrast passes.

Common hero compositions:

• Large heading with teal underline and sketch arrow
• White note card with dashed outline beside copy
• Centered handwritten title with pill CTA
• Simple pencil illustration floating near the content
• Cream canvas with small teal marker highlights

Notes, Callouts, and Tips

Sketch is well suited to notes, tips, annotations, and educational guidance.

Callout rules:

• Use paper or white surface.
• Use dashed outline or pencil underline.
• Use teal for helpful emphasis.
• Use warning and danger only for real semantic states.
• Keep copy concise.
• Do not overload the page with too many callouts.
• Include icons only when they clarify meaning.

Callout variants:

Choice Cards and Quizzes

Choice cards should feel like selectable sketch notes.

Choice card rules:

• Use button, radio, or checkbox semantics.
• Use dashed outline by default.
• Use solid teal outline or teal fill for selected state.
• Include check mark or text label for selected state.
• Focus-visible state must be obvious.
• Long option text must wrap cleanly.
• Hover effects must not be required to understand the choice.
• Correct and incorrect states must include text, not only color.

State treatments:

Modals and Overlays

Modals should feel like sketchbook cards layered above the paper surface.

Modal rules:

• Use white or paper foreground surface.
• Use rounded corners.
• Use solid or dashed graphite outline.
• Use optional chunky pencil shadow.
• Use clear handwritten title.
• Use teal for the primary action.
• Use danger styling for destructive confirmations.
• Trap focus inside the modal.
• Close on Escape unless explicit confirmation is required.
• Return focus to the triggering element after close.

Because Sketch avoids polished elevation, modal separation should come from backdrop contrast, outline, spacing, and pencil shadow.

Alerts and Feedback

Alerts should be friendly, clear, and semantic.

Alert rules:

• Use semantic colors only for real feedback.
• Include a clear message and recovery guidance.
• Do not rely on color alone.
• Use rounded containers and pencil outlines.
• Keep copy concise.
• Make dismiss controls keyboard accessible.
• Avoid overly playful error copy.

Example feedback copy:

Loading States

Loading states should feel light and hand-drawn without becoming distracting.

Loading patterns may include:

• Sketchy spinner
• Animated pencil line
• Dashed skeleton card
• Teal progress line
• Short loading text
• Gentle pulsing note card

Loading rules:

• Include accessible loading text.
• Preserve layout dimensions.
• Avoid rapid flashing.
• Respect reduced-motion preferences.
• Do not rely on animation alone.
• Keep loading copy specific.

Good loading copy:

Empty States

Empty states are a strong Sketch moment. They should feel friendly, illustrated, and useful.

Empty state rules:

• Use cream paper canvas.
• Use a white note card or open paper layout.
• Include a simple pencil illustration when helpful.
• Use a clear handwritten heading.
• Explain what is missing.
• Provide one primary teal action.
• Avoid vague copy.
• Avoid decorative art that pushes the action out of view.

Examples:

Tables and Data

Sketch can support data displays, but dense data should be simplified and kept readable.

Table rules:

• Use white or paper surface.
• Use dark text for values.
• Use subtle solid dividers rather than excessive dashed grid lines.
• Use JetBrains Mono for technical values where useful.
• Avoid decorative sketch marks inside dense tables.
• Use teal only for active or selected states.
• Use semantic colors only for real status meaning.
• Preserve readable row height.
• Provide responsive behavior for small screens.

For small screens, complex tables may become rounded cards or note-like rows.

Accessibility

Sketch enforces WCAG 2.2 AA as a baseline. A friendly hand-drawn aesthetic must never reduce usability, readability, or interaction clarity.

Core Accessibility Requirements

• Text must meet WCAG 2.2 AA contrast against its background.
• Every interactive element must be reachable and operable by keyboard.
• Every interactive element must have a visible focus-visible state.
• Color must never be the only indicator of state.
• Form errors must be visually and programmatically associated with fields.
• Semantic HTML must be used before ARIA.
• Touch targets should be large enough for comfortable interaction.
• Motion must respect reduced-motion preferences.
• Decorative illustrations must not disrupt reading order.
• Decorative sketch marks must not cover focus outlines or controls.

Contrast Requirements

The cream background and soft teal accent require careful contrast handling.

Rules:

• Use text or ink for body copy on cream and white surfaces.
• Do not use low-opacity graphite for important text.
• Teal text on cream or white must be tested before use.
• White text on teal buttons must be tested; dark text may be safer depending on size and weight.
• Dashed outlines must be visible enough to define components.
• Disabled states must remain understandable.
• Semantic colors must be tested against cream and white surfaces.

Do not assume soft colors are accessible. Test every foreground/background pair.

Focus States

Focus states should feel like visible sketch marks, but they must be unmistakable.

Preferred focus treatments:

• 3px teal outline with offset
• Teal outer ring plus dark border
• Strong underline plus outline for links
• Solid outline replacing dashed outline on focused cards
• Teal selected marker plus text label

Avoid faint teal glows, low-contrast pencil marks, or focus indicators hidden behind dashed borders.

Keyboard Interaction

Keyboard behavior must work across all friendly, sketch-like components.

Rules:

• Buttons activate with Enter and Space.
• Links activate with Enter.
• Choice cards use radio, checkbox, button, or link semantics.
• Modals trap focus and return focus after close.
• Menus and popovers support keyboard navigation.
• Search suggestions are keyboard navigable.
• Tabs support expected keyboard behavior.
• Drag-and-drop or drawing interactions provide keyboard alternatives where possible.

Do not make hand-drawn illustrations interactive unless they are reachable, labeled, and operable by keyboard.

Motion Accessibility

Sketch may use gentle motion, but it should be optional and supportive.

Acceptable motion:

• Pencil-line reveal
• Small button press
• Gentle card entrance
• Teal underline draw-in
• Sketch spinner
• Light selected-state pop

Motion rules:

• Respect prefers-reduced-motion.
• Avoid flashing or rapid repeated animation.
• Do not animate essential text away.
• Do not use motion as the only feedback.
• Avoid layout shifts while users are reading.
• Keep transitions short and functional.

Reduced-motion mode should preserve all meaning through static outlines, labels, and state changes.

Decorative Elements

Decorative sketch marks should be handled carefully.

Rules:

• Decorative illustrations should use aria-hidden="true" when rendered as elements.
• Decorative images should use empty alt="".
• Informative images need meaningful alt text.
• Decorative elements must not intercept pointer events.
• Decorative marks must not overlap text or focus indicators.
• Sketch texture must not reduce contrast.

Content and Tone

Sketch uses concise, confident, helpful copy with a warm, friendly voice. The writing should feel approachable and human, not childish or overly casual.

Voice Principles

Sketch copy should be:

• Clear
• Friendly
• Helpful
• Calm
• Specific
• Encouraging
• Easy to scan

The system can sound warm, but it should not become vague. Users should always know what happened, what is missing, and what action comes next.

Good Examples

Avoid

Good Sketch copy should feel kind and direct. Avoid babyish language, excessive exclamation marks, or jokes that obscure recovery steps.

Sketch-Inspired Copy Standards

Sketch metaphors should clarify the experience rather than hide meaning.

Good uses:

• Start sketching
• Create note
• Draw preview
• Open sketchbook
• Add template
• Save draft

Avoid vague metaphors:

• Make magic
• Scribble it
• Do the thing
• Let’s doodle
• Pencil power

The visual design can provide the playful sketch feeling. Copy should preserve clarity.

How to Use with AI Tools

Cursor and Claude Code

Add the Sketch skill file to your project so the assistant can use it as design-system context while generating UI code.

npx typeui.sh sketch

The skill file should be saved as SKILL.md or another project-level instruction file. Once present, ask the assistant to generate pages, components, flows, or refactors using the Sketch design system.

Example prompts:

Create a friendly onboarding flow using the Sketch design system.

Build accessible buttons, cards, inputs, and modals with dashed outlines, teal focus states, and pencil shadows.

Refactor this dashboard into a warm cream sketchbook interface with rounded pill controls.

Create an empty state with a simple pencil illustration, clear copy, and one teal primary action.

Claude

Use the design skill directly in Claude by adding the markdown file as project knowledge or pasting it into the beginning of a conversation.

Then ask for implementation-specific output:

Generate React components for Sketch buttons, cards, form fields, and alerts.

Create component rules for dashed cards, note callouts, choice cards, and empty states using this skill.

Audit this UI against the Sketch design rules and list required changes.

ChatGPT, Windsurf, Copilot, v0, and Other AI Tools

The file is standard markdown, so it can be used with any AI assistant that accepts context, prompt instructions, or project-level rules.

Useful workflows include:

• Paste the skill into the chat before requesting UI code.
• Add it to a repository-level instruction file.
• Use it as context for creative tools, education products, onboarding flows, or friendly dashboards.
• Use it to define component variants and interaction states.
• Use it as a QA checklist during code review.
• Ask the assistant to migrate an existing neutral UI into the Sketch hand-drawn style.

The best results come from prompting for concrete implementation details: cream paper canvas, teal interaction states, dashed outlines, pencil shadows, pill controls, handwritten typography, accessibility requirements, responsive behavior, and anti-patterns.

Design Philosophy

Sketch is governed by a few core principles.

1. The Interface Is a Sketchbook Page

The warm cream background, hand-drawn type, pencil lines, and light illustrations should make the interface feel like a digital notebook. Every section belongs on the same friendly paper surface.

2. Teal Is the Marker

Teal is the system’s one strong accent. It marks actions, focus, selection, and progress. It should guide the user without overwhelming the pencil-and-paper feeling.

3. Lines Create Personality

Dashed outlines, pencil dividers, underlines, and sketch marks create the brand’s visual identity. These marks should be tokenized and consistent, not random.

4. Rounded Controls Create Comfort

Pill-shaped controls make the product feel conversational and easy to approach. Buttons, chips, search, and tabs should feel soft and friendly.

5. Handmade Does Not Mean Messy

Sketch can include imperfection, but the system must still follow spacing, hierarchy, state, contrast, and layout rules.

6. Illustration Supports Meaning

Pencil drawings should orient, encourage, or clarify. They should never replace labels, block controls, or confuse assistive technologies.

7. Accessibility Is Part of Friendliness

A friendly interface must be usable. Clear contrast, visible focus, semantic markup, keyboard behavior, readable text, and reduced-motion support are non-negotiable.

Anti-Patterns

Avoid these implementations when generating Sketch-style interfaces:

• Pure white full-page backgrounds instead of warm cream paper
• Cold gray app shells
• Glossy gradients, glassmorphism, or polished 3D effects
• Heavy black neobrutalist shadows instead of soft pencil shadows
• Thin low-contrast dashed outlines
• Random sketch marks that interfere with content
• Overuse of teal on every heading, icon, and border
• Teal body text that fails contrast
• Sharp rectangular controls where pill controls are expected
• Placeholder-only form labels
• Decorative illustrations that cover text or focus outlines
• Illustrations exposed unnecessarily to screen readers
• Handwritten text that is too small to read
• Long dense paragraphs in the handwriting font
• Vague labels like Submit, Click here, or Go
• Color-only selected, success, warning, or error states
• One-off spacing values outside the defined scale
• Components missing hover, focus-visible, active, disabled, loading, or error states

Sketch should feel handmade and warm, but never unclear, inaccessible, or visually careless.

Migration Notes

When adapting an existing interface to Sketch, migrate in this order:

1. Replace the page background with the warm cream secondary paper canvas.
2. Convert generic white areas into sketch objects with rounded corners.
3. Add dashed outlines to standard cards and callouts.
4. Add solid outlines to inputs, buttons, selected cards, and focused components.
5. Replace soft digital shadows with chunky offset pencil shadows.
6. Convert primary controls to rounded pill geometry.
7. Assign teal #1DAD97 to primary actions, focus states, selected states, and friendly highlights.
8. Introduce Delicious Handrawn for primary and display typography.
9. Use JetBrains Mono only for code, metadata, and technical values.
10. Normalize type sizes to the 12 / 14 / 16 / 20 / 24 / 32px scale.
11. Normalize spacing to the 4 / 8 / 12 / 16 / 24 / 32px scale.
12. Add simple pencil-style illustrations to major empty states and onboarding sections where useful.
13. Replace vague labels with clear, friendly action copy.
14. Add explicit hover, focus-visible, active, disabled, loading, and error states.
15. Test contrast across cream, white, teal, graphite, and semantic states.
16. Verify keyboard navigation and screen reader behavior.
17. Add reduced-motion fallbacks for sketch animations.
18. Run the QA checklist before shipping.

Do not migrate by only changing the font and adding doodles. Sketch depends on the full system: cream paper, teal interaction, dashed outlines, pencil shadows, pill controls, readable handwritten typography, meaningful illustration, and accessibility-first behavior.

QA Checklist

Use this checklist when reviewing generated UI against the Sketch design skill.

Visual System

• The page background uses warm cream #F4EDE0.
• White surface is used for cards, panels, modals, and form fields.
• Teal #1DAD97 is used for interaction, focus, selection, and emphasis.
• Cards use dashed outlines where appropriate.
• Important controls use clear solid outlines.
• Pencil shadows are chunky, offset, and blur-free.
• Controls use rounded pill geometry.
• Decorative sketch marks support the layout without creating clutter.
• The interface feels hand-drawn and friendly, not messy or childish.
• Glossy gradients, glass effects, and heavy digital shadows are avoided.

Typography

• Delicious Handrawn is used for primary and display typography.
• JetBrains Mono is reserved for code, metadata, and technical values.
• Type sizes come from the 12 / 14 / 16 / 20 / 24 / 32px scale.
• Handwritten text remains readable at supported sizes.
• Body copy uses sufficient line height.
• Long labels and headings wrap cleanly.
• Small text is used only for short captions or metadata.
• Text is not distorted, rotated, or overdecorated in functional UI.

Components

• Buttons are pill-shaped, readable, and action-oriented.
• Buttons include default, hover, focus-visible, active, disabled, loading, and error states.
• Cards include standard, interactive, selected, loading, empty, and error states where relevant.
• Forms use visible labels and accessible error messaging.
• Inputs have strong outlines and teal focus states.
• Navigation has clear active and focus-visible states.
• Choice cards support keyboard selection.
• Modals trap focus and return focus after closing.
• Alerts use semantic colors plus text or structural cues.
• Empty states include helpful copy, a simple illustration when useful, and one clear action.
• Tables preserve readability and responsive behavior.

Accessibility

• Text contrast meets WCAG 2.2 AA.
• Teal on cream, teal on white, and text on teal have been tested.
• Dashed outlines are visible enough to define components.
• Keyboard navigation works across all interactive elements.
• Focus-visible states are obvious and not hidden by sketch marks.
• Color is never the only indicator of state.
• Form errors are linked to fields programmatically.
• Semantic HTML is used before ARIA.
• Touch targets are comfortable.
• Reduced-motion preferences are respected.
• Decorative illustrations are hidden from assistive technologies when they carry no meaning.

Content

• CTA labels are specific and action-oriented.
• Error messages explain what happened and how to recover.
• Empty states explain what is missing and what to do next.
• Destructive actions clearly state consequences.
• Copy feels friendly without becoming vague or childish.
• Sketch metaphors clarify rather than obscure meaning.
• Vague labels like Submit, Click here, and Go are avoided.

Sketch is a disciplined design system for interfaces that should feel warm, hand-drawn, friendly, and tactile. Its strength comes from cream paper, soft teal accents, dashed pencil outlines, chunky offset shadows, rounded pill controls, handwritten typography, and accessibility-first implementation rules.