Fiction design skill for AI agents

Overview

Fiction is a playful, energetic, cartoonesque design system skill file that instructs AI coding assistants to generate interfaces inspired by friendly children’s-book illustrations. Its aesthetic is warm, bold, rounded, approachable, and highly graphic: cream backgrounds, thick black outlines, large custom-feeling display typography, saturated color blocks, flat surfaces, and decorative illustration moments throughout.

Where many modern design systems aim for sleek neutrality, Fiction aims for delight. It should feel like an illustrated storybook adapted into a usable digital product. Cards feel like friendly panels. Buttons feel like chunky stickers. Sections feel like pages in a picture book. Icons and illustrations feel hand-drawn, expressive, and intentionally imperfect without becoming messy.

When you feed this skill file to an AI assistant, every generated component — buttons, cards, forms, navigation, modals, onboarding screens, dashboards, empty states, landing pages, pricing sections, and playful product flows — should inherit the Fiction personality: warm cream foundations, big rounded shapes, strong black outlines, friendly typography, saturated visual accents, and clear interaction states.

The result is a UI system that feels joyful, readable, imaginative, and approachable while still remaining structured, accessible, and implementation-ready.

Design Tokens

Color Palette

Fiction uses a warm, friendly palette grounded in cream and black. The provided tokens establish the core system: near-black for outlines and emphasis, warm cream for page backgrounds, white for foreground cards, and semantic colors for state feedback.

The most important visual relationship is between warm cream, white foreground surfaces, and thick near-black outlines. The interface should feel like inked shapes placed on a soft illustrated page.

The cream secondary color #FFE9CE should be the default page background. Pure white should be used for foreground objects, not as the full-page canvas. This keeps the interface warm and storybook-like rather than sterile.

The primary color #222222 should function as the system’s ink. It defines shapes, outlines controls, frames cards, supports headings, and gives the playful visual system enough structure to remain usable.

Saturated Illustration and Block Colors

The brand calls for saturated color blocks and decorative hand-drawn-feeling illustrations in every section. The base token set does not include a full illustration palette, so implementations should add semantic illustration tokens instead of scattering raw color values throughout the codebase.

Recommended optional semantic roles:

These colors should support the illustrated world, not replace the core system. Most content should still be readable on cream or white surfaces with dark text.

Color Usage Principles

Fiction color usage follows four rules:

1. Cream is the storybook page — use secondary as the dominant background.
2. Black is the ink — use primary for outlines, borders, headings, and graphic structure.
3. White is the paper object — use surface for cards, modals, form fields, and panels.
4. Saturated colors are illustrations — use bright accents for decorative blocks, characters, badges, and occasional emphasis, not for every UI element.

Avoid making the product feel like a random toy box. Fiction is playful, but it should still have a consistent visual grammar.

Typography

Fiction uses Cossette Texte for both primary and display typography. The system should feel custom, friendly, bold, and storybook-like. Typography carries much of the personality, especially in headings, buttons, labels, and section titles.

Font Families

Cossette Texte should be used consistently. Its role is to make the interface feel illustrated and distinctive without requiring every element to be decorated.

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

Type Scale

Fiction uses a simple, readable type scale:

Because Fiction is playful, display typography can be large and expressive, but the scale should still be controlled. Do not make every label oversized. Reserve the biggest type for story moments and page-level hierarchy.

Weight

Available weights range from 100 through 900, but Fiction should rely on bold, friendly weights rather than delicate ones.

Recommended usage:

• 400 for body copy
• 500 for labels and navigation
• 600 for buttons and card headings
• 700 for section headings
• 800–900 for big storybook hero titles and celebratory moments

Avoid very thin text. Thin weights can feel fragile against thick outlines and saturated illustration blocks.

Text Shape and Personality

Fiction typography may use playful treatments, but readability must remain the priority.

Recommended treatments:

