MeUMU — Style Reference

A shared sheet of paper, surrounded by the hands that make an event happen.

Website: meumu.jp Original URL: https://meumu.jp/ Final URL: https://meumu.jp/ — HTTP 200, unchanged destination. Theme: warm light paper with deep brown text; illustrated scenes also contain extensive brown tabletop areas. Inspected: September 13, 2026, 03:59 JST. Supplied retrieval timestamp: September 12, 2026, 18:59:42.161 UTC. Viewports: desktop 1440 × 1000 and mobile 390 × 844 CSS pixels. Scope: the current corporate homepage, including the illustrated opening, an intermediate desktop view, alternate full-tabletop captures, and rendered DOM evidence for About, Services, Works, Company, Contact, privacy text, and navigation. Menu expansion and precise illustration choreography were not exercised in the supplied evidence.

MeUMU presents event planning and production through the image of people working around a shared table. A large, nearly empty sheet occupies the opening screen. Peach-colored hands enter from the edges holding pencils or pointing inward. Rulers, books, glasses, and an eraser establish a practical working environment. The small central message, “みんなで創ろう、”, gives the surrounding activity a clear purpose.

The composition combines expansive illustration with restrained interface typography. Warm paper #FFFCF7 and brown ink #4A200C connect the artwork, navigation, and informational sections. Grain, irregular edges, and drawn shadows supply the visual richness. Navigation sits near the lower-left corner on desktop; mobile pairs a smaller logo with a lower-right MENU control.

This is a long corporate narrative with five section destinations. Its distinctive structure includes centered introductory statements, narrow service and achievement columns, a wider company profile, and direct contact links. Preserve these changes in reading rhythm when adapting the design.

How to Read This Reference

Measured values come from the supplied rendered DOM and computed-style records at the two stated viewports.
Calculated values are arithmetic derived from those measurements, such as column proportions or space between text boxes.
Estimated values describe visual bounds or colors judged from the original-page captures. They were not obtained through pixel sampling.
Recommended values and code are implementation guidance. They do not establish how the original site was built.
All token names introduced here are descriptive implementation aliases unless explicitly identified as source custom properties.
The first five supplied images support visual observations. Lower-page typography and geometry are primarily DOM-backed; complete screenshots of those sections were not supplied.
Recorded positions describe the inspected state. They are not instructions to hardcode document coordinates or reproduce unexplained empty scroll distance.

Tokens — Colors

Default Palette

Name	Value	Suggested token	Evidence	Role
Warm Paper	`#FFFCF7`	`--color-paper`	Measured: body background `rgb(255, 252, 247)` at both viewports	Main page canvas and the visual foundation of the paper composition
Brown Ink	`#4A200C`	`--color-ink`	Measured: Japanese copy, navigation, and contact text	Primary text and the closest confirmed UI equivalent to the dark illustration linework
Table Brown	Approximately `#713710`	`--color-table`	Visual estimate	Broad tabletop areas; the artwork contains several darker and lighter browns
Hand Peach	Approximately `#F4A173`	`--color-peach`	Visual estimate	Hands and warm skin-colored illustration shapes
Pencil Ochre	Approximately `#C48B42`	`--color-ochre`	Visual estimate	Pencils, book covers, rulers, and other wooden or paper objects
Logo Orange	Approximately `#FFAD32`	`--color-brand-accent`	Visual estimate	Small orange symbol in the lower navigation identity
Wordmark Gray	Approximately `#606060`	`--color-wordmark`	Visual estimate	Gray portion of the company logo

Only Warm Paper and Brown Ink are confirmed flat design colors. The remaining values are convenient approximations for coordinating new artwork or supporting elements. They should not replace the tonal variation already present in supplied illustrations.

Color Behavior

The light opening and the darker tabletop captures share the same warm visual world. A brown illustration filling the screen does not establish a selectable dark theme. No theme switcher is evidenced.

The extracted root styles include black default text, transparent gradient stops, and loading-related variables. The visible Japanese paragraphs and navigation override the default black with Brown Ink. Likewise, contact-link wrappers report #333333, while their nested visible labels report #4A200C. Use the visible label color when reproducing the contact treatment.

Repeated transparent --g-color-* properties do not establish a visible multicolor gradient system. The prominent shading belongs to the illustration. Keep interface surfaces comparatively quiet.

Tokens — Typography

Zen Kaku Gothic New — Japanese Content

Computed family: Zen Kaku Gothic New.

This family is reported on the introductory statements, service descriptions, achievement lists, company information, privacy text, copyright, and desktop navigation. The source custom property --s-font-91850cc9 contains this family name.

Three weights organize the information:

900 gives the centered introductory statements a deliberate, emphatic voice.
700 carries navigation, services, achievements, and company facts.
500 softens the much denser privacy text.

The prose remains compact in size but generous in vertical spacing. Services use a line height of 2; company facts use 1.6; privacy text uses 1.7. These differences distinguish narrative, reference information, and legal reading without adding elaborate containers.

Work Sans — Contact Labels

Computed family: Work Sans, corresponding to source variable --s-font-ea8c694b.

The telephone and email labels use weight 700, approximately 20px, and a one-em line box. Their surrounding parentheses are part of the actual UI labels. This produces a small but clearly stronger contact treatment within the otherwise modest type scale.

Hand-Lettered Hero

