Fiction
Illustrates children's-book warmth with bold outlines and saturated color.
- Version
- v1.0.0 · Updated Jul 18, 2026
- Context
- ≈1,525 tokens
- Security
- ✓ scanned
- License
- Single seat
- Works with
- Claude Code, Cursor, Codex
Checkout opens soon · launches at $9
≈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
More in Design
View allEditorial Pack
Collects the editorial cluster — typography-led, content-first pages in one install.
Design Systems Pack
Bundles every aesthetic design system in one install — switch styles per project.
Arcade
Presses chunky pixel buttons and rainbow shadows into arcade-cabinet fun.
Terminal
Condenses dense, hairline-bordered dark UIs around one electric-green accent.
More from @staqd
View profileEditorial Pack
Collects the editorial cluster — typography-led, content-first pages in one install.
Design Systems Pack
Bundles every aesthetic design system in one install — switch styles per project.
Arcade
Presses chunky pixel buttons and rainbow shadows into arcade-cabinet fun.
Terminal
Condenses dense, hairline-bordered dark UIs around one electric-green accent.