• Use bold headings with generous line height.
• Use sentence case for body copy.
• Use short uppercase labels only for badges or small UI markers.
• Use friendly punctuation sparingly.
• Avoid long all-caps paragraphs.
• Avoid distorted text or wavy baselines for functional UI.

Good typography in Fiction should feel cheerful and expressive, not chaotic.

Spacing

Fiction uses a 4px-based spacing scale:

Spacing should feel generous and friendly. Thick outlines, rounded corners, and illustrated elements need room to breathe. If spacing is too tight, the interface becomes visually noisy and loses the easy storybook feeling.

Use larger spacing around:

• Large display headings
• Illustrated section art
• Chunky buttons
• Rounded cards
• Sticker-like badges
• Empty-state illustrations
• Multi-card layouts

Fiction should feel full of life, but not crowded.

The Fiction Look

Fiction has a distinct visual identity built around illustrated warmth, thick outlines, and friendly rounded shapes.

Warm Cream Storybook Canvas

The page should live on the warm cream secondary background. This creates the feeling of an illustrated book page and keeps the interface soft, friendly, and inviting.

Do:

• Use #FFE9CE for full-page backgrounds.
• Place white cards and panels on top of the cream canvas.
• Use saturated illustration blocks to create scene variety.
• Maintain strong text contrast.

Do not:

• Use pure white as the dominant page background.
• Use cold gray app shells.
• Replace cream with generic neutral backgrounds.
• Overwhelm the page with saturated full-screen sections.

The cream background is part of the brand’s emotional tone. It should be present across the experience.

Thick Black Outlines

Thick outlines are one of Fiction’s strongest visual signatures. They make UI elements feel illustrated, friendly, and tactile.

Recommended border rules:

• Use 2px borders for small controls.
• Use 3px borders for standard cards, buttons, inputs, and panels.
• Use 4px borders for hero cards, feature panels, or large illustrated containers.
• Use primary / ink for borders.
• Avoid thin gray borders.
• Avoid borderless white cards on cream backgrounds.

Outlines should feel like confident ink strokes, not technical dividers.

Generously Rounded Shapes

Fiction uses rounded forms to feel friendly and childlike. Corners should be visibly rounded, not barely softened.

Recommended radius roles:

Use rounded shapes generously, but keep them consistent. Avoid mixing sharp rectangles with very round cards unless the contrast is intentional.

Flat Surfaces With Almost No Shadows

Fiction should feel flat and illustrated. Unlike neobrutalist or arcade-inspired systems, it should not rely heavily on offset shadows.

Preferred separation methods:

• Thick black outlines
• Background contrast
• Rounded panels
• Saturated color blocks
• Illustration placement
• Spacing

Use shadows rarely. When shadows appear, they should be subtle and secondary to the outline. Avoid soft SaaS elevation systems, glassmorphism, glossy highlights, or complex gradients.

Saturated Brand Color Blocks

Fiction uses saturated blocks of color to create playful energy. These blocks should feel like cut-paper shapes, storybook scenery, stickers, or illustrated props.

Use saturated blocks for:

• Hero accents
• Feature section backdrops
• Badge backgrounds
• Illustration containers
• Empty-state art
• Friendly callouts
• Decorative dividers
• Onboarding steps

Rules:

• Do not place small low-contrast text directly on saturated blocks unless contrast passes.
• Do not use too many saturated colors in one small area.
• Use thick black outlines when blocks function as UI objects.
• Keep decorative blocks secondary to content.
• Use semantic state colors only for actual success, warning, or danger states.

Hand-Drawn-Feeling Illustrations

Each major section should include some decorative illustrated element when appropriate. These can be small, simple, and abstract. They do not need to be complex character art.

Illustration styles may include:

• Friendly characters
• Rounded stars
• Clouds
• Scribble marks
• Wavy paths
• Sticker shapes
• Speech bubbles
• Books, pencils, toys, plants, houses, animals, or simple props
• Cut-paper color blocks with black outlines