The opening message has uneven strokes, irregular character angles, and a gently staggered two-line arrangement. The second phrase starts farther to the right, creating a conversational diagonal across the blank paper.

The hero lettering is visible in the captures but is not represented as ordinary text in the supplied element sample. Its exact font, asset format, and rendering mechanism are unknown. Do not assign it one of the declared UI families without further evidence.

For an adaptation, use authorized lettering artwork or commission a short custom title. Keep a semantic heading and an accessible text equivalent. A standard font can provide a functional fallback, but it will not reproduce the observed stroke character.

Type Scale

Values below are measured unless marked otherwise. Desktop and mobile columns show font size / line height.

Role	Family	Weight	Desktop	Mobile	Tracking
Introductory statement	Zen Kaku Gothic New	`900`	`17 / 17px`	`14.82 / 14.82px`	Normal
Service description	Zen Kaku Gothic New	`700`	`15 / 30px`	`13 / 26px`	`-0.02em`
Achievement item	Zen Kaku Gothic New	`700`	`15 / 23.25px`	`13 / 20.15px`	`-0.01em`
Company label and value	Zen Kaku Gothic New	`700`	`15 / 24px`	`13 / 20.8px`	`0.03em`
Telephone and email	Work Sans	`700`	`20 / 20px`	`20.241 / 20.241px`	Normal
Privacy text	Zen Kaku Gothic New	`500`	`13 / 22.1px`	`13 / 22.1px`	Normal
Copyright	Zen Kaku Gothic New	`700`	`13 / 13px`	`11 / 11px`	`0.1em`
Desktop section link	Zen Kaku Gothic New	`700`	`13 / 13px`	Hidden in the sampled mobile state	`0.1em`
Hero lettering	Unverified	Unverified	Approximately `34–38px` visible character height	Approximately `23–26px` visible character height	Irregular; visual estimate

The one-em line height on the introduction belongs to separate short statement elements. Their generous reading rhythm comes from space between elements, not from a large paragraph line-height declaration.

Additional font variables name Zen Kaku Gothic Antique, Lato, and another mixed family stack. Their use on visible components is not established by the provided sample. The root's reported Times family is also not the family of the measured Japanese interface.

Tokens — Spacing & Shapes

Density: very open at the scene scale; compact inside navigation and information blocks. Geometry: unboxed UI, rectangular text regions, and irregular shapes within the artwork. Base unit: no universal spacing unit is established. Several measured distances coexist.

Spacing Scale

Use	Desktop	Mobile	Evidence and interpretation
Logo left inset	`60px`	`45px`	Measured
Logo bottom clearance	`60px`	`45px`	Calculated from viewport and logo bounds
Navigation item pitch	`29px`	Not applicable in closed mobile state	Calculated between link tops
Space between desktop link boxes	`16px`	Not applicable	`29px` pitch minus `13px` line box
Last navigation link to logo	`36px`	Not applicable	Calculated between element bounds
Introductory line pitch within a group	Approximately `49.02px`	Approximately `42.28px`	Calculated between statement tops
Clear space between introductory line boxes	Approximately `32.02px`	Approximately `27.47px`	Calculated
Clear space between introductory groups	Approximately `78.08px`	Approximately `313.34px`	Calculated; mobile groups are substantially farther apart
Company cell vertical padding	`20px` each side	`20px` each side	Measured
Interval after a company row's tallest cell	`2px`	`2px`	Calculated; this does not identify a border style
Privacy paragraph spacing	`20px`	`20px`	Calculated from adjacent paragraph bounds
Achievement text inset relative to service column	`16px`	`16px`	Calculated from respective left edges

The mobile introduction is not merely a scaled desktop paragraph. It uses additional line divisions and much larger separation between statement groups. This is a major responsive change in narrative pacing.

Border Radius

Element	Observed treatment
Sampled text and link boxes	Computed `0px` radius and transparent background
Desktop navigation	Plain text without a visible enclosing card
Mobile menu button	Transparent rectangular interaction box; computed `0px` radius
Company information	Paired rectangular text regions; no rounded-card treatment established
Paper, hands, books, and tools	Their contours belong to the illustration, not a reusable CSS radius system

There is no evidenced general elevation scale. Large shadows are drawn into the scene; they should not be copied into a generic card-shadow token.

Layout Measurements

Element	Desktop 1440 × 1000	Mobile 390 × 844
Document height	`21,207.70px`	`19,402.59px`
Logo link	`170 × 31.125px`, at `60, 908.875`	`130 × 23.797px`, at `45, 775.203`
Desktop navigation group	Approximately `85.81 × 129px`, starting at `60, 743.875`	Section links absent from the sampled visible link list
Mobile menu button	Not present in supplied desktop sample	`125 × 93.891px`, at `265, 750.109`
Hero lettering group	Approximately `275 × 85px`, centered near `720, 500`	Approximately `190 × 57px`, centered near `195, 397`
Service paragraph	`260px` wide, left edge `959.188px`	`270px` wide, left edge `60px`
Company profile combined columns	`1019.188px`, centered	`264.594px`, centered
Company label column	`353.594px`	`91.797px`
Company value column	`665.594px`	`172.797px`
Privacy column	`750px`, left edge `345px`	`270px`, left edge `60px`

Hero measurements are visual estimates. Other entries derive from the supplied DOM rectangles. The company columns retain approximately a 34.7% / 65.3% split at both inspected widths.

Components

Illustrated Opening

