Stylecheat
Login
A sign-in form built from inputs, checkboxes and buttons.
stylecheat.css/login

Welcome back

Sign in to continue to your workspace.

Forgot password?
Carousel
Four carousels on every axis, with the grid layer switched on.
stylecheat.css/carousel
No axis
Base

1

Slide 1

2

Slide 2

3

Slide 3

4

—
X axis
Base

1

Slide 1

2

Slide 2

3

Slide 3

4

X
Y axis
Base

1

Slide 1

2

Slide 2

3

Slide 3

4

Y
Z axis
Base

1

Slide 1

2

Slide 2

3

Slide 3

4

Z
Elements
A team dashboard composed from nothing but Stylecheat elements.
stylecheat.css/elements

Atlas redesign

Lorem ipsum dolor sit amet, consectetur adipiscing elit. A ground-up rebuild of the Atlas marketing site and dashboard, shipping in four milestones.

In progress Q4 2026 Internal
Completion

68%

On track
Budget used

$42,300

of $60k

Consectetur adipiscing elit, sed do eiusmod tempor.

Open tasks

17

3 overdue

Incididunt ut labore et dolore magna aliqua.

AllDesignEngineering
NameRoleStatus
Mara LindqvistDesign leadActive
Tomas ReyesFrontendActive
Ines OkaforIllustrationAway
Jonah WeissBackendActive
Priya NatarajanResearchOffline

Project brief

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. The current site runs on a six-year-old theme and three separate build pipelines, so the first job is to collapse everything into one vite build and ship the marketing pages first.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nothing goes live without a real user having seen it.

Deliverables

  • Marketing site with pricing, docs and changelog
  • Dashboard shell with the activity feed and billing
  • Design tokens shared between both, published as one stylesheet

Milestones

  1. Alpha — tokens and layout primitives, closed
  2. Beta — marketing pages behind a flag
  3. Release candidate — dashboard migrated, legacy API archived
  4. Launch — DNS cutover on a Tuesday morning

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Read the full specification or browse the component inventory before the kickoff.

Questions

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Every closed task counts once, weighted by its estimate, so a large migration moves the bar further than a typo fix.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. Leads publish, everyone else proposes. A proposal turns into a release after one approval.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum. Each push to main builds a preview and drops it into the carousel below the brief.

Invite a teammate
Mara edited the onboarding flow 12 min ago Tomas pushed 14 commits to main 1 h ago Ines uploaded 6 illustrations 3 h ago Milestone "Alpha" was closed Yesterday Priya published research round 2 Yesterday Jonah archived the legacy API 2 days ago
Activity
See all
Preview 1 of 3

Landing page

Hero, pricing and footer

Built from main
Preview 2 of 3

Dashboard

Charts and the activity feed

Built from main
Preview 3 of 3

Settings

Billing and team management

Built from main
Content flow
A long-form journal page where typography spaces itself.
stylecheat.css/content-flow
The Margin Journal Autumn 2026

The Margin

A slow journal about reading, writing and the attention it takes to do either well. New essays every other Sunday, notes whenever something is worth keeping.

Latest Essays Notes Letters

Essay

Why we read slower on screens, and why that might be fine

IH Ines Halvorsen 8 min read

For a decade the story was simple: paper wins. Study after study found that people remembered more of what they read on a page than on a screen, and the gap seemed to widen the longer the text became. The explanation most often offered was friction. A screen invites the eye to skim, to jump, to scroll ahead and come back, and every one of those small escapes costs a little comprehension.

What the newer research suggests is more interesting. The gap is not really between paper and glass. It is between reading that has been given a shape and reading that has not. A page has edges, a weight in the hand, a place on the shelf. A feed has none of those, and our memory seems to need them.

We do not remember sentences. We remember where on the page a sentence lived, and what we were doing when we found it.

Giving the screen a shape again

The encouraging part is that shape can be designed. A fixed measure, a generous line height, a clear beginning and an obvious end: none of these are nostalgic flourishes. They are the scaffolding that lets a reader hold an argument in mind for longer than a paragraph.


Guide

Measure, leading and the sixty-six character line

Robert Bringhurst put the comfortable range for a single column at forty-five to seventy-five characters, with sixty-six as the ideal. It is one of the few typographic rules that has survived every change of medium, because it is really a rule about eyes, not about ink.

SettingCharacters per lineLine height
Paperback novel60 to 651.35
Newspaper column35 to 451.2
Long-form web essay65 to 751.6 to 1.8

On the web the measure is usually set with a single declaration such as max-width: 66ch, which ties the column to the width of the typeface itself rather than to the screen.

Three adjustments worth making first

  1. Set the measure before you touch the font size.
  2. Raise the line height until the paragraph looks grey, not striped.
  3. Add space between paragraphs or indent them, but never both.

Notes

A week without notifications

On a Monday in September I turned off every notification on my phone except calls from three people. The plan was to last seven days and write down what changed. What follows is the diary, lightly edited, and the one habit that stuck.

Day 5 of 7

What I noticed

  • The first two days were loud with phantom buzzing.
  • By Wednesday I was reading whole chapters in one sitting.
  • Nobody who mattered had trouble reaching me.

The habit that stuck is batching: I now open messages twice a day, the way I used to open the post. If you want to try it, the setup notes are here.


Essay

In praise of the footnote

Footnotes are the most honest part of a book. They are where an author admits that a sentence was more complicated than it looked, and hands you the complication to carry if you want it.

The web has never found a good home for them. Hover cards come close, the way a small note can open above a wordLike this one, set in the margin. without pulling you away from the line you were reading.

A small request

If you have a favourite footnote, from any book at all, send it in. We are collecting them for the winter issue.


Letters

From the mailbag

This month's question came from a reader in Tromsø, and it is one we get in some form nearly every week.

Mostly, yes. Essays and novels on paper, reference and news on screen. The split is less about loyalty than about what each is good at: paper for staying with one thing, screens for moving between many.

Write to us

Letters are read by a person, answered by the same person, and published only with permission.


Photo essay

The paper mills of the north

Four stops along a river that used to make most of the newsprint in Scandinavia, told in the words of the people who worked there.

Hallstavik, 1962

"You could smell the mill before you saw it, and you could hear it before you smelled it."

Skutskär, 1978

"My father ran the drying cylinders for thirty years and never once read a newspaper."

Kvarnsveden, 1994

"When the second machine stopped, the whole town got quiet in a way I had never heard."


Members

Make it yours

Subscribers get every issue by email and can set the journal up the way they like to read it.

Text size Maybe later
Icons
Every icon that ships with Stylecheat, by name. Icons are CSS-only using CSS masks over inline SVG data URLs. These are just the built in ones and can be swapped or added onto.
stylecheat.css/icons

All 56 icons Stylecheat ships. Use one with <icon name></icon>.

bell book-open bullhorn checkmark chevron-down chevron-right clock cross css-3 dark desktop download eye folder heart-broken heart html-5 image light lock-closed quill pencil search spinner stack stylecheat-8 user void upload components menu logo-crow logo-apeegg-simple logo-apeegg logo-react logo-svelte logo-vibe logo-x logo-github logo-stylecheat book chevron-left chevron-up cog credit-card earth embed home layout images lock-open play-button pin smartphone tablet users

Examples

Content flow

Stylecheat Introduction Context CardCircleCrowGridSidebarStackSticky AccordionBadgeBreadcrumbCarouselCodeHrIconLinkTableTabsTooltipTypography ButtonSwitchCheckboxRadioRangeProgressSelectTextinputTextarea Modifiers LoginCarouselElementsContent flowIcons Download v1.0.0
Stylecheat