Illustrations should feel handmade, but the implementation should remain clean. Do not add random clip art that clashes with the system.

Playful Without Being Childish

Fiction is inspired by children’s-book illustrations, but it should still work for real products. The interface can be joyful and whimsical while staying clear, usable, and purposeful.

The best Fiction UI feels:

• Warm
• Friendly
• Bold
• Rounded
• Illustrated
• Helpful
• Easy to understand

It should not feel chaotic, overly childish, or visually exhausting.

Component Coverage

The Fiction skill file should guide full interface generation across product UI, marketing pages, onboarding flows, dashboards, educational tools, and playful applications.

Buttons

Buttons should feel chunky, friendly, and easy to press. They should look like rounded illustrated stickers or storybook controls.

Button variants:

Primary button rules:

• Use thick 2px or 3px primary border.
• Use generous border radius, usually 12px to 20px.
• Use bold Cossette Texte label text.
• Use clear action-oriented copy.
• Use either white fill, cream fill, or saturated brand block fill.
• Preserve high contrast between label and fill.
• Avoid heavy shadows.
• Use visible hover, focus-visible, active, disabled, and loading states.

Recommended button state behavior:

Good button labels:

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

Cards

Cards should feel like rounded story panels. They hold content, actions, illustrations, stats, or steps.

Card rules:

• Use white surface fill on cream background.
• Use 3px primary outline.
• Use generous radius, usually 16px to 28px.
• Use little to no shadow.
• Use clear heading hierarchy.
• Include illustration or decorative shape when it supports comprehension.
• Keep padding on the spacing scale.
• Ensure long content wraps cleanly.
• Keep card grids aligned even when illustrations vary.

Card variants:

Interactive cards should be keyboard accessible and must not rely only on hover effects.

Forms

Forms should be friendly, readable, and low-stress. Fiction forms can be playful, but they must not feel like puzzles.

Form rules:

• Labels must always be visible.
• Placeholder text must not replace labels.
• Inputs should use white fill, thick black outline, and rounded corners.
• Input text should be 16px.
• Helper text should be concise and readable.
• Error messages must be connected to fields programmatically.
• Required fields must be indicated accessibly.
• Focus-visible states must be obvious.
• Disabled fields must remain understandable.
• Long labels and helper text must wrap cleanly.

Recommended input styling:

.input {
  background: var(--surface);
  color: var(--text);
  border: 3px solid var(--primary);
  border-radius: 16px;
  padding: 12px 16px;
  font-family: var(--font-primary);
  font-size: 16px;
}

.input:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

For dense forms, reduce illustration density and preserve clarity. A checkout form or account settings screen should still feel Fiction-like, but usability comes first.

Navigation

Navigation should feel like friendly wayfinding in an illustrated world. It should be obvious, rounded, and easy to scan.

Navigation rules:

• Use Cossette Texte at 14px or 16px.
• Use thick outlines or rounded active states.
• Use clear labels.
• Keep iconography simple and friendly.
• Preserve keyboard navigation.
• Show active state with more than color.
• Provide visible focus states.
• Avoid tiny subtle text links.

Navigation patterns may include:

• Rounded top nav
• Sticker-like active tabs
• Friendly sidebar panels
• Breadcrumbs as story steps
• Bottom nav for mobile
• Illustrated section anchors

Active states can use:

• Bold text
• Thick underline
• Rounded filled pill
• Small illustrated marker
• Border change
• Icon plus label

Hero Sections

Hero sections are a major Fiction moment. They should feel like the opening spread of a children’s book.

Hero rules:

• Use warm cream background.
• Use a large bold 32px or responsive display heading.
• Include one clear primary CTA.
• Use a friendly illustration or saturated color block.
• Keep supporting copy short.
• Use rounded panels and thick outlines.
• Avoid overly complex layouts.
• Ensure text remains readable on all backgrounds.

Common hero compositions:

• Text on left, illustrated character/card on right
• Centered heading with sticker-like CTA
• Large rounded white panel with decorative shapes
• Storybook scene with clear foreground text
• Product screenshot framed like an illustrated object

Onboarding and Step Flows

Fiction works especially well for onboarding, education, creation tools, and guided flows.

Step flow rules:

• Use friendly progress labels.
• Make the current step visually obvious.
• Use rounded step cards.
• Include simple illustrations where helpful.
• Keep each step focused on one decision or action.
• Provide clear back and next controls.
• Support keyboard navigation.
• Avoid hiding required information inside decorative interactions.

Example labels:

Choice Cards and Quizzes

Choice cards should feel playful and tactile, but they must remain accessible.

Choice card rules:

• Use button, radio, or checkbox semantics as appropriate.
• Use thick outlines and rounded corners.
• Selected state must use more than color.
• Correct and incorrect states must include text or icon cues.
• Hover states should be subtle and not required for comprehension.
• Focus-visible states must be obvious.
• Long option text must wrap cleanly.
• Touch targets should be comfortable.

State treatments:

Modals and Overlays

Modals should feel like rounded pop-up story panels.

Modal rules:

• Use white surface fill.
• Use thick black outline.
• Use large rounded corners.
• Keep shadows minimal or absent.
• Use clear title text.
• Use one primary action and one secondary action when possible.
• Trap focus inside the modal.
• Close on Escape unless the user must explicitly confirm.
• Return focus to the triggering element after close.
• Avoid large decorative art that pushes important content below the fold.

Destructive modals must use clear consequence-based copy.

Alerts and Feedback

Alerts should be friendly but direct. They should look like illustrated notices rather than harsh system errors.

Alert rules:

• Use semantic colors only for actual states.
• Include text labels and recovery guidance.
• Do not rely on color alone.
• Use rounded containers and thick outlines.
• Keep alert copy concise.
• Make dismiss controls keyboard accessible.
• Avoid playful language that obscures the problem.

Example feedback copy:

Empty States

Empty states are a signature opportunity for Fiction. They should feel illustrated, helpful, and encouraging.

Empty state rules:

• Use a rounded white card or cream section.
• Include a simple friendly illustration.
• Use a clear heading.
• Explain what is missing.
• Provide one primary next action.
• Avoid blame or vague wording.
• Keep the layout spacious.

Examples:

Tables and Data

Fiction can support data-heavy components, but dense information should be softened without reducing clarity.

Table rules:

• Use readable 14px or 16px text.
• Use white table surfaces on cream background.
• Use black outlines for table containers.
• Use subtle row separation.
• Avoid excessive illustration inside dense tables.
• Use JetBrains Mono for technical values where useful.
• Use semantic colors only for actual status.
• Provide responsive behavior for small screens.

For small screens, complex tables may become stacked rounded cards.

Accessibility

Fiction enforces WCAG 2.2 AA as a baseline. The system’s playful personality must never make the UI harder to read, navigate, or operate.

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 elements must be hidden from assistive technologies when they carry no meaning.

Contrast Requirements

The cream canvas is warm and friendly, but contrast still needs to be tested.

Rules:

• Use text or primary for body text on cream and white surfaces.
• Avoid low-contrast pastel text.
• Do not place small text directly on saturated blocks unless contrast passes.
• Use thick outlines to preserve shape clarity.
• Ensure disabled states remain understandable.
• Test semantic colors against their actual backgrounds.

Playful colors are not automatically accessible. Every foreground and background combination must be checked.

Focus States

Focus states should be bold, visible, and consistent with the illustrated style.

Preferred focus treatments:

• 3px solid outline
• Offset outline outside the black border
• Strong underline for links
• Rounded focus ring matching the component radius
• Border-weight change plus outline for inputs

Avoid faint glows, low-contrast pastel rings, or focus states hidden behind decorative illustrations.

Keyboard Interaction