Role: establishes the shared-making concept before detailed company information.

The opening fills the captured viewport. Its anatomy is a warm paper field, surrounding tabletop and stationery, hands entering from multiple edges, a small central message, and navigation near the bottom. Most of the center remains unoccupied.

On desktop, a dark table band and broad illustrated shadow cross the upper part of the screen. A glass appears at the upper left, an eraser near the upper right, a ruler enters from the left, and books are cropped on the right. Hands point or draw toward the paper from above, both sides, and below.

The title is intentionally modest relative to the scene. Its combined width is approximately 19% of the desktop viewport. Avoid enlarging it until it competes with the gestures around it. The message depends on the available paper and the direction of the hands.

The artwork's exact DOM layering is unknown. A practical implementation can separate the scene, lettering, and controls into independent layers, provided that mobile receives its own composition and the controls remain operable.

Desktop Navigation and Identity Dock

Role: gives direct access to five sections while keeping the central illustration clear.

Five unboxed text links stack above the company logo:

Source label	Confirmed destination	Content role
`MeUMUとは`	`#about`	Company name and collaborative philosophy
`業務内容`	`#services`	Event planning, production, operation, and progress management
`主要実績`	`#works`	Examples of event and project experience
`会社概要`	`#company`	Company facts
`お問い合わせ`	`#contact`	Telephone and email contact

At the inspected desktop width, links start 60px from the left. Each uses 13px bold Japanese type, 0.1em tracking, and a 13px line box. The 16px space between boxes produces a tidy 29px pitch. A 36px gap separates the last link from the 170px logo.

This dock occupies the same lower-left position in the opening and intermediate desktop captures, supporting persistent placement across those observed states. It is absent from the full-tabletop capture. The conditions controlling that visibility are unverified.

The logo is a home link. Its orange symbol and gray wordmark provide a small identity accent within the brown interface. Its internal lettering should be treated as a logo asset rather than recreated from an assumed font.

Mobile Identity and Menu Control

Role: retains identity and a navigation entry point without displaying the desktop link stack.

The logo becomes 130px wide and sits 45px from the left and bottom. The visible MENU label sits near the lower-right corner. Its containing button is much larger than the lettering: 125 × 93.891px, extending to the right and bottom edges of the viewport.

The measured button padding is 30px 45px 52px 30px. This explains how a small visual label can have a generous interaction area. The label has a slightly irregular drawn appearance, but its exact typeface and asset mechanism are not verified.

No expanded menu state is supplied. Panel placement, dismissal, focus handling, link styling, and animation must therefore remain unspecified as original-site behavior. An adaptation should explicitly implement those details and retain the five confirmed section destinations.

Introductory Statement Sequence

Role: explains the company name and the idea that events require shared effort.

The introduction uses individually centered statements with weight 900. Their positions center on x = 720px on desktop and x = 195px on mobile. The longest sampled desktop line spans 425px; the longest mobile line spans approximately 311.23px.

The opening group contains the company name, the phrase “「Me(私)とYou(あなた)で生み出す」”, and a short explanation. Subsequent groups describe the participants in an event and the positive experience the company wants to create.

Desktop presents eleven sampled statement elements across four groups. Mobile presents fourteen, splitting several sentences more finely. The first-to-last text extent grows from approximately 645px on desktop to 1422px on mobile, even though the mobile type is smaller.

For implementation, preserve semantic paragraphs or groups and use short line elements only where the writing benefits from controlled phrasing. Keep the substantial gaps between groups distinct from ordinary line spacing. Do not apply the source's line-height: 1 to unrestricted long prose.

Service Description Sequence

Role: explains four stages of event work.

The supplied text covers planning and resource arrangement; production of content, programs, tools, and video; on-site operational preparation; and management of the event's overall progress.

Desktop paragraphs occupy a narrow right-side column at x = 959.188px, width 260px. Their type is 15px / 30px, weight 700, with slightly tightened tracking. The four measured paragraph heights are 150, 180, 120, and 180px.

Their top positions are approximately 505, 550, and 490px apart. These are distances between paragraph tops, not proven section heights. They indicate a widely spaced sequence with substantial room beyond the text.

Mobile paragraphs move to a centered 270px column with 60px side margins. Type becomes 13px / 26px. Their heights become 130, 104, 104, and 130px, while top-to-top intervals are approximately 635–661px.

An intermediate desktop capture shows the end of a service paragraph near the upper-right edge while the hands continue to frame a broad paper field. The exact artwork associated with every service is not supplied. Preserve the spacious relationship, but do not invent a verified four-card layout or a specific illustration for each service.

Achievement Lists

Role: establishes practical experience through short named examples.

The DOM groups examples into exhibition-related entries, corporate or public event formats, and a vaccination project entry. Listed examples include FOODEX JAPAN, 営業支援 EXPO, and 表彰式典.

Achievement text begins 16px farther right than the service paragraphs: at 975.188px on desktop and 76px on mobile. Use the same bold Japanese family with a tighter 1.55 line height and -0.01em tracking.

Desktop single-line entries advance by 29.25px; the first mobile list advances by 28px. Longer descriptions wrap within the narrow column. The evidence supports compact text lists. Thumbnail galleries, category filters, project-detail links, and card interactions are not established.

Company Profile

Role: provides factual company information in paired labels and values.

