Brand guidelines
The system behind Quest Log Japan — paper, ink, and one vermilion. Flip the toggle for the machine view, or fetch the whole thing as brand.json.
The Otaku Almanac
A catalog of finds kept by someone who actually knows Japan and its geek scene, set in the type and grid of a Japanese editorial magazine. It reads like a hand-built index, not a travel-startup landing page. The system runs on three moves: a barely-warm paper field, near-black ink, and one decisive vermilion accent. Type carries everything, so a page with no image is still complete.
- Warm-paper / ink / one-vermilion palette, no pure white or black anywhere.
- Type-led and photo-light: layout and font contrast carry the page.
- Rounded interactive controls and floating surfaces; card pictures in a 4px frame; page heroes, article images, hairline rules, and structural frames stay flush.
- Confident and graphic: hard display-to-body scale jumps, decisive accent.
- Bilingual by design: Latin and Japanese paired by script class, JP never italicized.
One warm family, one vermilion
Torii Vermilion
#c8102e
The only saturated color in the system, named for the red of Shinto shrine gates. It carries the wordmark itself, plus the highest-signal moments in content: the hover and press state on links (an underlined link in running text rests in its text's color, and Directions and the map card's actions are ink buttons, so no link rests vermilion below the chrome), hover on place names and nav links, selected filter chips, and the accent button — the Ko-fi tip actions; the primary button is ink. Below the chrome, its rarity is the entire point.
Washi White
oklch(0.994 0.0035 75)
The page field. A faint-warm off-white named for Japanese paper, tuned to read as white while carrying a trace of the warm hue. Deliberately not a beige cream.
Washi Deep
oklch(0.975 0.004 75)
One step down from the page field. Section and blockquote backgrounds and — inside its hairline — the tertiary button's fill, every pill in the header; the tonal layering that creates depth without shadow.
Washi Stone
oklch(0.945 0.006 75)
Two steps down from the page field: a warm stone dark enough to hold a surface by tone alone, with no hairline drawing its edge. The footer's social panel, the hover plate in the nav menu, and the secondary button's fill. Low chroma on purpose — stone, not cream.
Sumi Ink
oklch(0.255 0.004 75)
Near-black body and headline text, named for calligraphy ink. Warm-tinted, never pure black. Also drives hairline borders at 10–20% opacity.
Sumi Mid
oklch(0.37 0.004 75)
The midtone between Sumi Ink and Sumi Soft. One job: the secondary Japanese name line (name_ja) under a place's English name, so it reads as the name in another script.
Sumi Soft
oklch(0.49 0.004 75)
Secondary text, metadata, and tags.
Quest map terrain
The hypsometric tints of a school-atlas Japan: a land base and four elevation bands, plus the green of the region names. They belong to the quest map alone — nothing else on the site uses them.
Terrain 0
oklch(0.955 0.045 145)
The quest map's land base — all of Japan before the elevation bands stack over it. A pale green at low chroma so the map sits on the paper rather than glowing on it; the sea is the page itself. The strip below is the full elevation scale, highest band first.
Terrain 1
oklch(0.905 0.08 142)
Lowland green, the first elevation band (100 m and up), clipped to the land.
Terrain 2
oklch(0.935 0.07 108)
Pale yellow, the second band (400 m and up) — where the school-atlas tints turn from green toward the ranges.
Terrain 3
oklch(0.885 0.085 104)
Deeper yellow, the third band (900 m and up).
Terrain 4
oklch(0.825 0.09 100)
Olive, the highest band (1600 m and up) — the Alps and the tallest ridges only.
Terrain Label
oklch(0.40 0.10 145)
The deep green of the quest map's region names — Hokkaido, Tohoku, Kanto and the rest, set bold on the land. Clears 4.5:1 on every band. The selected place's region name turns Torii Vermilion instead. The site's only green, so it also colors the check beside each do on this page.
The One Voice Rule
Torii Vermilion is a signal in content, not a theme: below the chrome, if two things on a screen are red, one of them is wrong. There is no percentage cap — the wordmark itself is solid vermilion — so what holds is the discipline, not a budget: the chrome carries the red wordmark, and the red is otherwise the Ko-fi buttons' alone (the accent button; the primary is ink, and the header chip turns red only while its panel is open) — a fixed set that costs nothing against the content's budget — and content below the chrome gets one red thing per region, not one per page: a region is a self-bounded section doing one job, such as an article head with its Directions button, and it earns a red only for its single primary action. Documented page exception: /map, where every pin is vermilion for legibility against the basemap. The quest map bends it by one shade: the selected pin, a 20% wash on its region, and that region's name are one highlighted place said three ways, not three signals.
The No-Pure-White Rule
Never #ffffff and never #000000. Every neutral is tinted toward the warm hue (chroma ~0.004) so the surface reads as paper, not screen.
Fraunces speaks, Archivo works
Hero
Kyoto after dark
The single loudest type on the site, reserved for the home front door. One step above Display so arrival lands the hard display-to-body scale jump. Used once, on the homepage h1 (The One Hero Rule).
Display
Kyoto after dark
Page and section headlines — the loudest type on every page except home.
Feature
Kyoto after dark
Detail-page article titles, feature-treatment headings.
Title
Smart Coffee
Place-card names, section headings, prose h2/h3. Runs 1.25rem to 1.6rem — prose h2 sits at the top of the range, tile figure titles at 1.05rem.
Dek
Every Pokémon Center, Store, and Café worth a detour.
The standfirst under a page headline — category blurbs, the map intro, the 404 line. Always Sumi Soft, so it reads as the sentence under the headline rather than as body copy.
Body
The successful trip is built from specifics: the named shop, the exact station, the real hours, the canonical pin.
MDX prose, capped at a 38rem (~65ch) measure.
Small
pokemon · park · pokemon-local-acts
The workhorse secondary step and the most-used size in the system after Body — place-card tags, sub-nav links, detail metadata. Almost always Sumi Soft. The footer's links take its labels' 13px instead.
Caption
Digestive relief for an upset or heavy stomach.
The line under an image tile — exclusive-merch figcaptions and shopping-grid notes. Sumi Soft.
Label / Kicker
Start here
Tracked uppercase metadata labels: city names above cards, nav group headers. Always Sumi Soft.
Micro
Tabelog Gold
The smallest step in the system. Two jobs only: the vermilion place-tag pill, tracked uppercase, and the photo credit chip, at 400 in sentence case. The label above a machine panel is the same size but is Mono.
Mono
01 / 05
The system mono stack — the site deliberately ships no webfont mono. It marks the boundary between prose and machine-readable value: this page's machine panels, token values and section numbers, and elsewhere the carousel counter, on the menu overlay and the quest-map card. The label above a machine panel is Mono at 11px: weight 400, uppercase, tracked 0.18em, paper at 50%.
Japanese Serif
ポケモンセンターキョウト
Paired to Fraunces by script class (serif ↔ Mincho); ~12% smaller, raised line-height, never italic.
Japanese Sans
ポケモンセンターキョウト
Paired to Archivo by script class (sans ↔ Gothic); ~12% smaller, raised line-height, never italic.
Kyoto · Coffee
Smart Coffee
スマート珈琲店
coffee · breakfast
The Two-Script Rule
Japanese text is paired to the Latin face by script class (serif ↔ Mincho, sans ↔ Gothic), sized ~12% smaller with raised line-height, and never italicized.
The Three-Tier Name Rule
A place name reads in three tiers, distinguished by color: the uppercase city/type eyebrow in Sumi Soft (metadata), the English name in full Sumi Ink (the title), and the Japanese name_ja in Sumi Mid (the name in another script). The Japanese line must never share the eyebrow's Sumi Soft, or it reads as metadata instead of as the name.
The Hard-Contrast Rule
The jump from Body to Display is large and deliberate. Push scale and weight contrast; a timid type scale reads as a default template. Hierarchy comes from contrast, not from boxes or color.
The Case Rule
Three cases, three jobs. TRACKED UPPERCASE is reserved for kickers and metadata labels (0.18em tracking, Sumi Soft) — never headings, never emphasis. Title Case is for names: nav labels, button labels, section names ('Pokémon Centers', 'View Map', 'Brand Guidelines'). Sentence case is for everything that speaks: headings, body copy, captions. Japanese has no letter case — these rules govern Latin text only.
The One Hero Rule
Hero is a front-door size, not a heading size. It appears once, on the homepage h1. A second page reaching for it flattens the arrival moment that justifies its existence — those pages use Display.
The Wordmark Rule
The mark ships in three lockups with identical letterforms and spacing, differing only in color — vermilion (primary; the site's chrome), solid ink (one-color print, favicons, anything that can't hold red), and solid paper (dark grounds, photography, merch). Never re-space or re-weight between them. The wordmark does not appear in page content: the name lives in the chrome, where it repeats on every page and only needs saying once.
An asymmetric editorial grid
gutter
2rem / 3rem / 5rem
The page gutter, set by .site-container and published as --gutter.
- 32px, 48px from md, 80px from xl
- The narrower prose shells take it below lg, where they touch the screen's edge
measure
38rem
Max prose width (~65ch). Body text never runs wider.
container
100rem
Max layout width, gutters included (.site-container).
- The asymmetric editorial grid lives inside it
- It stops at 1600px so three place cards stay under 460px
breakpoint-sm
640px
First column split — place grids go one to two, tile grids two to three.
breakpoint-md
768px
The gutter widens and the footer goes two-column.
- Gutter to 48px
- Footer: wordmark beside the index, the colophon and marks under the wordmark; an open index row puts its links in a right column
- The header chip reads Support Me instead of Tip
breakpoint-lg
1024px
Place grids reach three columns, tile grids four, and the prose shells stop taking the page gutter.
breakpoint-xl
1280px
The widest step, Tailwind's own; there is deliberately no 2xl.
- Gutter to 80px
- The menu overlay splits into its featured column and list
- The header's layouts switch at their own points instead — pills join the right group at 1100px, the wordmark centers at 1400px — as one-off breakpoints on the bar, not system steps
Whitespace is generous and deliberately uneven — the grid breathes on one side. Structure comes from hairline rules and scale, not from boxes.
Round the controls, keep the paper flat
control 0.5rem
Filter chips, selects, inputs, toasts, the skip-link, map zoom/locate controls. Buttons carry their own radii: 10px on a medium button, fully round on a small text button, 8px on the small icon square.
panel 0.75rem
Map popups, the mobile bottom sheet's top corners. The nav dropdown, the select lists and the map search list take their own 16px rather than this token.
Flat by default, with one shadow. Content sits on the paper: depth there comes from tonal layering (Washi Deep behind Washi White) and 1px Sumi Ink hairlines. A surface that floats over the page — the nav and select menus, the tip panel, the floating Support Me, this page's Human / Machine bar — carries the one soft shadow.
The Flat-By-Default Rule
Content surfaces are flat. If you reach for a shadow to separate two things on the page, use a tonal step or a 1px hairline instead.
The One-Shadow Rule
There is exactly one shadow, and it belongs only to something that floats above the page: the nav and select menus, the tip panel, this page's Human / Machine bar, and the floating Support Me button. Never on media, cards, in-page buttons, or anything in the content flow. The buttons' 1px hover ring is a ring, not a shadow. A shadowed surface drops its hairline and lets the shadow draw the edge, except the menus and the Human / Machine bar, which keep a Sumi Ink 15% hairline under it.
The Corner Language
Interactive controls and floating surfaces round; content and structure stay flush. Two radius tokens only — control (0.5rem) and panel (0.75rem) — plus a closed list of component radii: the buttons' (10px on a medium button, fully round on a small text button, 8px on the small icon square and on every small button in the menu overlay), 16px on the nav and select menus, 4px on card pictures (the card frame, with a 1px line drawn inside the edge; a credit chip in a framed picture rounds its free top-left corner at 4px), and fully round map dots and sheet grab handles. Page heroes, article images, hairline rules, section dividers, the map frame, and the sticky jump-bar keep square edges. Rounding is a control affordance, and the card frame the one content exception, never decoration.
One loud action, quiet everything else
Primary — one per region
Solid Sumi Ink fill, Washi White text, 1px matching border. A 36px pill with 24px side padding, a 10px radius and 14px text (15px from lg); the small size is 28px, 16px, fully round and 13px. Its fill holds on hover while a 1px ring of it grows outside the border; a press is that same ring, and the focus ring marks focus. On an ink ground it inverts: paper fill, ink text. At most one primary button per region of the screen — it is the region's single unmistakable action.
Accent — the Ko-fi button
The one vermilion button, for the Ko-fi tip actions only — the floating Support Me, the overlay's, the tip block's Send Tip — so red keeps meaning tip (.btn-accent). Same sizes and the same hover as the primary: the fill holds and a 1px vermilion ring grows outside the border.
Tip chip — resting and open
The header's Support Me / Tip chip: a small tertiary pill (.btn-tip) with one change — vermilion with paper text while the tip panel it opened is up, where a plain tertiary's open state is ink; a press is the tertiary's hover tone.
Tertiary — the quiet pill
The lighter quiet pill: Washi Deep inside a hairline one step darker, Sumi Mid text, same sizes as the primary, and on hover a 1px ring of the hover fill outside the hairline. Every pill in the header: the nav labels, each with a trailing chevron, the chip, and the 28px icon squares (menu button, overlay close) — and every quiet action below the chrome: the listing filters' select triggers, the two empty states' Reset Filters, the map's Clear Filters (small), the four close squares (tip panel, map sheet, map card, search clear), the /brand page's mode toggle (small, on its paper bar) and its snippet panels' Copy (small, on ink). On ink (.on-ink in page content) it becomes a 9% paper fill inside a 20% paper hairline with paper text, the fill rising to 20% on hover, paper while open; in the overlay the small text buttons keep the icon squares' 8px corners.
Filter chips — secondary
1px border, transparent fill, control radius. No background fill in any state.
Select — secondary
The header's dropdown, reused: a small tertiary pill with the shared chevron for the trigger, ink while its list is open; the list is the nav dropdown's panel — paper, hairline, float shadow, 16px corners — of 28px rows at 13px on 8px plates.
Structure from rules, not boxes
Content
Kyoto · Café
Smart Coffee
スマート珈琲店
The signature component. Not a box — a top hairline rule and type. The deliberate answer to the banned identical-icon-card grid. The name shifts to Torii Vermilion on hover.
- Top hairline rule: 1px Sumi Ink at 15%
- Label row: kicker style, Sumi Soft. A link to the page one level up, a dot, then the city. The link is left off on the page it points to
- Photo, on pages where every card has its own: 16:9 in the card frame
- Place name: Fraunces Title, Sumi Ink → Torii Vermilion on hover. Its link covers the whole card
- Japanese name (name_ja): Noto Serif JP, Sumi Mid (The Three-Tier Name Rule)
- Accolade seal, when the place has one: the place tag
Blockquote
Washi Deep background with even padding, set in Fraunces, full-width. No side stripe — the old accent left-border was removed.
- Background: Washi Deep
- Type: Fraunces, upright
- No border, no stripe, flush corners
Quest map
The illustrated map of Japan on the home page and at /quest-map — a picture, not a tool. A school-atlas Japan in the Terrain tints, one group of places at a time (Pokémon Centers by default), with ink pins, names beside them on hairline leaders, and the ten region names set bold in Terrain Label green on the land. Pointing at a pin or its name selects the place: the pin turns vermilion, its region takes a 20% vermilion wash and its region name turns vermilion with it — one highlighted place said three ways, the map's one red. A card over the Sea of Japan shows the selected place and steps through the rest with two arrow buttons, or a swipe on a phone; the track slides one panel over rather than swapping.
- Land: Terrain 0 base with Terrain 1–4 elevation bands clipped to it; no coastline stroke, no borders, no shadow
- Region names: Archivo bold, 0.02em tracking, Terrain Label green → Torii Vermilion when its place is selected
- Pin: 10px Sumi Ink dot with a paper ring; selected grows to 14px, Torii Vermilion, ink ring
- Place name: Archivo small, Sumi Mid, paper text-halo, tied to its pin by a 1px Sumi Ink 40% leader
- Card: a paper panel with no border, the 16:9 photo in the card frame, kicker, Fraunces name, name_ja in Sumi Mid, two-line description — fixed height, the text and step buttons at the photo's left edge
- Step buttons: the small tertiary icon square — 28px with a 20px arrow (ArrowIcon), Washi Deep fill inside a hairline a step darker, 8px corners, Sumi Mid arrows; hover and press raise the fill to the hairline's color, ink the arrow and grow a 1px ring
- Step row: prev, an 11px mono 01 / 18 counter in Sumi Soft, next, 32px apart in a strip that hugs them from md, 24px under the text; below md the strip runs the card's full width with the arrows at its ends
- See All button: the region's one primary button, centered under the map
Site chrome
Header bar
The sticky paper bar at the top of every page: the wordmark, the Support Me chip and the menu button at every width, and from 1100px the four section pills — Pokémon, Nintendo, Gaming, Plan a Trip — identical, flat and equal, the gaming sections first so order carries the niche rather than type weight. Three layouts: below 1100px the wordmark is left and only the chip and the menu button are right, the pills folded into the overlay; from 1100px the pills join the right group beside the chip; from 1400px they sit left of the centered wordmark. Nothing in the bar is red except the chip while its panel is open.
- Wordmark: 'Quest Log Japan' in solid vermilion, 'by @scottreyburn' beneath in small Archivo
- Section pill: small tertiary pill, fully round — Archivo 13px, Washi Deep in a hairline, Sumi Mid, trailing 16px chevron; fill to the hairline's color and text to ink on hover, with a 1px ring of that fill outside the hairline, so the pill reads a step larger under the pointer; the current section's pill rests at that fill inside a hairline a step darker, with no ring (aria-current announces it too); full ink with paper text while open; chevron turned over while open; never red
- Support Me chip: the tip chip — grey, a shade darker on hover, vermilion while its panel is open
- Menu button: three lines, a filled one-unit path on a 20-unit grid at 20px, in the 28px small icon square (8px corners; a 44px hit area under a touch pointer, the square itself under a mouse); a press is the hover tone, never ink; opens the overlay at every width; its lines fade out under the sheet's × on the sheet's own 0.15s and back as the sheet goes — the header never draws an × of its own
- Switch points: 1100px (pills join the bar) and 1400px (wordmark centers) are the bar's own one-off breakpoints, not system steps
Nav dropdown
Hovering a section pill tints it at once and opens its menu once the pointer has rested on it for 100ms — every move restarts the wait, except a 1px tremor, so a pointer passing through never flashes a menu — and only a mouse hovers a menu open, so a tap on a tablet doesn't open and close it in one gesture. A menu that closes under a resting pointer stays closed until the pointer leaves and comes back. A hover-opened menu closes when the pointer leaves — unless it left sideways and is still heading for the panel, so a diagonal to the far column can cross the next pill — or on a click, except a click within half a second of it opening, which keeps it open as if the click had opened it; a click-opened one stays open until a click elsewhere or Escape, and while it is open, resting on another pill for the same 100ms moves the open menu there, so only one menu is ever open. With a mouse a click acts as the button goes down, so pressing a pill, dragging onto an item and letting go opens that page; letting go anywhere else closes the menu. From the keyboard, Enter, Space or the down arrow opens a menu on its first item; the arrow keys, Home and End move through it, typing a letter jumps to the next item starting with it, Escape closes it back onto its pill, and Tab closes it and moves to the next pill. The focus ring marks the item the keyboard is on, never the one under the pointer, and never the panel. A menu a mouse press or the keyboard opened holds the page still beneath it until it closes; a hover-opened or tapped one lets the page scroll, and the panel stays fixed under its pill either way. Any menu not opened by hover turns a click on the page into a close, so following a page link takes a second click. Gaming holds Retro Gaming, Capcom, Sega and Square Enix; Plan a Trip holds Eat, Drink, See & Do, Shop, Stay, Finds and Cheat Sheets. Pokémon's and Nintendo's lists are led by an "Overview" link, the only route to the section page itself, since the trigger is a button. Nothing in the menu turns red, the current page included.
- Sheet: paper, 16px corners, a Sumi Ink 15% hairline under the system's one shadow; 8px under and 8px left of its pill; a 10px inset
- Item: Archivo 13px on a 20px line — the pill's own size — Sumi Ink on a 28px row, 4px apart; two columns when a section has more than five links
- Hover: the item takes a Washi Stone plate, and that plate is the whole hover signal
Menu overlay
The menu button opens a full-screen Sumi Ink sheet at every width, fading in over 0.15s with no slide. Its own bar holds the paper wordmark and the × close where the menu button was, and from 1280px floats clear over the sheet with the × alone; opening it focuses the first control there. Below it, one row per destination, and a row with sub-pages is a disclosure that expands wherever it is tapped, one open at a time. A tapped link keeps the sheet up, paper under the finger, until the route changes. Under the rows sit a small More accordion, then the buttons row and the social marks.
- Close: the site's one × (CloseIcon) in the same 28px square — a faint paper fill inside a paper hairline on the ink
- Row: Archivo semibold 30px (36px from md), Washi Dim, paper on hover and while open; a 20px chevron right on a disclosure
- Sub-links: Body in Washi Soft with the words as the hit box, the current page in paper; the others drop to Washi Faint while one is hovered; two columns from 640px when there are more than five
- More: a 13px label over Map, Quest Map and Brand Guidelines, under a paper 15% hairline — the one rule in the overlay; its current page in paper, the links dimming each other on hover like a section's
- Buttons row: Support Me (the accent button) and a View Map secondary with the trailing arrow, both at the small size, 16px apart; the four social marks as 16px glyphs beside them from 1344px and 48px under them before that
Featured places (overlay)
Five featured places live inside the overlay — a Pokémon Center, Store and Café and round again, each with its saved official photo. From 1280px they fill a left column beside the list; below that they run as a swipeable row under the main rows, with a controls strip beneath.
- Card: Small Washi Dim kicker, 16:9 photo in the card frame (4px corners, a 1px grey 20% line on ink) with the site's Credit chip in its corner, bold name in paper
- Column (from 1280px): half the container, 64px from the list, the window's full height under the floating bar, on its own scroll, which loops — past the last card the first comes round again; every card the column's full width, 64px apart; nothing changes on hover, and each open starts with the first card centered in the window, where a card reached with Tab jumps too
- Row (below 1280px): 16px apart — each card three quarters of the window's width on phones (75.2632vw), 59.375vw from 640px; a card stops centered in the window, the first and last at the gutters, and a swipe glides freely and rests where it ends
- Controls strip: centered under the cards, the container's full width on phones and 320px from 768px — a prev/next pair of small icon squares at its ends and a mono 01 / 05 counter between, stepping one card at a time with a glide that is mostly over in 0.4s; a card reached with Tab jumps straight to its stop
Footer
The footer opens on the Follow Scott Reyburn panel — Washi Stone, a Fraunces line over the four social marks in ink — and then goes to ink at its natural height, 80px above and below at every width: paper wordmark top-left, the site index as an accordion top-right, the colophon under the wordmark.
- Index row: Archivo small, 52px, Washi Dim, a hairline above and a chevron right — Pokémon, Nintendo, Gaming, Plan a Trip, More; the whole row is the label's target from md, and the other labels drop to Washi Faint while one is hovered
- Open row: from md the label keeps the left third and the links list in the right two thirds, one per 52px line with hairlines between, each link a 20px strip across its line; opens over 0.4s with a fade; links in Washi Soft, paper on hover, the other lines dropping to Washi Faint while the line under the pointer holds Washi Soft
- Colophon: the copyright over the data attribution, one line per source with no periods, 11px Washi Dim, with the word OpenStreetMap the link, in Washi Soft, paper on hover and press, no underline, ending in a Washi Dim ↗; over the social marks — Instagram, TikTok, YouTube, Facebook, bare 24px glyphs 12px apart in Washi Soft, paper on hover
- Wordmark: paper on ink; fades out over 0.15s once the footer's ink edge is within 80px of the header bar, so it is gone before the bar reaches it
Header over the footer
Should the footer ever pass under the sticky header, the bar turns ink: a dark copy of the header sticks to the top of the window inside the footer's ink block and shows only within it, so the scroll itself reveals it pixel for pixel — a wipe locked to the scroll, not a fade. The footer is the one dark surface, so the bar turns ink at the bottom of a page only in a window shorter than the footer's ink block plus the bar.
- Wipe: a sticky copy inside the ink block, clip-path inset(var(--header-h) 0 0 0), no script, no transition; nothing to slow and nothing to disable under reduced motion
- Dark copy: the same bar on Sumi Ink — paper wordmark, the pills, chip and menu button as paper tints
- Current pill on the dark copy: one solid 14% paper tone, its hairline the same, between the rest pills' 9% fill and 20% hairline
- Pointer: the copy is inert, so the real bar's hovered and pressed pill is mirrored onto it and answers there as on paper
- Keyboard: the real bar's focused control is mirrored onto the copy and wears the vermilion ring there, since the copy covers the real one
Paste-ready pieces
Design tokens
:root {
--color-paper: oklch(0.994 0.0035 75);
--color-paper-deep: oklch(0.975 0.004 75);
--color-paper-stone: oklch(0.945 0.006 75);
--color-ink: oklch(0.255 0.004 75);
--color-ink-mid: oklch(0.37 0.004 75);
--color-ink-soft: oklch(0.49 0.004 75);
--color-paper-soft: oklch(0.80 0.004 75);
--color-paper-dim: oklch(0.70 0.004 75);
--color-paper-faint: oklch(0.47 0.004 75);
--color-accent: #c8102e;
--color-terrain-0: oklch(0.955 0.045 145);
--color-terrain-1: oklch(0.905 0.08 142);
--color-terrain-2: oklch(0.935 0.07 108);
--color-terrain-3: oklch(0.885 0.085 104);
--color-terrain-4: oklch(0.825 0.09 100);
--color-terrain-label: oklch(0.40 0.10 145);
--font-display: var(--font-fraunces), Georgia, serif;
--font-sans: var(--font-archivo), system-ui, sans-serif;
--font-jp-serif: var(--font-noto-serif-jp), serif;
--font-jp-sans: var(--font-noto-sans-jp), sans-serif;
--font-kicker: var(--font-sans);
--tracking-kicker: 0.18em;
--radius-control: 0.5rem;
--radius-panel: 0.75rem;
--shadow-float: 0 4px 16px color-mix(in oklch, var(--color-ink) 12%, transparent);
--text-kicker: 0.75rem;
--text-dek: 1.25rem;
--text-hero: clamp(3rem, 9vw, 6.5rem);
--text-display: clamp(2.75rem, 6vw, 5rem);
--text-feature: clamp(2rem, 4vw, 3.25rem);
}Every custom property from the live @theme block, generated at build time.
Primary button
.button-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
height: 2.25rem;
padding: 0 1.5rem;
border: 1px solid var(--color-ink);
border-radius: 10px;
background: var(--color-ink);
color: var(--color-paper);
font-size: 0.875rem;
line-height: 1.5;
white-space: nowrap;
transition: background-color 0.2s ease-in-out,
border-color 0.2s ease-in-out,
color 0.2s ease-in-out,
box-shadow 0.2s ease-in-out;
}
.button-primary:active {
box-shadow: 0 0 0 1px var(--color-ink);
}
@media (hover: hover) {
.button-primary:hover {
box-shadow: 0 0 0 1px var(--color-ink);
}
}The production .btn-primary treatment: ink fill that holds on hover while a 1px ink ring grows the button a step; a press shows the same ring, and the focus ring alone marks keyboard focus. Swap --color-ink for --color-accent and it is the accent (Ko-fi) button.
Filter chip
.chip {
border: 1px solid color-mix(in oklch, var(--color-ink) 20%, transparent);
border-radius: var(--radius-control);
background: transparent;
color: var(--color-ink-soft);
padding: 0.625rem 0.875rem;
transition: color 0.2s ease, border-color 0.2s ease;
}
.chip:hover {
border-color: var(--color-ink);
color: var(--color-ink);
}
.chip[aria-pressed="true"] {
border-color: var(--color-accent);
color: var(--color-accent);
font-weight: 600;
}Secondary control: hairline outline, no fill in any state, accent when selected.
Place card
.place-card {
position: relative;
border-top: 1px solid color-mix(in oklch, var(--color-ink) 15%, transparent);
}
.place-card__labels { margin-block: 0.5rem; }
.place-card__labels a { position: relative; z-index: 20; text-underline-offset: 0.2em; }
.place-card__labels a:hover { text-decoration: underline; }
.place-card__name a::after { content: ""; position: absolute; inset: 0; }
.place-card__name {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 500;
line-height: 1.1;
color: var(--color-ink);
transition: color 0.2s ease-out;
}
.place-card__name:has(a:hover) { color: var(--color-accent); }
.place-card__name-ja {
font-family: var(--font-jp-serif);
font-size: 0.88em;
line-height: 1.8;
font-style: normal;
color: var(--color-ink-mid);
}The signature card: a top hairline and type, never a bordered box.
Kicker label
.kicker {
font-family: var(--font-sans);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--color-ink-soft);
}Tracked uppercase metadata label, always Sumi Soft.
Quest map step button
.step-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border: 1px solid color-mix(in oklch, var(--color-paper-deep) 92%, var(--color-ink));
border-radius: 8px;
background: var(--color-paper-deep);
color: var(--color-ink-mid);
transition: background-color 0.2s ease-in-out,
color 0.2s ease-in-out,
box-shadow 0.2s ease-in-out;
}
.step-button:active {
background: color-mix(in oklch, var(--color-paper-deep) 92%, var(--color-ink));
color: var(--color-ink);
box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-paper-deep) 92%, var(--color-ink));
}
@media (hover: hover) {
.step-button:hover {
background: color-mix(in oklch, var(--color-paper-deep) 92%, var(--color-ink));
color: var(--color-ink);
box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-paper-deep) 92%, var(--color-ink));
}
}The card's prev/next control: the small tertiary icon square (.btn-tertiary.btn-sm.btn-icon) with the site's 20px arrow (ArrowIcon). Hover and press raise the fill to its hairline's color, ink the arrow and grow a 1px ring of the fill, so the square reads a step larger; Tab keeps the resting look inside the focus ring.
Japanese text
.jp {
font-family: var(--font-jp-sans);
font-size: 0.88em;
line-height: 1.75;
font-style: normal !important;
}
.jp-serif {
font-family: var(--font-jp-serif);
font-size: 0.88em;
line-height: 1.8;
font-style: normal !important;
}The Two-Script Rule in CSS: pair by script class, shrink ~12%, never italicize.
Calm entrances, quick states
ease-signature
cubic-bezier(0.16, 1, 0.3, 1)
The system's one easing curve — a hard ease-out that arrives fast and settles. Every transform in the system uses it except the dropdown grow, which runs a plain ease; nothing else gets invented alongside it.
dropdown-grow
opacity 0.15s ease, transform 0.15s ease; scale(0.9) → none, from the pill
Dropdown panels — the header menus and the select lists — grow out of the pill that opened them from 90% size with a fade, and shrink back into it on close.
menu-fade
opacity 0.15s
The menu overlay fading in over the page and out again — no slide.
header-wipe
a sticky copy inside the footer's ink block, clip-path inset(var(--header-h) 0 0 0), no script, no transition
The sticky header turning to ink as the footer slides under it.
- A dark copy of the bar sticks to the top of the window inside the footer's ink block and shows only within it, so the scroll itself reveals it pixel for pixel
- This footer is shorter than a phone screen, so in practice the bar stays paper at the bottom of every page at every width
- Nothing to slow and nothing to disable under reduced motion
disclosure-expand
grid-template-rows (overlay) or height (footer) 0.4s cubic-bezier(0.4, 0, 0.2, 1); the footer's panel also opacity 0.4s on the same curve
Menu overlay sections and footer index rows expanding to their natural height.
- The one place the signature ease-out gives way to a symmetric curve
- The footer's links fade in with the height
map-sheet
transform 0.25s cubic-bezier(0.22, 1, 0.36, 1)
Map bottom sheet entrance and dismissal.
page-arrival
opacity 0→1, translateY 12px→0, 0.6s cubic-bezier(0.16, 1, 0.3, 1), once per page load or navigation
Every page but the map arrives as one unit: the whole content fades in and rises a little, then holds still.
- One move for the whole page, the site's only arrival: no per-card stagger on a listing, no per-row stagger on the home page
- Fully disabled under prefers-reduced-motion
card-slide
Embla's default glide, looped: 90% of the way in 0.38s, within 1px by 0.85s
The quest-map card stepping to the previous or next place: the track glides one card over and wraps both ways.
- A finger or a mouse drags the track; release carries it on or settles it back by Embla's rules
- A place that arrives without sliding crossfades in 0.3s; reduced motion steps instantly
state-transition
color / border-color / background-color, ~0.15–0.3s ease
Hover and selected-state shifts on links, place names and chips.
btn-primary-fill
background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out
The primary and accent buttons' fills shifting under the pointer.
- Hover: the fill holds and a 1px ring of it grows outside the border, so the button reads a step larger; the trailing arrow holds still
- Press: the same ring — on every button a press is the hover look, the tap's answer on a touch screen
- Hover is gated behind @media (hover: hover) so touch devices never emulate it
btn-tertiary-fill
background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out
The quiet pills — the header's nav labels, chip, menu button, the overlay's close, and every quiet action below the chrome — changing tone under the pointer.
- Hover and press: the fill darkens to the hairline's color and the text goes full ink, with a 1px ring of that fill outside the hairline
- Focus by keyboard keeps the resting look; the focus ring alone marks it
- Open: a nav label or select trigger turns full ink with paper text while its dropdown is open; its chevron turns over with it in 0.15s, on the CSS ease-out curve for a nav label and a plain ease for a select
- Hover is gated behind @media (hover: hover)
cup-tilt
rotate -10deg → 6deg → 0, 0.5s cubic-bezier(0.16, 1, 0.3, 1), pivot at the cup's base
The Support Me buttons' Ko-fi cup on hover or keyboard focus: it tips once and settles.
- A single small overshoot, kept to one icon inside a button
- Hover is gated behind @media (hover: hover)
- Reduced motion holds the cup still
Every entrance fully disables under prefers-reduced-motion — the element simply renders in place. No parallax, no bouncy easing, ever.
Three words and a reason to exist
Curated. Knowing. Editorial.
Positioning
Generic Japan travel sites bury the geek content and read as interchangeable SEO filler; the niche communities that cover Pokémon Centers and retro game hunting rarely cover food, stays, and transit with the same care. This site does both, under one curated editorial roof. The niche is the headline.
Audience
Otaku and nerdy travelers planning a Japan trip, plus their travel companions. Enthusiast-level on the geek side, not necessarily experienced Japan travelers — so the basics have to be as trustworthy as the niche picks.
Emotional goal
Curated trust plus insider delight. The visitor should feel a real, knowledgeable person made this for them — confidence that the picks are worth their time, layered with the small thrill of niche finds. Trust is the floor; delight is the lift.
Write like a person who has been there
The confident, plainspoken voice of a real person who knows Japan and the geek scene, writing for a peer — not for a search engine. Specific over vague, opinionated where it has earned the opinion, never breathless or hype-driven. Print-magazine restraint, not blog-post enthusiasm.
Name the shop, the exact station, the real hours, the canonical pin.
Vague filler — 'a great spot for foodies,' 'a must-visit hidden gem.'
State an opinion where the site has earned it.
Hype and superlatives standing in for judgment.
Write for a peer who is already fluent in the subject.
Write for a search engine, or pad for word count.
Print-magazine restraint — let the find carry the excitement.
Blog-post enthusiasm and exclamation marks.
The lines that keep it ours
Do
- Give each region of content below the chrome at most one red thing, its single primary action; the chrome's vermilion wordmark and the Ko-fi accent buttons are a fixed set that costs nothing against that budget (The One Voice Rule). Every other primary action is the ink primary.
- Tint every neutral toward the warm hue and keep Washi White reading as white, not cream.
- Round interactive controls at the control radius and floating surfaces at the panel radius; put card pictures in the card frame (4px corners, a 1px Sumi Ink 5% line drawn inside the edge) and every other picture at 4px with no line; keep hairline rules and structural frames flush.
- Convey depth with tonal layering and 1px Sumi Ink hairlines; keep the one shadow for surfaces that float over the page.
- Pair Japanese text by script class, shrink it ~12%, raise its line-height, keep it upright.
- Set the secondary Japanese name line (name_ja) in Sumi Mid — darker than the Sumi Soft eyebrow, lighter than the Sumi Ink English title.
- Push display-to-body scale and weight contrast hard; let type create the hierarchy.
- Hold every page to the one 100rem container (.site-container, gutter 32 / 48 / 80px by breakpoint), and narrow long-form prose to the 38rem measure.
- Reach for a documented type step. If a size isn't on the ramp, either it's a real new step and belongs in the design system, or it's a one-off and shouldn't ship.
Don't
- Don't use Inter or any default system sans on stark white — the single loudest AI tell for this project.
- Don't use purple/indigo gradients, gradient text, or the SaaS-marketing palette.
- Don't build the centered-hero-plus-three-icon-boxes layout, or grids of identical icon + heading + body cards.
- Don't add drop shadows on images, or round one past 4px; don't put the card frame's line on a page's own picture or an article image.
- Don't use glassmorphism, decorative blur, parallax, animated gradients, or bouncy/elastic motion.
- Don't use a border-left/right greater than 1px as a colored accent stripe.
- Don't write #ffffff or #000000 anywhere.
- Don't spend the Hero step anywhere but the homepage h1 (The One Hero Rule).
- Don't add a 2xl breakpoint, and don't use xl for anything but the gutter; the header's own switch points (1100px, 1400px) stay one-off breakpoints on the bar, and the system stops at four steps on purpose.
- Don't put decorative eyebrow text over a heading or add a subheading a section doesn't need. The only label above a heading is a kicker with a job: the city or type in The Three-Tier Name Rule, or a metadata label.