# Demaecan Recruitment — Style Reference > An open, people-focused recruitment site framed by white space, confident typography, and warm red accents. **Website:** [Demaecan Recruitment](https://recruit.demae-can.co.jp/) **Original URL:** https://recruit.demae-can.co.jp/ **Final URL:** https://recruit.demae-can.co.jp/ **Theme:** light in the supplied evidence; no theme selector was observed. **Inspected:** September 17, 2026, at 05:20:31.890 JST — September 16, 2026, at 20:20:31.890 UTC. **Viewports:** desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels. **Scope:** the current recruitment homepage. Visual evidence covers the desktop hero, employee interviews, recruitment links, and footer, plus the mobile hero and footer. Rendered DOM and computed-style evidence cover the broader homepage, including company information, executive messaging, product/business introductions, benefits, and blog previews. Linked pages and an opened navigation menu were not inspected. Demaecan presents recruitment as a combination of people, work, and company information. The opening photograph places employees inside a real office, behind an unusually large white English headline. A compact illustrated recruitment badge introduces a friendlier graphic voice. Below the hero, broad white areas, dark Japanese headings, small red English labels, and lightly rounded photography create an approachable editorial rhythm. The homepage contains several distinct content structures: a company introduction, two business-related features, an asymmetric employee interview group, job-category links, benefits, and dated articles. The closing recruitment area uses two equally prominent white panels on red. Preserve this variety when extending the design: the large photograph establishes the mood, while the quieter content sections provide practical routes into the recruitment site. ## How to Read This Reference - **Measured** means a value supplied in the rendered element bounds or computed styles. Measurements are CSS pixels and may be rounded for readability. - **Calculated** means arithmetic derived from those measurements, such as a gap between two element bounds. - **Visual estimate** means an approximation from the current screenshots. Image corner radii, unsampled graphic colors, and overlay opacity belong to this category. - **Recommended** means a proposed implementation choice. Breakpoints, accessible interaction behavior, and unobserved hover end states are not presented as original-site facts. - **Named tokens** are implementation aliases, except the observed source property `--line`, whose value is `'LINE Seed JP'`. - Computed styles were collected from selected elements. A transparent anchor or a regular-weight heading wrapper can contain painted or differently styled descendants. The visible menu circle and heavy hero lettering illustrate why wrapper styles alone do not describe the complete component. - Desktop document height was approximately **7730.09px**; mobile document height was approximately **8827.34px**. These are the captured content lengths, not dimensions to hardcode. ## Tokens — Colors ### Default Palette | Name | Value | Suggested token | Role and evidence | | --- | --- | --- | --- | | Recruitment Red | `#da3734` | `--brand-red` | Measured on English section labels and the closing recruitment band's background | | White | `#ffffff` | `--paper` | Measured header, recruitment panels, benefit-card surfaces, and reversed hero text; visually the main page canvas | | Heading Ink | `#212121` | `--ink` | Measured Japanese section titles, interview headlines, recruitment labels, and footer links | | Supporting Ink | `#333333` | `--ink-soft` | Measured category labels, benefits labels, and several utility links | | Metadata Gray | `#616161` | `--muted` | Measured employee department and joining-year labels | | Quiet Gray | `#f5f5f5` | `--soft` | Measured job-category link backgrounds | | Body Black | `#000000` | `--body-ink` | Measured company-introduction and blog text | | Divider Gray | Approximately `#dedede` | `--rule` | Visual estimate for the thin interview-row separators | | Decorative Blush | Red at approximately 4–6% opacity over white | `--flourish` | Visual estimate for the oversized cursive Interview decoration | | Photo Shade | Black with undetermined opacity | `--photo-shade` | The current hero photograph appears darkened behind the white text; the compositing method was not supplied | The brand graphics, circular menu, and illustrated recruitment badge appear red, but their exact asset or descendant colors were not sampled. Use `#da3734` as the confirmed CSS accent; retain authorized brand artwork when exact graphic color correspondence matters. Photography contributes cool blue-gray windows, monitor cyan, foliage green, and natural skin tones. These are image colors, not additional interface accents. The design remains visually coherent because the surrounding controls use a restrained red, white, and neutral palette. The news bar is a dark translucent-looking strip over the photograph. Its exact fill and any backdrop treatment are unverified. A plain translucent black background is an appropriate implementation approximation; blur is not an established requirement. ## Tokens — Typography ### Primary Family **Observed family:** `'LINE Seed JP'` on the principal hero wrappers, Japanese headings, article text, interview metadata, category links, and footer text. **Observed source property:** `--line: 'LINE Seed JP'`. The visible typography is a friendly sans serif with substantial bold Japanese headings and rounded, heavy English display lettering. Most inspected content uses weight `400` or `700`. The outer document retains a system sans-serif stack, with a `10px` root size; this is a CSS baseline, not the normal reading size. The font asset URLs and face-to-weight mappings were not supplied. Load the appropriate authorized font files in a new implementation. A system sans-serif fallback is a recommendation, not an observed source fallback for elements declaring only LINE Seed JP. ### Hero Lettering and Brand Artwork The three hero word wrappers report **weight 400**, although the screenshot lettering is visibly heavy. Their descendant styles were not included. Do not equate the wrapper weight with the final glyph weight or describe an unmeasured weight as confirmed. The mobile `We` wrapper has a measured letter spacing of **−6.142px**, while `How` and `Deliver` use **0.74px**. Preserve the visible word shapes and wrapping before attempting to simplify this into a single global tracking rule. The recruitment wordmark and footer logo should be treated as brand artwork. The pale cursive Interview decoration has no verified font family; do not assign it a named script font based on appearance alone. ### Type Scale All values below are measured on the selected elements. Desktop and mobile columns use **font size / line height**. | Role | Desktop | Mobile | Weight | Tracking or qualification | | --- | --- | --- | --- | --- | | Hero word wrappers | `104 / 124.8px` | `74 / 88.8px` | `400` on wrappers | Desktop `1.04px`; mobile `0.74px`, except `We` at `−6.142px`; descendant weight unverified | | Hero Japanese subtitle wrapper | `32 / 48px` | `32 / 48px` | `700` | Mobile lettering appears smaller than the wrapper value; descendant styling is not available | | English section label | `20 / 20px` | `14 / 21px` | `700` | Normal | | Japanese section title | `48 / 84px` | `32 / 56px` | `700` | `0.03em` | | Company mission heading | `34.56 / 58.752px` | `24 / 40.8px` | `700` | `0.05em` | | Company introduction body | `13.824 / 31.7952px` | `14 / 32.2px` | `400` | Normal; approximately `2.3` line height | | Company detail links | `20.736 / 20.736px` | `18 / 18px` | `700` | `0.03em`; icons make the full link boxes taller | | Featured interview headline | `22 / 37.4px` | `16 / 27.2px` | `700` | `0.3px` | | Compact interview headline | `16 / 27.2px` | `14 / 23.8px` | `700` | `0.3px` | | Interview department/year | `16 / 24px` | `12 / 18px` | `700` | `0.3px` | | Job-category label | `16 / 28px` | `14 / 24.5px` | `700` | Normal | | Benefits label | `18 / 27px` | `12 / 18px` | `700` | Normal | | Blog headline | `16 / 27.2px` | `16 / 27.2px` | `700` | `0.03em` | | Blog excerpt | `16 / 27.2px` | `14 / 23.8px` | `400` | `0.03em` | | Closing recruitment label | `24 / 36px` | `16 / 24px` | `700` | Normal | | Footer company-information link | `16 / 28px` | `16 / 28px` | `700` | Normal | | Footer policy links | `14 / 21px` | `14 / 21px` | `400` | Normal | The large Japanese section headings have generous line boxes. Replacing `48 / 84px` with a tight display setting would noticeably compress the page's rhythm. Conversely, article headings use a practical `1.7` line height for dense Japanese copy. ## Tokens — Spacing & Shapes ### Spacing Scale The evidence shows recurring values, but no semantic source spacing scale was supplied. | Value | Observed use | | --- | --- | | `8px` | Desktop English-label-to-Japanese-title gap; mobile hero subtitle separation | | `12px` | Mobile metadata side padding; desktop compact-story metadata-to-headline separation | | `16px` | Mobile interview content gaps, category-list gaps, product/business separation, and recruitment-panel separation | | `20px` | Mobile page inset; footer policy-link gaps; mobile blog text inset | | `24px` | Desktop interview image/text gaps, featured-card vertical gaps, and category column gaps | | `28.8px` | Closing desktop recruitment-panel horizontal padding; calculated interview-column gap | | `32px` | Mobile interview-row vertical padding; desktop blog text inset | | `40px` | Desktop feature-column and recruitment-panel gaps; compact interview-row padding | | `56px` | Mobile recruitment-band top/bottom padding; company-section bottom padding | | `80px` | Desktop spacing below featured interview content before categories; mobile company-section top padding | | `96px` | Calculated desktop corporate-footer top and bottom clearances | | `120px` | Desktop recruitment-band top/bottom clearance; company-section bottom padding | | `200px` | Desktop company-section top padding | ### Border Radius | Element | Value | Evidence | | --- | --- | --- | | Text-led interview link wrappers | `0` | Measured; their image children can still be rounded | | Job-category links | `4px` | Measured | | Executive-message panel | `8px` | Measured | | Blog cards | `8px` | Measured | | Closing recruitment panels | `8px` | Measured | | Benefit cards | Desktop `16px`; mobile `8px` | Measured | | Engineer recruitment pill | `9999px` | Measured | | Circular menu | Circle, `70px` desktop and `56px` mobile | Measured control bounds plus visual shape; the sampled outer button itself is transparent and square | | Interview photographs | Approximately `4–8px` | Visual estimate; image-element radii were not supplied | ### Layout Measurements | Element | Desktop 1440 × 1000 | Mobile 390 × 844 | | --- | --- | --- | | Header height | `100px` | `76px` | | Header horizontal padding | `30px` | `20px` | | Recruitment wordmark bounds | `259 × 28px` | `236 × 25.5px` | | Hero section including news | `1440 × 900px` | `390 × 768px` | | Engineer badge | `320 × 100px` | `320 × 100px` | | Interview content width | `1140px` | `350px` | | Featured interview width | `541.06px` | `350px` | | Secondary interview group width | `570.14px` | `350px` | | Category link | `364 × 80px` | `350 × 64px` | | Section browse-link bounds | `592 × 80px` | `350 × 64px` | | Benefit card | `280 × 280px` | Approximately `163.81 × 163.81px` | | Blog card | `380 × 497.86px` | `350 × 420.58px` | | Recruitment band | `380px` high | `342px` high | | Recruitment panel | `531 × 140px` | `335 × 107px` | | Corporate footer logo | `220 × 44px` | `200 × 40px` | These content widths vary by section. A universal centered container would lose some of the original page's measured relationships. ## Components ### Persistent Header **Role:** keep recruitment identity and navigation available throughout a long page. A full-width white strip holds the red recruitment wordmark on the left and a circular red MENU control on the right. The header remains at the viewport top in the supplied scrolled captures. The document reserves exactly `100px` above content on desktop and `76px` on mobile, supporting a persistent-header implementation. At desktop size, the logo begins at `x = 30px`; the menu button begins at `x = 1340px`, leaving `30px` to the right edge. On mobile, those positions become `20px` and `314px`, with a `56px` menu control and `20px` right clearance. Inside the circle, two short white horizontal strokes sit above a small MENU caption. A faint header shadow is visible over scrolled white content. Only a `box-shadow 0.3s` transition was measured; the actual shadow values were not supplied. The closed desktop screenshot shows the logo and menu control without a visible inline navigation row. Do not add a full desktop link bar at the inspected width. ### Navigation Content — Unopened State Limitation The DOM contains six primary informational destinations, two recruitment destinations, and two blog destinations. MENU and CLOSE both occur in the button's text content, but only MENU is visible in the captures. The measured navigation-link bounds form three columns of approximately `306.67px` on desktop, with `72px`-high informational links. On mobile, they form a single `350px`-wide column with the same `72px` row height. Recruitment-link boxes are `64px` high. These measurements describe DOM layout, not a visually verified open menu. Its background, entrance direction, focus behavior, scroll locking, and dismissal interaction remain unverified. Hidden navigation must not appear over the closed hero merely because its elements have measurable bounds. ### Photographic Hero **Role:** introduce the employer through real people and a memorable statement. The hero fills the viewport below the header, including its bottom news strip. In the desktop capture, the image shows employees working at monitors, with foliage in the foreground and a seated employee prominent on the right. The photograph is softened and darkened enough for large reversed lettering. The title reads **How We Deliver**. Desktop word wrappers share one line at `104px`, beginning around `x = 241.83px` and ending around `x = 1198.16px`. Their calculated inter-word gaps are approximately `30.16px`. The Japanese subtitle, **これが、私たちの届け方。**, sits `20px` below the title's line box. On mobile, each English word occupies its own line. The three line boxes begin at approximately `y = 200px`, `288.80px`, and `377.59px`. They share a left edge at `27.5px`. The subtitle begins at `y = 474.39px`, only `8px` after the final English line box. The photograph is tightly cropped on mobile, making the foreground employee much larger relative to the viewport. Reproduce this through deliberate cropping and focal-point adjustment. The original image dimensions and object-position values were not supplied. A thin vertical white cue appears near the lower desktop center, approximately `80px` tall. Its motion or click behavior is not established by the still image. ### Engineer Recruitment Pill **Role:** provide a prominent direct route to engineering vacancies. The badge is a `320 × 100px` anchor at both inspected widths, with a fully rounded outline. It combines a white circular illustration area, a black-and-white character using a laptop, large white Japanese lettering, and a small external-destination mark. The desktop anchor sits at `x = 1080px`, `y = 806px`: `40px` from the viewport's right edge. On mobile it is centered at `x = 35px`, `y = 638px`. Its bottom is approximately `32px` above the desktop news strip and `20px` above the mobile strip, using screenshot-derived news-strip edges. The illustration circle is visually about `80px` in diameter. Its artwork, large lettering, and generous pill shape distinguish this link from the more restrained content navigation below. The anchor points to an engineering-filtered HRMOS jobs URL. Its extracted text is empty, so the extraction does not establish an accessible name. Supply one explicitly in a new implementation. Persistence beyond the hero was not demonstrated; treat this as a hero-level badge. ### News Strip **Role:** expose a current recruitment update without interrupting the photograph. A full-width dark strip occupies the bottom of the hero. The current item is dated **2026.3.2** and reads **エンジニア積極採用中！**. On desktop, NEWS, a fine vertical separator, the date, and the announcement form a centered horizontal group. The strip is approximately `62px` high in the screenshot. On mobile, NEWS occupies its own line above the date and announcement, aligned to the `20px` page inset; the strip is approximately `86px` high. News typography was not separately sampled. The screenshot suggests a desktop label around `22px`, with mobile label and item text around `14px` and `12px`. Treat these as visual estimates. No ticker rotation or news interaction was verified. ### Bilingual Section Heading **Role:** make the long homepage easy to scan while preserving a friendly editorial identity. Place a small red English label above a substantially larger Japanese heading. Desktop English labels use `20 / 20px`; Japanese headings use `48 / 84px` and `0.03em` tracking. The desktop label-to-heading gap is `8px`. Interview, Employee benefits, and Blog headings are centered on desktop. The company heading is left aligned. On mobile, the measured section-heading groups move to the `20px` left inset, using `14 / 21px` English labels and `32 / 56px` Japanese headings. The Interview screenshot includes a very large, pale cursive word extending toward the upper-right edge. It remains visually subordinate to the real heading. Use authorized decorative artwork if available; its typeface and exact styling are unknown. Mark an equivalent decorative element as hidden from assistive technology. ### Company Introduction and Executive Message **Role:** explain the company's purpose and connect visitors to deeper corporate content. The desktop company section has `200px` top padding, `120px` bottom padding, and a measured section gap of `80px`. Its mission and body text occupy a right-side column beginning at `x = 837px`, approximately `516.61px` wide. The heading is broken into deliberate short lines, followed by a much smaller paragraph with unusually generous `2.3` line height. Two text-led links follow: **私たち出前館のこと** and **数字で見る出前館**. The second links directly to the numbers section of the company-information page. On mobile, the section uses `80px 20px 56px` padding and a `40px` gap. The mission and paragraph become `350px` wide. The wider paragraph leading remains, even as other spacing decreases. The executive-message link is a rounded panel measuring `920 × 210px` on desktop, with two `460px` grid columns. On mobile it becomes a single-column `350 × 257.05px` panel. Mobile visible text includes MESSAGE and **役員メッセージ**; the longer desktop supporting sentence is absent from the supplied mobile visible-text snapshot. The exact hiding mechanism and the panel's imagery were not visually captured. ### Product and Business Features **Role:** introduce two distinct ways of understanding work at Demaecan. The **プロダクトを知る** and **ビジネスを知る** links form two equal desktop columns, each approximately `501.13px` wide, separated by `40px`. Each wraps the complete introductory feature, including its title and explanatory text. On mobile, both become `350px`-wide blocks separated by `16px`. Their captured heights differ because their content wraps differently: approximately `484.28px` and `452.08px`. These links are supported by rendered text and geometry, but their complete visual surfaces were not included in the supplied screenshots. Preserve the two-topic hierarchy without inventing image subjects, overlay colors, or decorative effects. ### Featured Employee Interview **Role:** give one employee story clear editorial priority. The desktop interview group begins at `x = 150px` and spans `1140px`. The featured story occupies the left `541.06px`; the two compact stories occupy the right `570.14px`, separated by approximately `28.8px`. The featured image shows a smiling employee holding a red De brand prop. Its visible crop and measured text offsets are consistent with a `3:2` image, approximately `541 × 361px`. The photograph has lightly rounded corners. Below the image, a gray metadata row pairs **エンジニア** with **2020年入社**, divided by a thin vertical rule. The headline follows after another `24px` gap, using `22 / 37.4px` bold text. The entire composition is one link to an individual interview. On mobile, the image becomes approximately `350 × 233.33px`, followed by `16px` content gaps. Metadata drops to `12 / 18px`; the headline becomes `16 / 27.2px`. The featured link adds `32px` bottom padding before the smaller stories. ### Compact Employee Interview Row **Role:** show additional employee perspectives without giving every story identical visual weight. Each desktop row uses a photograph on the left and text on the right. Measured columns are approximately `218.45px` and `327.69px`, with a `24px` gap: a `2:3` relationship after subtracting the gap. The first compact portrait shows an employee holding a brown bear character; the second shows a standing employee near a window. Their visible crops are approximately `7:5`. Metadata uses gray bold text, and headlines use dark `16 / 27.2px` type. Fine gray horizontal rules and `40px` vertical padding separate the rows. The first row has no top padding. The mobile version retains the image/text row. Its columns are approximately `133.59px` and `200.41px`, separated by `16px`. Each row has `32px` top and bottom padding. Headline size becomes `14 / 23.8px`; metadata becomes `12 / 18px`. This retained horizontal anatomy is important. Mobile adaptation stacks the overall interview group, while preserving compact rows for the secondary stories. ### Job-Category Links and Section Browse Link **Role:** offer direct paths to interviews by discipline. Six category links follow the stories: **エンジニア**, **セールス**, **企画**, **CX**, **デザイナー**, and **コーポレート**. Their destinations are anchors on the interview index; no in-place filtering behavior was demonstrated. Desktop categories form three columns and two rows. Each box measures `364 × 80px`, with `24px` horizontal gaps and a calculated `21px` gap between rows. The fill is `#f5f5f5`, radius `4px`, and label size `16px` bold. Mobile categories form a single vertical list of `350 × 64px` boxes with `16px` gaps, `20px` horizontal padding, and `14px` labels. A broader **社員インタビューを見る** link follows. Its measured bounds are `592 × 80px` on desktop and `350 × 64px` on mobile, with white text. The sampled outer anchor is transparent; its painted inner surface was not included in the evidence. The Quick Start recommends a red fill for this component rather than claiming that fill was measured. ### Employee Benefits Cards **Role:** summarize workplace support through six navigable topics. The six unique destinations cover work environment, communication, skill development, leave, childcare support, and evaluation. Each links to a section of the benefits page. Desktop DOM evidence contains three repeated sets of these six destinations in a horizontal arrangement. Cards are `280px` square, white, and rounded by `16px`. Their horizontal stride is `320px`, producing `40px` gaps. Some cards have negative or offscreen x-coordinates. This structure supports a repeating horizontal rail, but it does not establish autoplay, direction, speed, dragging, or pause behavior. No such timing should be invented. Mobile evidence contains only six cards, arranged in two columns and three rows. Cards are approximately `163.81px` square, with gaps of approximately `20.80px` and `8px` radii. Label type changes from `18px` to `12px`. The interior artwork and surrounding section background were not visually supplied. The confirmed anatomy is a square linked surface with a lower label; additional artwork must come from separately verified assets. ### Blog Preview Card **Role:** connect recruitment information to dated employee and organizational stories. Three desktop cards form a row. Each is `380px` wide, approximately `497.86px` tall, and rounded by `8px`; calculated horizontal gaps are about `26.67px`. The text region is inset `32px`, giving a `316px` reading width. Titles use `16 / 27.2px` bold type, followed by regular excerpts at the same size and leading. The measured title height corresponds to two lines; the excerpt height corresponds to three lines, despite much longer text in the DOM. This is consistent with truncation or clamping, but the exact source rule was not supplied. On mobile, cards stack at `350px` wide with `16px` gaps. Text insets decrease to `20px`, creating a `310px` reading width. Headlines remain `16px`; excerpts become `14 / 23.8px`, with measured height corresponding to two lines. The three captured items are dated 2026.4.23, 2026.3.10, and 2025.7.10. Each card links to an external article. Their destination pages and image assets were not inspected. ### Closing Recruitment Band **Role:** present the two principal application routes with equal prominence. A solid measured `#da3734` field contains two white panels: **キャリア採用** and **新卒採用**. Each panel combines a black outline icon, a bold Japanese label, and a small red circular external-destination indicator. Desktop panels are `531 × 140px`, separated by `40px`, within a centered `1102px` group. The band is `380px` tall, leaving `120px` above and below the panels. Each panel has `8px` corners and `16px 28.8px` padding. The briefcase and graduation-cap drawings are visually about `64–72px` across on desktop. Their exact artwork bounds were not supplied. Labels use measured `24 / 36px` type. Mobile panels stack at `335 × 107px`, with `16px` separation and `56px` clearance above and below. The group is inset `27.5px`. Labels decrease to `16 / 24px`; icons and circular indicators also shrink. Both panels are links to HRMOS job listings. The external symbol indicates an offsite destination, but a new-tab behavior was not verified. ### Corporate Footer and Social Bar **Role:** close the page with company identity, policies, and social destinations. The desktop corporate-information area is white and approximately `302px` high. A `220 × 44px` logo begins at `x = 110px`, while the information column begins at `x = 510px`. Its bold company-information link sits above two naturally wrapping rows of `14 / 21px` policy links. Small red external symbols appear after the labels. On mobile, this area becomes approximately `494px` high. The `200 × 40px` logo begins at `x = 19.5px`, followed by the company-information link and then the wrapping policy list. The first two policy links share a row; longer links occupy subsequent rows. This is content-dependent wrapping, not a rigid two-column menu. A full-width red strip closes the page. Four white circular social marks link to X, Facebook, Instagram, and YouTube, followed by **© Demae-can Co., Ltd.** The social anchor bounds are `30 × 30px` on desktop and approximately `30 × 31px` on mobile, with `10px` horizontal gaps. The bar is approximately `70px` high on desktop and `61px` on mobile. The mobile footer screenshot begins partway through the recruitment band, underneath the persistent header. Its partially visible career panel is a capture crop; the DOM confirms both complete recruitment panels. ## Tokens — Motion & Interaction ### Measured Transition Declarations | Element | Supplied transition | What this establishes | | --- | --- | --- | | Header | `box-shadow 0.3s` | Shadow changes can interpolate over 300ms; trigger and shadow values unverified | | Hero section | `1s ease-in-out` | A one-second transition declaration exists; the changing property and event were not demonstrated | | Engineer badge | `transform 0.3s cubic-bezier(0, 0, 0.2, 1)` | Transform feedback is supported; end transform unverified | | Company detail links | `0.15s cubic-bezier(0.4, 0, 0.2, 1)` | Short feedback transition; changed property/end state unverified | | Interview and blog headlines | `color 0.08s ease-out` | Fast color feedback is declared | | Category and recruitment panels | `background-color 0.15s ease-out, color 0.15s ease-out` | Surface and text-color feedback are declared | | Benefit cards | `transform 0.3s ease-out` | Card transform feedback is declared; rail motion is a separate question | The supplied observation includes initial loading and scrolling, not a systematic hover, click, or keyboard interaction test. No open-menu transition was captured. Character-separated hero text could support animation, but the text structure does not prove a particular reveal sequence. Likewise, a single hero frame does not establish whether its media is static, a slideshow, or video. The repeated desktop benefit cards suggest a looping arrangement, but no duration or direction is verified. Selected elements reporting `animation: none` do not rule out animation on a parent, descendant, or script-controlled layer. For an adaptation, keep feedback brief and restrained. Match the measured 80–300ms control transitions where useful, and implement any unverified entrance or rail motion only as an explicitly chosen addition. ## Surfaces | Layer | Appearance | Purpose | | --- | --- | --- | | Page canvas | Predominantly white | Gives photography and Japanese headlines room | | Persistent header | White; faint separation over scrolled content | Keeps identity visible | | Hero media | Full-width office photograph with darkening | Supports large reversed text | | News strip | Dark translucent-looking band | Creates a readable announcement area | | Interview content | White with photographs and fine gray separators | Establishes editorial hierarchy without heavy boxes | | Category links | `#f5f5f5`, `4px` corners | Marks secondary navigation as a grouped set | | Benefits cards | Measured white surfaces, `16px` or `8px` corners | Contains six workplace topics; parent background unverified | | Recruitment band | Red field with white panels | Gives the closing application routes strong contrast | | Corporate footer | White above a red social strip | Separates policy information from social identity | There is no broad shadow-based elevation system evident in the supplied screenshots. Image scale, white space, fine rules, and changes between red and white fields do most of the organizational work. The pale script decoration adds personality without becoming another content surface. ## Imagery ### Photographic Direction Current visual evidence shows natural office photography with people as the main subject. Large windows, computer screens, indoor plants, casual professional clothing, and relaxed expressions make the employer feel accessible. The images retain natural color while leaning toward cool, softly lit backgrounds. The hero uses depth: blurred foliage and a foreground employee sit in front of other people and monitors. Interview photographs are more direct, with clear faces and uncluttered backgrounds. The featured portrait includes a red brand prop, reinforcing the accent color inside the image itself. Maintain enough surrounding office context on desktop. On mobile, select a crop that keeps a face meaningful while leaving usable space for the large text. Avoid stretching the photograph or assuming that a centered crop will work for every source image. ### Graphic Direction The engineer badge combines a simple black-and-white cartoon with a white circular field and red capsule. Recruitment panels use bold black outline symbols. The footer uses recognizable white social marks. These graphics have different roles; they do not justify replacing the employee photography with a general illustration system. ### Observed Asset References No image URLs or asset filenames were included in the supplied DOM evidence. The following table identifies visible asset roles without inventing paths. | Asset role | Current visual evidence | Reuse guidance | | --- | --- | --- | | Recruitment wordmark | Desktop and mobile headers | Use authorized brand artwork with its original proportions | | Office hero photograph | Current desktop and mobile hero captures | Supply responsive crops and verify text contrast | | Engineer character badge | Current desktop and mobile hero captures | Preserve the circular illustration and capsule relationship | | Featured employee portrait | Desktop interview capture | Keep the approximately `3:2` crop and visible brand prop when using this asset | | Two secondary portraits | Desktop interview capture | Use compact approximately `7:5` crops | | Cursive Interview decoration | Desktop interview capture | Retain as a faint decorative asset; font unverified | | Briefcase and graduation-cap icons | Desktop recruitment band; graduation cap also visible on mobile | Match the bold outline weight and open white interior | | Corporate logo and social marks | Desktop and mobile footer captures | Preserve official artwork and accessible link names | Company, product/business, benefits, and blog artwork cannot be reconstructed from the supplied text and bounds. Their contents remain outside the visual evidence. ## Layout & Responsive Behavior The inspected homepage preserves its information order across both sizes: hero, company introduction and executive message, product/business features, interviews, benefits, blog, recruitment links, and corporate footer. | Pattern | Desktop observation | Mobile observation | | --- | --- | --- | | Header | `100px` tall, `70px` menu | `76px` tall, `56px` menu | | Hero title | Three words on one centered line | Three left-aligned lines | | Hero badge | Lower right | Centered near the bottom of the photograph | | News | Centered horizontal group | Left-aligned label above the item | | Section headings | Mostly centered; company heading left aligned | Left aligned at `20px` | | Product/business features | Two equal columns | One column | | Interviews | Large story beside two compact rows | Large story above two compact rows | | Interview categories | Three columns, two rows | One column, six rows | | Benefits | Repeated horizontal card arrangement | Six cards in a two-column grid | | Blog | Three columns | One column | | Recruitment panels | Two columns | Stacked panels | | Corporate footer | Logo beside information | Logo above information; policies wrap naturally | Mobile adaptation is selective. The engineer badge retains its `320 × 100px` size, blog headlines retain `16px` type, and secondary interview stories retain a horizontal image/text structure. Other elements, including section titles, recruitment labels, and benefit cards, shrink substantially. No tablet viewport or exact media-query breakpoint was supplied. The Quick Start uses `767px` as a recommended breakpoint and fluid sizing between the measured widths. Those formulas are implementation choices, not recovered source CSS. For shorter screens, allow the hero to exceed one viewport if necessary to prevent its headline, badge, and news strip from colliding. At the measured `390 × 844px` viewport, the original hero fits exactly beneath the header. ## Do’s and Don’ts ### Do - Use measured red `#da3734` with white, dark ink, and restrained gray surfaces. - Preserve the small red English label above the large Japanese section heading. - Use LINE Seed JP for the confirmed text roles, with verified font files and weight mappings. - Keep the desktop hero headline on one line and the phone headline on three deliberate lines. - Preserve natural employee photography and adjust mobile focal points deliberately. - Retain the illustrated `320 × 100px` engineering badge at the inspected phone width. - Give the featured interview greater image scale than the two compact stories. - Preserve horizontal secondary interview rows on mobile. - Use thin rules and white space to separate stories. - Keep the benefits transition from a desktop horizontal arrangement to six mobile grid items. - Give career and graduate recruitment equal visual weight in the closing red band. - Let footer policy links wrap according to their actual content. ### Don’t - Don’t reduce the recruitment homepage to only a hero and application form. - Don’t turn every section into identical rounded cards with equal image sizes. - Don’t use the inherited `10px` root size as the intended body-reading size. - Don’t describe the heavy hero glyphs as confirmed weight 400 merely because their wrappers report it. - Don’t apply pale cursive lettering to functional headings or body copy. - Don’t introduce extra interface accent colors from the office photograph. - Don’t add an inline desktop navigation bar at the measured 1440px width. - Don’t describe category links as live filters; their recorded destinations are page anchors. - Don’t assume the engineering badge stays fixed throughout the page. - Don’t invent hero playback, carousel timing, or menu animation from static evidence. - Don’t replace the generous Japanese line heights with tightly packed display typography. - Don’t mistake the cropped first panel in the mobile footer capture for a missing component. ## Recommended Implementation Additions These are recommendations for a new implementation, not verified original-site features: - Use one semantic `h1` containing the complete How We Deliver phrase, with visual word spans. Keep any character animation from creating fragmented screen-reader output. - Give the menu button an accessible name, `aria-expanded`, and a relationship to its navigation region. Manage focus and dismissal explicitly; keep hidden navigation out of the tab order. - Give the image-led engineering link and social links meaningful accessible names. Use appropriate image alternatives for employee stories and empty alternatives for purely decorative artwork. - Add visible keyboard focus styles that remain readable on white, red, and photographic backgrounds. - Verify subtitle and badge contrast against each responsive hero crop. Overlay opacity should be chosen from the actual image, not copied blindly from an estimate. - Use `