The original page identifies the operator as 株式会社MeUMU in this section. Its layout spans approximately 1019px on desktop and retains two columns on mobile. Labels occupy approximately 34.7% of the available width; values occupy the remainder.

Both sides use bold Japanese type with 0.03em tracking. Desktop cells have a 24px line height and 20px vertical padding, producing a 64px single-line box. A two-line value becomes 88px; a three-line value becomes 112px.

Mobile uses a 20.8px line height with the same padding. Single-line boxes are approximately 60.8px tall. Narrow values wrap naturally, and one longer label also wraps. Each row must accommodate the taller of its two cells.

A definition list or a semantic table is a suitable implementation recommendation. Keep the paired structure and consistent padding. Exact divider color and styling are not available in the supplied evidence; the measured 2px interval alone does not prove a drawn rule.

Contact Links

Role: offers two direct ways to initiate contact.

The confirmed link protocols are tel: and mailto:. Visible labels are enclosed in parentheses and use bold Work Sans at approximately 20px in Brown Ink.

On desktop, both anchor boxes are 300px wide and share nearly the same vertical position. Their horizontal centers are approximately 438px and 1002px, giving them broad separation across the page.

On mobile, the links are centered and stacked. The telephone anchor is approximately 177.44px wide; the email anchor is approximately 229.77px. Their top positions are about 392px apart. This is a spacious arrangement rather than a tight pair of stacked buttons.

The sampled anchor heights are approximately 30–32px. A new implementation should increase the usable target height while preserving the small visual label. Exact supplementary contact artwork is not available. A contact form is not evidenced.

Privacy Text and Copyright

Role: provides detailed policy information and a small corporate signature.

The DOM includes the full privacy policy with a modest heading, paragraphs, and a publication date. The text uses 13px / 22.1px, weight 500, at both viewports. Its column changes from 750px on desktop to 270px on mobile, with approximately 20px between paragraphs.

Copyright uses stronger weight and tracked text: 13px on desktop and 11px on mobile. The sampled copyright rectangle falls within the privacy text's vertical coordinate range, especially on mobile. Without a corresponding lower-page screenshot or visibility-state data, its actual visual relationship to the policy cannot be resolved.

Do not infer an accordion or modal from the presence of policy text alone. For an adaptation, keep policy content in a readable flow and give copyright its own clear space.

Full-Tabletop Illustration State

Role: supplies a second observed composition within the site's visual world; its precise place in the experience is unverified.

The desktop capture fills the screen with a brown table. Overlapping sheets at the center contain an illustration of five people. Pencils cross the composition, triangular rulers sit above, glasses catch pale highlights, books enter from the right, and a dark tablet is cropped at the lower left.

The mobile capture preserves the group drawing as the focal point while arranging the surrounding objects vertically. The navigation dock and central opening message are absent in these supplied frames.

These captures establish the existence and appearance of this state. They do not establish whether it is an entrance, a closing scene, a timed transition, or a particular scroll position. Avoid naming it a loading splash or assigning a duration without additional evidence.

Tokens — Motion & Interaction

Recorded Motion Values

Target	Recorded value	What is supported
Body background	`0.5s cubic-bezier(0.4, 0.4, 0, 1)`	A background transition is declared; its trigger and endpoint colors are not supplied
Desktop introductory statements	`1.2s cubic-bezier(0.15, 0.5, 0.05, 1)`	A relatively long eased transition is declared
Desktop statement delays	`0.30s` through `0.50s`, in `0.02s` increments	Eleven sampled statements have staggered delays
Mobile introductory statements	No nonzero duration shown in the supplied transition serialization	The desktop timing cannot be assumed to apply unchanged
Company and privacy elements	`0.3s cubic-bezier(0.4, 0.4, 0, 1)`	Generic transitions are declared; this does not identify a hover or reveal effect
Logo, contact anchors, mobile button	`0.3s cubic-bezier(0.4, 0.4, 0, 1)`	Control wrappers have transition declarations; resulting visual states were not tested
Sampled element animations	`animation: none`	No keyframe animation was reported on those sampled elements at inspection time

The long serialized transition lists include custom gradient properties. They do not reveal which properties visibly change in each interaction. Source timing can be reused as a token, but displacement, opacity endpoints, masks, and triggers would be new implementation decisions.

Observed Interactions and Limits

Desktop navigation contains real same-page anchor destinations. Click behavior, scrolling duration, and active-section indicators were not tested.
Telephone and email destinations are established by rendered link attributes. No telephone call or email action was performed.
A mobile button is present and visually labeled MENU. Its expanded state is unverified.
The captures show materially different illustration arrangements. Static images do not reveal the path, speed, or mechanism between them.
An intermediate capture retains the surrounding hands and lower-left dock while other content occupies the paper. This supports a recurring visual frame but does not prove a particular parallax implementation.
animation: none on sampled text does not rule out JavaScript motion, ancestor transforms, image animation, or other unsampled layers.

For a new implementation, retain a readable static state and add motion progressively. If a reveal is desired, the recorded 1200ms easing and 20ms stagger provide a useful starting point. Exact visual endpoints must be chosen and documented separately.

Surfaces

