Interface Atlas

Theme 09 Layered Draft 0.1.0

A purposeful surface language

Layered

A clearer place for everyday things.

System reduced-motion preferences take priority.

Controls become available when JavaScript runs.

Room to begin

A little space for
what’s next.

Keep a few good plans in view. Choose a project, take one step, and leave room for the rest.

Explore the projects
Across these three projects

3 of 9 sample tasks completed

One thing at a time

Projects with a little purpose.

3 projects

With JavaScript off, all project details remain readable. Search, task updates, and editing are unavailable.

Personal

Reading corner

Make a little room for reading and a useful note.

1 of 3 tasks completedNormal
Open
Creative

Studio refresh

Give a small creative space a considered refresh.

2 of 3 tasks completedFocus
Open
Personal

Weekend walk

Prepare a simple walk with space to notice things.

0 of 3 tasks completedLater
Open

The next few steps

A plan you can work with.

Filters leave your open project in place.

Personal Normal

Reading corner

Make a little room for reading and a useful note.

Sample tasks 1 of 3 tasks completed

Creative Focus

Studio refresh

Give a small creative space a considered refresh.

Sample tasks 2 of 3 tasks completed

Personal Later

Weekend walk

Prepare a simple walk with space to notice things.

Sample tasks 0 of 3 tasks completed

A closer look at the language

Soft edges. Clear purpose.

Opaque surfaces establish place and emphasis. Density changes only the inset of the neutral specimen below.

Neutral component specimen

Comfortable density · 24px panel inset

Information specimen. Changes in the workspace last until reload.

Error specimen. Enter a project title before saving.

PageNavigationContentFormContextSupport

Type & language

Room for
a good idea.

Plus Jakarta Sans brings a friendly, geometric voice. Installed local faces or system fallbacks render this preview; no font files are downloaded.

Một khoảng riêng cho những điều sắp tới. Từng bước nhỏ giúp ý tưởng trở nên rõ ràng hơn.

LAYERED-PROJECT-COMPONENT-REFERENCE-0001
3 sample projects / Local changes only

Surface roles · Static design specimen
RolePurposeBoundary
NavigationA quiet place to move between sectionsPersistent workspace plane
ContentKeep projects and tasks readable at a comfortable densityOpaque content containers
Form and dialogGive a temporary edit its own focus and an explicit way backLAYERED-NATIVE-DIALOG-CONTEXT-0003

Small plans / Project settings

Edit project

Changes stay in this demo until reload. Cancel or press Escape to leave the project unchanged.

Use 1–60 characters. Spaces at the beginning and end are removed.