CURATED · OPEN · FREE

Jonasmosesson Se

A playful, minimalist portfolio for an illustrator and animator.

PlayfulGalleryCleanCalmPortfolio

Jonasmosesson Se screenshot

↓ Download design system (42 MB)Open in OpenDesign

Visit: https://jonasmosesson.se

📦 Browse pack contents →

01

Identity DNA

playfulhand-drawnfriendlywhimsicalminimalist

A sketchbook come to life

02

Color

#0057FFInk

#FFD7CEBG

rgba(0,87,255,1)Line

Two-tone high-contrast palette with a soft warm background and vibrant blue accents.

03

Typography

humanist-sans

display48px · 600
body16px · 300

Use wide letter-spacing for uppercase micro-text and labels.

04

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous vertical spacing with large padding blocks.

05

Surfaces

sm · 0px

md · 0px

lg · 0px

pill · 999px

None, relying on flat color blocks.

06

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Full-width hero followed by a symmetric 2x2 grid of flat color blocks.

07

Motion & Interaction

250msmicro

400mssmall

800msmedium

cubic-bezier(0.25,0.1,0.25,1)easing

Smooth color transitions and opacity fades on hover.

Subtle opacity changes and color shifts. · Standard link behavior.

08

Components

button Text-based navigation links with simple underlines on hover or active states.
card Full-bleed color blocks for the portfolio grid.
hero Large hand-drawn typographic logo centered over a soft background.

09

Voice & Don'ts

Tone Casual, friendly, and inviting.
Headlines Hand-drawn and expressive.
CTAs Casual and conversational.

Don't use complex gradients — screenshot shows flat, solid color blocks.
Don't use heavy drop shadows — screenshot shows a completely flat design.
Don't use serif typography — screenshot uses a clean sans-serif for all text.
Don't use harsh dark backgrounds — screenshot uses soft pastels like #FFD7CE.
Don't overcrowd the layout — screenshot shows generous whitespace.
Don't use rigid, boxy borders — screenshot relies on flat colors and line art.
Avoid: Formal language
Avoid: Dense paragraphs
Avoid: Aggressive calls to action

10

Inside the pack — real screenshots

Jonasmosesson Se — 桌面首屏（hero） — 桌面首屏（hero）

Jonasmosesson Se — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jonasmosesson Se — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jonasmosesson Se — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jonasmosesson Se — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jonasmosesson Se — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jonasmosesson Se — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jonasmosesson Se — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jonasmosesson Se — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jonasmosesson Se — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jonasmosesson Se — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jonasmosesson Se — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jonasmosesson Se — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jonasmosesson Se — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jonasmosesson Se — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jonasmosesson Se — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jonasmosesson Se — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jonasmosesson Se — 移动首屏 — 移动首屏

Captured from the live site · real computed styles

11

System prompt

A playful, minimalist portfolio site for an illustrator and animator. The design relies on a simple two-tone color palette featuring a soft warm peach (#FFD7CE) background and vibrant blue (#0057FF) accents. Typography is a light, humanist sans-serif with expressive hand-drawn elements. The layout is spacious, using a centered container for text and a full-bleed 2x2 grid of solid color blocks for the portfolio. Critical donts: Avoid complex gradients or textures, do not use serif fonts, and do not add heavy drop shadows. Keep the tone casual, friendly, and inviting.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko