Interface Atlas

Theme 04 · Play Draft 0.1.0

An expressive visual language

Make room
for play.

Big type. Soft colors. A little unexpected.
A friendly system for ideas with a point of view.

Original Atlas preview · Fictional projects · Local demo

Make yourself at home.

Preferences are available when JavaScript runs.

System reduced motion takes priority.

01 / Creative portfolio adaptation

Serious about
good ideas.

Meet three small imaginary projects with big personalities. Each one starts with a problem and a few deliberate decisions.

Brand identity / Fictional case study

A little closer
to your neighbors.

Give a neighborhood swap club a warm, useful identity that feels welcoming before the first hello.

Inside the Sprout project

The starting point

A local club needs a name, a signup card, and a simple way to explain what members can share.

The design decisions

A growing two-leaf symbol introduces the idea of exchange. Large words make the invitation direct; a mint surface keeps the tone light. The signup card uses plain labels and a visible next step.

This is an original illustrative brief. No client, launch, or measured outcome is claimed.

Product design / Fictional case study

A home for your
“maybe later.”

A sketchbook for half-formed thoughts. Make it easy to collect an idea without deciding what it becomes.

Inside the Daydream project

The starting point

A creative notebook needs quick capture and a calm way to revisit older ideas without ranking every note.

The design decisions

The writing surface stays quiet while labels and controls carry a little personality. Notes remain selectable, the add action has an explicit label, and a native disclosure keeps supporting context close.

This is an original illustrative brief. No app, user research result, or shipped product is claimed.

Campaign / Fictional case study

Make something.
Find your people.

A community making afternoon needs a bright invitation and an easy path from curiosity to joining in.

Inside the Come Around project

The starting point

A free making afternoon needs a poster and a short event page that tells newcomers what to expect.

The design decisions

Overlapping circles suggest people gathering. The invitation leads with the activity, then gives the time, place, and access information in a readable order. The join action remains visible at small sizes.

This is an original illustrative brief. No event, attendance, or campaign outcome is claimed.

Three different ideas, one visual language. Open a project to read its brief; every disclosure works without JavaScript.

02 / Project intake adaptation

A big idea
starts small.

Local demo

No backend connected.
Use fictional project details.

Your project brief

Use a fictional name, up to 80 characters. Avoid personal details.

What kind of project?

Choose one starting point.

Write 15–600 characters. Keep it about the project.

0 / 600

What do you need?

Choose at least one deliverable.

Reset discards this brief and receipt in this page. Preferences stay saved.

Readable example brief

The interactive builder becomes available when JavaScript runs. Here is an example review:

Project name
The little idea club
Project type
Brand identity
Goal
Help neighbors discover a friendly club where they can share materials and try a creative project together.
Deliverables
Identity direction · Website concept

A confirmation request would remain pending until acknowledged. A local receipt would start no agent.

03 / Component specimen

Personality lives
in the details.

Compare the palette, type, and useful little controls.
Comfortable density · 24px specimen space

Typography / Sans + mono

A friendly voice.

Aa Bb
0123!

Good ideas deserve clear words. Let expressive headings introduce the story and quiet body text carry it.

Ý tưởng nhỏ, niềm vui lớn.
Một giao diện thân thiện và rõ ràng.

Manrope and JetBrains Mono are named roles. Installed fonts or local fallbacks render this preview.

IDEA-024 / 240ms / Aa → Bb

Controls / Useful affordances

An easy next step.

Editable local specimen. Nothing is submitted.

Friendly can be clear.

Give important information a stable home. The words explain it; the color helps you find it.

States / Every one has a name

Say what happened.

  • ConfirmedAcknowledged receipt
  • PendingAwaiting acknowledgement
  • Needs correctionNamed validation error
  • In reviewSnapshot ready to read
  • Not startedNo execution observed

These are independent sample states. A request alone establishes no receipt or execution.

A little order goes a long way.

Fictional project inventory. Scroll the table region on narrow screens.

Three imaginary projects
ProjectFocusSample stateConcepts
SproutBrand identityIn review03
DaydreamDigital productConfirmed02
Come AroundCreative campaignPending04