# TAKANOME — Style Reference > Black glass, weathered wood, warm stone, and a restrained bronze invitation. **Website:** [takanome-sake.com](https://takanome-sake.com/) **Original URL:** https://takanome-sake.com/ **Final URL:** https://takanome-sake.com/ **Theme:** photographic neutrals, warm light sections, dark editorial bands, and bronze commerce controls **Inspected:** October 5, 2026, at 06:47 JST; supplied retrieval timestamp: October 4, 2026, 21:47:11.402 UTC **Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels **Scope:** the current brand and commerce homepage, including its open signup dialog, persistent purchase panel, product narrative, feature section, purchase promotions, news, magazine, social link, and footer. Destination pages and completed transactions were not inspected. TAKANOME presents sake through material and proportion. The black bottle, translucent glass, rough timber, and textured wall establish the atmosphere. Interface colors echo that setting: dark gray text, stone beige, white, and a muted bronze. Widely tracked English serif labels organize Japanese copy set mostly at regular weight. Large section intervals and narrow reading columns give detailed product storytelling room to breathe. This is a substantial homepage connected to product collections, editorial articles, restaurant information, account access, and company information. Its observed design combines commerce with a long brand narrative. A persistent purchase panel supplies a compact conversion route throughout the page. The signup dialog dominates every supplied current-page screenshot. Its desktop composition places a portrait bottle image beside centered copy and two pill links. On mobile, it becomes a tall stack with a landscape crop and an overlapping circular close control. The underlying page remains visibly dimmed. That dimming is an overlay state, not the site's default color treatment. ## How to Read This Reference - **Measured** means a value appears in the supplied rendered DOM, computed styles, or element rectangles. These measurements were supplied by the browser inspection; no additional browsing was performed. - **Calculated** means a spacing or relationship is derived from those rectangles, such as the 15px gap between signup buttons. - **Estimated** means a value is judged from a screenshot. Dialog bounds, its pale surface color, backdrop opacity, and some image geometry fall into this category. - **Recommended** means an implementation choice for reuse, not a verified feature of the original. - Custom-property names introduced here are descriptive aliases. Only properties explicitly identified as source variables were observed on the page. - Computed font families establish declared stacks, not proof that every glyph used the first family in the stack. - All current screenshots retain the signup dialog. Obscured sections are documented through available DOM measurements, with photographic details limited to what remains visible. - Mobile element coordinates include negative vertical positions from a scrolled extraction. Use widths, heights, and relative spacing; do not reproduce those negative positions as layout rules. ## Tokens — Colors ### Main Palette | Name | Value | Suggested token | Evidence and role | | --- | --- | --- | --- | | Bronze | `#817048` | `--color-bronze` | Measured fill of the visible signup primary link and main purchase buttons; text color of the outlined signup link | | Stone | `#dbd7c7` | `--color-stone` | Measured FEATURE section background | | Near Black | `#111111` | `--color-night` | Measured TASTE and restaurant-information section backgrounds | | Text Gray | `#333333` | `--color-text` | Measured body, narrative, and dialog text | | White | `#ffffff` | `--color-white` | Measured reversed text and secondary signup-link fill | | Muted Gray | `#bbbbbb` | `--color-muted` | Measured BACKGROUND narrative text and age-related footer notice | | Legal Gray | `#504e49` | `--color-legal` | Measured footer legal links and copyright | | Social Brown | `#704535` | `--color-social` | Measured Instagram link text | | Translucent Ivory | `rgba(236, 233, 222, 0.6)` | `--color-photo-caption` | Measured hero specification text; appearance depends on the image beneath it | | Dialog Paper | Approximately `#f1f0ee` | `--color-dialog` | Screenshot estimate for the visible signup surface; its computed background was not supplied | | Close-Control Gold | Approximately `#ae9a64` | `--color-close` | Screenshot estimate for the circular mobile close control | | Modal Veil | Approximately `rgba(0, 0, 0, 0.8)` | `--color-veil` | Practical approximation of the dark screenshot overlay; original opacity was not measured | The body and several sections report transparent backgrounds. A transparent computed value does not identify the final surface beneath an element. Use measured section backgrounds where available, and avoid treating the darkened screenshot colors as the original palette. ### Garden Variant The current page includes a separate TAKANOME garden promotion. Keep its pale green treatment local to that product. | Value | Evidence | Interpretation | | --- | --- | --- | | `#d4debd` | Computed background of the garden purchase button | The measured garden CTA fill | | `#dfe7ce` | Source variable `--garden-color-main` | Declared garden main color; not identical to the computed CTA fill | | `#f5f2ec` | Source variable `--garden-color-bg` | Declared garden background token; application to every garden surface was not established | | `#d3dbbe` | Computed fill on a second set of signup-link nodes | An alternate signup treatment present in the extraction; screenshots show the bronze version | Other declared garden variables are `--garden-color-white: #ffffff`, `--garden-color-text: #333333`, and `--garden-color-muted: #bbbbbb`. A library variable, `--swiper-theme-color: #007aff`, is also present. It is not evidence of a visible blue brand accent. Likewise, duplicated signup nodes do not establish a user-selectable theme or two simultaneously visible dialogs. ## Tokens — Typography ### Japanese Narrative **Observed stack:** `dnp-shuei-gothic-gin-std, sans-serif`. This stack is declared on the main content, Japanese headings, purchase links, and article titles. Most sampled text uses weight `400`. The measured long-form rhythm is 15px type on 30px lines on desktop and 12px on 24px lines on mobile. Letter spacing remains approximately `0.06em` in these paragraphs. Headings gain hierarchy through spacing and size rather than heavy weight. The product headline is 26px on desktop; BACKGROUND and FEATURE headings are 22px. ### Interface Text **Observed body and navigation stack:** `"Verdana Pro", dnp-shuei-gothic-gin-std, sans-serif`. This stack appears in the header and signup dialog. The visible dialog description remains 14px with 28px line height at both inspected widths. Its primary and secondary links both use 16px text, even on mobile. ### English Section Labels **Observed stack:** `"Georgia Pro", serif`. Use this for labels such as PRODUCT, BACKGROUND, FEATURE, TASTE, NEWS, and MAGAZINE, and for major footer links. Large tracking is central to their appearance: `0.3em` for many desktop section labels, reducing to `0.2em` on mobile. Footer navigation uses `0.23em`. The wordmark is visually a widely spaced serif identity, but the header H1 contains an image-like empty link in the supplied extraction. Its actual lettering should be preserved as an authorized asset. The H1's computed 32px font size does not describe the visible logo size. ### Type Scale Values below are measured unless marked estimated. Sizes and line heights are shown as `size / line-height`. | Role | Desktop | Mobile | Weight and tracking | | --- | --- | --- | --- | | Header navigation | `14 / 14px` | Login: `12 / 12px` | 400; desktop `0.05em`, mobile normal | | Hero specifications | `11 / 20px` | `10 / 16px` | 400; desktop `0.08em`, mobile normal | | Product section label | `18 / 18px` | `16 / 16px` | 400; `0.3em` → `0.2em` | | NEWS and MAGAZINE headings | `22 / 22px` | `16 / 16px` | 400; `0.3em` → `0.2em` | | Product Japanese headline | `26 / 44px` | `21 / 33px` | 400; `0.05em` | | BACKGROUND and FEATURE headline | `22 / 42px` | `22 / 35px` | 400; `0.05em` | | Feature-item heading | `20 / 20px` | `15 / 15px` | 400; normal | | Main narrative paragraph | `15 / 30px` | `12 / 24px` | 400; `0.06em` | | TASTE paragraph | `16 / 16px` | `14 / 23.8px` | 400; normal; desktop content includes explicit breaks | | Magazine article title | `14 / 28px` | `12 / 22px` | 500; `0.08em` → `0.03em` | | News article title | `14 / 28px` | `12 / 22px` | 400; `0.08em` → `0.03em` | | Signup description | `14 / 28px` | `14 / 28px` | 400; normal | | Visible signup links | `16 / 16px` | `16 / 16px` | 400; normal | | Persistent purchase link | `15 / 15px` | `14 / 14px` | 400; `0.03em` → `0.1em` | | Large purchase link | `20 / 20px` | `17 / 17px` | 400; `0.03em` → `0.1em` | | Footer navigation | `24 / 24px` | `18 / 18px` | 300; `0.23em` | | Footer legal links | `12 / 12px` | `10 / 10px` | 400; `0.075em` | | Get in touch label | Approximately `18px` | Approximately `18px` | Screenshot estimate; bronze | Some magazine anchors have a computed font size of zero while their child headings have explicit readable sizes. This is a wrapper detail, not a recommendation to make article text invisible. ## Tokens — Spacing & Shapes There is no demonstrated universal four- or eight-pixel spacing system. The page uses distinct scales for compact interface controls, reading columns, and large editorial sections. ### Spacing Scale | Use | Desktop | Mobile | Evidence | | --- | --- | --- | --- | | Header side inset | `96px` | `20px` | Measured logo position | | Main editorial side inset | Usually `96px` | Usually `35px` | Measured section padding and text positions | | Dark information-band inset | `96px` | `26px` | Measured padding | | PRODUCT vertical padding | `200px` | `70px` | Measured | | FEATURE padding | `200px 96px` | `70px 35px` | Measured | | Dark information-band padding | `154px 96px 120px` | `50px 26px` | Measured | | Ordinary paragraph separation | Often `14px` | Often `7px` | Calculated from adjacent narrative rectangles | | Feature heading to paragraph | `22px` | `22px` | Calculated | | Signup description to first link | `30px` | `30px` | Calculated | | Signup link gap | `15px` | `15px` | Calculated | | Desktop magazine item gap | Approximately `72px` | Vertical gap `50px` | Calculated from anchor rectangles | | Instagram section bottom padding | `250px` | `100px` | Measured | ### Shapes | Element | Treatment | Evidence | | --- | --- | --- | | Main section surfaces | Square, full-width fields | Visible structure and measured zero radii | | Signup dialog | Square outer corners | Screenshot observation | | Signup links | Fully rounded pills, source radius `9999px` | Measured | | Persistent purchase button | Desktop radius `25px`; mobile `999px` | Measured | | Large purchase button | Desktop radius `40px`; mobile `35px` | Measured | | Footer signup links | Large rectangular outlined targets | Screenshot observation; exact border color not sampled | | Bag count | Thin circular outline | Screenshot observation | | Mobile close control | Circular gold disk, approximately `30px` diameter | Screenshot estimate | | Persistent purchase panel | Small corner radius, approximately `4px` | Screenshot estimate | ### Layout Measurements | Element | Desktop, 1440 × 1000 | Mobile, 390 × 844 | | --- | --- | --- | | Reported document height | `10,619px` | `12,622px` | | Initial header height | `90px` | `55px` | | Header logo box | `154 × 15px` | `130 × 13px` | | Signup outer bounds | Approximately `640 × 426px`, at `x=400`, `y=287` | Approximately `340 × 596px`, at `x=25`, `y=124` | | Signup image region | Approximately `300 × 426px` | Approximately `310 × 200px`, at `x=40`, `y=144` | | Signup copy/button width | `260px` | `250px` | | Signup buttons | `260 × 50px` | `250 × 50px` | | Persistent purchase button | `190 × 50px` | `150 × 45px` | | Main purchase button | `280 × 80px` | `305 × 70px` | | PRODUCT paragraph width | `384px` | `320px` | | FEATURE paragraph width | `576px` | `320px` | | Magazine item widths | First `432px`; following `336px` | All `320px` | | Footer signup targets | `408 × 100px` | `320 × 65px` | Dialog and image-region bounds are screenshot estimates; link and paragraph dimensions are DOM measurements. Do not turn the reported document heights into fixed CSS heights. ## Components ### Persistent Header **Role:** brand identity, primary navigation, and shopping utilities. The initial desktop header is transparent with white content over the hero. The logo begins at x=96. Five plain-text links—About, Product, Magazine, News, and Restaurant—occupy the central region. Login, Bag with a circled count, and an Instagram outline icon sit at the right. Navigation links have approximately 30px horizontal gaps. The later desktop screenshots show a light header with dark content and an apparently more compact height of about 68px. The supplied computed initial height is 90px; the compact height is a screenshot estimate. The header remains visible at the top of the scrolled captures. Mobile retains the wordmark, Login, Bag, and a two-line menu symbol. The desktop category links and header Instagram icon are absent from the visible mobile header. The menu symbol has a sampled element rectangle of only 17 × 6px; its true interactive hit area was not established. The menu was not opened. ### Photographic Hero **Role:** establishes the product through a material still life. The current desktop capture shows a black sake bottle on a rough-edged timber slab, a clear stemmed glass to its right, and a textured brown-gray wall. The bottle is the central vertical element. The interface avoids placing a large marketing headline across it. A small English specification block sits at the lower left. Its measured desktop rectangle is x=96, y=838, width approximately 213px, height 80px. The source UI lists alcohol content, rice, volume, and Japanese production. These are page claims, not independently verified product data. The next section begins at y=1000 on desktop, supporting a first section that fills the inspected viewport height. Mobile hero cropping cannot be reliably described from the supplied screenshots because the dialog and scroll state obscure it. ### Sales-Notification Dialog **Role:** offers two routes to sales announcements: LINE registration and an email newsletter. The screenshot-visible version uses a pale rectangular surface and a strong dark backdrop. On desktop, its left image occupies about 300px and its right content area about 340px. The right column contains: 1. A bronze Get in touch label. 2. The Japanese heading `登録で販売日をお知らせ`. 3. Four centered lines of explanatory copy at 14px / 28px. 4. A bronze `LINEお友だち登録` link with white text. 5. A white `メルマガ登録` link with bronze text and a bronze outline. 6. A small bronze cross near the upper-right corner. The visible desktop paragraph begins at x=740, y=394.8125 and measures 260 × 112px. The primary link starts at y=536.8125; the secondary starts at y=601.8125. Both are 50px high. This yields a 30px description-to-action interval and a 15px action gap. Mobile is a substantial rearrangement. A 310 × 200px image sits inside the 340px-wide surface with approximately 15px horizontal and 20px top insets. The image crop enlarges the bottle and cuts into its neck. The branding remains prominent across the photograph. Copy and links sit below, centered in a 250px column. The last link ends at y=690, leaving approximately 30px before the dialog bottom. The mobile close control is a gold disk overlapping the upper-right edge. Desktop uses a small cross without that visible disk. Preserve this difference if closely reproducing the observed composition. The extracted hrefs lead to `https://lin.ee/7m0oxrf` and `https://bit.ly/3PyRiIV`. Neither destination was opened. There is no visible email input in this dialog. Its opening trigger, delay, dismissal behavior, focus handling, and repeat-visit persistence are unverified. ### Persistent Purchase Panel **Role:** keeps the weekly sales message and product collection link available during a long scroll. A small light panel sits at the bottom right on desktop, approximately 338 × 100px with 30px right and bottom offsets. It contains the weekly Wednesday 21:00 sales message, a small `送料無料` label, and a bronze pill labeled `商品を見る`. The link points to `/collections/takanome/`. On mobile, the panel is centered near the bottom with approximately 26px side margins and a 19px bottom gap. It becomes about 338 × 74px, with the sales message at left and a 150 × 45px button at right. This panel remains below the modal veil in all captures. It belongs to the underlying page, not the dialog. The displayed sales schedule and shipping message are source UI copy; current availability and shipping conditions were not tested. ### Product Introduction and Background Narrative **Role:** introduces flavor and explains the brand's development philosophy. The PRODUCT section has 200px vertical padding on desktop. Its text starts at x=840; ordinary paragraphs occupy a narrow 384px column. A tracked serif label precedes a regular Japanese heading and two descriptive paragraphs. The left side supplies substantial visual space, but its image details are not available in an unobscured current capture. The BACKGROUND section places muted-gray narrative text in a wider left column, approximately 562px at x=115. Its heading is 22px / 42px, and the paragraphs are 15px / 30px. The section's sampled background is transparent, so an exact background color cannot be assigned from that record alone. On mobile, both sections use 320px reading widths inside 35px margins. PRODUCT changes from flex to block layout; the BACKGROUND headline wraps to two lines. Preserve generous line height even when reducing text size. ### Feature Section **Role:** explains five product principles within a warm stone field. This is the clearest measured light section: `#dbd7c7`, with desktop padding of 200px vertically and 96px horizontally. The left side carries FEATURE and the two-line Japanese statement. The right-side text begins at x=768 and spans 576px. The five feature headings cover ingredients, quality preservation, undisclosed rice-polishing ratio, selective quality, and tradition with innovation. Each is regular-weight text rather than a badge or oversized numeral. The section measures 1796px high on desktop and 3184px on mobile. Mobile uses one 320px content column with 70px top and bottom padding. The large intervals between items should not be replaced with uniform small cards. The provided text-only geometry does not identify every intervening image or its crop. ### Taste and Restaurant Information Bands **Role:** creates short dark pauses between longer light or photographic sections. Both use a measured `#111111` background and white text. Desktop layouts place the heading at the left and explanatory material to the right. TASTE begins with an 18px tracked serif label and a 22px Japanese line. Its paragraph begins around x=495. On mobile, the content stacks with 50px vertical and 26px horizontal padding. The Japanese heading becomes 18px, and the paragraph uses 14px / 23.8px. The restaurant band ends with an unfilled VIEW MORE link rather than another large pill. ### Core Product and Garden Promotions **Role:** supplies explicit purchase destinations after the narrative. The core purchase section measures 750px high on desktop. In the current mid-page screenshot, a black bottle and tall dark gift box occupy the right side. White copy and a bronze 280 × 80px pill sit at the left, beginning at x=216. On mobile, the section measures 556px high. Its text is dark gray, and the 305 × 70px purchase button sits beneath the visual region. This measured text-color change is a reason to avoid simply shrinking the desktop overlay treatment. The following garden promotion measures 520px high on desktop and approximately 624px on mobile. It includes a small new-product label, the TAKANOME garden name, a short two-line description, and a pale-green purchase pill. Its image details are not established by the supplied screenshots. ### News List **Role:** provides dated updates in a compact editorial index. Desktop NEWS occupies the left side of a two-part section. The list begins at x=528 and is 816px wide. Dates precede titles; title rectangles begin at x=720. Rows are approximately 80px or 108px tall, depending on wrapping, with 26px vertical padding. The geometry leaves approximately 1px between rows, consistent with thin separators, though their color was not sampled. Mobile keeps dates and titles beside each other. Rows run from x=35 to the right edge; titles begin at x=138 and retain 20px right padding. Title type becomes 12px / 22px. VIEW MORE moves to the left below the list. Some news links target external press releases and others target articles on the same website. Destination behavior was not tested. ### Magazine Collection **Role:** connects the product to interviews, craft, food, and cultural stories. The desktop DOM places six article links in a horizontal sequence. The first is 432px wide, the next five are 336px wide, and the gaps are approximately 72px. Later items extend beyond the viewport. Each groups a landscape image, a Japanese title, and a date without a rounded card enclosure. The extracted Drag label and the horizontal arrangement suggest a draggable presentation. No drag gesture or resulting movement was recorded, so drag mechanics, inertia, and autoplay remain unverified. Mobile is explicitly different: all six articles form a vertical list, each 320px wide, with 50px gaps. The section grows from about 730px to 2305px. Do not impose a mobile horizontal carousel on this evidence. ### Social Area and Footer **Role:** concludes the page with social access, restaurant inquiries, subscriptions, navigation, and legal information. The Instagram link uses brown text and a 20px × 60px padding treatment. Its parent section has generous bottom space: 250px on desktop and 100px on mobile. The social image arrangement is not sufficiently exposed to specify a grid. The desktop footer is a 1300px-high, two-part composition. The current screenshot shows a dark left side containing NEWS LETTER, large outlined signup targets, and an Instagram follow link. The right side has a pale photographic field with a flowing liquid form. The modal veil prevents reliable color sampling of those footer backgrounds. The left signup targets are 408 × 100px. The right navigation is arranged in two groups, starting at x=840 and x=1104, with tracked 24px serif links. Small legal links and the drinking-age notice sit lower down. Mobile changes the footer to block layout. Signup targets become 320 × 65px; primary navigation appears as a vertical sequence at x=35, using 18px serif text. The measured footer height is 1462px. Legal and copyright text remains visually subordinate. ## Tokens — Motion & Interaction | Treatment | Evidence | What can be concluded | | --- | --- | --- | | Header color change | Computed `color 0.6s` | A 600ms color transition is declared | | Header surface change | Computed `background-color 0.6s` | A 600ms background transition is declared | | Header vertical change | Computed `top 0.5s ease-out` | A 500ms top-position transition is declared; its trigger and exact positions are unknown | | Alternate signup-link colors | `background-color 0.3s, border-color 0.3s, color 0.3s` | A 300ms transition exists on the alternate nodes; do not automatically assign it to the screenshot-visible bronze links | | Common links | Serialized transition value `all` | Duration and visible effect are not established by this abbreviated value | | Sampled element animations | `animation: none` | No named animation on those sampled elements; this does not rule out scripts, pseudo-elements, or other nodes | | Signup display and close | Open in all supplied captures; close affordance visible | Appearance is verified; trigger, animation, Escape handling, and persistence are not | | Magazine interaction | Horizontal desktop geometry and Drag text | Possible drag affordance; gesture behavior is unverified | | Header and purchase-panel persistence | Same viewport-edge placement across scrolled screenshots | Persistent presentation is observed; underlying positioning implementation was not supplied | The inspection waited for finite visible motion and layout stability, with bounded readiness timeouts. Perpetual animation was paused during readiness checks and then resumed. These procedures do not establish that every reveal, delayed asset, or interaction completed. For a new implementation, restrained transitions are appropriate. A brief opacity change for a dialog is a recommendation, not an observed original animation. Do not invent parallax, scroll-scrubbing, animated counters, or an opening sequence from still captures. ## Surfaces | Surface | Appearance | Purpose | | --- | --- | --- | | Hero | Full-width material photography | Establishes product identity before extended copy | | Narrative area | Open reading columns with little box decoration | Supports long-form explanation | | Feature field | Solid warm stone `#dbd7c7` | Gives product principles a distinct chapter | | Dark information band | Near-black `#111111`, white text | Changes rhythm and separates subjects | | Purchase promotion | Large image-led composition with a pill link | Makes the collection destination explicit | | Signup dialog | Pale square surface, photograph, centered copy | Separates notification registration from the page | | Modal backdrop | Strong flat dark veil | De-emphasizes the entire underlying interface | | Purchase panel | Small light rectangle with a bronze pill | Keeps a shopping route present during scrolling | | Editorial article | Unboxed image, title, and date | Lets content and photography carry hierarchy | The observed system relies on surface contrast, photography, spacing, and restrained outlines. It does not show a general system of elevated rounded cards or blurred glass panels. ## Imagery Use the material relationships visible in the current captures: reflective black glass against matte plaster, transparent drinking glass against a muted wall, and a natural timber edge beneath the product. Lighting is directional and restrained. Texture supplies richness without requiring decorative interface graphics. The signup photograph has its own composition. A pale vertical frame at the left and a wooden shelf organize the portrait bottle view. On mobile, a shallower crop enlarges the bottle and places the wordmark across the upper image. Preserve the visible brand artwork; its font and asset construction were not supplied. ### Observed Asset References No original image URLs or filenames were included in the supplied rendered evidence. The following table identifies visible uses without inventing paths. | Image role | Current evidence | Reuse guidance | | --- | --- | --- | | Hero still life | Desktop opening capture, partially obscured | Maintain the bottle, glass, timber, and wall relationship | | Signup portrait image | All desktop captures | Preserve the tall bottle silhouette and pale frame at left | | Signup mobile crop | Both mobile captures | Use art direction that retains the wordmark and label in a short, wide frame | | Core purchase image | Desktop mid-page capture | Retain the bottle and tall gift-box arrangement on the right | | Magazine photography | Partially visible behind the mobile dialog | Use editorial portraits and real environments; exact full-image crops remain unverified | | Footer liquid image | Desktop footer capture | Use as a large atmospheric surface rather than a small decorative icon | | Header and signup wordmarks | Visible in the captures | Use authorized identity artwork; no source logo path or font was established | Use responsive image assets and explicit dimensions in a new implementation. Do not enlarge small raster images indiscriminately or treat CSS as a replacement for the bottle photography. ## Layout & Responsive Behavior The desktop composition uses width to separate labels, narrative, and images. At 1440px, a common 96px side inset leaves a 1248px content span. This equals about 6.67% of the viewport on each side, but the original CSS formula was not supplied. Mobile adopts several distinct margins rather than one universal inset: 20px for the header, 35px for most narrative content, 26px for dark bands, and approximately 25px outside the signup dialog. These changes preserve different component densities. | Area | Desktop behavior | Mobile behavior | | --- | --- | --- | | Header | Full category navigation and Instagram icon | Logo, account, bag, and compact menu symbol | | Signup dialog | Image and copy beside each other | Inset landscape image above centered copy | | Signup close | Small internal cross | Circular control overlapping the upper-right edge | | Purchase panel | Bottom-right alignment | Centered near the bottom | | Product narrative | Separated visual and reading regions | One main reading column | | FEATURE | Left introduction and right explanation column | Long vertical sequence | | Dark bands | Heading and copy alongside each other | Heading followed by copy | | Core purchase promotion | White copy over the desktop composition | Dark copy below the mobile visual region | | News | Heading beside dated rows | Heading above rows; date/title relationship retained | | Magazine | Horizontal sequence with unequal widths | Six equal-width stacked articles | | Footer | Side-by-side regions and grouped navigation | Stacked content with vertical navigation | The smaller viewport does not simply scale everything down. The signup text retains its desktop size, large purchase buttons become wider relative to the page, article presentation changes direction, and the overall page becomes longer. Only these two viewport sizes were supplied. Tablet layouts, exact media-query thresholds, short landscape behavior, and safe-area handling are unverified. The Quick Start uses a recommended 1023px threshold for its simplified adaptation; this is not a recovered source breakpoint. ## Do’s and Don’ts ### Do - Keep bronze `#817048` as the main action color and pale green local to the garden promotion. - Preserve the contrast between black glass, rough wood, matte wall texture, and calm interface surfaces. - Use the observed serif labels with wide tracking and regular-weight Japanese headings. - Maintain generous paragraph line height and substantial spacing between major chapters. - Make purchase controls pill-shaped while keeping images and large surfaces square. - Recompose the signup dialog for mobile, including its shallow image crop and overlapping close control. - Keep the persistent purchase panel below the modal layer. - Stack the six magazine entries on mobile. - Use the actual brand artwork when authorized, especially where lettering is integrated with photography. ### Don’t - Don't reproduce the dark modal veil as a permanent page-wide theme. - Don't replace the whole homepage with a short hero-and-features marketing layout. - Don't turn every content section into a rounded, shadowed card. - Don't infer a visible blue accent from the carousel library's custom property. - Don't show both extracted signup variants simultaneously. - Don't invent an email input inside the observed link-based signup dialog. - Don't infer autoplay, inertia, parallax, or modal timing from still images. - Don't use the empty H1's 32px computed font size to rebuild the logo as ordinary text. - Don't claim exact mobile hero or garden image crops where the captures do not expose them. ## Recommended Implementation Additions These are recommendations for a new implementation, not verified original behavior: - Use a semantic modal with an accessible name, keyboard dismissal, focus restoration, and a noninteractive background while open. A native `dialog` is suitable. - Keep the visible mobile close disk small if desired, but provide a hit area of at least 44 × 44px. Apply the same principle to the menu and social controls. - Give the dialog an internally scrollable layout on short screens so that both registration links remain reachable. - Provide visible keyboard focus on every link and button. The current evidence does not establish focus styling. - Consider increasing the measured 12px mobile narrative text to 14px for reading comfort, then recheck wrapping and section proportions. - Reserve space below page content for the persistent purchase panel, including safe-area clearance, so that legal links are not covered. - Preserve the age-related footer notice as content. The captures do not establish a separate age-gate interaction. - Use one active signup component with explicit variant state instead of exposing duplicate dialog content to assistive technology. - Respect reduced-motion preferences and avoid assuming that a drag-only desktop collection is keyboard accessible. - Supply licensed font files only when available; test fallback typography because Japanese line lengths will change. ## Agent Prompt Guide ### Quick Color Reference - Main action: bronze `#817048`, with white text. - Feature chapter: warm stone `#dbd7c7`, with `#333333` text. - Dark information bands: `#111111`, with white text. - Garden purchase action: measured pale green `#d4debd`. - Dialog surface: approximately `#f1f0ee`; estimated, not a recovered token. - Dialog veil: strong flat black transparency; approximately 80% opacity for a starting implementation. - Footer secondary text: `#504e49` and `#bbbbbb`, used according to context. ### Overall Prompt “Create a premium sake brand and commerce homepage using material photography, generous editorial spacing, and restrained typography. Use black bottle imagery against timber and plaster, bronze `#817048` pill actions, a warm stone `#dbd7c7` feature section, and near-black information bands. Pair regular Japanese sans-serif copy with widely tracked English serif section labels. Include product narrative, five product principles, purchase promotions, dated news, an editorial magazine collection, and a substantial subscription footer. Keep a small purchase panel persistent near the bottom. On mobile, stack the editorial content and magazine articles. Build the notification dialog as a separate accessible layer, with a desktop image/copy split and a mobile image-over-copy arrangement.” ### Example Component Prompts 1. **Signup dialog:** “Build a square 640px desktop dialog with a 300px portrait bottle image and a 340px pale copy panel. Center a bronze Get in touch label, a Japanese registration heading, 14px / 28px copy, and two 260 × 50px pill links separated by 15px. At 390px viewport width, use a 340px panel, an inset 310 × 200px image, 250px-wide actions, and a small gold close disk overlapping the corner. Treat these as target proportions and allow scrolling on short screens.” 2. **Feature chapter:** “Use a full-width warm stone surface with 200px desktop vertical spacing, a tracked serif FEATURE label and regular Japanese heading at left, and 576px explanatory text blocks at right. On mobile, use 35px margins and one column. Keep the composition open and avoid boxed feature cards.” 3. **Purchase panel:** “Create a compact light panel containing the Wednesday sales message, a free-shipping label, and a bronze pill linking to the product collection. Place it at the bottom right on desktop and centered near the bottom on mobile. Ensure the modal layer covers it when a dialog is open.” 4. **Magazine collection:** “Arrange unboxed image/title/date articles horizontally on desktop: a larger first item, narrower following items, and generous gaps. On mobile, stack all six items in a 320px column with 50px gaps. Do not assume unverified autoplay or drag physics.” 5. **Footer:** “Create a large subscription and navigation footer with rectangular outlined registration links, tracked serif navigation, and small legal text. Use a dark subscription region alongside a pale atmospheric image region on desktop; stack the content on mobile.” ## Quick Start ### CSS Custom Properties This is a practical adaptation, not extracted source code. It preserves measured colors, type relationships, CTA dimensions, and the dialog's two inspected compositions. The dialog surface, veil, close-control color, image ratio, breakpoint, and some intermediate-width rules are recommendations or estimates. Font stacks name the observed families but do not download or license them. The white page fallback is an implementation choice because the supplied body background is transparent. ```css :root { /* Measured colors */ --color-bronze: #817048; --color-stone: #dbd7c7; --color-night: #111111; --color-text: #333333; --color-white: #ffffff; --color-muted: #bbbbbb; --color-legal: #504e49; --color-social: #704535; --color-garden-action: #d4debd; --color-photo-caption: rgba(236, 233, 222, 0.6); /* Screenshot approximations */ --color-dialog: #f1f0ee; --color-close: #ae9a64; --color-veil: rgba(0, 0, 0, 0.8); /* Observed font stacks; font files must be supplied separately */ --font-jp: dnp-shuei-gothic-gin-std, sans-serif; --font-ui: 'Verdana Pro', dnp-shuei-gothic-gin-std, sans-serif; --font-editorial: 'Georgia Pro', serif; --text-body: 15px; --leading-body: 30px; --text-label: 18px; --tracking-label: 0.3em; --radius-pill: 9999px; /* Recommended interpolation through the measured desktop inset */ --page-gutter: clamp(35px, 6.6667vw, 120px); --section-space: 200px; --header-height: 90px; --safe-bottom: env(safe-area-inset-bottom, 0px); } * { box-sizing: border-box; } .brand-page { margin: 0; color: var(--color-text); background: var(--color-white); font-family: var(--font-jp); } .site-header { position: fixed; inset: 0 0 auto; z-index: 20; height: var(--header-height); padding-inline: var(--page-gutter); color: var(--color-white); background: transparent; transition: color 0.6s, background-color 0.6s, top 0.5s ease-out; } .header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 30px; } .site-wordmark { display: block; width: 154px; height: auto; } .desktop-nav, .header-utilities { display: flex; align-items: center; gap: 30px; } .site-header a { color: inherit; text-decoration: none; font: 14px/1 var(--font-ui); letter-spacing: 0.05em; } .mobile-menu { display: none; } /* Apply this state from your own verified scroll logic. */ .site-header.is-solid { color: var(--color-text); background: var(--color-white); } .hero { position: relative; min-height: 100svh; background: var(--color-night); } .hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-specs { position: absolute; left: var(--page-gutter); bottom: 82px; margin: 0; color: var(--color-photo-caption); font: 11px/20px var(--font-jp); letter-spacing: 0.08em; } .editorial-section { padding: var(--section-space) var(--page-gutter); } .section-label { margin: 0 0 35px; font: 400 var(--text-label)/1 var(--font-editorial); letter-spacing: var(--tracking-label); } .section-title { margin: 0 0 20px; font: 400 22px/42px var(--font-jp); letter-spacing: 0.05em; } .editorial-copy { font: 400 var(--text-body)/var(--leading-body) var(--font-jp); letter-spacing: 0.06em; } .editorial-copy p { margin: 0 0 14px; } .feature-section { background: var(--color-stone); } .feature-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; } .feature-intro { max-width: 210px; } .dark-band { padding: 154px var(--page-gutter) 120px; color: var(--color-white); background: var(--color-night); } .pill { display: inline-flex; justify-content: center; align-items: center; min-width: 0; border: 0; border-radius: var(--radius-pill); color: var(--color-white); background: var(--color-bronze); text-align: center; text-decoration: none; } .purchase-link { width: 280px; height: 80px; font: 400 20px/1 var(--font-jp); letter-spacing: 0.03em; } .purchase-link--garden { color: var(--color-night); background: var(--color-garden-action); } .sale-panel { position: fixed; right: 30px; bottom: calc(30px + var(--safe-bottom)); z-index: 30; display: grid; grid-template-columns: minmax(0, 1fr) 190px; align-items: center; gap: 20px; width: 338px; min-height: 100px; padding: 18px 25px; border-radius: 4px; color: var(--color-text); background: var(--color-white); } .sale-panel .pill { width: 190px; height: 50px; font: 15px/1 var(--font-jp); letter-spacing: 0.03em; } /* Native horizontal scrolling is an adaptation, not verified drag behavior. */ .magazine-list { display: flex; gap: 5vw; overflow-x: auto; padding-inline: var(--page-gutter); } .magazine-card { flex: 0 0 23.3333vw; color: inherit; text-decoration: none; } .magazine-card:first-child { flex-basis: 30vw; } .magazine-card img { display: block; width: 100%; aspect-ratio: 1.4; object-fit: cover; } .magazine-card h3 { margin: 10px 0; font: 500 14px/28px var(--font-jp); letter-spacing: 0.08em; } /* Native dialog supplies the top layer and background inertness. */ .signup-dialog { position: fixed; inset: 0; width: min(640px, calc(100vw - 50px)); max-width: none; height: fit-content; max-height: none; margin: auto; padding: 0; overflow: visible; border: 0; border-radius: 0; color: var(--color-text); background: var(--color-dialog); font-family: var(--font-ui); } .signup-dialog::backdrop { background: var(--color-veil); } .signup-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); max-height: calc(100dvh - 50px); overflow-y: auto; } .signup-media { position: relative; min-height: 426.375px; } .signup-media picture { position: absolute; inset: 0; } .signup-media img { display: block; width: 100%; height: 100%; object-fit: cover; } .signup-copy { min-width: 0; padding: 44px 40px 61.375px; text-align: center; } .signup-kicker { margin: 0 0 8px; color: var(--color-bronze); font: 400 18px/22px var(--font-ui); } .signup-heading { margin: 0 0 10px; font: 400 16px/24px var(--font-ui); } .signup-description { margin: 0 0 30px; font: 400 14px/28px var(--font-ui); } .signup-actions { display: grid; gap: 15px; } .signup-actions .pill { width: 100%; height: 50px; font: 400 16px/1 var(--font-ui); } .signup-actions .pill--outline { border: 2px solid var(--color-bronze); color: var(--color-bronze); background: var(--color-white); } .signup-close-form { margin: 0; } .signup-close { position: absolute; top: 0; right: 8px; width: 44px; height: 44px; padding: 0; border: 0; color: var(--color-bronze); background: transparent; cursor: pointer; } .signup-close span::before, .signup-close span::after { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 1px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); } .signup-close span::after { transform: translate(-50%, -50%) rotate(-45deg); } /* Recommended breakpoint; the original threshold was not supplied. */ @media (max-width: 1023px) { :root { --page-gutter: 35px; --section-space: 70px; --header-height: 55px; --text-body: 12px; --leading-body: 24px; --text-label: 16px; --tracking-label: 0.2em; } .site-header { padding-inline: 20px; } .site-wordmark { width: 130px; } .desktop-nav, .header-instagram { display: none; } .header-utilities { gap: 20px; } .site-header a { font-size: 12px; letter-spacing: normal; } .mobile-menu { display: inline-flex; min-width: 44px; min-height: 44px; } .hero-specs { left: 20px; bottom: 110px; font-size: 10px; line-height: 16px; letter-spacing: normal; } .section-label { margin-bottom: 20px; } .section-title { line-height: 35px; margin-bottom: 10px; } .editorial-copy p { margin-bottom: 7px; } .feature-layout { display: block; } .feature-intro { max-width: none; margin-bottom: 70px; } .dark-band { padding: 50px 26px; } .purchase-link { width: min(305px, 100%); height: 70px; font-size: 17px; letter-spacing: 0.1em; } .sale-panel { right: auto; left: 50%; bottom: calc(19px + var(--safe-bottom)); transform: translateX(-50%); width: min(338px, calc(100vw - 52px)); min-height: 74px; grid-template-columns: minmax(0, 1fr) 150px; gap: 14px; padding: 14.5px 18px; } .sale-panel .pill { width: 150px; height: 45px; font-size: 14px; letter-spacing: 0.1em; } .magazine-list { display: grid; gap: 50px; overflow: visible; } .magazine-card h3 { font-size: 12px; line-height: 22px; letter-spacing: 0.03em; } .signup-dialog { width: min(340px, calc(100vw - 50px)); } .signup-layout { grid-template-columns: minmax(0, 1fr); } .signup-media { min-height: 0; height: 200px; margin: 20px 15px 0; } .signup-copy { padding: 22px 45px 30px; } .signup-heading { font-size: 18px; line-height: 27px; } .signup-close { top: -22px; right: -18px; color: var(--color-white); } .signup-close::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--color-close); } .signup-close span::before, .signup-close span::after { width: 18px; height: 2px; } } /* Recommended accessibility additions */ .brand-page :focus-visible, .signup-dialog :focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { .site-header { transition: none; } } ``` The media ratio of `1.4` is a practical approximation for magazine photography, not a measured original image dimension. Header scroll-state logic, actual navigation, complete section contents, and purchase-panel bottom clearance must be integrated with the surrounding application. ### Dialog Markup The image filenames below are placeholders for authorized assets, not observed website paths. Supply desktop and mobile artwork with the correct branding composition. If the wordmark is already embedded in the image, do not overlay it a second time. ```html
``` Open this component with its native `showModal()` method from an intentional trigger. Opening it with only an `open` attribute does not create the modal backdrop or equivalent background inertness. The original trigger and delay were not established, so no automatic display timing is prescribed here. ### Tailwind v4 Token Mapping Optional aliases for a project already using Tailwind v4. This is not evidence that the original website uses Tailwind. Define the preceding custom properties first. ```css @theme inline { --color-bronze: #817048; --color-stone: #dbd7c7; --color-night: #111111; --color-ink: #333333; --color-garden: #d4debd; --font-editorial: 'Georgia Pro', serif; --font-japanese: dnp-shuei-gothic-gin-std, sans-serif; --font-interface: 'Verdana Pro', dnp-shuei-gothic-gin-std, sans-serif; --text-narrative: var(--text-body); --text-section-label: var(--text-label); --spacing-page: var(--page-gutter); --spacing-section: var(--section-space); --radius-pill: 9999px; } ``` ## Sources & Evidence - **Inspected original and final page:** [TAKANOME official homepage](https://takanome-sake.com/). Original and final URLs are identical; the supplied response status is HTTP 200. - **Capture date:** October 4, 2026, at 21:47:11.402 UTC, corresponding to October 5 at 06:47 JST. - **Desktop evidence:** three supplied current-page screenshots at 1440 × 1000, showing the hero, TASTE/purchase area, and footer behind the open signup dialog; accompanying rendered text, hrefs, computed styles, and element rectangles. - **Mobile evidence:** two supplied current-page screenshots at 390 × 844, plus rendered DOM measurements covering the full homepage. The dialog remains open, and the visible underlying content differs between captures. - **Observed state differences:** page scrolling changes the content behind the dialog; the header and purchase panel remain at the viewport edges; desktop and mobile layouts differ materially. No recorded dismissal, menu opening, cart interaction, signup completion, or magazine drag result was supplied. - **Inspection limitations:** readiness checks were bounded, service workers and SharedWorkers were disabled, and delayed content or unexercised interactions may remain incomplete. Asset URLs, font-file loading, exact media queries, full animation logic, and unobscured mobile hero imagery were not provided. This reference describes the current homepage represented by the supplied original-page evidence. Estimated visual tokens and recommended implementation behavior are explicitly distinguished from measured values.