shiori.sh

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.

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.