# shiori.sh

Source: https://www.shiori.sh/
Captured: 2026-09-13
Tags: saas, landing, light, both, minimal, retro-warm, warm, calm, human, trustworthy, friendly
Colors: #fcf6f0, #d8d0c7, #bdb4ac, #9a938d, #736e6a, #564f4b, #332924, #1c0e08
Type (h1): Inter Variable · 36px/40px · 500 · tracking -0.7px — "Save everything you read, watch, or want to remember."
Type (h2): Inter Variable · 30px/37.5px · 600 · tracking -0.75px — "You should never be angry at work"
Type (h3): Inter Variable · 24px/32px · 500 — "Automatically sync X bookmarks, email newsletters, site feeds, and YouTube chann"
Type (body): Inter Variable · 30px/36px · 500 · tracking -0.4px — "Shiori captures content, transcripts, and summaries so you can find anything lat"
Type (button): Inter Variable · 14px/20px · 500 — "Start for free"
Button (primary): "Start for free" — fill #30231c, text #fdf9f4, radius 8px, border 0px, padding 0px 16px, height 40px, type 14px/500
Button (secondary): "Favorites1" — text #644d3f, radius 6px, border 0px, padding 0px 8px, height 32px, type 14px/400
Radii: 8px (31), 6px (18), 4px (15), 12px (6), 16px (1)

## Images

- Hero (desktop): https://media.lvly.design/library/shiori-sh/hero.webp?v=984bf9dc
- Page crop (mid-1): https://media.lvly.design/library/shiori-sh/mid-1.webp?v=c3e2674a
- Page crop (mid-2): https://media.lvly.design/library/shiori-sh/mid-2.webp?v=1ab7eab7
- Hero (mobile): https://media.lvly.design/library/shiori-sh/mobile-hero.webp?v=b4b1e782
- Full page (desktop): https://media.lvly.design/library/shiori-sh/full.jpg?v=e6257f54
- Full page (mobile): https://media.lvly.design/library/shiori-sh/mobile-full.jpg?v=f43a0589
- Clip preview (mp4): https://media.lvly.design/library/shiori-sh/video-mepq3w.preview.mp4?v=3f7f2003

Shiori's landing page is a read-it-later app dressed in paper: a cream ground (#fcf6f0) that
covers nearly ninety percent of the canvas, one warm-brown text ramp (#736e6a → #332924 → #1c0e08)
doing all the hierarchy work, and a single lozenge of sunrise orange (#d27d32, drawn as a soft
sphere with a radial highlight) standing in for a logo. Type is Inter Variable at medium weight
throughout, tight-tracked (−0.7px at 36px), with the subhead set in the same size class as the
headline but in tan rather than near-black — the whole page is tonal contrast, not size contrast.
The hero hands off almost immediately to a full-width product screenshot whose sepia-tinted chrome
(rose-tan selection rows, a peach "Summary" card) matches the page so exactly that the app looks
like it was grown from the same stock. Below, features sit in a two-column list of icon + bold
label + tan sentence with no cards, no borders and no dividers — just generous vertical air.

## Steal-worthy details

- The brand mark is a gradient sphere, not a glyph: a radial orange-to-amber circle with a
  top-left highlight reads as a sun and a bookmark bead at once, and works at 32px in the nav. <!-- title: "Gradient sphere brand mark" at: 0.31,0.10 -->
- Two-tone headline/subhead of equal size class (36/30px, both weight 500): the subhead carries
  the same visual weight but drops to #736e6a tan, so the hierarchy is purely chromatic. <!-- title: "Two-tone headline and subhead" at: 0.69,0.33 -->
- Product screenshot tinted to the page: selection highlight, badge tint and the summary card
  are all peach-on-cream derivatives, so app and marketing page share one temperature. <!-- title: "Screenshot tinted to the page" at: 0.91,0.75 -->
- The primary CTA is near-black (#1c0e08 on cream) while the accent orange is reserved for the
  logo and the upgrade "Get Pro" button — the brand color is scarce enough to stay special. <!-- title: "Near-black CTA, scarce accent" at: 0.27,0.42 -->
- Feature grid with zero containers: 20px line icon, 16px semibold label, tan two-line sentence,
  ~190px of vertical rhythm between rows; the whitespace is the card. <!-- title: "Feature grid with no containers" page: 0.27,0.25 -->
- Secondary button is a white pill on cream with a hairline border — a one-step tonal lift, not
  a ghost outline. <!-- title: "White pill secondary button" at: 0.44,0.42 -->

## Style recipe

Use a warm-paper ground #fcf6f0 for the whole page; never pure white except on secondary controls
and floating surfaces. Build hierarchy from one brown ramp: #1c0e08 for headlines and primary
text, #332924 for body, #736e6a for subheads and supporting copy, #bdb4ac for hairlines and
placeholder icons, #d8d0c7 for tinted surfaces. Set everything in Inter (Variable) at weight
500; headlines 36px/40px with −0.7px tracking, lead copy 30px/36px with −0.4px tracking in the
tan #736e6a rather than a smaller size; body 16px/24px; labels 14px 500. Keep one accent —
#d27d32 sunrise orange — and spend it on the mark (a radial gradient sphere, orange to amber
with a top-left highlight) and on at most one upgrade/pro control; the main CTA is a solid
#1c0e08 rounded-8px button with white text, 40px tall, 16px horizontal padding. Secondary
buttons are white, 8px radius, 1px #d8d0c7 border, same height. Radii stay small: 8px default,
6px for inputs and menu items, 4px for badges, 12–16px only for large media frames. Selection
and highlight states are peach tints of the ground (a few percent of the accent over #fcf6f0),
not saturated fills. Lay features out as bare rows or two columns of icon-above-label-above-tan-
sentence with no cards or borders, at least 160px of vertical space between rows. Any product
screenshot should be recoloured to the same cream/tan/peach system so it reads as native to the
page. Motion is minimal: soft fades, no bounces. Tone is quiet and domestic — a notebook, not a
dashboard.