Components
Everything here holds still.
Press anything. It inverts and comes back. Nothing on this page changes unless you touch it.
Actions
Buttons and chips
Button
One primary per view: the thing the page is for. Every button is at least 48px square, so it is easy to hit with a finger or a shaking hand. Disabled goes dashed, not faint, so it stays readable.
<button class="ink-btn ink-btn--primary">Open book</button>
<button class="ink-btn">Contents</button>
<button class="ink-btn ink-btn--quiet">Not now</button>
<button class="ink-btn ink-btn--icon"><svg class="ink-icon" …/><span class="ink-visually-hidden">Menu</span></button>Chip
One choice among a few. aria-pressed carries the state. A chosen chip inverts and draws a check, so it reads without being compared to its neighbors.
<button class="ink-chip" aria-pressed="true">Tap</button>Reading
Pages, not scroll
.ink-page is a running head, the text and a folio. .ink-pager turns it, with the count always in view, and the controls never move between pages. When the set runs out, .ink-end says so. Try it.
I went to the woods because I wished to live deliberately, to front only the essential facts of life, and see if I could not learn what it had to teach, and not, when I came to die, discover that I had not lived.
Our life is frittered away by detail. An honest man has hardly need to count more than his ten fingers, or in extreme cases he may add his ten toes, and lump the rest. Simplicity, simplicity, simplicity!
Time is but the stream I go a-fishing in. I drink at it; but while I drink I see the sandy bottom and detect how shallow it is. Its thin current slides away, but eternity remains.
I never found the companion that was so companionable as solitude.
If a man does not keep pace with his companions, perhaps it is because he hears a different drummer. Let him step to the music which he hears, however measured or far away.
End of the excerpt
Five pages from Walden, by Henry David Thoreau, 1854.
<div class="ink-page">
<div class="ink-runninghead"><span>Walden</span><span>Solitude</span></div>
<div class="ink-prose"><p>…</p></div>
<div class="ink-progress" style="--at: 40%"></div>
</div>
<div class="ink-pager">
<button class="ink-btn ink-btn--icon">…Previous page</button>
<span class="ink-pager__label" aria-live="polite">Page 113 of 268</span>
<button class="ink-btn ink-btn--icon">…Next page</button>
</div>Contents
Titles, dot leaders in --mark-muted, and page numbers. The current section is set bold.
<ol class="ink-toc"><li><a href="…"><span class="ink-toc__title">Solitude</span><span class="ink-toc__page">113</span></a></li></ol>Prose details
A drop capital opens a chapter, three lines deep.
I never found the companion that was so companionable as solitude.
A dinkus marks a break inside a chapter. A rule, .ink-rule, divides things that aren’t prose.
<p class="ink-dropcap">…</p>
<blockquote class="ink-quote">…</blockquote>
<hr class="ink-dinkus">Settings
Lists, switches and checks
- Bold textHeavier strokes for small sizes
- Keep the screen awake while readingOnly while a book is open
A switch says On or Off in words beside it, and its track fills when on. A check is drawn in its box. Neither state depends on gray alone, and neither moves: the knob is simply on the other side.
<span id="set-awake">Keep the screen awake while reading</span>
<label class="ink-switch">
<input type="checkbox" checked aria-labelledby="set-awake">
<span class="ink-switch__track"></span><span class="ink-switch__state" aria-hidden="true">On</span>
</label>
<label class="ink-check"><input type="checkbox"><span class="ink-check__box"></span>Show page numbers</label>Input
Fields
Labels are always visible, above the field. Something to look at goes dashed and says what to do, in words. There is no red, no shake and no icon-only error.
Feedback
Notices that stay put
A notice sits in the page where the person caused it. It never slides in, never times out and is never announced assertively. A toast decides when the reader has read it; a notice lets them decide.
Surfaces
Cards
.ink-card
A ruled card
A one-pixel ink border and space. No shadow.
.ink-card--sunk
A recessed card
One level down, with no border at all.