Keyboard interaction must work across all playful components.

Rules:

• Buttons activate with Enter and Space.
• Links activate with Enter.
• Choice cards use proper radio, checkbox, button, or link semantics.
• Modals trap focus and return focus after close.
• Carousels and illustrated step flows provide keyboard controls.
• Drag-and-drop interactions provide keyboard alternatives.
• Tab order must match visual order.

Do not build interactive illustrations that only work with a pointer.

Motion Accessibility

Fiction may use small playful animations, but motion must be optional and purposeful.

Acceptable motion:

• Small hover bounces
• Gentle card entrance
• Sticker-like selected state
• Illustration wiggle
• Progress celebration
• Loading character animation

Motion rules:

• Respect prefers-reduced-motion.
• Do not use flashing or rapid repeated animation.
• Do not animate essential text away before it can be read.
• Do not create layout shifts while users are reading.
• Provide static feedback in addition to animated feedback.

Reduced-motion mode should preserve all content and interaction meaning.

Content and Tone

Fiction uses concise, confident, helpful copy with a warm, friendly voice. The writing should feel encouraging and clear, not childish or vague.

Voice Principles

Fiction copy should be:

• Friendly
• Clear
• Encouraging
• Specific
• Short
• Action-oriented
• Easy to understand

The system can use light playfulness, but it should not talk down to users. Avoid babyish language, excessive exclamation marks, or jokes that make errors harder to understand.

Good Examples

Avoid

Good Fiction copy should make the product feel welcoming while still telling users exactly what will happen.

Illustration Copy Standards

When an illustration appears with content, the copy should do the functional work. The illustration supports the message but does not replace it.

Every illustrated empty state or onboarding panel should include:

• A clear heading
• A short explanation
• One primary action
• Recovery guidance when relevant

Example:

No stories yet

Create your first story to start filling your shelf.

[Start story]

How to Use with AI Tools

Cursor and Claude Code

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

npx typeui.sh fiction

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 Fiction design system.

Example prompts:

Create a playful onboarding flow using the Fiction design system.

Build a landing page with warm cream backgrounds, rounded cards, thick black outlines, and illustrated section moments.

Generate accessible button, card, input, and modal components that follow the Fiction style.

Refactor this empty state to feel like a friendly storybook panel.

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 Fiction buttons, cards, and form fields.

Create component rules for story cards, choice cards, onboarding steps, and empty states using this skill.

Audit this UI against the Fiction 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 playful product pages or educational tools.
• 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 Fiction storybook aesthetic.

The best results come from prompting for concrete implementation details: token usage, border width, radius, component states, accessibility requirements, illustration behavior, responsive rules, and anti-patterns.

Design Philosophy

Fiction is governed by a few core principles.

1. The Interface Is a Storybook Page

The cream canvas, rounded shapes, illustrations, and bold typography should make the interface feel like a digital picture book. Every section should feel composed and friendly.

2. Outlines Create Trust

Thick black outlines give playful shapes structure. They make controls easier to identify and keep the system from becoming visually vague.

3. Rounded Shapes Make the Product Feel Friendly

Generous radius is not decoration in Fiction. It is part of the emotional tone. Rounded cards, buttons, inputs, and panels make the interface feel safe and approachable.

4. Illustration Supports Meaning

Illustrations should help orient, encourage, explain, or delight. They should not obscure content, interfere with accessibility, or distract from the primary task.

5. Playful Does Not Mean Random

Fiction is expressive, but it is still a design system. Tokens, spacing, typography, borders, radius, and component states must remain consistent.

6. Accessibility Is Part of Friendliness

A friendly interface must be usable. Contrast, keyboard navigation, visible focus states, readable copy, semantic HTML, and reduced-motion support are non-negotiable.

Anti-Patterns

Avoid these implementations when generating Fiction-style interfaces:

• Pure white full-page backgrounds instead of warm cream
• Thin gray borders instead of thick black outlines
• Sharp rectangular cards with no rounded personality
• Heavy drop shadows that make the system feel like neobrutalism
• Glassmorphism, blur, glossy gradients, or metallic effects
• Random saturated colors without semantic roles
• Low-contrast pastel text
• Placeholder-only form labels
• Tiny subtle links that disappear on cream backgrounds
• Decorative illustrations that cover text or controls
• Illustrations exposed unnecessarily to screen readers
• Childish or patronizing copy
• Excessive exclamation marks in system messages
• Vague labels like Submit, Click here, or Go
• Color-only selected, success, warning, or error states
• One-off spacing values outside the defined scale
• Too many competing decorative elements in one section
• Components missing hover, focus-visible, active, disabled, loading, or error states

Fiction should feel playful, warm, and illustrated, but never cluttered, inaccessible, or unclear.

Migration Notes

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

1. Replace the page background with the warm cream secondary canvas.
2. Convert white content areas into rounded storybook panels.
3. Add thick primary outlines to cards, buttons, inputs, and modals.
4. Increase border radius across components using shared radius tokens.
5. Remove heavy shadows, glass effects, and glossy gradients.
6. Introduce Cossette Texte for primary and display typography.
7. Normalize type sizes to the 12 / 14 / 16 / 20 / 24 / 32px scale.
8. Normalize spacing to the 4 / 8 / 12 / 16 / 24 / 32px scale.
9. Add saturated decorative blocks through semantic illustration tokens.
10. Add hand-drawn-feeling illustrations to major sections and empty states.
11. Define explicit hover, focus-visible, active, disabled, loading, and error states.
12. Replace vague labels with friendly, specific action copy.
13. Test contrast across cream, white, saturated blocks, and semantic states.
14. Verify keyboard navigation and screen reader behavior.
15. Run the QA checklist before shipping.

Do not migrate by only changing fonts and adding illustrations. Fiction depends on the complete system: cream canvas, thick outlines, rounded shapes, flat surfaces, playful typography, accessible states, and meaningful illustration.

QA Checklist

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

Visual System

• The page background uses warm cream #FFE9CE.
• White surface is used for cards, panels, modals, and form fields.
• Thick primary outlines define key objects.
• Rounded shapes are used generously and consistently.
• Surfaces are mostly flat, with little to no shadow.
• Saturated color blocks are used intentionally.
• Decorative illustrations appear in major sections where appropriate.
• The interface feels playful and storybook-like without becoming chaotic.
• Pure white is not used as the dominant page background.
• Glassmorphism, heavy shadows, and glossy gradients are avoided.

Typography

• Cossette Texte 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.
• Display headings feel bold and friendly.
• Body copy remains readable.
• Text is not distorted for decoration.
• Long headings and labels wrap cleanly.

Components

• Buttons are rounded, outlined, readable, and action-oriented.
• Buttons include default, hover, focus-visible, active, disabled, loading, and error states.
• Cards feel like rounded story panels.
• Forms use visible labels and accessible error messaging.
• Navigation has clear active and focus states.
• Choice cards support keyboard selection.
• Modals trap focus and return focus after closing.
• Alerts use semantic colors plus text or icon cues.
• Empty states include helpful copy, illustration, and one clear action.
• Tables preserve readability and responsive behavior.

Accessibility

• Text contrast meets WCAG 2.2 AA.
• Text on cream, white, saturated blocks, and semantic colors has been tested.
• Keyboard navigation works across all interactive elements.
• Focus-visible states are obvious.
• 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 friendly.
• 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 warm without being childish.
• Vague labels like Submit, Click here, and Go are avoided.
• Illustrations support the message instead of replacing it.

Fiction is a disciplined design system for interfaces that should feel playful, warm, illustrated, and approachable. Its strength comes from storybook composition, thick ink-like outlines, rounded shapes, flat surfaces, expressive typography, and accessibility-first interaction rules.