← All styles
Live preview Open site ↗
A page rendered in Sunlit Notebook

Sunlit Notebook

a warm paper notebook in afternoon light

Warm paper canvas, white cards separated by a hairline rather than a shadow, and one blue reserved for the single filled button. Colour variety lives in the feature card fills, and hierarchy is alpha on the ink before it is a new hue.

lightwarmpaperproductivitysaaseditorialcalm v1.0.0 CC-BY-4.0

Install

npx styles-md add sunlit-notebook

Palette

bg #f5f1ea
surface #ffffff
fg #171310
muted #6a6058
accent #1063d8
accent-fg #ffffff
border #d2c7b7
success #1f7a45
danger #c33f27

Type

Body & headings Figtree

Aa Bb Cc 0123 The quick brown fox

"Figtree", "Inter", "Helvetica Neue", Arial, sans-serif
Code IBM Plex Mono

const total = 1 + lI0O;

"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace

16px base · 1.2 ratio · body 400 / heading 600 · heading tracking -0.035em. Fonts are not bundled. Install the first family in each stack, or the specimens below fall back to the next one your device has.

4xl · 39.81px

The quick brown fox jumps

3xl · 33.18px

The quick brown fox jumps

2xl · 27.65px

The quick brown fox jumps

xl · 23.04px

The quick brown fox jumps

lg · 19.2px

The quick brown fox jumps

base · 16px

The quick brown fox jumps

sm · 13.33px

The quick brown fox jumps

xs · 11.11px

The quick brown fox jumps

Licensing

No font files are redistributed here. Every family this style asks for by name is free for commercial use, and CI rejects a style that names one which is not.

Fallbacks: Helvetica Neue, Arial, sans-serif, ui-monospace, SFMono-Regular, Menlo, monospace. These are CSS generics and fonts the reader's OS already ships, referenced by name only, so nothing is licensed or downloaded.

The spec itself, and everything generated from it, is CC-BY-4.0. Attribution is the comment at the top of each generated file; keep it and you have complied.

Shape, space & motion

stroke
1px
radius
4px · 8px · 12px
spacing unit
4px
gutter
24px
section gap
80px
max width
1440px
motion
200ms cubic-bezier(0.25, 0.1, 0.25, 1)
Download

Sunlit Notebook

A working document, not a marketing page. The canvas is warm paper, the cards are white, and the only thing that separates them is a hairline. Colour arrives as whole panels of it, the way a sticky note lands on a page, and then the interface goes quiet again.

Principles

  • The page is paper and the cards are white. Inverting that removes the warmth the whole style rests on.
  • One filled button per screen, in accent. Every other action is a tint or plain text.
  • Separation is a 1px hairline. This style has no shadow token, and cards do not get one.
  • Colour variety lives in feature card fills, one hue per card, never in a button.
  • Build hierarchy with fg at 100, 60 and 40 percent opacity before reaching for another colour.
  • Tracking tightens as type grows, to about -0.035em at display sizes. Body stays at normal.

Typography

One family does headings, UI and body, at a minor third from 16px. Weight is the hierarchy: 400 for copy, 500 for nav and labels, 600 for headings. The negative tracking is the part people miss. It is not applied evenly: at 96px it is close to -0.048em and by 18px it is gone, so a headline reads compact while a paragraph keeps its normal fit. The source studied for this style also runs an editorial serif at a handful of moments per page. That is a house rule rather than a system, so it is not carried here.

Colour

bg is paper and surface is the only white on the page. border is a warm hairline that clears the required 1.4:1 against the canvas at 1.48:1, which is why it is a tan rather than the near invisible black at 8 percent the source uses. accent blue is a switch, not decoration: it fills one button, marks the active nav item and draws the focus ring. The rotating cast for card fills is marigold #f5b229, coral #ef5b3d, sky #6fb0ef and midnight #101a44. On the first three the label is fg; on midnight it is surface.

Components

  • Button (primary): accent fill, accentFg label, radius-md, 10px/18px padding, weight 500.
  • Button (ghost): #e7f0fd fill, accent label, radius-md, same metrics.
  • Button (quiet): no fill, fg at 60 percent, underline on hover.
  • Card: surface, 1px border, radius-lg, 24px padding, no shadow.
  • Feature card: one accent hue as a flat fill, no border, radius-lg, same padding.
  • Pill: radius-full, tinted fill, 4px/12px, wrapping one highlighted word inside a headline.
  • Nav: sticky, paper background, hairline underneath, 14px links at weight 500.
  • Input: surface, 1px border, radius-md, accent ring on focus.
  • Table: hairline row rules, mono figures, no zebra fill.
  • Focus ring: 2px accent at 2px offset.

Do / Don’t

  • Do keep the canvas paper and the cards white.
  • Do carry colour on card fills, one hue per card, and leave the rest of the page neutral.
  • Do tighten tracking as the type grows, and leave body copy alone.
  • Do use alpha on the ink for secondary text before adding a grey.
  • Do keep transitions at 200ms, and save a spring for one element in the hero.
  • Don’t use pure white as the page background.
  • Don’t put a shadow on a content card. The hairline is the separation.
  • Don’t add a second filled button colour to a view.
  • Don’t use a gradient anywhere. Every fill is flat.
  • Don’t round a rectangle past radius-lg. Pills are the only other shape.

When to use

Productivity tools, docs and note apps, dashboards that people keep open all day, and marketing pages for them that need to look like the product. A poor fit for luxury goods and nightlife, where warm paper and a hairline read as a spreadsheet.