# Good The What — Style Reference > A monochrome design-company portfolio with monumental lettering, anatomical linework, and curves that change direction on mobile. **Original URL:** [https://www.goodthewhat.com/](https://www.goodthewhat.com/) **Final URL:** [https://www.goodthewhat.com/](https://www.goodthewhat.com/) **Theme:** white canvas, near-black typography, pale section surfaces, and a dark footer. **Inspected:** October 2, 2026, 03:36 JST; supplied retrieval timestamp: October 1, 2026, `18:36:14.489Z`. **Viewports:** desktop `1440 × 1000`; mobile `390 × 844`, in CSS pixels. **Scope:** the current corporate homepage: identity and navigation, project hero, company introduction, works track, brand statement, services, journal/news, consultation link, newsletter form, and footer. Visual captures cover the desktop opening, statement/services transition, desktop footer, mobile opening, and mobile footer. Other component measurements come from the supplied rendered DOM. Linked pages were not inspected. Good The What combines a restrained interface with unusually large identity graphics. The page uses compact English navigation, spacious Japanese copy, an enormous black wordmark, and an anatomical heart drawn in fine contour lines. Project imagery supplies most of the color. The interface itself stays close to white, near-black, and two pale grays. The defining composition is asymmetric. On desktop, a narrow identity rail sits beside a wide project image with a rounded right end. The wordmark crosses the image’s lower boundary, while the introductory copy begins much farther to the right than the page’s left margin. On mobile, the image becomes a tall shape with a rounded bottom, and the wordmark breaks into three forceful lines. This is a corporate and portfolio homepage with several browsing routes, a news section, and contact utilities; its design should retain that breadth. ## How to Read This Reference - **Measured** means a value appears in the supplied rendered DOM or computed-style evidence. Measurements describe the sampled viewport and node, not a universal CSS rule. - **Calculated** means arithmetic derived from measured geometry, such as a card gap or percentage inset. The original stylesheet formula was not supplied. - **Estimated** means a visual approximation from the five original-page screenshots. Large display lettering, decorative masks, and some footer surfaces fall into this category. - **Recommended** means a proposed implementation choice. The CSS below is an adaptation, not recovered source code. - All token names in this document are reusable aliases. The only reported source custom properties were generic `16px` and `42px` font-size presets; they do not establish the page’s actual display scale. - Computed font-family declarations establish the requested font stacks. They do not independently prove which font file rendered every glyph. - Several sampled nodes are transparent links over content. Their rectangles are interaction bounds, not necessarily image dimensions. Likewise, a stretched heading rectangle does not indicate oversized text. - Menu opening, hover results, carousel controls, form submission, and linked-page behavior were not exercised in the supplied evidence. ## Tokens — Colors ### Default Palette | Name | Value | Suggested token | Evidence and role | | --- | --- | --- | --- | | Canvas White | `#ffffff` | `--canvas` | Measured HTML/body background at both viewports; the main page field | | Near-Black Ink | `#1a1a1a` | `--ink` | Measured body text and filled CTA background; the dark footer visually matches this value, but its background was not separately extracted | | Service White | `#fafafa` | `--service-surface` | Measured services background and footer-link foreground | | Soft Gray | `#f1f1f1` | `--soft-surface` | Measured CTA foreground; also a visual approximation for the consultation/newsletter panel | | Footer Rule | approximately `#333333` | `--footer-rule` | Screenshot estimate for the subdued separators in the mobile dark footer | | Heart Contour | approximately `#cfcfcf` | `--heart-line` | Screenshot estimate for the large decorative heart’s fine, low-contrast linework | | Project Yellow | approximately `#ffe500` | `--project-yellow-example` | Screenshot estimate from the mobile Happy Dots Company artwork; an image color, not an interface action token | The distinction between interface color and project color is essential. The bright yellow mobile hero belongs to a displayed client project. It does not establish yellow as the company’s button, link, or section-heading color. The desktop opening instead shows a warm interior photograph inside a project preview, while the same surrounding interface stays monochrome. There is no observed theme selector. The dark footer is a section treatment within the light page, rather than evidence of a separate dark mode. ## Tokens — Typography ### Latin Navigation and Utility Type **Measured family:** `din-2014, sans-serif`. The Latin interface uses a narrow, sturdy sans serif. Weight `600` appears on the opening side navigation, standard CTAs, category labels, and footer links. Weight `800` appears on the compact desktop header, section labels, and contact-form label. This creates a distinction between practical navigation and stronger section markers without introducing another observed Latin family. ### Japanese Body Type **Measured stack:** `yu-gothic-pr6n, 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', sans-serif`. The body is `16px`, weight `400`, at both viewports. Its default line height changes from `35.2px` on desktop to `30.4px` on mobile. These are unusually open defaults: `2.2` and `1.9`, respectively. Individual captions and contact text use more compact overrides. The HTML element’s default `Times` declaration is not evidence that the main interface uses Times. The body overrides it with the Japanese sans-serif stack. ### Monumental Wordmark The giant `Good The What` lettering is visibly heavy, compact, and sans serif. Its exact font family, weight, and implementation as text or artwork were not included in the sampled elements. **Visual estimate:** a text equivalent around `170–180px` on desktop and `90–100px` on mobile. The mobile version has approximately `89px` between successive line starts and reads as `Good`, `The`, `What` on separate lines. Treat these as reconstruction targets, not measured declarations. Using `din-2014` for an editable approximation is a recommendation based on the surrounding Latin typography. ### Editorial Introduction and Brand Statement The opening Japanese introduction has a serif or Mincho appearance, visually distinct from the body stack. Its exact family is unverified. A generic `serif` is a safe adaptation until an authorized font or artwork is available. The statement `心に、グッとザワッと。` appears as large, expressive Japanese lettering beside the faint anatomical heart. It has the character of drawn or calligraphic artwork. The corresponding sampled section contains no extracted text, so neither a font name nor a text-rendering implementation can be established. ### Type Scale | Role | Desktop | Mobile | Weight / evidence | | --- | --- | --- | --- | | Body default | `16px / 35.2px` | `16px / 30.4px` | `400`, measured | | Opening side navigation | `16px / 32px` | Replaced by menu affordance | `600`, measured desktop | | Compact header brand | `24px / 24px`, `0.5px` tracking | Not shown in the mobile opening | `800`, measured desktop | | Compact header navigation | `15px / 15px` | Not shown | `800`, measured desktop | | Section labels | `20px / 20px` | `18px / 18px` | `800`, measured | | Standard CTA label | `16px`, inherited `35.2px` line height | `16px`, inherited `30.4px` line height | `600`, measured | | Services introduction | `18px / 18px` | `14px / 19.6px` | `400`, measured | | News category label | `16px / 16px` | `16px / 16px` | `600`, measured | | Consultation explanation | `15.84px / 25.344px` | `14.04px / 22.464px` | `400`, measured | | Contact-form label | `17.28px / 38.016px` | `21.45px / 21.45px` | `800`, measured | | Newsletter introduction | `14.4px / 20px` | `15.6px / 28.08px` | `400`, measured | | Footer navigation | `17.28px / 17.28px` | `14.82px / 14.82px` | `600`, measured | | Copyright | `14.4px / 31.68px` | `13.26px / 25.194px` | `600`, measured | | Giant wordmark | Approximately `170–180px` | Approximately `90–100px` | Screenshot estimate; exact family and weight unknown | | Opening editorial copy | Approximately `28px` | Approximately `24px` | Screenshot estimate; serif appearance | Some fractional sizes are compatible with viewport-based sizing, but two sampled endpoints do not prove the underlying CSS formulas. Do not extrapolate a complete fluid scale from them. ## Tokens — Spacing & Shapes **Spacing character:** broad section intervals, strongly offset content, and compact navigation inside large areas of white. ### Spacing Scale | Use | Desktop | Mobile | Status | | --- | --- | --- | --- | | Standard outer page inset | `72px` | `19.5px` | Measured; both equal `5vw` | | Opening hero’s internal left offset | `288px` | `0px` | Measured section padding | | Hero top padding / starting position | `60px` top padding | Section begins at about `159px` | Measured, different layout strategies | | Side-navigation indentation | `20px` beyond logo edge | Not applicable | Calculated from measured x positions | | Section-label marker allowance | `25px` left padding | `25px` left padding | Measured | | Work-card horizontal gap | `30px` | `20px` | Calculated from repeated anchor positions | | Work-card padding | `40px 30px 35px` | `30px 20px 25px` | Measured | | Services section padding | `260px 0 240px` | `140px 0 100px` | Measured | | Services column / row separation | Approximately `24.9px` horizontally | `30px` vertically | Calculated from link bounds | | News category horizontal padding | `20px` | `15px` | Measured | The desktop hero section ends at `y = 910px`, while the address/news strip starts at `y = 1125px`: a measured `215px` interval. The works section begins at `y = 1572px`, well below that strip. These gaps are part of the page’s editorial pacing; replacing them with a uniform small section margin changes its character. ### Border Radius | Element | Value or shape | Evidence | | --- | --- | --- | | Standard filled CTA | `0 40px 40px 0` | Measured on desktop and mobile | | Services panel | `0 0 30px 30px` | Measured | | News category label | `20px` | Measured | | Project-card link | `0px` | Measured on the anchor; descendant artwork may have separate treatment | | Desktop hero | Small upper-left rounding and a large rounded right end | Screenshot observation; mask source unavailable | | Mobile hero | Small upper corners and a broad rounded bottom | Screenshot observation; mask source unavailable | | Consultation outline | Nearly square left corners, semicircular right end | Desktop screenshot; approximately `120px` overall height | | Contact/newsletter surface | Rounded lower corners, approximately `20px` | Screenshot estimate | The hero and CTA share directional curvature, but they are not interchangeable capsules. The button’s left edge remains straight. On mobile, the hero’s large curve moves to its lower edge. ### Layout Measurements | Element | Desktop `1440 × 1000` | Mobile `390 × 844` | | --- | --- | --- | | Standard content width | `1296px` | `351px` | | Hero section | `1296px` wide with `288px` left padding | `335.39px` wide at `x ≈ 27.30px` | | Hero project-link bounds | `1008 × 582px`, at `(360, 60)` | `363 × 407.11px`, at approximately `(13.89, 158.98)` | | Opening logo heading box | `130 × 209.69px` | `124.80 × 198.98px` | | Standard CTA | `260 × 80px` | `230 × 60px` | | Work-card link | `294 × 478.5px` | `226 × 331.59px` | | Services outer panel | `1382.39px` wide | `374.39px` wide | | Service link bounds | Three `398.13 × 546.39px` columns | Three stacked `370.63 × 155.39px` rows | | News article region | `777.59px` wide at `x ≈ 590.41px` | `298.34px` wide at `x ≈ 72.14px` | | News article link height | Approximately `254.19px` | Approximately `151.39–177.39px` | | Contact-link bounds | `775.59 × 118px` inside the outline | `349 × 307.91px` | | Sampled document height | Approximately `7504px` | Approximately `6286px` | The services panel occupies approximately `96%` of the viewport width at both sizes. Its inner content is inset again, producing nested margins instead of one universal page grid. A useful repeated relationship is the brand-statement overlap: the services panel begins `60px` before the preceding statement section’s measured bottom at both viewports. This connects the statement artwork to the following pale surface. **Mobile overflow caveat:** the sampled service-link width extends slightly beyond the viewport when added to its x position. A full visual capture of those rows was not supplied. Record this as observed geometry, not a requirement to reproduce overflow. A new implementation should constrain the actual interactive area to the viewport. ## Components ### Opening Identity Rail **Role:** brand recognition and the homepage’s primary desktop navigation. The rail begins at `(72px, 25px)` on desktop. Its logo combines a fine anatomical-heart illustration, a black rectangular wordmark frame, stacked `Good / The / What` lettering, and a small domain caption. The measured logo heading is `130px` wide; the visible artwork is taller than a conventional horizontal logotype. Below it, six uppercase destinations form a vertical list: `ABOUT US`, `SERVICES`, `PROJECTS`, `JOURNALS & NEWS`, `FAQ`, and `CONTACT`. Labels start at `x = 92px`, placing them `20px` inside the logo’s left edge, and follow a `32px` line rhythm. The logo is a home link. Preserve the illustration as an asset where authorized; redrawing only the boxed letters would lose the identity carried by the contour heart. ### Compact Desktop Header **Role:** a smaller navigation presentation visible in the scrolled desktop capture. A white strip approximately `60px` high spans the page with a fine lower rule. A `24px`, weight-`800` text brand sits at the left, while the six destinations form a horizontal row on the right. Navigation is `15px`, weight `800`. The initial DOM places this compact brand above the viewport at `y = -50px`; the intermediate screenshot shows it at the top edge. This supports a changing header presentation across scroll states. The exact reveal threshold, positioning mechanism, and behavior near the footer are unverified. A fixed header controlled by a scroll sentinel is a recommended implementation, not a recovered interaction. ### Mobile Header and Menu Affordance **Role:** retain the expressive logo while reducing navigation density. At `390px`, the logo begins around `(19.5px, 20px)` and stays approximately `125px` wide. It overlaps the upper-left area of the project hero. A compact `MENU` label and three fine horizontal lines appear at the upper right. The open-menu layout, animation, focus behavior, and dismissal mechanism were not captured. Do not invent a full-screen menu and describe it as observed. For implementation, make the visible affordance a named button and build its expanded state as an explicitly separate design decision. ### Project Hero and Giant Wordmark **Role:** present selected work while making the company name the dominant page element. The desktop hero starts at `x = 360px`, leaving the identity rail and a generous intermediate gap. Five project links share the same `1008 × 582px` bounds. The visible frame shows a warm interior image within a project/web preview; pale regions and vertical Japanese lettering inside that preview belong to the displayed project composition. The image ends in a large right-hand curve. The wordmark crosses its lower edge and stretches almost the full main content width, beginning near the page’s `72px` margin rather than the image’s `360px` start. On mobile, the project image starts around `y = 159px`, extends beyond the narrower text column, and becomes a tall `363 × 407px` shape with a rounded bottom. The captured project is Happy Dots Company: bright yellow artwork with white circular motifs and embedded black lettering. The wordmark overlaps the lower portion, then continues beneath the image in three lines. The shared hero bounds and multiple project links are consistent with a slider. Desktop and mobile captures showing different projects do not prove breakpoint-specific project selection. Autoplay interval, transition effect, swipe behavior, and pagination semantics remain unverified. ### Introductory Copy and About Link **Role:** state the company’s purpose and provide a direct company-profile route. The observed copy reads: > GoodTheWhatは
クリエイティブの力で
企業価値を高めていく
企画・デザイン会社です。 On desktop, the serif-style text begins around `x = 592px`, with the black `ABOUT US` button farther right. This offset creates a second alignment axis beneath the hero rather than returning everything to the left page edge. On mobile, the copy follows the three-line wordmark near the hero text column’s left edge. The measured `ABOUT US` button begins at about `(27.30px, 997.13px)`, below the initial `844px` viewport. The opening is therefore intentionally taller than one phone screen. ### Directional Filled CTA **Role:** navigation to company, project, service, and journal indexes. The button is a near-black rectangle with a straight left end and rounded right end. Desktop dimensions are `260 × 80px`; mobile dimensions are `230 × 60px`. Both use the measured radius `0 40px 40px 0`. The label is `16px`, weight `600`, in `din-2014`, with a `30px` left inset. A long, delicate right-pointing arrow balances the label. The observed foreground is `#f1f1f1`. Labels include `ABOUT US` and `VIEW MORE`. These are navigation links, not form-submit controls. Their destination should remain visible to assistive technology even when the same visual wording appears in several sections. ### Address and News Strip **Role:** connect the expressive introduction to practical company information and a current notice. Desktop DOM evidence places an English address/contact block on the left and a dated news link on the right. The strip is a flex section, `1296 × 102px`, beginning at `y = 1125px`. The news link reserves `140px` of left padding within its area for date-related alignment. On mobile, the visible text extraction retains the dated notice while the desktop address block is absent from the visible text. The news link uses `110px` left padding and the section measures `351 × 55px`. The full Japanese address returns in the footer. The displayed `2024.07.26` is an article date. It is not the inspection date or evidence that the current page is unavailable. ### Works Track **Role:** expose a sequence of case studies without turning the homepage into a static card grid. The `WORKS` label pairs with the English statement, “We are a planning and design firm that increases corporate value through creativity.” A `VIEW MORE` link leads to the project index. The DOM contains five unique project identities repeated across a horizontal sequence: FUSARI, come-te, HELLO MY BLEND, Happy Dots Company, and アクティブ アンド カンパニー. Repeated links and offscreen positions indicate a track or carousel structure; repeated nodes are not additional distinct projects. Desktop cards measure `294px` wide with a `324px` stride, giving a calculated `30px` gap. On mobile they measure `226px` wide with a `246px` stride, giving a `20px` gap. The sampled mobile positions expose parts of neighboring items around a fully visible card. Each anchor contains a project name and `MORE`, with measured internal padding. Card artwork and hover appearance are not visually documented in the supplied screenshots. Do not invent specific card colors, image aspect ratios, or overlays. Autoplay, dragging, and track speed are also unverified. ### Brand Statement and Heart Watermark **Role:** interrupt the project sequence with the company’s expressive visual voice. The desktop capture shows two huge lines of Japanese lettering, `心に、` and `グッとザワッと。`, across a white field. A large anatomical heart sits toward the upper right in extremely fine, faint contour lines. The contrast between black lettering and near-disappearing illustration keeps the statement forceful without filling the entire surface with dark mass. The measured statement section is `1296 × 849.36px` on desktop and `351 × 301.06px` on mobile. Its typography and illustration were not represented as ordinary extracted text. The following services surface overlaps the section’s bottom by `60px` at both viewports. Use dedicated artwork or a carefully prepared vector for this moment. A generic heart icon or ordinary bold Japanese heading would have a substantially different character. ### Services Panel **Role:** organize three service routes within a broad, softly differentiated surface. The outer surface is `#fafafa`, approximately `96vw` wide, with `30px` lower corner radii. A dotted horizontal rule introduces the section. Beneath it, a small black marker and bold `SERVICES` label sit left, while a short Japanese description sits right. The measured services are: 1. `01` — `自走支援型 ブランディング` 2. `02` — `デザイナーと始める 商品・サービス開発` 3. `03` — `デザイン活用 コンサルティング` Desktop links occupy three equal-width columns, each approximately `398 × 546px`. Mobile links become three shallow stacked rows, approximately `155px` high with `30px` between them. The mobile section heading and introductory sentence still occupy separate left/right regions; they do not simply become two full-width blocks. A `VIEW MORE` button is positioned near the right side and crosses the panel’s lower boundary in the measured geometry. The supplied desktop screenshot covers the panel entrance, not the complete service tiles. Their internal imagery and exact number/title arrangement remain unverified. ### Journal and News List **Role:** present editorial updates in an offset list. The page’s section label is `JOURNAL & NEWS`, while navigation uses `JOURNALS & NEWS`. Preserve these actual labels when documenting the source; an adaptation can standardize wording deliberately. Desktop structure is a left section heading with a right article column approximately `777.6px` wide. The right column begins at `x ≈ 590.4px`, matching the page’s recurring offset-content axis. Three article links measure approximately `254px` high each. On mobile, the heading becomes a block above the list, while article links retain a rightward inset: approximately `298.3px` wide within a `351px` section. Their heights vary with content. A final `VIEW MORE` button aligns with that inset list. Each entry includes a title and date. Some entries also expose a `NEWS` category link with `20px` radius, `16px` type, and compact padding. The category fill and article image treatment were not supplied. Keep those visual details unspecified rather than assuming a conventional blog-card pattern. ### Consultation Link **Role:** make contact approachable through a free online-consultation invitation. In the desktop footer capture, a wide outlined control contains three parts: a two-line Japanese invitation on the left, a vertical divider, and an envelope icon with bold `CONTACT FORM` text and a thin arrow on the right. Its outer silhouette is nearly rectangular at the left and semicircular at the right. The sampled link inside that outline is approximately `775.6 × 118px`. On mobile it becomes approximately `349 × 307.9px`; explanatory text and the contact label are arranged vertically rather than compressed into the desktop row. The mobile contact label grows to `21.45px` even as the explanation becomes smaller. The complete mobile outline is outside the supplied footer screenshot, so its corner geometry is unverified. The link destination is `/contact/`; the actual contact form was not inspected. ### Newsletter Form **Role:** a quieter secondary action beside or beneath the consultation link. The introduction states that a newsletter is distributed monthly. The input is visually minimal: centered `email@address.com *` text above a single thin underline. The visible submit label is `購読する`, with no large filled-button treatment. On desktop, this occupies the right side of the light contact surface. On mobile, the introduction wraps to two lines and the form occupies an approximately `311px` wide centered column. The provided mobile footer image shows its lower portion before the dark footer begins. The screenshot establishes the form’s appearance, not its validation, confirmation, error states, endpoint, or consent behavior. The asterisk is visible, but required-field enforcement was not tested. ### Footer Identity and Contact Grid **Role:** conclude with clear company identity and practical routes. A giant horizontal wordmark overlaps the upper boundary of the light contact/newsletter surface in the desktop capture. Below that surface, the footer changes to near-black, with the heart-and-box logo reversed into white and gray. Desktop navigation runs across the upper-right area. Address, phone, email, and copyright form a lower information row. Footer links are visibly underlined, which distinguishes them from the unadorned opening navigation. Mobile reorganizes this into a centered sequence: logo, postal address, two wrapped rows of navigation, phone/email, and copyright. Fine dark-gray rules separate the address, navigation, and contact regions. The central footer content is approximately `312px` wide, leaving `39px` side margins. The phone and envelope symbols are simple thin outlines. The text extraction exposes `call` and `mail`, but the icon font or asset library is not identified. A phone URL appears elsewhere in the mobile link evidence; the supplied data does not establish that every footer contact label is independently linked. ## Tokens — Motion & Interaction | Treatment | Supplied evidence | What can be concluded | | --- | --- | --- | | Opening logo | `4s cubic-bezier(0.19, 1, 0.22, 1) 0.2s forwards logoIn` | A named entrance animation with a long ease-out is declared; its actual keyframes were not supplied | | General links | Computed transition shorthand `0.3s` | A short transition is declared; changed properties and visible hover results are unverified | | Filled CTAs | `background-position 0.8s cubic-bezier(0.19, 1, 0.22, 1)` | Background-position changes are eased; the background composition and trigger were not captured | | Mobile information strip | `slideIn`, `1.5s`, `cubic-bezier(0.25, 1, 0.5, 1)`, forwards | A reveal is declared; the exported delay field is insufficient to quote a reliable complete shorthand | | Desktop header presentation | Offscreen compact header in initial DOM; visible compact strip in the scrolled capture | Header presentation changes across captured scroll states; threshold and persistence are unknown | | Hero project sequence | Five links share the same bounds; different projects appear in the supplied opening captures | Consistent with a slider; no verified interval, gesture, or transition effect | | Works sequence | Repeated identities and regularly spaced offscreen anchors | Consistent with a looping track; no verified speed, direction, or pause behavior | | Menu and newsletter | Closed-menu affordance and resting form only | Opening, submission, and feedback behavior remain unverified | A computed value of `transition: all` without a useful duration is not evidence of a visible animation. Similarly, `animation: none` on a sampled parent does not exclude motion on descendants or JavaScript-driven elements. The capture process waited for finite motion and image readiness within stated limits, and temporarily paused perpetual animations during readiness checks. Static screenshots therefore document settled appearance, not complete motion choreography. **Recommended adaptation:** preserve the ease-out character for optional entrances, keep navigation immediately usable, and avoid making essential text depend on a four-second animation. If a new carousel moves automatically, give it an explicit pause mechanism. Do not invent original keyframes from animation names alone. ## Surfaces | Layer | Appearance | Function | | --- | --- | --- | | Main canvas | Solid white | Supports the large wordmark and broad whitespace | | Project media | Full-color artwork inside a directional mask | Provides changing visual identity and color | | Services | Almost-white `#fafafa`, dotted introduction rule, rounded lower corners | Groups three service routes | | Standard CTA | Near-black fill with pale text and fine arrow | Strong navigation emphasis | | Consultation/newsletter | Pale gray, visually close to `#f1f1f1` | Holds two differently weighted contact actions | | Consultation link | Thin dark outline with internal divider | Large action without another heavy black block | | Footer | Near-black with off-white text and quiet separators | Clear termination and utility information | The captured surfaces use contrast, linework, and silhouette rather than visible shadow elevation. Avoid adding floating white cards, glass blur, or decorative gradients to the shell. Those additions would compete with the project imagery and monumental type. ## Imagery Three image systems define the page: 1. **Project imagery:** photographs and graphic brand work retain their own colors and embedded typography. The desktop opening shows an interior scene; the mobile opening shows yellow Happy Dots Company artwork. Do not recolor all projects into monochrome. 2. **Anatomical identity:** the detailed heart uses nested contour lines, combining the precision of a diagram with the texture of fingerprint or topographic linework. It appears behind the boxed logo and as a large, faint statement-section illustration. 3. **Display artwork:** the enormous company name and expressive Japanese statement behave as compositional elements. Their placement and overlap matter as much as their wording. Photography should remain photographic. There is no evidence of pixelated rendering, halftone filtering, or a site-wide image tint. Use normal high-quality scaling, and choose crops deliberately for the desktop and mobile masks. Whether the original uses separate image sources or one cropped source was not established. ### Observed Asset References No image `src` URLs, filenames, or intrinsic image dimensions were supplied. The following references identify visible assets without inventing paths. | Asset | Evidence | Implementation guidance | | --- | --- | --- | | Heart-and-box company logo | Opening and footer captures | Use an authorized asset; provide appropriate contrast variants | | Large contour heart | Desktop statement capture | Preserve fine line density and low contrast; treat as decorative where appropriate | | Interior project preview | Desktop opening capture | Retain the preview’s composition, including its internal lettering and pale areas | | Happy Dots Company artwork | Mobile opening capture | Preserve the yellow field, white circular motifs, and embedded black lettering | | Large company wordmark | Desktop opening/footer and mobile opening | Prefer a verified source asset; an editable font approximation requires careful fitting | | Japanese statement lettering | Desktop intermediate capture | Treat as artwork until its implementation is known | | Thin arrows, envelope, and phone | CTAs and footer captures | Simple CSS or SVG equivalents are reasonable recommendations; no icon library is verified | Observed project destinations include `/projects/web/730/`, `/projects/branding/705/`, `/projects/web/669/`, `/projects/branding/751/`, and `/projects/branding/338/`. These are content routes, not image asset URLs, and were not opened during this analysis. ## Layout & Responsive Behavior ### Desktop Composition The standard content width is `90%` of the viewport, yielding `72px` outer margins at `1440px`. The hero reserves another `288px` inside that container for the left-side identity system, leaving a `1008px` media region. Large type then crosses this internal division, connecting the rail and project image. Content repeatedly returns to a secondary axis around `x = 590px`: the opening introduction, notice area, and article list all use substantial rightward offsets. This recurrence makes the asymmetry feel deliberate. The works track spans the viewport rather than becoming a centered grid. Services use a wider outer panel with nested insets, and the journal returns to the standard page container. The page’s different widths are part of its rhythm. ### Mobile Composition The standard `5vw` inset remains, but the hero text uses approximately `7vw`, while the image widens beyond it to roughly `93vw`. The logo overlaps the image and the menu affordance occupies the opposite top corner. The giant wordmark changes from a horizontal line into three lines. The introduction and CTA continue below the first screen. Works retain horizontal sequencing with smaller cards and visible neighboring content. Services switch from three tall columns to three short stacked rows, while the journal preserves a smaller rightward inset for its article list. The contact area becomes vertical and substantially taller. The footer switches from a wide grid to centered groups with rules. Its logo remains approximately the same width as on desktop, maintaining identity rather than shrinking every element proportionally. ### Breakpoints and Constraints Only `1440px` and `390px` widths were inspected. The exact breakpoint, tablet layouts, landscape behavior, and maximum content width are unknown. For a new implementation, `60rem` is a reasonable starting breakpoint for changing navigation and major columns. It is a recommendation, not an observed source value. Test intermediate widths with the real font metrics, especially the six-item navigation and giant wordmark. The sampled document height is shorter on mobile even though its contact/footer area becomes taller. Compressed statement artwork and shallower service rows explain part of that difference. Avoid deriving the mobile page by uniformly scaling desktop dimensions. ## Do’s and Don’ts ### Do - Preserve white, near-black, and pale-gray interface surfaces; let project artwork introduce stronger colors. - Keep the logo’s anatomical contour drawing and boxed lettering together. - Make the giant company name a structural element that overlaps imagery. - Retain the directional curve: a rounded right end on desktop imagery and a rounded bottom on mobile imagery. - Use the measured DIN-family stack for Latin interface labels when licensed and available. - Distinguish the serif-style introduction from ordinary Japanese sans-serif body copy. - Keep standard CTAs straight on the left, rounded on the right, and paired with a fine arrow. - Maintain large section intervals and recurring rightward content offsets. - Preserve the works track’s horizontal character on mobile. - Stack mobile service rows and reorganize the footer into centered, separated groups. - Treat artwork, measured CSS, and implementation recommendations as separate evidence classes. ### Don’t - Don’t reduce the site to a single conversion funnel or remove its project, service, news, and company routes. - Don’t turn the mobile hero’s yellow artwork into a global button color. - Don’t replace all curved elements with identical fully rounded pills. - Don’t center every heading and paragraph; the offset alignments are fundamental. - Don’t replace the anatomical heart with a generic heart symbol. - Don’t assume the giant wordmark or Japanese statement uses the measured body font. - Don’t invent card imagery, hover overlays, menu panels, or slider gestures that were not captured. - Don’t add shadows, glossy gradients, or glass effects to compensate for the quiet surfaces. - Don’t infer historical versions or unavailable status from the article dates. - Don’t reproduce measured overflow as a design requirement. - Don’t hardcode animation names without their actual keyframes and a reduced-motion alternative. ## Recommended Implementation Additions These are recommendations for a new implementation, not verified features of the original: - Provide one meaningful page heading even if the visible wordmark is an image. Give the home-linked logo an accessible name and mark repeated decorative artwork appropriately. - Implement the menu affordance as a button with `aria-expanded` and `aria-controls`. Specify keyboard navigation, focus handling, and dismissal when designing its unobserved expanded state. - Give repeated `VIEW MORE` links destination-specific accessible names. - Make project tracks keyboard reachable. If using duplicated items for looping, prevent clones from creating duplicate focus stops and announcements. - Offer a pause control for automatically moving work and use static content under reduced-motion preferences. - Give the newsletter input a persistent accessible label, email autocomplete, and explicit validation and completion messages. Do not rely only on its placeholder. - Keep small navigation text visually compact while providing practical touch target areas. - Constrain mobile service links and oversized headings so they do not create accidental horizontal page scrolling. - Use descriptive project-image alternatives and preserve embedded lettering as artwork rather than duplicating it visually in surrounding UI. ## Agent Prompt Guide ### Quick Color Reference - Main canvas: `#ffffff`. - Main text and filled CTAs: `#1a1a1a`. - Services surface and footer-link text: `#fafafa`. - CTA text: `#f1f1f1`. - Contact panel: visually approximate with `#f1f1f1`. - Footer separators: approximately `#333333`. - Strong yellow: confined to applicable project artwork; not a general action color. ### Overall Prompt “Create a Japanese planning-and-design company homepage inspired by the observed Good The What composition. Use a white canvas, near-black typography, DIN-style Latin utility labels, airy Japanese body copy, and a serif-style introduction. Place an anatomical contour-heart logo and vertical navigation at the upper left of the desktop opening. Set a wide project preview to the right with a large rounded right end, then overlap its lower edge with an enormous heavy company wordmark. Continue with an offset introduction, a horizontal works track, an expressive Japanese statement with faint heart linework, three services on an almost-white surface, an inset news list, and a pale contact area above a dark footer. On mobile, use a menu affordance, a tall hero with a rounded bottom, a three-line wordmark, stacked service rows, and centered footer groups. Keep project colors inside imagery and use flat surfaces with fine rules.” ### Example Component Prompts 1. **Opening hero:** “At 1440px, use a 90%-width page container with a 288px internal left reserve. Place a 1008 × 582px project frame at x = 360px and y = 60px. Give it a small upper-left corner and a large rounded right end. Overlap the bottom with a near-black heavy wordmark extending back toward the page’s left margin. Treat mask radii and display type as visual approximations.” 2. **Directional CTA:** “Build a 260 × 80px near-black navigation link with a straight left edge, 40px right corner radii, a 16px semibold Latin label inset 30px, and a thin 60px arrow. On mobile use 230 × 60px while preserving the directional silhouette.” 3. **Services entrance:** “Use an almost-white panel occupying 96% of the viewport, a dotted top rule within its content, a small rounded-top black marker, and a bold SERVICES label. Keep the Japanese introduction opposite the label. Use three columns on desktop and stacked shallow rows on mobile.” 4. **Contact and footer:** “Place an outlined consultation link beside a quiet, underline-only newsletter form on a pale-gray surface. Below, use a near-black footer with a reversed contour-heart logo, underlined navigation, address, phone, email, and small copyright. On mobile center the groups in an approximately 80%-width column and separate them with subtle rules.” 5. **Mobile opening:** “At 390px, keep the logo near x = 20px and a compact MENU affordance at the upper right. Begin a roughly 363 × 407px project frame around y = 159px, round its bottom, and overlap it with Good, The, and What on three lines at an approximate 96px display size. Let the introductory copy and CTA continue below the initial screen.” ## Quick Start ### CSS Custom Properties This CSS recreates the measured hierarchy and principal geometry with conventional root sizing. It does not reproduce unverified carousel logic, menu behavior, font assets, or original animation keyframes. The `60rem` breakpoint, display font choice, image masks, dotted-rule thickness, and footer background approximations are recommendations. Use licensed font files and authorized artwork when available. Keep the supplied source-family names as declarations rather than assuming that this CSS loads them. ```css :root { /* Measured colors; some surface applications are visual approximations. */ --canvas: #ffffff; --ink: #1a1a1a; --service-surface: #fafafa; --soft-surface: #f1f1f1; --footer-rule: #333333; /* Observed interface families. */ --font-latin: 'din-2014', sans-serif; --font-japanese: 'yu-gothic-pr6n', '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', sans-serif; /* Recommended substitutes for unverified display treatments. */ --font-display: var(--font-latin); --font-editorial: serif; --body-leading: 2.2; --section-size: 20px; --page-width: 90%; --cta-width: 260px; --cta-height: 80px; --card-width: 294px; --track-gap: 30px; --panel-radius: 30px; --ease-out: cubic-bezier(0.19, 1, 0.22, 1); --link-duration: 300ms; --sweep-duration: 800ms; } * { box-sizing: border-box; } body { margin: 0; color: var(--ink); background: var(--canvas); font-family: var(--font-japanese); font-size: 16px; line-height: var(--body-leading); } img { display: block; max-width: 100%; } a { color: inherit; } button, input { font: inherit; } [hidden] { display: none !important; } .page-width { width: var(--page-width); margin-inline: auto; } .brand-rail { position: absolute; z-index: 3; top: 25px; left: 5vw; width: 156px; } .brand-logo { display: block; width: 130px; } .rail-nav { display: grid; margin-top: 40px; padding-left: 20px; } .rail-nav a { width: fit-content; font: 600 16px/32px var(--font-latin); text-decoration: none; } /* Show only when the implementation's chosen scroll condition is met. */ .compact-header { position: fixed; z-index: 20; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; min-height: 60px; padding-inline: 5vw; background: var(--canvas); border-bottom: 1px solid #eeeeee; } .compact-brand { font: 800 24px/1 var(--font-latin); letter-spacing: 0.5px; text-decoration: none; } .compact-nav { display: flex; gap: 3.125vw; } .compact-nav a { font: 800 15px/1 var(--font-latin); text-decoration: none; } .mobile-menu { display: none; } .hero { position: relative; width: 90%; min-height: 910px; margin-inline: auto; padding: 60px 0 0 20vw; } .hero-media { display: block; width: 100%; aspect-ratio: 168 / 97; overflow: hidden; /* Approximation of the observed desktop silhouette. */ border-radius: 20px 20.2083vw 20.2083vw 0; } .hero-media img { width: 100%; height: 100%; object-fit: cover; } .display-wordmark { margin: 0; font-family: var(--font-display); font-size: clamp(100px, 12.5vw, 180px); font-weight: 800; line-height: 1; white-space: nowrap; } .hero-wordmark { position: relative; z-index: 2; margin: -100px 0 0 -20vw; } .hero-summary { display: grid; grid-template-columns: minmax(0, 1fr) var(--cta-width); align-items: end; gap: 60px; margin: 32px 10px 0 16vw; } .hero-intro { margin: 0; font: 400 28px/1.5 var(--font-editorial); } .button-link { display: flex; align-items: center; justify-content: space-between; width: min(100%, var(--cta-width)); min-height: var(--cta-height); padding: 12px 40px 12px 30px; border-radius: 0 40px 40px 0; background: var(--ink); color: var(--soft-surface); font: 600 16px/1.2 var(--font-latin); text-decoration: none; } .arrow { position: relative; display: inline-block; flex: 0 0 60px; height: 1px; background: currentColor; } .arrow::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); } .section-label { position: relative; margin: 0; padding-left: 25px; font: 800 var(--section-size)/1 var(--font-latin); } .section-label::before { content: ''; position: absolute; top: 4px; left: 0; width: 10px; height: 10px; border-radius: 6px 6px 0 0; background: currentColor; } /* Recommended native scrolling baseline; original track logic is unknown. */ .work-track { display: flex; gap: var(--track-gap); overflow-x: auto; padding-inline: 5vw; scroll-snap-type: x proximity; } .work-card { flex: 0 0 var(--card-width); min-height: 478.5px; padding: 40px 30px 35px; scroll-snap-align: start; text-decoration: none; } .services { position: relative; width: 96%; margin: -60px auto 0; padding: 260px 0 240px; border-radius: 0 0 var(--panel-radius) var(--panel-radius); background: var(--service-surface); } .services-inner { width: 90%; margin-inline: auto; } .services-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; padding-top: 40px; border-top: 2px dotted var(--ink); } .services-heading p { margin: 0; font-size: 18px; line-height: 1; } .service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; margin-top: 200px; } .service-link { display: block; min-width: 0; min-height: 546px; } .services-more { position: absolute; right: 10%; bottom: -40px; } .journal { display: grid; grid-template-columns: 40% minmax(0, 60%); margin-top: 300px; } .journal-list { min-width: 0; } .news-row { min-height: 254px; } .news-tag { display: inline-block; padding: 3px 20px; border-radius: 20px; font: 600 16px/1 var(--font-latin); } /* Surface color and overlap are screenshot-based approximations. */ .contact-surface { margin-top: 350px; padding-bottom: 140px; border-radius: 0 0 20px 20px; background: var(--soft-surface); } .footer-wordmark { position: relative; top: -0.5em; margin: 0 5vw -0.5em; } .contact-grid { display: grid; grid-template-columns: 60% minmax(0, 1fr); align-items: start; gap: 6%; padding-top: 150px; } .contact-link { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 36px; min-height: 120px; padding: 30px 50px; border: 1px solid currentColor; border-radius: 4px 60px 60px 4px; text-decoration: none; } .contact-copy { margin: 0; padding-right: 24px; border-right: 1px solid currentColor; font-size: 15.84px; line-height: 1.6; } .contact-action { display: flex; align-items: center; gap: 14px; font: 800 17.28px/1.3 var(--font-latin); } .newsletter p { margin: 0 0 20px; font-size: 14.4px; line-height: 20px; } .newsletter input { width: 100%; min-height: 48px; padding: 10px; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); text-align: center; } .newsletter button { display: block; min-height: 44px; margin: 18px auto 0; padding: 8px 20px; border: 0; background: transparent; color: var(--ink); cursor: pointer; } .site-footer { padding: 40px 0; background: var(--ink); color: var(--service-surface); } .footer-inner { display: grid; grid-template-columns: 40% 35% 25%; grid-template-areas: 'logo nav nav' 'address contact copy'; align-items: center; row-gap: 70px; } .footer-logo { grid-area: logo; width: 124px; } .footer-nav { grid-area: nav; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; } .footer-nav a { font: 600 17.28px/1 var(--font-latin); text-underline-offset: 4px; } .footer-address { grid-area: address; font-style: normal; font-size: 14px; } .footer-contact { grid-area: contact; display: flex; flex-wrap: wrap; gap: 24px; } .footer-copy { grid-area: copy; margin: 0; text-align: right; font: 600 14.4px/2.2 var(--font-latin); } /* Recommended breakpoint; only 390px and 1440px were inspected. */ @media (max-width: 60rem) { :root { --body-leading: 1.9; --section-size: 18px; --cta-width: 230px; --cta-height: 60px; --card-width: 226px; --track-gap: 20px; } .brand-rail { top: 20px; width: 125px; } .brand-logo { width: 125px; } .rail-nav, .compact-header { display: none; } .mobile-menu { position: absolute; z-index: 4; top: 70px; right: 5vw; display: grid; justify-items: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 8px; border: 0; background: transparent; color: var(--ink); font: 600 14px/1 var(--font-latin); } .hero { width: 86%; min-height: 0; margin-top: 159px; padding: 0; } .hero-media { width: 93vw; max-width: none; margin-left: -3.5vw; aspect-ratio: 363 / 407.11; border-radius: 16px 16px 46.5vw 46.5vw; } .hero-wordmark { margin: -64px 0 0 -4px; font-size: clamp(76px, 24.6vw, 106px); line-height: 0.93; white-space: normal; } .hero-wordmark span { display: block; } .hero-summary { grid-template-columns: 1fr; gap: 36px; margin: 34px 0 0; } .hero-intro { font-size: 24px; line-height: 1.65; } .work-card { min-height: 331.6px; padding: 30px 20px 25px; } .services { padding-block: 140px 100px; } .services-heading { gap: 20px; padding-top: 30px; } .services-heading p { width: 55%; font-size: 14px; line-height: 1.4; } .service-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; margin-top: 90px; } .service-link { min-height: 155.4px; } .services-more { right: 3%; bottom: -30px; } .journal { display: block; margin-top: 200px; } .journal-list { width: 85%; margin: 60px 0 0 auto; } .news-row { min-height: 151px; } .news-tag { padding-inline: 15px; } .contact-surface { margin-top: 320px; padding-bottom: 100px; } .footer-wordmark { font-size: clamp(40px, 12vw, 90px); } .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 70px; padding-top: 100px; } .contact-link { grid-template-columns: 1fr; min-height: 310px; padding: 50px 28px 70px; } .contact-copy { padding: 0 0 30px; border: 0; font-size: 14.04px; } .contact-action { justify-content: center; font-size: 21.45px; } .newsletter { width: calc(100% - 40px); margin-inline: auto; } .newsletter p { font-size: 15.6px; line-height: 1.8; } .site-footer { padding-block: 60px 40px; } .footer-inner { width: 80%; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'logo' 'address' 'nav' 'contact' 'copy'; gap: 0; text-align: center; } .footer-logo { margin: 0 auto 32px; } .footer-address { padding-block: 16px; border-block: 1px solid var(--footer-rule); } .footer-nav { justify-content: center; gap: 16px 20px; padding-block: 32px; } .footer-nav a { font-size: 14.82px; } .footer-contact { justify-content: center; gap: 20px; padding-block: 24px; border-block: 1px solid var(--footer-rule); } .footer-copy { padding-top: 20px; text-align: center; font-size: 13.26px; line-height: 1.9; } } /* Recommended accessibility additions. */ :where(a, button, input):focus-visible { outline: 2px solid currentColor; outline-offset: 5px; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .work-track { scroll-behavior: auto; } .brand-logo, .button-link, .work-card, .compact-header { animation: none !important; transition: none !important; } } ``` The hero wordmark expects three spans with spaces between them, so desktop remains a readable phrase and mobile can break each word onto its own line. For example: ```html

Good The What

ABOUT US ``` Use the input inside a real form with a configured submission handler and status region. The CSS does not supply a newsletter service. Likewise, the mobile footer wordmark sizing and contact outline in this adaptation are conservative choices where complete visual evidence is unavailable. ### Tailwind v4 Token Mapping Optional aliases for a project already using Tailwind v4. Define the custom properties above first. This is not evidence that the original site uses Tailwind. ```css @theme inline { --color-paper: var(--canvas); --color-ink: var(--ink); --color-service: var(--service-surface); --color-soft: var(--soft-surface); --color-footer-rule: var(--footer-rule); --font-brand: var(--font-latin); --font-body: var(--font-japanese); --font-editorial-copy: var(--font-editorial); --text-section: var(--section-size); --spacing-cta-width: var(--cta-width); --spacing-cta-height: var(--cta-height); --spacing-work-card: var(--card-width); --spacing-work-gap: var(--track-gap); --radius-panel: var(--panel-radius); } ``` ## Sources & Evidence - **Original and final website:** [https://www.goodthewhat.com/](https://www.goodthewhat.com/). The supplied retrieval reports HTTP `200` and no URL change. The original page title is `株式会社GoodTheWhat`. - **Capture date:** `2026-10-01T18:36:14.489Z`, equivalent to October 2, 2026, 03:36:14.489 JST. This document uses that supplied capture date rather than claiming a separate live inspection. - **Desktop evidence:** three original-page screenshots at `1440 × 1000`, covering the opening, brand-statement/services entrance, and contact/footer region; rendered text, links, element bounds, and computed styles across the homepage. - **Mobile evidence:** two original-page screenshots at `390 × 844`, covering the opening and lower newsletter/footer region; rendered text, links, element bounds, and computed styles across the homepage. - **Motion evidence:** supplied animation and transition declarations, offscreen track positions, and differences between captured header states. No frame-by-frame motion recording or user-triggered interaction results were supplied. - **Inspection limitations:** captures used bounded readiness waits and resumed perpetual animations after checks. Delayed content, full service-tile visuals, work-card artwork, open-menu states, hover results, carousel controls, form responses, intermediate breakpoints, and linked-page designs remain unverified. Asset URLs and original animation keyframes were not included. The reference describes the current homepage represented by these captures. Measured values, screenshot estimates, calculated relationships, and recommended implementation choices are identified separately throughout.