sumi. The component playground
A study in everyday interfaces

Sumi.css Class-less CSS Framework Demos

Download Back To CSSScript.Com

Explore type, try the controls, and make the details your own.
Every component is ready to interact with.

01

Type & texture

The type scale
Display
Room to breathe.
H1

Less, with intention.

H2

A clear point of view.

H3

Find a quieter rhythm.

H4

The details belong here.

H5
A note in the margin
H6
The final detail
Field notes / 014

The art of paying attention

A few observations from the studio.

Good work starts with a little space.

Choose what matters, keep the rhythm unhurried, and give each idea room to develop. A small adjustment can change the whole composition.

Edition 02 ·

Leave enough space for the next idea.

Studio notebook
Inline details

Press Ctrl + S to save. The file is field-notes.txt and its status is ready.

PDF · H2O · 24 m2 · Previous draft · Revised edition

const notebook = {
  title: 'Field notes',
  status: 'ready',
  pages: 24
};

A quiet morning, an open notebook, and a thought worth keeping. Begin with a single line.


Lists
  • A sketchbook for loose ideas
    • Notes from the morning walk
    • A study in negative space
  • A pencil with a soft point
  1. Observe the shape.
  2. Make the first mark.
  3. Return with fresh eyes.
Definitions
Composition
The arrangement of elements within a frame.
Rhythm
A pattern of intervals, repetition, and pauses.
Negative space
The open area around and between forms.
02

Actions, big & small

Variants & sizes
Groups & states

A place for your next idea.

Continue to forms
03

A place for every input

Studio reservation
The name for your reservation. Enter a complete email address. This workspace name is available.
Experience
Bring to the session
Notifications
Optional. Select an image or PDF.

Your reservation stays in this demo.
More field types
04

Everything in order

Upcoming sessions
November studio calendar
SessionDateSeatsStatus
Drawing in the quietNov 14, 20268 / 12Open
Light & shadowNov 18, 202611 / 12Last seat
The print roomNov 21, 202612 / 12Full
An open sketchbookNov 28, 20266 / 12Open
Total reservations37 / 484 sessions
06

Pieces that fit

The open studioAccepting guests

A little room to create.

A desk by the window, shared materials, and an afternoon at your own pace.

Next session
Saturday, November 14
Includes
Materials, tea, and a place to begin.
From the notebook
Collection / 028

Studies in stillness

Small observations from a week spent looking closely. Shapes, shadows, and the spaces between.

Begin with what is already in front of you.

24 pages · Personal collection
Accordion
What should I bring?

Bring a notebook and anything you enjoy working with. Pencils, paper, and basic drawing materials are available in the studio.

Can I change my session?

Yes. Choose another date from the reservation form before you confirm your session.

Is the studio suitable for beginners?

All experience levels are welcome. Work at your own pace and start with a simple study.

Take a closer look

A preview with a little more focus.

07

A clear response

Callouts

A small reminder. Your session starts at 9:30 AM.

You're on the list. Your seat is reserved.

One seat left. This session is nearly full.

The file is too large. Choose a file under 10 MB.

Progress & tooltips
64%
64% 8 of 12 seats8 of 12 seats reserved
Preparing files
08

Space & structure

Two columns · full span · row · stack
A place to start
Room for another idea
A full-width momentEverything in balance
A quieter reading widthFirst, observe.Then, make a mark.Leave a little room.
09

Make it your own

Live adjustments

Accent

8 px
100%
Your preview

The next chapter.

A familiar space, with your own details.

Studies in stillness

Notebook / 028

An afternoon worth keeping.

A square of sunlight on the floor. The grain of the desk. A page with one line on it. There is always something to notice.

Look once. Then look a little longer.