ipynb vieweripynb viewer design language
A notebook reader should disappear. The interface is neutral and calm so the notebook, someone else's work, is the only thing with character. The same rules are kept in DESIGN.md in the repository.
Colour
Three tones and one ink. page is the window, paper is the sheet being read and well is the recess under code. There is no brand colour: the blue is for links, and green, amber and red mean state and nothing else.
| Token | Light | Dark | Use |
|---|---|---|---|
page |
#f5f5f7 |
#0a0a0c |
The window |
paper |
#ffffff |
#1a1a21 |
The sheet, dialogs, cards |
well |
#e6e8ef |
#272833 |
Under inline code and key caps |
fg |
#1d1d1f |
#f5f5f7 |
Text, solid buttons |
fg-2 |
#48484a |
#cfcfd4 |
Secondary text |
fg-3 |
#636368 |
#9a9aa1 |
Icons, notes, line numbers |
accent |
#0066cc |
#4da3ff |
Links |
ok |
#1d8a4a |
#4cc38a |
Ready, success |
wait |
#b26b00 |
#f0b44c |
Pending |
danger |
#b3261e |
#ff7b72 |
Errors, secrets |
Light and dark share every token. Dark drops drop-shadows and adds a one-pixel top highlight instead.
Type
Inter for words and JetBrains Mono for code, both served from the same origin. Prose is 16px at a line height of 1.6. Interface text runs from 11px to 15px, headings are weight 600 with a tracking of -0.01em, and figures are 34px.
Shape and depth
Controls are pills. Surfaces are rounded rectangles: 18px for popovers, 22px for dialogs, 14px for tiles, 10px for grouped rows and 6px for key caps. The header floats as glass pills with a blur behind them, and the notebook rests on paper.
Space
A 4px base with steps of 4, 8, 12, 16, 20 and 24. Rows are 44px, controls 32px and buttons 36px, and both grow to 44px on a touch screen. The reading column is 1120px wide, or 760px narrow and 1720px wide.
Interaction and motion
Every control hovers the same way, with a wash of its own text colour at 8%. Pressing scales it to 0.97. Focus is a two pixel ring, always visible. Nothing runs longer than 300ms, only transform and opacity move, and reduced motion is respected.
Voice
Plain and short, verbs first, sentence case, with the product name in lowercase. The privacy promise comes early: the file never leaves your browser and no code runs.