Layer	Appearance	Design purpose
Main canvas	Flat warm paper	Gives text and drawings a common background
Illustrated paper	Irregular pale sheets, grain, and drawn shading	Turns the blank space into a physical working surface
Tabletop	Multiple brown tones with directional shading	Adds enclosure and a grounded setting
Hands and tools	Peach, ochre, cream, and dark brown illustration	Frames the message and expresses shared work
Desktop navigation	Brown text and a small logo over the light field	Provides orientation with little visual enclosure
Mobile controls	Small visual labels within larger transparent boxes	Keeps the scene open while retaining touch access
Information blocks	Brown type on transparent backgrounds	Allows text to belong to the paper rather than to a separate card system

The apparent depth comes from overlapping objects and illustrated shadows. No frosted-glass surface, floating rounded-card system, or general-purpose CSS shadow hierarchy is established.

Imagery

The illustration style is tactile and editorial: broad flat shapes, grainy color coverage, thin expressive linework, imperfect edges, and textured shadows. Glasses are described with pale contours and translucent-looking tonal areas. Pencils, rulers, books, and the eraser retain simple recognizable silhouettes.

Hands are especially important. They reach toward a common center from different directions, making cooperation visible before the company explanation is read. Their cropping suggests people continuing beyond the screen. Preserve that sense of a larger shared workspace.

The alternate tabletop composition places the human group inside a drawing on paper. This connects the surrounding tools to an imagined result. Its focal drawing should remain readable in portrait compositions even when peripheral objects are cropped.

The artwork is grainy rather than pixel-art styled. Use normal image interpolation and adequately resolved assets; image-rendering: pixelated would change the observed texture.

Observed Asset References

No original image URLs, filenames, intrinsic dimensions, or asset manifest were included in the supplied evidence. The following inventory identifies visual assets without inventing paths.

Visual asset	Original-page evidence	Recommended handling
Hands and stationery around blank paper	Desktop and mobile opening captures	Use art-directed scene variants or separately composed layers
Central two-line lettering	Desktop and mobile opening captures	Keep as distinct lettering where possible, with accessible text
Orange-and-gray MeUMU logo	Opening captures and measured home-link bounds	Preserve aspect ratio; use the authentic identity asset
Full tabletop with group drawing	Desktop and mobile full-tabletop captures	Protect the central drawing through mobile art direction
Peripheral hand frame around content	Intermediate desktop capture	Use only where it leaves sufficient space for the current text

A scene may be supplied as a precomposed image or assembled from individual pieces. The evidence does not identify which approach the original uses. In either case, avoid cropping a screenshot that already contains navigation and then adding duplicate live controls on top.

Layout & Responsive Behavior

Desktop Composition

At 1440 × 1000, the opening is dominated by the illustrated paper. The title sits near the viewport center, and the navigation group occupies a small lower-left region. The scene does not require a top navigation bar.

Later content uses several alignments. Introductory statements are centered. Service and achievement text sit near the right third. Company information expands across approximately 1019px, and privacy text returns to a centered 750px column. These width changes give each kind of information an appropriate reading shape.

The document measures approximately 21.2 desktop viewport heights. The large gaps and illustrated states are therefore part of an extended page experience, not evidence that every content block should have a uniform section height.

Mobile Composition

At 390 × 844, the title remains close to the visual center, slightly above the geometric midpoint. Its estimated 190px width occupies approximately 49% of the viewport, compared with 19% on desktop. This is a recomposed hierarchy, not proportional scaling of the whole desktop screen.

Hands and stationery enter at different positions. The ruler appears around the middle-left edge, lower hands extend toward the bottom navigation area, and the top paper scene uses different object placement. The mobile full-tabletop capture likewise changes the spatial relationships among glasses, pencils, the tablet, and the drawing. A single unchanged desktop background scaled with cover should not be assumed to reproduce these results.

The desktop link stack gives way to the bottom logo and MENU. Service text becomes centered at 270px wide. Achievement text retains a 16px internal inset. The company profile preserves two columns instead of stacking every label above its value. Contact links become vertically separated.

The mobile document measures about 23 viewport heights. Its absolute height is shorter than desktop, but the number of screens required to traverse it is slightly greater.

Responsive Evidence Boundaries

A 1280px media-query fragment is visible in the extracted source text for conditional line breaks. It does not establish the navigation breakpoint or the full responsive system. Only 1440px and 390px widths are directly documented here.

Similarly, the mobile introductory size of 14.82px equals 3.8vw at 390px, but that equality alone does not prove the original CSS formula. Any fluid interpolation between the two measured widths is a recommendation.

Safe-area support, landscape layouts, tablet states, browser zoom, and expanded mobile navigation remain unverified. The Quick Start includes safe-area handling and a proposed breakpoint as implementation additions.

Do’s and Don’ts

Do

Keep the confirmed paper and ink pair: #FFFCF7 and #4A200C.
Give the opening message a large quiet area surrounded by purposeful gestures.
Preserve grain, irregular contours, overlapping sheets, and drawn shadows.
Keep the hero lettering small relative to the desktop illustration.
Use Zen Kaku Gothic New for the measured Japanese content roles and Work Sans for contact labels.
Maintain the distinction between heavy centered statements and smaller informational paragraphs.
Preserve the lower-left desktop navigation anatomy and the compact mobile identity arrangement.
Recompose the illustration for portrait screens.
Retain narrow service copy, indented achievement lists, and a two-column company profile.
Separate measured transition timing from unverified animation behavior.

Don't

