# Coalition Group Recruit — Style Reference

> Warm charcoal, finely drawn serif letters, and monochrome portraits arranged around a quiet center.

**Website:** [Coalition Group Recruit](https://recruit.coalition-group.jp/)
**Original URL:** https://recruit.coalition-group.jp/
**Final URL:** https://recruit.coalition-group.jp/
**Theme:** dark in the supplied visual captures; additional light-neutral tokens and dark-text sections are present in the DOM.
**Inspected:** September 12, 2026, through the supplied browser inspection. Evidence retrieval timestamp: `2026-09-12T13:39:20.844Z`, equivalent to 22:39:20.844 JST.
**Viewports:** 1440 × 1000 and 390 × 844 CSS pixels.
**Scope:** the current recruitment homepage: opening composition, introduction, philosophy, work, member stories, culture, recruitment links, and footer. Visual captures cover the hero, desktop work articles, and desktop/mobile footer. Rendered DOM measurements cover the homepage at both widths. Linked pages and the opened mobile menu were not inspected.

Coalition Group presents recruitment as an editorial exploration of its thinking, work, and people. The homepage connects four numbered content chapters to article indexes, member profiles, job information, and an entry page. Its long reading sequence combines expressive brand compositions with a repeatable publishing structure.

The strongest visual relationship is between warm charcoal `#2e2e2b` and pale stone `#c8c6be`. Large Roman capitals and sweeping handwritten initials occupy the center of the hero. Five rectangular portraits interrupt the surrounding field of horizontal bands. Japanese Mincho typography supplies a quieter second voice, while sans-serif paragraphs handle practical explanations. Small numbers, hairline separators, outlined tags, and broad archive links organize the substantial content below.

## How to Read This Reference

- **Measured** means a value explicitly supplied by computed styles or rendered element rectangles. Measurements belong to the recorded viewport and state.
- **Estimated** means a visual approximation from an original-page screenshot. Image bounds, decorative lettering, and some visible label sizes fall into this category.
- **Recommended** means an implementation choice for adaptation. The CSS starter uses descriptive aliases and a simplified component structure; it is not extracted source code.
- Parent anchors often report `sans-serif`, `16px`, and `#333333`, while their visible descendants or artwork look different. Those wrapper defaults should not become the page's typography or foreground tokens.
- Most sampled sections and anchors have transparent backgrounds. The extract does not include every nested surface, pseudo-element, or compositing rule.
- Static captures establish appearance and layout. Transition declarations establish available timing, but do not establish hover outcomes, animation paths, or interaction triggers.

## Tokens — Colors

### Default Palette

The four principal color values below are exact source custom-property definitions. Their six-digit forms omit the fully opaque `ff` alpha suffix.

| Name | Value | Source property | Reusable alias | Evidence and role |
| --- | --- | --- | --- | --- |
| Warm Charcoal | `#2e2e2b` | `--s-color-c284b5c2` | `--color-canvas` | Measured body and footer background; also measured foreground on philosophy and culture text |
| Pale Stone | `#c8c6be` | `--s-color-b6ab37ee` | `--color-ink` | Measured hero caption, introductory text, work text, and section labels; visually matches the principal pale lettering |
| Raised Charcoal | `#3b3b37` | `--s-color-6bb7b48f` | `--color-surface` | Defined source token; visually consistent with the slightly lighter desktop article panels, although the sampled anchors themselves are transparent |
| Light Stone | `#e4e3df` | `--s-color-c28ae9b4` | `--color-light` | Defined source token; its exact visible surface assignment is not isolated by the supplied captures |
| Quiet Rule | `rgb(200 198 190 / 18%)` | Not supplied | `--color-rule` | Recommended approximation for low-contrast footer dividers |
| Strong Rule | `#c8c6be` | Appearance-derived use of Pale Stone | `--color-rule-strong` | Recommended direct-color treatment for conspicuous archive borders and small tag outlines |

### Tonal Roles

The captured hero, work-card region, and footer share a dark field. The work cards separate from that field through a small tonal step. Their boundaries stay flat and square; depth does not depend on shadows.

Philosophy and culture headings and paragraphs compute to Warm Charcoal, whereas work and stories labels compute to Pale Stone. This establishes different foreground treatments across chapters. The complete intermediate background state and any scroll-driven color change remain unverified. Do not describe the entire document as pale text on charcoal, or claim a selectable light theme.

Photographic whites and grays belong to the images. The white portrait backdrops provide local contrast without introducing a general white UI surface. Source loading variables also exist, but no loading screen is visually documented; they are excluded from the principal palette.

## Tokens — Typography

### Japanese Display — Shippori Mincho

- **Measured source stack:** `'Shippori Mincho', Cardo` through `--s-font-3daa9636`.
- **Measured weight:** `500` for the Japanese hero H1, introductory statement, section headings, and chapter propositions.
- **Character:** slender Mincho strokes, pronounced stroke contrast, and a composed editorial rhythm.
- **Tracking:** the hero caption and chapter headings use `-0.03em`; introductory statement lines use normal tracking.
- **Role:** brand statements and section hierarchy. Preserve the distinction between this display voice and the sans-serif explanatory paragraphs.

### English Labels — Cardo

- **Measured family:** `Cardo` through `--s-font-7c9c919b`.
- **Confirmed uses:** parenthesized chapter numbers, English chapter labels, and business-domain labels.
- **Measured weights:** `400` for chapter markers; `700` for labels such as `( Consulting & Creative )`.
- **Tracking:** `0.02em` on these measured labels.

Navigation, dates, footer links, and the archive action appear serif in the screenshots. Their leaf text styles were not supplied, so assigning Cardo to those components is a reasonable adaptation rather than a separately measured family assignment.

### Explanatory Copy — Noto Sans JP

- **Measured family:** `'Noto Sans JP'` through `--s-font-749c2b86`.
- **Measured weight:** `400`.
- **Role:** business explanations, philosophy and culture paragraphs, and recruitment-card descriptions.
- **Rhythm:** generous line height, usually `2` on desktop; mobile paragraphs vary between `1.75` and `2`.
- **Tracking:** chapter descriptions use `0.05em`; recruitment-card descriptions use normal tracking.

These names are supported by declared and computed stacks. Font-file delivery and the actual font used for each individual glyph were not independently tested.

### Decorative English Lettering

`ESSENTIAL OVER TIME.` combines large uppercase serif forms with sweeping, irregular E, O, and T forms. The strokes extend beyond the ordinary capital-height box and overlap neighboring letters. The footer repeats this composition in one horizontal line on desktop and two lines on mobile.

The extract does not expose a font family for this English composition. Treat it as custom display artwork when adapting the design. Neither Cardo alone nor a generic script font reproduces the distinctive initials. Its original asset format and rendering technique are unverified.

The measured H1 is the smaller Japanese line, `個別解の、徹底的追求。`, beneath the English artwork.

### Type Scale

All values are CSS pixels. The source root remains `16px`; there is no evidence of a special miniature rem system.

| Role | Desktop size / line height | Mobile size / line height | Weight and tracking | Status |
| --- | --- | --- | --- | --- |
| Japanese hero H1 | `32 / 48` | `18 / 27` | `500`, `-0.03em` | Measured |
| Three-line introduction statement | `64 / 96` | `32 / 48` | `500`, normal | Measured |
| Introduction prose | `20 / 40` | `15 / 30` | `500`; desktop `0.05em`, mobile normal | Measured |
| Chapter number and English label | `14 / 14` | `13 / 13` | `400`, `0.02em` | Measured |
| Japanese section H2 | `20 / 20` | `15 / 15` | `500`, `-0.03em` | Measured for the four content chapters |
| Chapter proposition H3 | `48 / 72` | `24 / 36` | `500`, `-0.03em` | Measured |
| Philosophy paragraph | `16 / 32` | `14 / 28` | `400`, `0.05em` | Measured |
| Work and culture paragraphs | `16 / 32` | `14 / 24.5` | `400`, `0.05em` | Measured |
| Business-domain label | `14 / 14` | `13 / 13` | `700`, `0.02em` | Measured |
| Recruitment-card description | `14 / 24.5` | `13 / 22.75` | `400`, normal | Measured |
| Work-card title | About `28px` | Not exposed | Visually regular Mincho treatment | Desktop estimate |
| ALL CONTENTS label | About `48–50px` | Not exposed | Visually regular serif | Desktop estimate |
| Small category tag | About `12px` | Not exposed | Compact outlined label | Desktop estimate |

Semantic heading level and visual size differ: the section H2 is smaller than the proposition H3. Preserve a logical document outline when adapting the hierarchy.

## Tokens — Spacing & Shapes

**Density:** very broad chapter spacing around compact navigation and metadata.
**Geometry:** rectangular photographs and article panels; thin horizontal rules; pills reserved for small controls and tags; a much larger rounded shape for archive actions.

### Spacing Scale

These are observed recurring values, not a claimed source token scale.

| Use | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Header top and side padding | `32px` | `16px` | Measured |
| Main text side inset | Usually `32px` | `24px` | Measured; some desktop content has additional local offsets |
| Article-list outer inset | `32px` | `40px` | Measured card positions |
| Article padding | `16px 16px 24px` | Same | Measured |
| Article separation | `16px` | `16px` vertically | Calculated from measured adjacent bounds |
| Article internal gap | `9px` for work/philosophy; `16px` for stories | Same | Measured anchor styles |
| Last article to archive action | `64px` | `40px` | Calculated from measured bounds |
| Introduction padding | `240px 32px 200px` | `64px 24px 40px` | Measured |
| Image-interlude padding | `200px 32px 160px` | `80px 24px` | Measured |
| Stories section padding | `200px 0 120px` | `104px 0 40px` | Measured |
| Recruitment-card padding / gap | `16px / 32px` | `16px / 24px` | Measured |

### Border Radius

| Element | Value or appearance | Status |
| --- | --- | --- |
| Article anchors and photographs | Square corners; anchor radius `0` | Measured anchors, visually confirmed work photography |
| Desktop ENTRY anchor | `100px` | Measured; produces a pill within its 38px height |
| Mobile MENU button | `100px` | Measured; visible treatment is mostly typography |
| Category tags | Fully rounded narrow outlines | Visual observation; exact radius unavailable |
| Large archive action | About `40px` visible corner radius on desktop | Estimate of the inner visual shape; outer anchor reports `0` |
| Footer rows | `0` | Measured |

### Layout Measurements

| Element | 1440 × 1000 | 390 × 844 | Notes |
| --- | --- | --- | --- |
| Document height | `14360.66px` | `15900.03px` | Measured snapshot height, not a layout target |
| Header bounds | `1440 × 71.23px` | `390 × 40.52px` | Transparent wrapper |
| Header brand link | `320 × 39.23px` | `200 × 24.52px` | At `(32,32)` and `(16,16)` respectively |
| Hero section | `1440 × 924.67px` | `390 × 720px` | Desktop includes 120px bottom padding |
| Hero H1 | `341.45 × 48px` | `192.06 × 27px` | Centered; top positions `530.67px` and `422.81px` |
| Work article | `447.95 × 426px` | `310 × 417px` | Three across versus one vertical column |
| Philosophy article | `447.95 × 573.95px` | `310 × 427px` | Different from the work-card height |
| Culture article | `447.95 × 457px` | `310 × 448px` | Different content variant |
| ALL CONTENTS anchor | `1376 × 200px` | `342 × 96px` | Side insets 32px and 24px |
| Recruitment link card | `680 × 204px` | `342 × 238.69px` | Two columns versus stacked cards |
| Footer link anchor | `1376 × 48px` | `342 × 48px` | Row starts advance 49px desktop and 55px mobile |
| Footer brand link | `400 × 49.05px` | `290.66 × 35.64px` | Left aligned desktop, centered mobile |

The desktop article width follows approximately `(1440 − 64 − 32) / 3 = 448px`: two 32px page margins and two 16px gutters. The mobile article width is `390 − 80 = 310px`. Body paragraphs and archive actions instead use a wider 342px mobile region. Retain these different inset relationships.

## Components

### Recruitment Header

**Role:** identity, primary entry access, and compact navigation.

The upper-left brand link contains the Coalition symbol, group wordmark, divider, and RECRUIT label. It is a unified horizontal lockup. On desktop it occupies a 320px-wide box. ENTRY sits at the opposite edge in a 127 × 38px outlined pill, with a small open-circle mark after the word.

Below ENTRY, five right-aligned links form a vertical navigation rail. Their recorded top positions are approximately 100, 130, 163, 193, and 223px. This is a compact overlay, independent of the centered hero artwork.

The header and rail retain their viewport positions between the hero and work-card screenshots. They are absent from the supplied footer capture. The exact positioning property and visibility trigger are not included in the extract.

At 390px, the lockup becomes 200px wide and the desktop links are replaced by `( MENU )`. The actual button rectangle is approximately 81.22 × 21px, with `4px 10px 4px 12px` padding. Its opened state was not captured.

**Observed routing discrepancy:** the desktop CULTURE rail link points to `/stories`. The footer CULTURE link and the culture archive link point to `/culture`. A new implementation should validate and align these destinations.

### Hero Composition

**Role:** establish the group's identity through typography and people.

Build the visual hierarchy in four layers:

1. A warm-charcoal field with horizontal bands and a darker central oval region.
2. Five photographs in separate rectangular frames, with some frames clipped by viewport edges.
3. The large two-line English lettering composition.
4. A centered Japanese H1 and a small SCROLL cue with a radial line emblem.

The portraits retain white or gray photographic backdrops. They are not circular avatars or transparent human cutouts. Several frames approach the headline, creating an editorial collage rather than a regularly spaced team grid.

The following are **estimated visible screenshot bounds**, not source positioning rules. Edge frames may show only part of the original image.

| Portrait position | Desktop visible bounds, approximately | Mobile visible bounds, approximately |
| --- | --- | --- |
| Upper portrait | `(892,0)`, `157 × 242px` | `(115,60)`, `94 × 145px` |
| Left-edge portrait | `(0,183)`, `116 × 321px` | `(0,380)`, `75 × 179px` |
| Right-side portrait | `(1307,310)`, `133 × 373px` | `(252,87)`, `78 × 186px` |
| Lower-left / lower-middle portrait | `(259,577)`, `167 × 244px` | `(200,509)`, `94 × 137px` |
| Lower-right portrait | `(1030,583)`, `157 × 314px` | `(289,435)`, `94 × 188px` |

The mobile composition is deliberately rearranged. Two portraits sit above the title, one touches the left edge beside it, and two occupy the lower-right area. A uniform scale transform of the desktop hero would not reproduce this arrangement.

### Horizontal-Band Background

**Role:** connect the opening and closing brand compositions.

Parallel horizontal bands create a restrained optical texture. Their interrupted ends describe a broad, irregular central shape. The center remains darker and relatively quiet behind the lettering. The texture fades into the solid canvas near section boundaries.

The visible band pitch is approximately 10–12px in the supplied images. This is an estimate, not a stylesheet measurement. The construction could involve artwork, masks, or other rendering layers; the extract does not establish the mechanism.

A repeating gradient with an elliptical mask can provide an adaptation. Exact matching requires the original band contours and fade treatment.

### Scroll Cue

**Role:** indicate that the opening composition continues into a reading sequence.

SCROLL appears above a circular burst of thin rays. The emblem is approximately 80px across on desktop and 40px on mobile. In the mobile image it extends slightly below the measured 720px hero section, consistent with the following section starting at y=737px.

The supplied link evidence does not establish the cue as a clickable anchor. Rotation, click-to-scroll behavior, and looping animation are unverified.

### Editorial Introduction

**Role:** expand the short hero proposition into the group's underlying thinking.

On desktop, a three-line Mincho statement occupies the left side, while a long paragraph sits in a separate right column. The paragraph is measured at approximately 577.91px wide, beginning at x=830.08px. Its `20px / 40px` typography and `0.05em` tracking give it a deliberate reading pace.

The statement uses `64px / 96px`. Each measured line has 58px of internal left padding beyond the section's 32px edge. The result is visibly offset from the ordinary page grid.

On mobile, the statement becomes `32px / 48px`, loses that extra left padding, and sits above the paragraph. Both begin at x=24px. A measured 40px gap separates the statement's final line box from the paragraph. The paragraph changes to `15px / 30px` and normal tracking.

### Numbered Chapter Header

**Role:** make a long homepage legible as a sequence of editorial chapters.

Each chapter pairs a small parenthesized number with a parenthesized English name. A Japanese section label introduces the subject, followed by a larger proposition where applicable.

The measured sequence is PHILOSOPHY, WORK/JOB, STORIES, and CULTURE. Markers remain arranged in two horizontal regions on mobile; they do not simply collapse into one centered heading. For example, mobile chapter numbers start around x=34px and English labels around x=209px.

Large spaces and visual material occur between some of these labels and subsequent copy. Their complete visual construction is not shown in the attached intermediate captures. Use the measured hierarchy without inventing unseen diagrams or illustrations.

### Article Collection and CONTENTS Ribbon

**Role:** offer editorial routes into the group's thinking, business, and culture.

The desktop work capture shows a repeating CONTENTS strip, separated by small radial emblems. Its ends are clipped at the viewport edges. A fine horizontal rule below it has short vertical ticks that align with the three-column arrangement. Repetition is visible; automatic horizontal movement is not verified.

Below the strip, three square-cornered article panels share the following anatomy:

- A photograph inset 16px from the top and sides.
- A Japanese title directly below the photograph.
- Flexible space before the bottom metadata row.
- A date aligned left and a small outlined category tag aligned right.
- A single anchor wrapping the article, rather than independent nested links for each piece of metadata.

The visible work photographs are approximately 416 × 268px, a display ratio near `1.55:1`. The image content shows a conversation on a balcony, people in an office discussion, and a seated interview. Preserve the human context within these crops.

Dates such as `Sep, 19, 2025` are article metadata. They do not establish the inspection date or prove that the page has remained unchanged since publication.

At 390px, all three work links have x=40px, width 310px, and height 417px. Their starts advance by 433px, confirming a vertical list with 16px gaps. The mobile image crop itself was not visually supplied, so its exact height and object position remain unverified.

### Member Story Cards

**Role:** introduce individual growth stories with organizational context.

Six linked records appear in the supplied DOM. Each combines a member name, department or business unit, slash separator, and joining year. Their anchor padding matches the article system, but the internal gap is 16px.

Desktop records occupy three columns and two rows. Heights vary: the first two measured records are about 578px high, while another in the same row is about 707px. The second row begins after the tallest first-row item. These measurements support row-based placement; they do not establish a masonry layout.

Mobile records become a single 310px-wide column. Heights vary from approximately 416px to 501px as imagery and text differ. Preserve the department and joining-year information, and allow variable content height. The supplied captures do not reveal the complete story-card image treatment.

### ALL CONTENTS Action

**Role:** close each editorial chapter with a clear route to its complete index.

This is a broad architectural element: a 1376 × 200px anchor on desktop, placed 64px below the article collection. In the work screenshot, a dark rounded inner field sits against pale edging and exposed pale corners. The centered serif label is paired with a pale horizontal capsule containing a dark right arrow.

The visible desktop corner radius is approximately 40px. The arrow capsule is approximately 92 × 26px. These are visual estimates; the measured outer anchor reports a zero radius and transparent background, indicating that its visible shape belongs to another layer.

On mobile, the measured anchor becomes 342 × 96px and sits 40px below the final card. The mobile label size, arrow geometry, and rounded inner layer were not separately captured.

Duplicated ALL CONTENTS text appears in the DOM, while the screenshot presents one readable label. This may support layered effects, but no rollover sequence was tested. An adaptation should expose one accessible link name.

### Recruitment Link Pair

**Role:** connect the editorial material to job requirements and a first conversation.

Two full-card anchors follow the content chapters: JOB INFORMATION with `募集要項`, and ENTRY with `エントリー`. Both include short explanatory Japanese copy.

Desktop cards are 680 × 204px, separated by 16px within the 32px page margins. Mobile cards stack at x=24px, measure 342 × 238.69px, and have an 8px gap. Their descriptions wrap to two measured lines on mobile.

The DOM confirms the labels, descriptions, spacing, and destinations. Detailed artwork, icon anatomy, and hover styling for these cards are outside the supplied visual scope.

### Footer Index and Closing Brand Field

**Role:** provide a final complete site index and return to the opening visual identity.

Six rows pair `(01)` through `(06)` on the left with PHILOSOPHY, WORK/JOB, STORIES, CULTURE, JOB INFO, and ENTRY at the far right. Thin rules define the rows. Each link has 16px vertical padding and a measured 48px height. Desktop row starts are 49px apart; mobile starts are 55px apart.

The desktop brand lockup sits at the left below the index, with `2025 Coalition.` at the right. On mobile, the approximately 291px-wide lockup is centered and the copyright line moves below it.

The closing background restores the horizontal-band motif and oversized English lettering. Desktop uses a single line across almost the full page width. Mobile uses two lines within the narrow frame, followed by a much smaller Japanese caption. No portraits appear in this closing composition.

The mobile numbered-list capture is the footer, corroborated by the supplied FOOTER measurements. It is not evidence of an opened navigation menu.

## Tokens — Motion & Interaction

### Declared Timing

The following values come from supplied computed transitions. They are evidence of CSS declarations, not recordings of completed interactions.

| Element | Declared timing | What can be concluded |
| --- | --- | --- |
| Body background | `0.5s cubic-bezier(0.4, 0.4, 0, 1)` | Background changes have a transition available; trigger and resulting states were not recorded |
| General links and many wrappers | `0.3s cubic-bezier(0.4, 0.4, 0, 1)` | A common short easing is declared; exact changed properties are not isolated |
| Desktop header | `1.2s`, with `6.7s` delay | A delayed transition is declared; the precise entrance path is unknown |
| Mobile header | `1.2s cubic-bezier(0.4, 0.4, 0, 1)`, `7s` delay | A delayed mobile transition is declared |
| Japanese hero H1 | `1s cubic-bezier(0.4, 0.4, 0, 1)`, `4.8s` delay | Supports a staged opening sequence; initial state is not supplied |
| Introduction statement lines | `0.8s` with the same easing; delays `0.15s`, `0.2s`, `0.25s` | Three staggered transition declarations |
| Desktop introduction prose | `1s` with the same easing, `0.3s` delay | Later prose transition declared; mobile sampled prose instead has the general 0.3s transition |
| ENTRY, philosophy cards, recruitment cards | `0.6s cubic-bezier(1, 0, 0, 1)` | A more pronounced easing is declared for these anchors |
| Desktop archive anchors | `0.3s cubic-bezier(0.4, 0.4, 0, 1)`, `0.2s` delay | Delayed transition available; visible outcome untested |
| Footer links | `0.4s cubic-bezier(1, 0, 0, 1)` | Footer-specific transition timing |

The transition strings also enumerate many gradient custom properties. Their enumeration does not prove that the visible striped field is an animated CSS gradient.

### Interaction Evidence and Limits

- Original-page anchors establish routes to chapter indexes, article pages, profiles, job information, and entry. Destination pages were not opened in the supplied evidence.
- The mobile MENU control is a real button in the extract. Its panel, focus behavior, dismissal behavior, and transition are unverified.
- No hover recording establishes image zoom, color restoration, cursor changes, label rolling, or card inversion.
- No temporal evidence establishes portrait cycling, background parallax, ribbon movement, or rotation of radial emblems.
- Sampled elements report `animation: none`. That result does not rule out animations on unsampled descendants, pseudo-elements, or script-controlled layers.

**Recommended adaptation:** use the documented easing families for modest feedback, keep content visible by default, and introduce movement only where its behavior has been specified. The long opening delays should not be copied as a requirement to withhold navigation or essential text.

## Surfaces

| Surface | Appearance | Construction guidance |
| --- | --- | --- |
| Hero canvas | Warm charcoal with low-contrast horizontal texture | Keep the center quiet enough for the lettering |
| Work/article field | Flat dark canvas | Separate panels through small tonal differences |
| Article panel | Slightly lighter charcoal, square corners | Preserve padding and image boundaries; no observed shadow system |
| Portrait frame | White or gray photographic backdrop | Preserve the photographic rectangle and edge cropping |
| Archive action | Large dark rounded field with pale edging | Keep the distinction between the anchor box and its inner visual shape |
| Footer index | Dark field with fine dividers | Structure through rows and alignment |
| Potential light chapter surface | Complementary source token exists; dark text is measured | Exact placement and transition state require further original-page visual evidence |

There is no observed glass blur, glossy control treatment, or general elevation scale. Surface hierarchy is primarily tonal and typographic.

## Imagery

The visible photography is monochrome, with natural expressions and restrained business clothing. Hero portraits use isolated photographic rectangles, while work articles show conversation and interview contexts. The tonal treatment keeps people integrated with the charcoal interface without erasing skin, fabric, and room detail.

Maintain distinct image roles. Hero portraits are narrow and individually placed; work images are landscape editorial crops; the footer uses lettering and texture without people. Avoid applying one universal aspect ratio to all three roles.

The background bands and radial emblems provide graphic structure. Their linework is regular and fine, while the large handwritten initials are irregular and expressive. That difference is part of the composition.

### Observed Asset References

| Visual asset | Original-page evidence | Reuse limitation |
| --- | --- | --- |
| Coalition Group / RECRUIT lockup | Header and footer captures; home-link rectangles | Complete asset URL and file format not supplied |
| ESSENTIAL OVER TIME. lettering | Hero and footer captures at both widths | Typeface and rendering method not established; preserve authored artwork when available |
| Five hero portraits | Desktop and mobile hero captures | Full image URLs and focal-point settings not supplied |
| Business-structure photograph | Card associated with `/work-job/WNQxPxEd` | Destination is known; complete image resource URL is not supplied |
| Group-introduction photograph | Card associated with `/work-job/eVrPkY9v` | Destination is known; exact crop rules remain unverified |
| Work-overview photograph | Card associated with `/work-job/fLbiyPIG` | Desktop display crop is visible; mobile crop is not |
| Radial emblem and right arrow | SCROLL cue, CONTENTS strip, archive action | Complete source files not supplied |
| Horizontal-band field | Hero and footer captures | Original contours and rendering technique not supplied |

Some rendered style fragments contain truncated image-storage paths. They are not complete asset URLs and should not be reconstructed by guessing their missing suffixes. The paths above beginning with `/work-job/` identify linked content, not downloadable image files.

## Layout & Responsive Behavior

### Observed Changes

| System | Desktop observation | Mobile observation |
| --- | --- | --- |
| Primary navigation | ENTRY pill plus right-side vertical rail | Compact `( MENU )` button |
| Header identity | 320px-wide lockup, 32px insets | 200px-wide lockup, 16px insets |
| Hero portraits | Distributed around a wide central composition | Repositioned above, beside, and below the title |
| Hero height | About 925px | 720px, with the cue extending slightly below |
| Introduction | Large statement left, prose right | Statement above prose, shared 24px side inset |
| Chapter propositions | `48px / 72px` | `24px / 36px` |
| Article collections | Three columns, approximately 448px each | One column, 310px wide, with 40px page insets |
| Archive actions | 200px high, 32px side insets | 96px high, 24px side insets |
| Recruitment cards | Two columns with 16px gap | Stacked with 8px gap |
| Footer rows | 48px links, 49px start-to-start | 48px links, 55px start-to-start |
| Footer identity | Logo left, copyright right | Logo and copyright centered vertically |
| Closing English lettering | One horizontal line | Two lines |

The mobile document is longer despite smaller type and reduced section padding. The stacked article and story collections account for much of that change. Do not reduce the mobile content set to mimic a shorter page.

A `max-width: 1140px` media query is visible in the extracted responsive line-break rules. This does not establish the breakpoint for every layout change. Only 1440px and 390px were sampled; tablet layout, intermediate column counts, and landscape-phone behavior remain unknown.

**Recommended implementation:** use component-specific breakpoints and test the hero separately from the editorial grid. The CSS below uses 760px as an explicitly chosen adaptation breakpoint. Preserve natural page scrolling and allow paragraphs to reflow under text zoom. Hero lettering and portrait placement need art direction; body content should remain in ordinary document flow.

## Do’s and Don’ts

### Do

- Keep Warm Charcoal and Pale Stone exact for the captured dark treatment.
- Preserve the combination of Mincho statements, Cardo section markers, and Noto Sans JP explanatory copy.
- Treat the English lettering as a distinctive authored composition.
- Use rectangular monochrome portraits with their photographic backgrounds intact.
- Reposition the hero collage deliberately for mobile.
- Keep three desktop article columns and the measured single mobile column.
- Retain the narrower mobile article inset relative to body text and archive actions.
- Use generous chapter spacing, fine rules, small metadata, and restrained outlined tags.
- End chapters with broad ALL CONTENTS links and repeat the brand motif in the footer.

### Don’t

- Don’t turn the recruitment content hub into a short sequence of generic feature blocks.
- Don’t replace the portrait collage with circular headshots or one full-bleed team photograph.
- Don’t use a generic script font as an exact substitute for the decorative initials.
- Don’t assign wrapper `sans-serif`, `16px`, and `#333333` values to visible descendants without checking them.
- Don’t add colorful category badges, bright conversion fills, or soft card shadows.
- Don’t assume all chapters share one foreground/background treatment.
- Don’t describe repeated ribbon text or radial emblems as animated without temporal evidence.
- Don’t reproduce the CULTURE-to-STORIES link discrepancy in a new navigation system.
- Don’t use the mobile footer capture as the specification for an unobserved menu overlay.

## Recommended Implementation Additions

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

- Give the mobile menu a sufficiently large hit area while retaining its small typographic appearance. The measured 21px button height is visually compact.
- Implement menu expansion with a clear accessible name, `aria-expanded`, appropriate focus handling, Escape dismissal, and restored focus when closed.
- Give repeated decorative labels one accessible representation. Hide only decorative duplicates from assistive technology.
- Provide visible keyboard focus on article cards, archive actions, footer rows, and the header entry link.
- Keep essential navigation and the Japanese H1 available immediately, even when an optional opening sequence is running.
- Offer reduced-motion behavior for any added band animation, radial rotation, portrait movement, or label transitions.
- Supply useful text alternatives for meaningful photographs and the brand lockup. Decorative background bands should not appear in the reading order.
- Reserve image dimensions and prepare mobile crops with suitable focal points. Confirm the work-card crop at 390px before claiming visual parity.
- Validate all CULTURE destinations and give repeated archive actions contextual accessible names, such as “All work and job articles.”

## Agent Prompt Guide

### Quick Color Reference

- Main dark field: `#2e2e2b`.
- Principal pale text and graphics: `#c8c6be`.
- Slightly lighter article surface: `#3b3b37` as a source-token-based adaptation.
- Additional source light neutral: `#e4e3df`; exact original placement is unverified.
- Quiet rule approximation: `rgb(200 198 190 / 18%)`.
- Action language: outlined entry pill, small category capsules, and large monochrome archive links.

### Overall Prompt

“Create an editorial recruitment homepage inspired by Coalition Group Recruit. Use warm charcoal `#2e2e2b`, pale stone `#c8c6be`, monochrome employee photography, Shippori Mincho statements, Cardo chapter labels, and Noto Sans JP explanatory paragraphs. Center an authored two-line English lettering composition with expressive handwritten initials among five separate rectangular portraits. Place low-contrast horizontal bands around a darker central area. Follow with a spacious introduction and four numbered content chapters containing articles and member stories. Use three article columns on desktop and one narrower column on mobile, broad ALL CONTENTS actions, recruitment links, and a six-row footer index. Art-direct the phone hero independently. Label any invented interaction behavior as an adaptation.”

### Example Component Prompts

1. **Hero:** “Arrange five monochrome portrait rectangles around a quiet charcoal center. Use pale custom lettering reading ESSENTIAL OVER TIME., with sweeping E, O, and T forms, and a smaller Mincho line beneath: 個別解の、徹底的追求。. Allow selected photo frames to meet the viewport edges. On a 390px phone, place two portraits above the heading and three around its lower area.”
2. **Introduction:** “Create a desktop editorial split: a three-line Shippori Mincho statement at 64px/96px on the left and 20px/40px prose on the right. Use 32px page insets and generous vertical space. At 390px, stack them with 24px side insets, 32px/48px statement type, and 15px/30px prose.”
3. **Work article:** “Build a square-cornered charcoal article panel with 16px top/side padding and 24px bottom padding. Place a monochrome conversation photograph above a Mincho title. Align a small serif date left and an outlined category tag right at the bottom. Use approximately 448px card width on desktop and 310px on a 390px phone.”
4. **Archive action:** “Create a 200px-tall desktop archive link with pale edging and a dark inner field with approximately 40px corners. Center a large serif ALL CONTENTS label beside a short pale capsule containing a dark arrow. Reduce the mobile anchor height to 96px. Keep mobile decorative geometry explicitly adaptable.”
5. **Footer:** “Create six fine-rule rows with parenthesized numbers at the left and uppercase serif destinations at the right. Follow with a Coalition Group / RECRUIT lockup and small copyright line. Repeat the horizontal-band field and large decorative English lettering below; use one line on desktop and two on mobile.”

## Quick Start

### CSS Custom Properties

This is a **recommended implementation scaffold**, using measured palette, type, spacing, and component sizes where available. It uses CSS Grid for the observed column arrangements without claiming that the original parent containers use Grid.

The hero rules approximate the supplied portrait positions at the two inspected widths. The texture is a simplified CSS treatment. Supply authorized brand, lettering, portrait, and radial-emblem assets; no asset URLs are invented here. Position lettering by its visible strokes, accounting for transparent margins in the file.

The article model below represents the WORK/JOB cards. Its desktop 268px image slot is visually estimated. Retaining that slot height on mobile is a recommendation because the mobile image bounds were not supplied. Other article categories and member stories need their own media variants.

Expected structure: `.site-header` contains `.brand`, `.entry-link`, and `.menu-toggle`; `.side-nav` is separate. `.hero` contains `.hero-lockup`, `.hero-caption`, five `.hero-portrait` images with `data-portrait` values 1–5, and `.scroll-cue`. Article links contain `.article-media`, `.article-title`, and `.article-meta`. Wrap each `.all-contents` link in `.all-contents-frame`.

```css
:root {
  /* Exact source palette, with descriptive aliases. */
  --color-canvas: #2e2e2b;
  --color-ink: #c8c6be;
  --color-surface: #3b3b37;
  --color-light: #e4e3df;

  /* Recommended divider opacity. */
  --color-rule: rgb(200 198 190 / 18%);

  /* Source families; generic fallbacks are additions. */
  --font-display: 'Shippori Mincho', Cardo, serif;
  --font-english: Cardo, serif;
  --font-body: 'Noto Sans JP', sans-serif;

  --page-gutter: 32px;
  --header-gutter: 32px;
  --card-gap: 16px;
  --card-padding: 16px 16px 24px;
  --text-hero-caption: 32px;
  --text-statement: 64px;
  --text-proposition: 48px;
  --text-section: 20px;
  --text-body: 16px;
  --text-marker: 14px;

  /* Source timing families; applied states below are adaptations. */
  --ease-editorial: cubic-bezier(0.4, 0.4, 0, 1);
  --ease-emphasis: cubic-bezier(1, 0, 0, 1);
  --duration-short: 300ms;
  --duration-emphasis: 600ms;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-body);
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { color: inherit; }

/* Persistence is visually supported; footer visibility needs app logic. */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--header-gutter) var(--header-gutter) 0;
}
.brand { display: block; width: 320px; }
.brand img { width: 100%; height: auto; }
.entry-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 127px;
  height: 38px;
  padding: 10px 24px 10px 28px;
  border: 1px solid var(--color-rule);
  border-radius: 100px;
  font: 16px/1 var(--font-english);
  text-decoration: none;
}
.entry-link::after {
  content: '';
  width: 8px;
  height: 8px;
  flex: none;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.side-nav {
  position: fixed;
  top: 100px;
  right: 32px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  font: 14px/1.1 var(--font-english);
}
.side-nav a { text-decoration: none; }
.menu-toggle { display: none; }

.hero {
  position: relative;
  isolation: isolate;
  min-height: 925px;
}
.hero::before,
.footer-brand-field::before {
  /* Approximation of the texture, not the original artwork. */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgb(200 198 190 / 13%) 0 4px,
    transparent 4px 12px
  );
  mask-image:
    radial-gradient(
      ellipse 37% 48% at 50% var(--texture-center, 44%),
      transparent 65%, #000 100%
    ),
    linear-gradient(#000 78%, transparent 100%);
  mask-composite: intersect;
}
.hero-lockup {
  position: absolute;
  z-index: 2;
  top: 160px;
  left: 50%;
  width: min(57vw, 820px);
  margin: 0;
  transform: translateX(-50%);
}
.hero-lockup img { width: 100%; height: auto; }
.hero-caption {
  position: absolute;
  z-index: 3;
  top: 531px;
  inset-inline: 16px;
  margin: 0;
  text-align: center;
  font: 500 var(--text-hero-caption)/1.5 var(--font-display);
  letter-spacing: -0.03em;
}
.hero-portrait {
  position: absolute;
  z-index: 1;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  object-fit: cover;
  filter: grayscale(1);
}
/* Screenshot-based placements, not recovered source rules. */
[data-portrait='1'] { --x: 61.94%; --y: 0px; --w: 10.9%; --h: 242px; }
[data-portrait='2'] { --x: 0%; --y: 183px; --w: 8.06%; --h: 321px; }
[data-portrait='3'] { --x: 90.76%; --y: 310px; --w: 9.24%; --h: 373px; }
[data-portrait='4'] { --x: 18%; --y: 577px; --w: 11.6%; --h: 244px; }
[data-portrait='5'] { --x: 71.53%; --y: 583px; --w: 10.9%; --h: 314px; }
.scroll-cue {
  position: absolute;
  top: 698px;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 12px;
  transform: translateX(-50%);
  font: 14px/1 var(--font-english);
}
.scroll-mark { width: 80px; height: 80px; }

.introduction {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42%;
  gap: 40px;
  padding: 240px var(--page-gutter) 200px;
}
.introduction-statement {
  padding: 36px 0 0 58px;
  font: 500 var(--text-statement)/1.5 var(--font-display);
}
.introduction-statement p { margin: 0; }
.introduction-copy {
  margin: 0;
  font: 500 20px/2 var(--font-display);
  letter-spacing: 0.05em;
}
.chapter-marker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-inline: var(--page-gutter);
  padding: 32px 18px;
  border-top: 1px solid var(--color-rule);
  font: 400 var(--text-marker)/1 var(--font-english);
  letter-spacing: 0.02em;
}
.chapter-label {
  font: 500 var(--text-section)/1 var(--font-display);
  letter-spacing: -0.03em;
}
.chapter-proposition {
  font: 500 var(--text-proposition)/1.5 var(--font-display);
  letter-spacing: -0.03em;
}
.chapter-copy {
  max-width: 470px;
  font: 400 var(--text-body)/2 var(--font-body);
  letter-spacing: 0.05em;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: var(--card-gap);
  margin-inline: var(--page-gutter);
}
.article-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  min-height: 426px;
  padding: var(--card-padding);
  background: var(--color-surface);
  text-decoration: none;
}
.article-media {
  width: 100%;
  height: 268px;
  object-fit: cover;
  filter: grayscale(1);
}
.article-title {
  margin: 0;
  font: 500 28px/1.5 var(--font-display);
}
.article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  font: 14px/1.5 var(--font-english);
}
.article-tag {
  padding: 2px 10px;
  border: 1px solid currentColor;
  border-radius: 100px;
  font: 12px/1.5 var(--font-body);
}
.all-contents-frame {
  margin-top: 64px;
  padding-inline: var(--page-gutter);
  background: var(--color-ink);
}
.all-contents {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  min-height: 200px;
  padding: 20px;
  border: 1px solid var(--color-ink);
  border-radius: 40px;
  background: var(--color-canvas);
  font: 48px/1.2 var(--font-english);
  text-decoration: none;
}
.arrow-capsule {
  display: grid;
  place-items: center;
  flex: none;
  width: 92px;
  height: 26px;
  border-radius: 100px;
  background: var(--color-ink);
  color: var(--color-canvas);
  font: 26px/1 serif;
}

.recruitment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-inline: var(--page-gutter);
}
.recruitment-card {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-height: 204px;
  padding: 16px;
  text-decoration: none;
}
.recruitment-card p { font: 14px/1.75 var(--font-body); }
.footer-nav { margin-inline: var(--page-gutter); }
.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px;
  border-bottom: 1px solid var(--color-rule);
  font: 16px/1 var(--font-english);
  text-decoration: none;
}
.footer-row:first-child { border-top: 1px solid var(--color-rule); }
.footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin: 80px var(--page-gutter) 0;
  font: 14px/1.5 var(--font-english);
}
.footer-logo { width: min(400px, 85%); }
.footer-brand-field {
  --texture-center: 100%;
  position: relative;
  isolation: isolate;
  padding: 120px var(--page-gutter) 80px;
  text-align: center;
}
.footer-lockup { width: 100%; height: auto; }
.footer-caption { font: 500 28px/1.5 var(--font-display); }

/* Recommended feedback; original hover outcomes were not tested. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 5px;
}
@media (hover: hover) {
  .side-nav a:hover,
  .footer-row:hover { text-decoration: underline; text-underline-offset: 4px; }
}

/* Adaptation breakpoint; the original switch point is unverified. */
@media (max-width: 760px) {
  :root {
    --page-gutter: 24px;
    --header-gutter: 16px;
    --text-hero-caption: 18px;
    --text-statement: 32px;
    --text-proposition: 24px;
    --text-section: 15px;
    --text-body: 14px;
    --text-marker: 13px;
  }
  .brand { width: 200px; }
  .entry-link, .side-nav { display: none; }
  .menu-toggle {
    position: relative;
    display: inline-flex;
    padding: 4px 10px 4px 12px;
    border: 0;
    border-radius: 100px;
    background: transparent;
    font: 13px/1 var(--font-english);
  }
  .menu-toggle::after {
    /* Recommended larger hit area around the compact visual label. */
    content: '';
    position: absolute;
    inset: -12px 0;
  }
  .hero { min-height: 720px; }
  .hero-lockup { top: 270px; width: calc(100% - 48px); }
  .hero-caption { top: 423px; }
  [data-portrait='1'] { --x: 29.49%; --y: 60px; --w: 24.1%; --h: 145px; }
  [data-portrait='2'] { --x: 0%; --y: 380px; --w: 19.23%; --h: 179px; }
  [data-portrait='3'] { --x: 64.62%; --y: 87px; --w: 20%; --h: 186px; }
  [data-portrait='4'] { --x: 51.28%; --y: 509px; --w: 24.1%; --h: 137px; }
  [data-portrait='5'] { --x: 74.1%; --y: 435px; --w: 24.1%; --h: 188px; }
  .scroll-cue { top: 672px; }
  .scroll-mark { width: 40px; height: 40px; }
  .introduction {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 17px;
    padding: 64px 24px 40px;
  }
  .introduction-statement { padding: 0; }
  .introduction-copy { font-size: 15px; letter-spacing: normal; }
  .chapter-marker { padding: 16px 10px; }
  .chapter-copy { line-height: 1.75; }
  .chapter-copy--philosophy { line-height: 2; }
  .article-grid { grid-template-columns: 1fr; margin-inline: 40px; }
  .article-card { min-height: 417px; }
  .article-title { font-size: 24px; }
  .all-contents-frame { margin-top: 40px; }
  .all-contents { min-height: 96px; gap: 16px; border-radius: 24px; font-size: 24px; }
  .arrow-capsule { width: 48px; height: 20px; font-size: 20px; }
  .recruitment-grid { grid-template-columns: 1fr; gap: 8px; }
  .recruitment-card { min-height: 239px; gap: 24px; }
  .recruitment-card p { font-size: 13px; }
  .footer-row + .footer-row { margin-top: 6px; }
  .footer-meta { flex-direction: column; margin-top: 48px; }
  .footer-brand-field { padding-block: 88px 64px; }
  .footer-caption { font-size: 12px; }
}

/* Keep essential content visible if optional motion is added. */
@media (prefers-reduced-motion: reduce) {
  .hero *, .site-header *, .article-card, .all-contents, .footer-row {
    animation: none !important;
    transition: none !important;
  }
}
```

The scaffold styles the closed mobile menu control. Menu-panel behavior, header visibility near the footer, and any optional entrance sequence need separate implementation. Use responsive artwork, such as an appropriate `picture` source, for the footer's one-line and two-line lettering. Font loading and exact image selection are also outside this snippet.

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. This is not evidence that the original website uses Tailwind. Define the custom properties above first.

```css
@theme inline {
  --color-charcoal: var(--color-canvas);
  --color-stone: var(--color-ink);
  --color-panel: var(--color-surface);
  --color-light-stone: var(--color-light);
  --color-divider: var(--color-rule);

  --font-display: 'Shippori Mincho', Cardo, serif;
  --font-english: Cardo, serif;
  --font-body: 'Noto Sans JP', sans-serif;

  --text-caption-hero: var(--text-hero-caption);
  --text-statement: var(--text-statement);
  --text-proposition: var(--text-proposition);
  --text-section-label: var(--text-section);
  --text-chapter-marker: var(--text-marker);

  --spacing-page: var(--page-gutter);
  --spacing-card-gap: var(--card-gap);
  --radius-archive: 40px;
  --radius-pill: 100px;
}
```

## Sources & Evidence

- **Inspected original and final page:** [Coalition Group Recruit](https://recruit.coalition-group.jp/). Both supplied URLs are identical; the reported response status is HTTP 200.
- **Inspection date:** September 12, 2026. The evidence bundle records retrieval at `2026-09-12T13:39:20.844Z`. Individual screenshots do not have separately supplied timestamps.
- **Desktop evidence:** 1440 × 1000 CSS-pixel viewport; supplied hero, WORK/JOB article-region, and footer captures; rendered text, anchors, element rectangles, custom properties, and computed styles.
- **Mobile evidence:** 390 × 844 CSS-pixel viewport; supplied hero and footer captures, plus rendered homepage text and measurements for the intermediate sections.
- **Capture procedure:** the supplied inspection reports document-load, layout/text-stability, finite-animation, and visible-image readiness checks. Perpetual animations were temporarily paused during readiness checks and resumed afterward. Scrolling traversed intermediate positions. These safeguards do not establish semantic completeness or verify every delayed state.
- **Interaction scope:** link destinations and the presence of the MENU button are documented. Menu expansion, pointer hover outcomes, keyboard behavior, form interaction, and linked-page rendering were not exercised in the supplied record.
- **Technical limits:** no complete asset inventory, font-loading trace, full stylesheet, animation timeline, or intermediate-width capture was provided. SharedWorkers and service workers were disabled during the supplied inspection. The CSS starter was not executed or visually tested as part of this reference.

This reference describes the current homepage supported by the supplied original-page evidence. Measurements, visual estimates, and recommended adaptations are identified separately throughout.