Skip to content
staqd

Fiction

Illustrates children's-book warmth with bold outlines and saturated color.

$9
Version
v1.0.0 · Updated Jul 18, 2026
Context
1,525 tokens
Security
✓ scanned
License
Single seat
Works with
Claude Code, Cursor, Codex
Get notified at launch

Checkout opens soon · launches at $9

staqd.ai/previews/fiction
Open

≈1,525 tokens · v1.0.0

Live demo — an original page built in the Fiction style. Open in new tab

About this skill

Fiction design is a playful children’s-book style with warm cream backgrounds, bold rounded typography, saturated color blocks, thick black outlines, soft shapes, and hand-drawn illustrations. Its live demo renders a magazine front page — masthead, lead story with pull quote, story grid, and newsletter signup.

The skill file

Fiction is the warmth of a well-loved picture book — cream pages, fat rounded letters, and bold blocks of color held together by confident inky outlines. Everything feels hand-made and friendly, like an illustration come to life. Reach for it when you want a product to feel approachable, joyful, and human: kids' apps, family tools, gentle onboarding, or any brand that wants to disarm rather than impress.

Design principles

  • Warmth first: backgrounds are cream, not white, so the whole interface feels soft and lit by a lamp.
  • Outline everything important. A thick ink stroke around cards, buttons, and inputs gives the hand-drawn, storybook signature.
  • Round all the corners. Nothing is sharp; shapes are friendly and pillowy.
  • Use saturated color blocks as scenery — full-bleed panels of orange, blue, or yellow that frame content like illustration backdrops.
  • Pair flat color with soft offset ink shadows (no blur) so elements feel like cut-paper collage lifted off the page.
  • Sprinkle hand-drawn touches: squiggle underlines, doodle icons, and slightly irregular shapes keep it human, not corporate.

Color

The page is a warm cream #FBF3E2; cards and panels lift to a brighter cream-white #FFFCF4. The ink color #2B2622 does triple duty as foreground text, outline border, and shadow color — this single dark stroke is what ties the whole style together. Primary actions and energy come from a friendly orange #F0653A; the secondary sky blue #3D86C6 and sunny yellow #F4C04B fill color-block sections and accents. Muted captions use a soft taupe #8A7F6F.

For a dark/evening variant, swap the page to a deep cocoa #241F1B with surface #332C26, keep the same saturated orange/blue/yellow accents (they glow nicely on dark), and flip text to the cream #FBF3E2 — but the bright cream-paper mode is the heart of the style. Whichever mode, always keep the ink-colored outlines and shadows so the storybook structure survives.

  • Typography
  • Layout & spacing
  • Components
  • Motion
  • Accessibility
  • Use it with your AI tool

Preview ends here

Typography, Layout & spacing, Components, Motion, Accessibility & Use it with your AI tool unlock when checkout opens. Get notified

What's inside

  • SKILL.md6.1 KB
v1.0.0Jul 18, 2026sha256: 9dd24243e2b4
staqdMember since Jul 2026 · 69 listings · 5 installsView profile →