Don't replace the shared workspace with unrelated stock event photography.
Don't fill the central paper with badges, decorative icons, or oversized conversion buttons.
Don't turn every information group into a rounded card.
Don't flatten the illustration into perfectly smooth geometric shapes.
Don't apply pixelated image rendering to the grainy artwork.
Don't use the root's default Times or black text as the primary UI specification.
Don't assume every declared font variable is visibly used.
Don't infer a dark-mode switch from the brown tabletop captures.
Don't label the full-tabletop state as a loader or finale without interaction evidence.
Don't hardcode a 21,000px page or several screens of empty space merely to match a document-height measurement.
Don't invent filters, galleries, a contact form, or a verified menu animation.

Recommended Implementation Additions

These are recommendations for a new implementation, not verified features of the inspected page:

Provide a semantic heading for the illustrated opening message, either as live text or through an appropriately labeled image.
Mark decorative hands, tools, and textures as decorative. Give meaningful content illustrations concise alternatives where they communicate information.
Give the logo link and mobile menu button explicit accessible names. Empty extracted text does not by itself establish whether accessible names already exist.
Implement the menu with aria-expanded, a defined controlled region, keyboard access, and appropriate dismissal behavior.
Expand small visible link labels into comfortable targets. Keep their visual size separate from their clickable area.
Preserve visible focus indicators in Brown Ink and test them over every illustrated background where controls appear.
Offer reduced-motion behavior and keep all section destinations usable without animated reveals.
Keep essential copy visible if JavaScript or a decorative asset fails to load.
Test the small mobile body text at zoom. Increase type size or reduce side margins when accessibility needs outweigh exact screenshot proportions.
Load only the font weights actually used, reserve image dimensions, and defer noncritical artwork without destabilizing the opening composition.
Keep privacy text and copyright in a clear reading order; verify their relationship with an actual lower-page capture before attempting close reproduction.

Agent Prompt Guide

Quick Color Reference

Main paper: confirmed #FFFCF7.
Main text and navigation: confirmed #4A200C.
Tabletop coordination color: estimated #713710.
Hands: estimated #F4A173.
Wood and stationery: estimated #C48B42.
Small logo accent: estimated #FFAD32.
Depth: textured illustration and overlapping objects.
Interface surfaces: mostly transparent over paper.

Overall Prompt

“Create an illustration-led corporate website for an event planning and production company, inspired by MeUMU's shared-workspace composition. Use warm paper #FFFCF7, deep brown text #4A200C, grainy peach hands, ochre stationery, and overlapping sheets on a brown table. Leave a large quiet central area for a small, irregular two-line Japanese message. Place five compact section links above a small logo at the lower left on desktop. On mobile, recompose the illustration and pair a smaller bottom-left logo with a bottom-right MENU control. Build the content as centered heavy introductory statements, a narrow right-side desktop service column, compact achievement lists, a wider two-column company profile, and direct telephone and email links. Use Zen Kaku Gothic New for Japanese copy and Work Sans for contact labels. Keep artwork texture and open space central to the design. Treat illustration motion and menu expansion as separately specified features.”

Example Component Prompts

Opening scene: “Compose a viewport-sized sheet of warm paper surrounded by cropped hands pointing and drawing inward. Include a pencil, eraser, ruler, glass, and partial books. Use visible print-like grain and brown linework. Keep the center mostly empty, with a small staggered message such as ‘みんなで創ろう、’. Provide separate desktop and portrait compositions.”
Desktop navigation: “Create five unboxed brown links in 13px bold Zen Kaku Gothic New with 0.1em tracking. Use a 29px row pitch and a 36px gap before a 170px-wide logo. Anchor the group 60px from the left and bottom in the opening state.”
Introductory statements: “Create four centered groups of short Japanese statements. Use weight 900, 17px text on desktop, and approximately 14.82px at a 390px mobile width. Separate line boxes by about 32px on desktop. On mobile, preserve intentional phrase breaks and substantially increase the pauses between groups.”
Service and achievements: “Place 260px-wide service descriptions toward the right on desktop, using 15px type with 30px line height. Center a 270px column on a 390px phone, using 13px type with 26px line height. Give achievement lists a 16px inset and a tighter 1.55 line height. Keep backgrounds unboxed.”
Company profile: “Build a warm-paper definition list with brown bold text. Retain approximately 34.7% label and 65.3% value columns at both desktop and mobile widths. Use 20px vertical cell padding and allow the taller cell to determine each row's height. Avoid rounded containers and arbitrary icons.”
Tabletop illustration: “Create a textured brown working table with overlapping paper containing a small group drawing, pencils at varied angles, triangular rulers, translucent-looking glasses, a cropped tablet, and books. Preserve the drawing as the central subject when recomposing for portrait. Do not include interface text or controls inside the image.”

Quick Start

CSS Custom Properties

This is a reusable CSS foundation, not the original stylesheet. It carries over confirmed colors, type roles, navigation spacing, and principal column measurements. Illustration assets and font files must be supplied separately. No original asset paths were available.

The proposed 767px breakpoint, intermediate-width rules, ordinary-flow section spacing, enlarged contact targets, and hover/focus treatments are recommendations. The code does not implement the original illustration sequence or an expanded mobile menu.

Expected structure: an .opening-scene containing a decorative .scene-art picture and a .hero-message heading; a .site-dock containing .site-nav and .brand-link; a separate .mobile-menu button; and content blocks using the classes below. Place .privacy-copy directly within the page rather than inside the already inset .content-shell.

:root {
  /* Confirmed interface colors */
  --color-paper: #fffcf7;
  --color-ink: #4a200c;

  /* Estimated artwork coordination colors */
  --color-table: #713710;
  --color-peach: #f4a173;
  --color-ochre: #c48b42;
  --color-brand-accent: #ffad32;

  /* Confirmed computed families; load fonts separately */
  --font-japanese: 'Zen Kaku Gothic New', sans-serif;
  --font-latin: 'Work Sans', sans-serif;
  --size-nav: 13px;
  --size-body: 15px;
  --size-manifesto: 17px;
  --size-contact: 20px;
  --size-legal: 13px;
  --size-copyright: 13px;

  --leading-service: 2;
  --leading-works: 1.55;
  --leading-profile: 1.6;
  --leading-legal: 1.7;
  --tracking-nav: 0.1em;
  --tracking-service: -0.02em;
  --tracking-works: -0.01em;
  --tracking-profile: 0.03em;

  /* Measured sizes and rounded calculated spacing */
  --dock-inset: 60px;
  --brand-width: 170px;
  --nav-gap: 16px;
  --brand-gap: 36px;
  --content-inset: 60px;
  --content-wide: 1019.1875px;
  --service-width: 260px;
  --profile-label-share: 34.7%;
  --statement-gap: 32.02px;
  --stanza-gap: 78.08px;
  --cell-padding: 20px;

  /* Recorded timing, without assumed motion endpoints */
  --ease-ui: cubic-bezier(0.4, 0.4, 0, 1);
  --ease-reveal: cubic-bezier(0.15, 0.5, 0.05, 1);
  --duration-ui: 300ms;
  --duration-background: 500ms;
  --duration-reveal: 1200ms;
  --reveal-delay: 300ms;
  --reveal-stagger: 20ms;

  /* Recommended device accommodation */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.meumu-site {
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-japanese);
  font-weight: 700;
  transition: background var(--duration-background) var(--ease-ui);
}

.meumu-site a {
  color: inherit;
}

.opening-scene {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-block-size: 100vh;
  min-block-size: 100svh;
  overflow: clip;
  background: var(--color-paper);
}

/* Supply art-directed desktop and mobile images in this picture. */
.scene-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.scene-art img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  image-rendering: auto;
}

/* The size follows estimated visible lettering bounds. */
.hero-message {
  position: relative;
  z-index: 1;
  inline-size: min(275px, calc(100% - 48px));
  margin: 0;
  color: var(--color-ink);
  text-align: center;
}

.hero-message img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.site-dock {
  position: fixed;
  z-index: 10;
  inset-inline-start: var(--dock-inset);
  inset-block-end: calc(var(--dock-inset) + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--brand-gap);
}

.site-nav {
  display: grid;
  gap: var(--nav-gap);
}

.site-nav a {
  width: fit-content;
  font-size: var(--size-nav);
  line-height: 1;
  letter-spacing: var(--tracking-nav);
  text-decoration: none;
}

.brand-link {
  display: block;
  inline-size: var(--brand-width);
}

.brand-link img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.mobile-menu {
  display: none;
}

.content-shell {
  inline-size: min(
    calc(100% - 2 * var(--content-inset)),
    var(--content-wide)
  );
  margin-inline: auto;
}

/* Ordinary-flow spacing is an adaptation, not a scroll timeline. */
.content-section {
  margin-block: clamp(120px, 20vh, 240px);
  scroll-margin-block-start: 32px;
}

.manifesto {
  display: grid;
  gap: var(--stanza-gap);
  inline-size: min(calc(100% - 48px), 600px);
  margin-inline: auto;
  text-align: center;
}

.manifesto-stanza {
  display: grid;
  gap: var(--statement-gap);
}

/* Use these for deliberately short statement lines. */
.manifesto-line {
  margin: 0;
  font-size: var(--size-manifesto);
  font-weight: 900;
  line-height: 1;
}

/* A proposed layout preserving the measured right-side copy. */
.service-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--service-width);
  align-items: center;
  gap: 40px;
  min-block-size: 500px;
  padding-inline-end: 10.40625px;
}

.service-copy {
  grid-column: 2;
  min-inline-size: 0;
  margin: 0;
  font-size: var(--size-body);
  line-height: var(--leading-service);
  letter-spacing: var(--tracking-service);
}

.work-list {
  margin: 0;
  padding-inline-start: 16px;
  list-style: none;
  font-size: var(--size-body);
  line-height: var(--leading-works);
  letter-spacing: var(--tracking-works);
}

.work-list li + li {
  margin-block-start: 6px;
}

.company-profile {
  margin: 0;
  font-size: var(--size-body);
  line-height: var(--leading-profile);
  letter-spacing: var(--tracking-profile);
}

.profile-row {
  display: grid;
  grid-template-columns:
    var(--profile-label-share)
    minmax(0, 1fr);
  align-items: start;
}

.profile-row + .profile-row {
  margin-block-start: 2px;
}

.profile-row dt,
.profile-row dd {
  min-inline-size: 0;
  margin: 0;
  padding-block: var(--cell-padding);
  overflow-wrap: anywhere;
}

.contact-links {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  max-inline-size: 864.78125px;
  margin-inline: auto;
}

