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; 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: links, hover on place names and nav links, selected filter chips, and the primary button fill. 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 the nav menu's box; 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, and the hover plate in the nav menu. 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 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. Amended 2026-08-12 by the Quest Log Japan rebrand — the old ~10% cap is retired now that the wordmark itself is solid vermilion. What survives is the discipline, not the percentage: the chrome carries the red wordmark and the red primary button as a fixed pair that costs nothing against the content's budget, and content below the chrome still gets one red thing at a time. 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
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
The workhorse secondary step and the most-used size in the system after Body — place-card tags, footer links, sub-nav links, detail metadata. Almost always Sumi Soft.
Caption
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
The smallest step in the system, always tracked uppercase. Two jobs only: the vermilion place-tag pill and the label above a machine panel.
Mono
The system mono stack — the site deliberately ships no webfont mono. Confined to this page's machine panels, where it marks the boundary between prose and machine-readable value.
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
1.5rem
The page gutter (px-6). Constant across breakpoints.
measure
38rem
Max prose width (~65ch). Body text never runs wider.
container
72rem
Max layout width (max-w-6xl). The asymmetric editorial grid lives inside it.
breakpoint-sm
640px
First column split — place grids go one to two, tile grids two to three.
breakpoint-md
768px
The footer index unstacks to four across; the header swaps the mobile takeover for the full nav.
breakpoint-lg
1024px
The widest step. Place grids reach three columns, tile grids four, the footer five. There is deliberately no xl or 2xl — if a layout needs to change above this, reconsider the layout.
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
Buttons, filter chips, selects, inputs, toasts, the skip-link, map zoom/locate controls.
panel 0.75rem
Dropdown panels, search-result lists, map popups, the mobile bottom sheet's top corners.
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 desktop nav menu — carries one soft shadow instead of a hairline.
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 a surface that floats above the page — today, the desktop nav menu. Never on media, cards, buttons, or anything in the content flow. A shadowed surface drops its hairline: the shadow draws the edge.
The Corner Language
Interactive controls and floating surfaces round; content and structure stay flush (decision 2026-07-07). Two radius tokens only — control (0.5rem) and panel (0.75rem). Images, hairline rules, section dividers, the map frame, and the sticky jump-bar keep square edges. Rounding is a control affordance, not decoration.
One loud action, quiet everything else
Primary — one per region
Solid Torii Vermilion fill, Washi White text, control radius, 1px matching border. At most one primary button per region of the screen — it is the region's single unmistakable action.
Filter chips — secondary
1px border, transparent fill, control radius. No background fill in any state.
Select — secondary
Hairline-outlined (Sumi Ink 20%), paper fill, control radius; border darkens on hover, accent on focus.
Structure from rules, not boxes
Kyoto
Smart Coffee
スマート珈琲店
coffee · breakfast
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%
- City/type eyebrow: kicker style, Sumi Soft
- Place name: Fraunces Title, Sumi Ink → Torii Vermilion on hover
- Japanese name (name_ja): Noto Serif JP, Sumi Mid (The Three-Tier Name Rule)
- Tags: small Archivo, Sumi Soft
Navigation links
The six destinations sit top-level, flat and equal in type — Pokémon, Nintendo, Retro Gaming, The Basics, Finds, Cheat Sheets, all in Archivo body. The gaming sections lead, so order carries the niche rather than type weight. Pokémon and Nintendo carry dropdowns; the rest are plain links. Top-level labels never highlight for the current section (aria-current still announces it). The menu is a borderless Washi Deep box, barely off the page, its edge drawn by the system's one shadow. Its items are smaller Archivo in Sumi Ink: the hovered item takes a Washi Stone plate, and that plate is the whole hover signal. Nothing in the menu turns red, the current page included. The list is led by an "All …" link — the only route to the section page itself, since the trigger is a button. Hover-open is gated on (hover: hover) so a tap on a tablet doesn't open and close the menu in one gesture. The desktop row appears at lg (1024px); below that everything folds into the takeover menu, where each item with sub-pages becomes a disclosure that expands wherever it is tapped — one Fraunces row per destination, sub-links revealed by tapping rather than indented under it. The footer is one exposed index at every width, set a full tier quieter than the menu: five column groups — Pokémon, Nintendo, Retro Gaming, The Basics, and More (Map, Finds, Cheat Sheets, Brand Guidelines) — each a tracked-uppercase kicker over small Archivo links, stacked on mobile, four across at md, five at lg. A centered social panel leads the footer at every width — an inset Washi Stone surface at the panel radius, no border: 'Follow Scott Reyburn' set in Fraunces over six marks in a fixed order — Instagram, TikTok, YouTube, Facebook, Threads, X — bare glyphs, Sumi Ink to vermilion on hover, no plate behind them. Below it, the index links rest in Sumi Soft under full-ink kickers and turn vermilion on hover.
- Top-level item: Archivo, ink, rolls to vermilion on hover, no caret
- Dropdown item: Archivo small, ink on a Washi Deep menu; Washi Stone plate on hover; never red
- Wordmark: 'Quest Log Japan' in solid vermilion, 'by @scottreyburn' beneath in small Archivo
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: hairline Sumi Ink 15% frame, flush 16:9 photo, kicker, Fraunces name, name_ja in Sumi Mid, two-line description — fixed height
- Step buttons: 44px squares at the control radius, Washi Deep fill inside a Sumi Ink 20% hairline, Sumi Mid shaft arrows; hover takes hairline and arrow to full ink — nothing grows or fills
- See All button: the region's one primary button, centered under the map
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-accent: #c8102e;
--color-bmc-yellow: #ffdd00;
--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;
--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 {
border: 1px solid var(--color-accent);
border-radius: var(--radius-control);
background: var(--color-accent);
color: var(--color-paper);
transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.button-primary:hover,
.button-primary:focus-visible {
background: color-mix(in oklch, var(--color-accent) 82%, var(--color-ink));
border-color: color-mix(in oklch, var(--color-accent) 82%, var(--color-ink));
}The production .btn-primary treatment: vermilion fill, hover deepens toward ink.
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 {
display: block;
border-top: 1px solid color-mix(in oklch, var(--color-ink) 15%, transparent);
padding-top: 0.75rem;
text-decoration: none;
}
.place-card__name {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 500;
line-height: 1.15;
color: var(--color-ink);
transition: color 0.2s ease;
}
.place-card:hover .place-card__name { 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);
}
.place-card__tags { font-size: 0.875rem; color: var(--color-ink-soft); }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: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border: 1px solid color-mix(in oklch, var(--color-ink) 20%, transparent);
border-radius: var(--radius-control);
background: var(--color-paper-deep);
color: var(--color-ink-mid);
transition: color 0.15s ease, border-color 0.15s ease;
}
.step-button:hover,
.step-button:focus-visible {
border-color: var(--color-ink);
color: var(--color-ink);
}The card's prev/next control: a filled hairline square with a shaft arrow. Hover darkens the edge and the arrow; nothing grows, nothing fills.
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; nothing else gets invented alongside it.
sheet-slide
transform 0.34s cubic-bezier(0.16, 1, 0.3, 1)
Mobile nav takeover and desktop dropdown panel entrance.
disclosure-expand
grid-template-rows 0.28s cubic-bezier(0.16, 1, 0.3, 1)
Mobile menu disclosure rows expanding to their natural height.
map-sheet
transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease
Map bottom sheet entrance and dismissal.
scroll-reveal
opacity 0→1, translateY 20px→0, 0.5s easeOut, once, viewport margin -10%
Calm whileInView entrance for sections and grids. Fully disabled under prefers-reduced-motion.
card-slide
translateX one panel, 0.34s cubic-bezier(0.16, 1, 0.3, 1); settle-back 0.25s
The quest-map card stepping to the previous or next place: a three-panel track slides one panel over. On a touch screen the track follows the finger 1:1 first; release past a fifth of the width, or a flick, carries it on. 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, chips, and the header CTA.
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 content below the chrome exactly one red thing at a time; the chrome's vermilion wordmark and primary button are a fixed pair that costs nothing against that budget (The One Voice Rule).
- 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; keep images, 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 72rem container with a 1.5rem gutter, 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 round corners or add drop shadows on images.
- 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 an xl or 2xl breakpoint; the system stops at lg (1024px) on purpose.