.contact-link {
  display: grid;
  place-items: center;
  inline-size: 300px;
  max-inline-size: 100%;
  min-block-size: 44px;
  font-family: var(--font-latin);
  font-size: var(--size-contact);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.privacy-copy {
  inline-size: min(
    calc(100% - 2 * var(--content-inset)),
    750px
  );
  margin-inline: auto;
  font-size: var(--size-legal);
  font-weight: 500;
  line-height: var(--leading-legal);
}

.privacy-copy p {
  margin: 0;
}

.privacy-copy p + p {
  margin-block-start: 20px;
}

.copyright {
  margin-block: 60px;
  font-size: var(--size-copyright);
  line-height: 1;
  letter-spacing: 0.1em;
  text-align: center;
}

/* Recommended interaction feedback; original states were untested. */
.meumu-site :focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 4px;
}

@media (hover: hover) {
  .site-nav a:hover,
  .contact-link:hover {
    text-decoration: underline;
    text-underline-offset: 0.3em;
  }
}

/* Proposed breakpoint; only the 390px endpoint was inspected. */
@media (max-width: 767px) {
  :root {
    --dock-inset: 45px;
    --brand-width: 130px;
    --content-inset: clamp(24px, 15.3846vw, 60px);
    --size-body: 13px;
    --size-manifesto: clamp(14px, 3.8vw, 17px);
    --size-contact: 20.241px;
    --size-copyright: 11px;
    --statement-gap: 27.47px;
    --stanza-gap: 313.34px;
  }

  .hero-message {
    inline-size: min(190px, calc(100% - 48px));
    transform: translateY(-3svh);
  }

  .site-nav {
    display: none;
  }

  /* Wire this button to an accessible menu in application code. */
  .mobile-menu {
    position: fixed;
    z-index: 11;
    inset-inline-end: 0;
    inset-block-end: 0;
    display: flex;
    align-items: flex-start;
    inline-size: 125px;
    block-size: calc(93.891px + var(--safe-bottom));
    padding: 30px 45px calc(52px + var(--safe-bottom)) 30px;
    border: 0;
    border-radius: 0;
    color: var(--color-ink);
    background: transparent;
    font-family: var(--font-japanese);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.12em;
    cursor: pointer;
  }

  .service-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    min-block-size: auto;
    padding: 0;
    margin-block: 120px;
  }

  .service-copy {
    grid-column: 1;
  }

  .work-list li + li {
    margin-block-start: 7.85px;
  }

  .company-profile {
    inline-size: 98%;
    margin-inline: auto;
  }

  /* Compact fallback spacing; original contact artwork is unknown. */
  .contact-links {
    flex-direction: column;
    align-items: center;
    gap: 80px;
  }
}

/* Recommended fallback for wrapped short-screen statements. */
@media (max-width: 360px) {
  .manifesto-line {
    line-height: 1.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .meumu-site,
  .meumu-site *,
  .meumu-site *::before,
  .meumu-site *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

This foundation leaves text visible by default. If JavaScript reveals or an illustration timeline are added, provide their own reduced-motion branch and an immediately readable fallback. The dock's visibility during alternate illustration states also requires an explicit design decision; the original conditions are unknown.

Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. This does not imply that the inspected website uses Tailwind. Define the preceding custom properties first.

@theme inline {
  --color-paper: #fffcf7;
  --color-ink: #4a200c;

  /* Estimated artwork coordination colors */
  --color-table: #713710;
  --color-peach: #f4a173;
  --color-ochre: #c48b42;

  --font-body: var(--font-japanese);
  --font-contact: var(--font-latin);

  --text-copy: var(--size-body);
  --text-copy--line-height: 2;
  --text-statement: var(--size-manifesto);
  --text-statement--line-height: 1;
  --text-contact: var(--size-contact);
  --text-legal: var(--size-legal);
  --text-legal--line-height: 1.7;

  --spacing-dock: var(--dock-inset);
  --spacing-brand: var(--brand-width);
  --spacing-cell: 20px;
  --spacing-service: 260px;
}

Sources & Evidence

MeUMU — current homepage: original and final URL, supplied HTTP 200 response, page title, and current rendered page evidence.
Inspection timestamp: 2026-09-12T18:59:42.161Z, corresponding to September 13, 2026, 03:59 JST.
Desktop inspection: 1440 × 1000 CSS pixels; original-page opening, intermediate, and full-tabletop captures; computed styles, text, link destinations, and element rectangles. Recorded document height: 21,207.703125px.
Mobile inspection: 390 × 844 CSS pixels; original-page opening and full-tabletop captures; computed styles, text, link destinations, and element rectangles. Recorded document height: 19,402.59375px.
Confirmed same-page destinations: About, Services, Works, Company, and Contact.
Capture procedure: the supplied browser process observed the initial page for at least five seconds and checked document load, finite animation readiness, sampled layout/text stability, and image decoding within bounded waits. Its scrolling procedure traversed intermediate positions. These checks do not prove that every delayed or interaction-dependent state was revealed.
Inspection limitations: no additional browsing or command execution was performed for this reference. Raw asset URLs, complete stylesheets, font-loading verification, precise scroll offsets for the image-only states, menu expansion, hover states, keyboard behavior, illustration timing, and lower-page screenshot coverage were not supplied. SharedWorkers and service workers were disabled during the provided inspection.

This reference describes the current page represented by the supplied evidence. Exact UI measurements, visual estimates, and recommended implementation decisions are identified separately throughout.

MeUMU｜イベントの企画・制作・運営・進行

design.md