baigie Recruitment — Style Reference

A compact recruitment directory with fluorescent yellow wayfinding and a warm photographic record of working life.

Website: recruit.baigie.me Original URL: https://recruit.baigie.me/ Final URL: https://recruit.baigie.me/ Theme: light in the supplied evidence; no theme selector was established. Inspected: September 13, 2026, at 03:29 JST; recorded retrieval timestamp: 2026-09-12T18:29:46.260Z. Viewports: desktop 1440 × 1000 and mobile 390 × 844 CSS pixels. Scope: the current recruitment homepage, including its initial view, desktop navigation, mobile identity bar, employer summary, six-role directory, category links, publishing links, application cards, office gallery, footer, and visible cookie notice. Evidence consists of three desktop captures, two mobile captures, and supplied rendered DOM/computed styles. Linked pages and action outcomes were not inspected.

The page organizes recruitment as an information hub. A persistent desktop sidebar gives visitors several ways into the company, its work, people, workplace, and selection process. The main column places a concise employer summary and practical job directory before category navigation, external reading, three application routes, and a substantial photographic gallery.

Its identity comes from flat white panels on a pale gray canvas, dark warm charcoal, small Japanese sans-serif typography, thin outline icons, and tightly controlled yellow emphasis. Panel spacing is only 8px, while internal padding gives text room to breathe. Blue text identifies ordinary directory links; charcoal and yellow distinguish larger application choices. The photography introduces human expression, plants, wood, and daylight without changing the interface palette.

The current captures show a large pale hero field with a white title and no visible photographic background. Embedded CSS text references a hero background asset, but its painted content and playback behavior were not established. Treat the blank field as an observed capture state, with unresolved media visibility, rather than an intentional empty-hero specification.

How to Read This Reference

Measured values come from supplied computed styles and element bounds. Coordinates refer to the initial layout unless a screenshot position is explicitly discussed.
Derived values are arithmetic relationships between measured bounds, sometimes supported by the visible image arrangement.
Estimated values describe screenshot details whose corresponding computed properties were not supplied, including some borders and image corner radii.
Recommended values and behavior are implementation guidance. They do not establish features of the original page.
Token names are reusable semantic aliases. The supplied source font variable is identified separately.
The CSS Quick Start is an adaptation of the observed proportions, with explicit accessibility improvements. It was not executed or visually tested during this analysis.

Tokens — Colors

Default Palette

Name	Value	Suggested token	Role and evidence
Canvas Gray	`#f0f0f0`	`--color-canvas`	Measured body background and mobile header background
Panel White	`#ffffff`	`--color-surface`	Measured information panels; reversed text on dark actions
Warm Charcoal	`#242422`	`--color-ink`	Measured primary text, sidebar entry fill, and dark application-card fills
Signal Yellow	`#fefa32`	`--color-accent`	Measured active Home navigation background and application-card fill
Directory Blue	`#3c73a9`	`--color-link`	Measured role introduction and recruitment-detail links
Category Mist	`#f7f7f6`	`--color-subtle`	Measured category-link backgrounds
Summary Gray	`#525252`	`--color-secondary`	Measured desktop job descriptions
Category Gray	`#525454`	`--color-category-copy`	Measured category descriptions
Publishing Gray	`#434646`	`--color-channel-copy`	Measured publishing-link descriptions
Utility Gray	`#666666`	`--color-muted`	Measured sidebar application-group caption
Control Gray	`#333333`	`--color-control-text`	Measured cookie rejection label; also present on generic wrappers
Policy Blue	`#0000ee`	`--color-policy-link`	Measured cookie-policy link; separate from Directory Blue
Fine Rule	approximately `#e8e8e8`	`--color-rule`	Estimated light dividers; suggested implementation value, not a measured border color

Yellow has three visible jobs: marking the current navigation item, emphasizing phrases in the employer summary, and drawing attention to the final application card. The summary marker's exact fill was not separately sampled. Reusing #fefa32 for it is a recommended consolidation, supported by the visual similarity rather than a measured equality.

The sidebar entry action remains charcoal even though the larger application card is yellow. Preserve this contextual hierarchy: every application link does not need the same fill.

The supplied custom properties include transparent gradient slots and loading-related colors. Their presence does not demonstrate a visible gradient treatment, loading screen, or selectable theme. The captured content surfaces are visually flat.

Tokens — Typography

Noto Sans JP — Main Interface

Measured declaration: 'Noto Sans JP' on headings, navigation labels, descriptions, role links, and copyright text.
Source variable: --s-font-fc823333: 'Noto Sans JP'.
Observed weights: 300 for copyright, 400 for ordinary copy, 500 for intermediate labels, and 700 for headings.
Tracking: most utility text uses 0.05em; the desktop employer summary and application descriptions use 0.1em.
Character: compact and orderly, with emphasis created by weight and alignment rather than several contrasting type families.

Generic container elements compute to sans-serif, while their visible child text explicitly declares Noto Sans JP. Use the child text measurements when reproducing the typography. The supplied declaration does not independently verify which font file rendered every glyph.

The baigie wordmark is visible as branding. Its lettering should not be assigned an inferred font family or recreated by typing the name in Noto Sans JP.

Type Scale

All values below are measured CSS declarations. A line box can differ slightly from the recorded element height because of layout and rounding.

Role	Desktop size / line height	Mobile size / line height	Weight	Tracking
Hero title	`56px / 78.4px`	`32px / 44.8px`	`700`	Normal
Standard section heading	`19px / 28.5px`	`16px / 24px`	`700`	`0.05em`
Application-card heading	`19px / 19px`	`16px / 16px`	`700`	`0.05em`
Employer-summary paragraph	`15px / 25.5px`	`14px / 23.8px`	`400`	`0.1em` desktop; `0.05em` mobile
Job title	`15px / 15px`	`13px / 13px`	`500`	`0.05em`
Job description	`13px / 13px`	Not displayed	`400`	`0.05em`
Job-directory link	`14px / 14px`	`13px / 13px`	`400`	`0.05em`
Directory column heading	`12px / 12px`	`11px / 11px`	`400`	`0.05em`
Category title	`15px / 21px`	`13px / 18.2px`	`500`	Normal
Category description	`13px / 18.2px`	`13px / 18.2px`	`400`	`0.05em`
Publishing-link title	`16px / 16px`	`14px / 14px`	`500`	Normal
Publishing description	`13px / 19.5px`	`12px / 18px`	`400`	`0.05em`
Application description	`14px / 25.2px`	`14px / 25.2px`	`400`	`0.1em`
Application action phrase	`16px / 16px`	`14px / 14px`	`500`	`0.05em`
Sidebar navigation label	`14px / 14px`	Sidebar absent	`400`	`0.05em`
Sidebar utility caption	`12px / 12px`	Sidebar absent	`400`	`0.05em`
Copyright	`11px / 11px`	`9px / 9px`	`300`	`0.05em`

The hero is the only large typographic gesture. Standard desktop headings are 19px, keeping the practical information prominent without producing an oversized marketing hierarchy.

Cookie Notice Typography

The notice uses a separate typography system:

The desktop policy link computes to Times, 14px, with 24px line height. The surrounding message also appears serif in the screenshot, although its full text style was not separately sampled.
Desktop choices declare ryo-gothic-plusn, followed by Japanese system fallbacks including Hiragino Kaku Gothic Pro and Meiryo; they measure 16px / 24px.
Mobile choices declare a Japanese system stack ending in arial, at 11px / 24px.
The mobile policy link measures 10px / 14px in that system stack.

These are declared stacks, not confirmation that every named font loaded. A new implementation can unify the notice typography, but that would be a recommendation rather than a source-exact reproduction.

Tokens — Spacing & Shapes

Spacing character: narrow separation between modules, larger padding within modules. Useful adaptation scale: 4, 8, 16, 20, 24, 32, 40, 60px.

This is not a universal 8px system. The source includes 6px radii, 19px headings, and component-specific gaps.

Spacing Scale

Use	Desktop	Mobile	Evidence
Main panel separation	`8px`	`8px`	Measured main-container gap and section positions
Main outside right margin	`8px`	`8px` on both sides	Derived from viewport and main bounds
Standard panel horizontal padding	`32px`	`16px`	Measured
Standard panel vertical padding	`24px`	`20px`	Measured on jobs and publishing panels
Heading-to-content separation	`16px`	`16px`	Derived from heading and content bounds
Employer-summary top padding	`20px`	`20px`	Measured
Employer-summary bottom padding	`24px`	`32px`	Measured
Space between summary paragraph boxes	`4px`	`12px`	Derived; distinct from the outer section's declared gap
Category horizontal / vertical gap	`16px / 8px`	One column / `8px`	Derived from link bounds
Publishing icon-to-text gap	`16px`	`16px`	Measured
Publishing item separation	`24px` horizontally	`20px` vertically	Derived
Application-card padding	`32px 32px 40px`	`20px 16px 28px`	Measured
Application-card internal gap	`16px`	`8px`	Measured
Job-link horizontal gap	`24px`	`16px`	Derived from adjacent link bounds
Gallery image gap within paired blocks	`8px`	`4px`	Measured container gap and visible arrangement

Border Radius

Element	Value	Evidence
Sidebar navigation and action rows	`6px`	Measured
Main panels and application cards	`8px`	Measured
Category links	`8px`	Measured
Employer-summary panel	`0 0 8px 8px`	Measured; joins directly to the hero
Cookie choices	`4px`	Measured
Gallery photographs	About `6px` desktop; `4px` mobile	Screenshot estimates

Thin table rules and subtle category/control outlines organize the interface. No general drop-shadow elevation system is apparent. The cookie strip has a faint visual separation at its upper edge; its shadow parameters were not supplied.

Layout Measurements

Element	Desktop `1440 × 1000`	Mobile `390 × 844`
Desktop navigation header	`263 × 1000px`	Not displayed
Active sidebar row	`231 × 36px`, at `x=16`	Not displayed
Mobile identity header	Not displayed	`390 × 60.92px`
Mobile identity link	Not displayed	`200 × 40.92px`, at `x=95, y=10`
Main column	`x=264`, width `1168px`	`x=8`, width `374px`
Main content start	`y=8px`	`y=60.92px`
Hero region	`1168 × 380px`	`374 × 280px`
Hero-title inset	`32px` left, `24px` bottom	`16px` left, `16px` bottom
Employer-summary panel	`1168 × 128.5px`	`374 × 290.17px`
Jobs panel	`1168 × 387.5px`	`374 × 374px`
Directory row pitch	`45px`, derived	`45px`, derived
Category panel	Height `240.88px`	Height `530.44px`
Typical category link	`357.28 × 66.19px`	`342 × 65.38px`
Publishing item	`540 × 72px`	`342 × 79px`
Application card	About `383.95 × 191.38px`	Width `374px`; heights `146.38–152.38px`
Gallery inner region	`1104 × 1382px`	`342 × 1730px`
Square photo size	`270px`, derived	`169px`, derived
Document height	`3082.25px`	`4150.66px`

Components

Desktop Navigation Rail

Role: persistent orientation and direct access to recruitment tasks.

The desktop header occupies a 263px-wide rail at the left edge. It remains in the same viewport position across the supplied scroll captures, consistent with a fixed rail. The exact positioning declaration was not included in the evidence.

Its anatomy is:

The baigie emblem and wordmark, followed by the small label 採用情報.
Seven 36px-high navigation rows: ホーム, 1ページでわかるベイジ, 会社, 仕事, 社員, 職場, and 選考.
A muted application-group caption.
Three compact actions: outlined 募集要項, outlined カジュアル面談, and charcoal エントリー.
Small corporate-site and privacy links near the bottom.

The active Home row begins at x=16, y=71, has 9px 20px padding, and uses the measured yellow fill. Other navigation rows are transparent. Thin outline icons occupy a consistent left column, while text starts around x=70. Their visible forms include a house, buildings, a monitor, a person card, and a signpost. No icon-library identity was established.

The action rows begin at y=389, 429, and 469, leaving 4px between their 36px boxes. This creates a denser action cluster beneath the more spacious group caption.

The cookie strip overlays the lower part of the rail in the captures and obscures the privacy link. Keeping these utilities reachable above overlays is a recommended improvement.

Mobile Identity Bar

Role: compact branding at the beginning of the page.

The desktop navigation is absent at 390px. A gray header with 10px padding contains a centered, 200px-wide linked brand lockup. Its measured height is approximately 61px, after which the main column begins immediately.

No opened mobile navigation state was supplied. The lower gallery capture does not show the identity bar, so sticky behavior should not be assumed. A separate unlabeled 66 × 40px button is recorded near the lower-right viewport area, overlapping the cookie-notice region. Its purpose and visible icon cannot be established from this evidence; it should not be labeled as a menu or back-to-top control without further inspection.

Hero and Employer Summary

Role: identify the page and summarize the employer before detailed browsing.

The hero is 380px high on desktop and 280px high on mobile. The title ベイジの採用情報 sits at its lower-left corner, with measured white text and a 1.4 line-height ratio. The media background is not visible in either current initial capture. Although rendered CSS text contains a background-image reference, it does not establish the visible image, timing, or reason for the blank appearance.

Directly below, a white summary panel joins the hero without the normal 8px module gap. Its top corners are square; its bottom corners have an 8px radius.

Three bullet paragraphs provide:

The current company tenure and employee count, plus remote/office flexibility.
Its recruitment and BtoB-oriented web-production positioning.
Its stated personnel-development theme.

The desktop paragraphs fit on single lines. Each becomes three lines in the measured mobile layout. Pale bullet dots sit outside the text column, and bold phrases receive a flat yellow marker band across the lower part of the lettering. For example, フルリモート・出社どちらもOK wraps naturally on mobile while retaining its emphasis.

Recommended implementation: use a real list, semantic emphasis, and an inline marker treatment that survives wrapping. Give the hero a readable text fallback when media is unavailable. The captured white-on-pale state should not become an intentional accessibility target.

Job Directory

Role: compare open roles and reach the appropriate information quickly.

A white rounded panel begins with 現在6職種で募集中. Below it, a restrained table-like layout uses three desktop columns: 職種, 概要, and 関連リンク. Thin horizontal rules separate the six rows; there are no filled column headers, alternating row colors, or individual job cards.

The role column occupies approximately 200px of content width. Descriptions have measured 400px text boxes. Related links start near x=934–937, with small row-specific variations. Role names use medium weight, summaries use smaller gray text, and action links use Directory Blue.

The link sets depend on the role:

Role	Desktop links	Mobile links
`プロデューサー`	Introduction, requirements, casual meeting, entry	Introduction, requirements
`採用コンサルタント`	Requirements, entry	Requirements
`プロジェクトマネージャー`	Introduction, requirements, entry	Introduction, requirements
`コンテンツディレクター`	Introduction, requirements, casual meeting, entry	Introduction, requirements
`ウェブデザイナー`	Introduction, requirements, casual meeting, entry	Introduction, requirements
`ウェブエンジニア`	Introduction, requirements, entry	Introduction, requirements

At 390px, descriptions and row-level meeting/entry links are not displayed. The layout retains two aligned columns, with approximately 170px for role text, a 16px separation, and 156px for links. It does not simply squeeze the entire desktop table into the phone width.

Visible labels and destination slugs are not always identical concepts. For example, the producer introduction points to /work/occupation/consultant, and its requirements point to /recruitment/consultant. Preserve the actual content mapping rather than generating destinations from labels.

The extracted directory content includes paragraph and anchor elements; semantic HTML table markup was not established. A real table with associated headers is recommended for an adaptation. Keep separate links inside each row instead of turning the whole row into one ambiguous target.

Category Directory

Role: expose the information architecture with explanatory labels.

The カテゴリー panel contains six pale links in a three-column, two-row desktop arrangement. Each link combines a small outline folder symbol, a medium-weight title, and a muted one-line description. The entire category item is an anchor.

Cards measure about 357 × 66px on desktop. Their text begins 52px from the card's left edge, leaving a consistent icon zone. The title and description are separated by approximately 3px.

On mobile, all six links form one vertical list inside a 342px-wide content area. Most measure about 65px high. The company card grows to approximately 84px because its description wraps onto two lines. Retain content-driven height; a rigid uniform height would clip that observed text.

The categories lead to /about, /company, /work, /interview, /workplace, and /selection. Their explanatory copy is central to the component: these are navigation choices with context, not decorative feature badges.

Publishing Links

Role: offer continuing evidence of the company's thinking and working methods.

The ベイジの情報発信 panel contains two substantial anchors: ベイジの日報 and ベイジの公式 X. Each has a charcoal square icon tile, a title with a small external-link symbol, and a short gray description.

On desktop, two 540px-wide items sit side by side with a 24px gap. The icon tile is visually 72px square, consistent with the measured item height and the text offset of 72 + 16px. On mobile, the items stack with 20px between them; the icon width derives to 60px from the 60 + 16px text offset.

The descriptions change from 13px / 19.5px to 12px / 18px. The source destinations are https://baigie.me/nippo/ and https://x.com/baigie_sns; their destination pages were not inspected.

Three Application Cards

Role: separate reviewing conditions, exploratory conversation, and applying.

Three full-card anchors form a horizontal strip on desktop. Their structure is consistent: an outline icon beside a bold heading, a two-line explanatory paragraph, and an underlined action phrase. Each card has an 8px radius and about 384px width.

Card	Fill / text	Visible action phrase	Destination
`募集要項`	Charcoal / white	`募集要項を見る`	`/recruitment`
`カジュアル面談`	Charcoal / white	`面談を申し込む`	`/casual`
`応募はこちらから`	Yellow / charcoal	`ベイジにエントリーする`	`/entry`

The final card's color supplies emphasis without making it larger. Underlined action text reinforces the affordance within the larger anchor; it should not become a nested button inside that anchor.

On mobile, the cards stack at the full 374px panel width. Padding reduces to 20px 16px 28px, and internal gaps reduce to 8px. Descriptions and action phrases begin at x=50, 26px beyond the panel's normal inner left edge, aligning beneath the heading area rather than beneath its icon.

The application paragraph states a response expectation of two to three business days. This is displayed source copy, not a verified service outcome or a reusable promise for another organization.

Office Gallery

Role: make the workplace tangible after the practical recruitment routes.

The gallery occupies a white panel headed オフィスギャラリー. Photographs are square, closely spaced, lightly rounded, and presented without visible captions or text overlays. The desktop arrangement has four columns and five rows, consistent with 20 photographs and the measured 1104 × 1382px inner bounds.

The mobile arrangement has an important ordering detail. Its lower capture shows the desktop's right-hand pair of columns as five consecutive rows: shared-monitor work and a meeting; a seated colleague and note-taking; a sofa conversation and sticky notes; a desk scene and a smiling colleague; then a portrait and a two-person conversation.

This supports an inferred structure of two paired-column blocks: side by side on desktop, stacked on mobile. The measured geometry agrees:

Desktop: each block is (1104 − 8) / 2 = 548px wide; each photograph is (548 − 8) / 2 = 270px square.
Mobile: each block is 342px wide; each photograph is (342 − 4) / 2 = 169px square.
Five mobile rows per block occupy 5 × 169 + 4 × 4 = 861px.
Two blocks plus an 8px separation occupy 861 × 2 + 8 = 1730px, matching the supplied gallery height.

This internal grouping is derived, not directly exposed by a complete child-element inventory. It provides a stronger implementation model than a single flat grid that interleaves every desktop row on mobile.

No image-click, lightbox, zoom, or carousel behavior was demonstrated.

Cookie Notice and Footer

Role: present the visible cookie choice while retaining the page underneath.

A white strip sits across the viewport bottom in all current captures, covering both the main column and desktop rail. Its visible band is approximately 72px high at both supplied viewports.

Desktop content is centered across roughly 1200px. The message sits left, followed by two 180 × 48px choices separated by 8px. 同意しない has a white fill and light outline; 同意する has charcoal fill and white text.

Mobile keeps the message and both choices on the same horizontal strip. Buttons measure 70 × 44px, while the small message wraps at the left. This is a compact layout with notably small text. Both controls appear as anchors with empty destinations in the supplied extraction; their event handling and persistence were not tested.

The document ends with a small centered copyright line. Its font reduces from 11px to 9px on mobile. The notice overlaps page content in the captures, so an adaptation should reserve enough bottom clearance for the actual banner height.

Tokens — Motion & Interaction

Measured Transition Declarations

Element or treatment	Supplied value	What can be concluded
Most navigation, panels, and text elements	`0.3s cubic-bezier(0.4, 0.4, 0, 1)` with additional gradient-property transitions	A common transition duration/easing is declared; triggers and endpoints were not sampled
Some application action phrases	`0.16s cubic-bezier(0.4, 0.4, 0, 1)`	Shorter transition declarations exist on meeting and entry phrases
Body background	`background 0.5s cubic-bezier(0.4, 0.4, 0, 1)`	Background changes can transition; this does not establish a theme-switching feature
Cookie-choice text color	`0.1s cubic-bezier(0.215, 0.61, 0.355, 1)`	A separate notice-control timing is declared
Cookie-choice background	`background-color 0.3s`	A background transition is declared; its resulting state was not exercised
Sampled element animations	`none`	No named animation was reported for those sampled elements

Observed Interaction Boundaries

Scrolling reveals the subsequent panels and gallery while the desktop rail and cookie strip remain in their viewport positions.
Category items, publishing items, and application cards have anchor destinations in the rendered evidence.
Job rows contain multiple independently linked actions.
The yellow Home state is visible; selection changes on other pages were not inspected.
Hover appearance, focus appearance, cookie dismissal, application forms, and navigation transitions were not exercised.
Hero autoplay, playback controls, and any image rotation remain unverified.

The collection process reports at least five seconds of initial observation and waits for document load, layout stability, eligible finite motion, and visible image decoding within stated limits. It also temporarily pauses perpetual animations during readiness checks. These procedures do not prove that every background asset, delayed interaction, or media frame was captured.

Recommended motion: retain short color and border transitions using the measured easing, applied only to relevant properties. Keep the directory and photo gallery immediately readable. Do not introduce scroll reveals, parallax, image zoom, or autoplay as though they were established source behavior.

Surfaces

Layer	Appearance	Purpose
Page canvas	Pale gray	Connects the rail and the narrow channels between panels
Main information panels	Flat white, 8px corners	Groups jobs, categories, publishing links, and photographs
Category links	Slightly gray-white fill, subtle outline	Creates a nested navigation surface without strong elevation
Active navigation	Yellow with charcoal label and icon	Marks the current page
Secondary application choices	Charcoal with white content	Makes the action strip distinct from reference information
Final application choice	Yellow with charcoal content	Supplies the strongest conversion emphasis
Consent strip	Full-width white overlay	Keeps the cookie message and choices visible during scrolling

Use background changes, fine rules, and consistent insets to separate levels. Broad shadows, translucent glass, and glossy fills would change the captured character.

Imagery

The visible imagery uses natural workplace photography. It alternates wide office context with tighter scenes of people discussing, writing, working at monitors, and meeting remotely. Plants, pale walls, wood tables, upholstered seating, and daylight give the gallery warmth. Navy clothing, light blue shirts, and dark monitors provide visual contrast within the photographs.

The subjects are shown in work-related situations: whiteboard discussion, screen sharing, note-taking, a remote meeting display, focused individual work, and informal conversation. Preserve that variety when commissioning or selecting replacements. No identities or individual roles should be inferred from appearance.

Square framing creates a consistent rhythm. The images appear cropped to fill those squares; object-fit: cover is the recommended implementation equivalent, not a supplied computed property. Choose focal positions per asset so faces, hands, and important work objects remain understandable.

The thin navigation and folder icons are quieter than the photographs. Publishing tiles reverse small white symbols onto charcoal. Keep their strokes restrained and their optical size consistent; no specific icon package was verified.

Observed Asset References

Asset group	Established evidence	Limitation
Brand lockup	Visible baigie emblem, wordmark, and recruitment label; measured mobile link bounds	Complete asset URL and wordmark font were not supplied
Hero background	A background-image reference appears in embedded rendered CSS text	URL is truncated; painted imagery and playback were not established
Office photographs	Clearly visible in desktop and mobile captures	Complete filenames, native dimensions, and individual image metadata were not supplied
Navigation and utility symbols	Visible outline icons; some embedded asset references appear in the DOM text	Several references are truncated; no library identity was established

Do not assemble asset URLs from incomplete fragments. Reuse authorized brand and photographic assets when available, or supply clearly designated replacements for a new implementation.

Layout & Responsive Behavior

The desktop page pairs a viewport-height navigation rail with a broad document column. At 1440px, the main column begins at x=264 and stops 8px before the right edge. Most information begins another 32px inside its panel, establishing the recurring x=296 alignment.

On mobile, the rail disappears and the centered identity bar precedes the content. The main column uses 8px outer margins, and panel padding reduces to 16px. This establishes a recurring x=24 alignment. The page remains a vertically scrolling document.

Observed Responsive Changes

Component	Desktop	Mobile
Identity and navigation	Persistent left rail	Centered linked brand bar; opened navigation unverified
Hero	380px high, 56px title	280px high, 32px title
Summary	Three single-line paragraphs	Three multiline paragraphs with wider vertical separation
Jobs	Role, summary, and up to four links	Role and one or two information links
Categories	Three columns, two rows	One column, six rows
Publishing links	Two side-by-side items	Two stacked items
Application routes	Three equal-width cards	Three stacked cards
Gallery	Two paired blocks side by side	Paired blocks stacked; two visible columns
Consent choices	Two 180px-wide controls	Two 70px-wide controls beside the message

Only the two supplied viewport sizes were inspected. The source excerpt includes a 1280px media query for line-break handling, but it does not establish the breakpoint for every layout transformation. Intermediate widths, landscape phones, text zoom, and safe-area behavior remain unverified.

The taller mobile document reflects content wrapping and stacking. It is not a uniform scaled-down desktop composition: application descriptions remain 14px, category descriptions remain 13px, and the directory actively removes secondary content.

Do’s and Don’ts

Do

Preserve the recruitment-hub structure: practical roles, category browsing, further reading, application routes, and workplace photographs.
Keep the main measured palette: pale gray, white, #242422, #fefa32, and #3c73a9.
Use 8px separation between panels and larger internal padding to organize dense information.
Keep the desktop rail compact, with a yellow current-page row and a distinct application group.
Use Noto Sans JP declarations with clear weight differences and restrained heading sizes.
Preserve role-specific link availability and verified destination mappings.
Reduce the directory's visible columns and actions on mobile while retaining access through the larger cards.
Let category cards grow when descriptions wrap.
Preserve the gallery's apparent paired-block order when matching the supplied mobile composition.
Use warm, varied workplace photography with consistent square framing.
Distinguish the observed blank hero state from a recommended readable media fallback.

Don't

Don't collapse the homepage into a single-purpose application funnel that loses its category structure.
Don't replace every job row with a large, independently elevated card.
Don't make all actions yellow; retain the difference between directory links, sidebar actions, and application cards.
Don't turn summary emphasis into rounded badges that interrupt Japanese line wrapping.
Don't infer hero photography, autoplay, or playback controls from an incomplete background reference.
Don't describe generic transition declarations as verified hover animations.
Don't invent a mobile drawer, gallery lightbox, or back-to-top behavior.
Don't recreate the logo using an assumed font or improvised emblem.
Don't add decorative gradients, oversized pills, or pervasive shadows.
Don't permanently obscure footer utilities or focused controls behind a fixed notice.

Recommended Implementation Additions

These are improvements for an adaptation, not verified original-site features:

Give the linked brand lockup an accessible name and decorative icons empty alternatives or aria-hidden treatment.
Mark the current navigation link with aria-current='page' and provide a skip link to the main content.
Implement the job directory with semantic headers and maintain meaningful associations when the summary column is hidden.
Include the job name in the accessible context of repeated links such as 募集要項.
Keep compact text while providing adequately sized interaction areas. The measured 13–14px link boxes are much smaller than the surrounding 45px row pitch.
Preserve visible keyboard focus on white, yellow, and charcoal surfaces.
Add a readable hero fallback. Switch to white overlay text only when a verified media treatment provides sufficient contrast.
Give cookie actions real button semantics, implement both choices, and reserve space based on the rendered banner height. Recheck clearance when text wraps or the viewport changes.
Avoid the captured 9–10px text sizes for essential information when accessibility requirements call for larger text.
Provide appropriate image alternatives, explicit dimensions, and responsive image sources. Load lower gallery images progressively without changing the grid geometry.
Respect reduced-motion preferences if transitions or media are added. Provide an explicit pause mechanism for any subsequently implemented perpetual media.
Generate the displayed role count from the same data as the directory, and maintain date-sensitive company copy separately from layout tokens.

Agent Prompt Guide

Quick Color Reference

Canvas: #f0f0f0.
Main panels: #ffffff.
Primary text and dark actions: #242422.
Current navigation and final application card: #fefa32.
Ordinary job links: #3c73a9.
Nested category surfaces: #f7f7f6.
Rules: very light neutral gray; #e8e8e8 is an estimated adaptation value.
Photography stays in natural full color.

Overall Prompt

“Create a Japanese recruitment information hub inspired by the supplied current baigie homepage. Use a pale gray canvas, flat white panels with 8px corners, 8px inter-panel gaps, compact Noto Sans JP typography, charcoal text, and a fluorescent yellow accent. On desktop, provide a roughly 263px persistent navigation rail and a broad content column with 32px panel insets. Start with a lower-left page title and a three-bullet employer summary, followed by a compact six-role directory with gray descriptions and blue links. Continue with six explanatory category links, two publishing links, three application cards in charcoal/charcoal/yellow, and a square workplace-photo gallery. At 390px, use a centered identity bar, 8px outer margins, 16px panel insets, a two-column job directory, stacked information cards, and two-column photo blocks. The supplied hero media is unresolved: implement a readable fallback and do not invent autoplay or a specific background image.”

Example Component Prompts

Navigation rail: “Design a pale gray 263px desktop rail with a compact brand lockup, seven thin-icon navigation rows, and 14px Japanese labels. Give only the current Home row a #fefa32 fill and 6px corners. Below a muted caption, add two outlined recruitment actions and one charcoal entry action. Keep utilities reachable above any fixed overlay.”
Job directory: “Build a white 8px-radius recruitment panel with a small bold heading and six rows separated by faint rules. Use medium-weight role names, 13px gray summaries, and 14px blue links. Preserve different link sets per role. On mobile, remove summaries and row-level meeting/entry links, retaining aligned role and information-link columns.”
Employer summary: “Create three Japanese bullet paragraphs on a white surface that joins the hero above it. Use 15px type with 1.7 line height on desktop and 14px on mobile. Highlight selected bold phrases with a narrow yellow marker band that follows wrapped text. Keep the top corners square and bottom corners rounded to 8px.”
Application strip: “Create three equal desktop anchor cards for requirements, casual conversation, and applying. Use charcoal with white text for the first two and yellow with charcoal text for the third. Each card contains a small outline icon, a 19px heading, a short description, and an underlined action phrase. Stack them on mobile and reduce padding without shrinking the description below 14px.”
Office gallery: “Arrange workplace photographs as two paired-column blocks, each containing five rows of square images. Place the blocks side by side on desktop for four columns. Stack the blocks on mobile while preserving their internal order. Use 8px desktop gaps, 4px mobile gaps within blocks, and 8px between blocks. Keep natural color and subtle corners; add no caption overlays or assumed lightbox behavior.”

Quick Start

CSS Custom Properties

The following adaptation uses conventional pixel/rem sizing and semantic class names. Measured colors and endpoint dimensions are retained where practical. Border colors and image radii are estimates. Breakpoints, focus indicators, readable hero fallback, wrapping safeguards, and overlay clearance are recommendations.

Expected structure: .recruit-shell contains .sidebar, .mobile-header, .content, and .site-footer. Within .content, group the hero and summary in .intro-group; use panels for the directory and informational sections. The gallery contains two .gallery-pair children, each holding ten images in the inferred paired order. Place .consent at the viewport bottom. Real assets, job data, and consent handlers must be supplied separately.

:root {
  /* Measured interface colors */
  --color-canvas: #f0f0f0;
  --color-surface: #ffffff;
  --color-ink: #242422;
  --color-accent: #fefa32;
  --color-link: #3c73a9;
  --color-subtle: #f7f7f6;
  --color-secondary: #525252;
  --color-category-copy: #525454;
  --color-channel-copy: #434646;
  --color-muted: #666666;
  --color-policy-link: #0000ee;

  /* Estimated border colors */
  --color-rule: #e8e8e8;
  --color-control-border: #d0d0d4;

  --font-ui: 'Noto Sans JP', sans-serif;
  --font-consent: 'Hiragino Kaku Gothic Pro', Meiryo, Arial, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --text-hero: 56px;
  --text-heading: 19px;
  --text-summary: 15px;
  --text-role: 15px;
  --text-link: 14px;
  --text-small: 13px;
  --text-caption: 12px;
  --tracking-ui: 0.05em;
  --tracking-prose: 0.1em;

  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;

  --rail-width: 263px;
  --content-offset: 264px;
  --panel-x: 32px;
  --panel-y: 24px;
  --radius-panel: 8px;
  --radius-nav: 6px;
  --radius-control: 4px;
  --radius-photo: 6px;
  --hero-height: 380px;
  --ease-ui: cubic-bezier(0.4, 0.4, 0, 1);
  --motion-ui: 300ms;
  --motion-text: 160ms;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }

.recruit-shell {
  /* Update this reserve to the actual notice height in application code. */
  --consent-reserve: 96px;
  min-height: 100dvh;
  padding-bottom: var(--consent-reserve);
  color: var(--color-ink);
  background: var(--color-canvas);
  font-family: var(--font-ui);
  font-weight: var(--weight-regular);
}

.recruit-shell[data-consent-visible='false'] {
  --consent-reserve: 0px;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  width: var(--rail-width);
  padding: 16px 16px max(60px, calc(var(--consent-reserve) + 12px));
  overflow-y: auto;
  background: var(--color-canvas);
}

.brand-lockup { display: block; width: 171px; margin-left: 16px; }
.primary-nav { display: grid; margin-top: 20px; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 36px;
  padding: 9px 20px;
  border-radius: var(--radius-nav);
  color: var(--color-ink);
  font-size: 14px;
  line-height: 1;
  letter-spacing: var(--tracking-ui);
  text-decoration: none;
  transition: background-color var(--motion-ui) var(--ease-ui);
}

.nav-link[aria-current='page'] { background: var(--color-accent); }
.nav-icon { flex: 0 0 18px; width: 18px; height: 18px; }
.sidebar-actions { display: grid; gap: 4px; margin-top: 40px; }
.sidebar-caption { margin: 0 20px 10px; color: var(--color-muted); font-size: 12px; }
.nav-link--outlined { border: 1px solid var(--color-control-border); }
.nav-link--entry { color: white; background: var(--color-ink); }
.sidebar-utilities { display: grid; gap: 14px; margin-top: auto; padding: 32px 20px 0; }
.sidebar-utilities a { color: inherit; font-size: 12px; text-decoration: none; }
.mobile-header { display: none; }

.content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin-left: var(--content-offset);
  padding: 8px 8px 0 0;
}

.intro-group { min-width: 0; }

.hero {
  display: flex;
  align-items: flex-end;
  min-height: var(--hero-height);
  padding: 24px var(--panel-x);
  border-radius: var(--radius-panel);
  background: var(--color-canvas);
  /* Recommended readable fallback; the captured source title is white. */
  color: var(--color-ink);
}

.hero h1 {
  margin: 0;
  font-size: var(--text-hero);
  font-weight: var(--weight-bold);
  line-height: 1.4;
}

.summary {
  padding: 20px var(--panel-x) 24px;
  border-radius: 0 0 8px 8px;
  background: var(--color-surface);
}

.summary-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  font-size: var(--text-summary);
  line-height: 1.7;
  letter-spacing: var(--tracking-prose);
}

.summary-list li::marker { color: #cccccc; }
.summary-list p { margin: 0; }

.marker {
  color: inherit;
  font-weight: var(--weight-bold);
  /* Recommended hard-edged approximation of the visible marker band. */
  background: linear-gradient(transparent 55%, var(--color-accent) 55%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.panel {
  min-width: 0;
  padding: var(--panel-y) var(--panel-x);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.section-title {
  margin: 0 0 16px;
  font-size: var(--text-heading);
  font-weight: var(--weight-bold);
  line-height: 1.5;
  letter-spacing: var(--tracking-ui);
}

.jobs-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.jobs-table .role-col { width: 208px; }
.jobs-table .overview-col { width: 430px; }
.jobs-table th, .jobs-table td { text-align: left; vertical-align: middle; }
.jobs-table thead th { padding: 0 0 12px; font-size: var(--text-caption); font-weight: 400; }
.jobs-table tr { border-bottom: 1px solid var(--color-rule); }
.jobs-table tbody tr { height: 45px; }
.jobs-table tbody th, .jobs-table tbody td { padding-block: 12px; }
.jobs-table th[scope='row'] { padding-right: 8px; font-size: var(--text-role); font-weight: 500; line-height: 1.3; }
.jobs-table .job-overview { padding-right: 30px; color: var(--color-secondary); font-size: 13px; line-height: 1.4; }
.job-links { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.job-links a { color: var(--color-link); font-size: var(--text-link); line-height: 1.3; letter-spacing: 0.05em; text-decoration: none; }

.category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; }
.category-card { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 12px 16px; border: 1px solid var(--color-rule); border-radius: 8px; color: inherit; background: var(--color-subtle); text-decoration: none; }
.category-icon { flex: 0 0 20px; width: 20px; height: 20px; }
.category-title { display: block; font-size: 15px; font-weight: 500; line-height: 1.4; }
.category-copy { display: block; margin-top: 3px; color: var(--color-category-copy); font-size: 13px; line-height: 1.4; letter-spacing: 0.05em; }

.channel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.channel-link { display: flex; align-items: flex-start; gap: 16px; min-width: 0; color: inherit; text-decoration: none; }
.channel-icon { display: grid; place-items: center; flex: 0 0 72px; width: 72px; height: 72px; border-radius: 4px; color: white; background: var(--color-ink); }
.channel-title { margin: 0 0 10px; font-size: 16px; font-weight: 500; line-height: 1.3; }
.channel-copy { margin: 0; color: var(--color-channel-copy); font-size: 13px; line-height: 1.5; letter-spacing: 0.05em; }

.cta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cta-card { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 32px 32px 40px; border-radius: 8px; color: white; background: var(--color-ink); text-decoration: none; }
.cta-card--primary { color: var(--color-ink); background: var(--color-accent); }
.cta-heading { display: flex; align-items: center; gap: 12px; margin: 0; font-size: var(--text-heading); font-weight: 700; line-height: 1.3; letter-spacing: 0.05em; }
.cta-icon { flex: 0 0 20px; width: 20px; height: 20px; }
.cta-copy { margin: 0; font-size: 14px; line-height: 1.8; letter-spacing: 0.1em; }
.cta-label { font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: 0.05em; text-decoration: underline; text-underline-offset: 3px; }

.gallery-panel { padding-bottom: 32px; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gallery-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gallery img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-photo); }

.site-footer { margin-left: var(--content-offset); padding: 20px 20px 28px; text-align: center; font-size: 11px; font-weight: 300; line-height: 1; letter-spacing: 0.05em; }

.consent { position: fixed; inset: auto 0 0; z-index: 50; padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--color-rule); color: var(--color-ink); background: white; }
.consent[hidden] { display: none; }
.consent-inner { display: grid; grid-template-columns: minmax(0, 1fr) 180px 180px; align-items: center; gap: 8px; max-width: 1200px; margin-inline: auto; }
.consent-message { margin: 0; font: 14px/24px Times, serif; }
.consent-message a { color: var(--color-policy-link); text-decoration: underline; }
.consent-choice { min-height: 48px; padding: 12px 0; border: 1px solid var(--color-rule); border-radius: 4px; color: #333333; background: white; font: 400 16px/24px var(--font-consent); cursor: pointer; }
.consent-choice--accept { border-color: var(--color-ink); color: white; background: var(--color-ink); }

/* Recommended intermediate layout; not a verified source breakpoint. */
@media (max-width: 1279px) {
  .jobs-table .overview-col,
  .jobs-table .job-overview { display: none; }
}

/* Recommended compact breakpoint; measured endpoints are 1440px and 390px. */
@media (max-width: 1023px) {
  :root {
    --panel-x: 16px;
    --panel-y: 20px;
    --hero-height: 280px;
    --text-hero: 32px;
    --text-heading: 16px;
    --text-summary: 14px;
    --text-role: 13px;
    --text-link: 13px;
    --text-caption: 11px;
    --radius-photo: 4px;
  }

  .sidebar { display: none; }
  .mobile-header { display: flex; justify-content: center; padding: 10px; }
  .mobile-header a { display: block; width: 200px; }
  .mobile-header img { display: block; width: 100%; height: auto; }
  .content { margin-left: 0; padding: 0 8px; }
  .hero { padding: 16px; }
  .summary { padding-bottom: 32px; }
  .summary-list { gap: 12px; padding-left: 14px; letter-spacing: 0.05em; }

  .jobs-table .role-col { width: 54.386%; }
  .jobs-table th[scope='row'] { padding-right: 16px; overflow-wrap: anywhere; }
  .job-links { gap: 12px 16px; }
  .job-links .job-extra { display: none; }

  .category-grid, .channel-grid, .cta-grid { grid-template-columns: minmax(0, 1fr); }
  .category-title { font-size: 13px; }
  .channel-grid { gap: 20px; }
  .channel-icon { flex-basis: 60px; width: 60px; height: 60px; }
  .channel-title { font-size: 14px; }
  .channel-copy { font-size: 12px; }

  .cta-card { gap: 8px; padding: 20px 16px 28px; }
  .cta-heading { gap: 10px; }
  .cta-copy, .cta-label { margin-left: 26px; }
  .cta-label { font-size: 14px; }

  .gallery { grid-template-columns: minmax(0, 1fr); }
  .gallery-pair { gap: 4px; }
  .gallery-panel { padding-bottom: 20px; }
  .site-footer { margin-left: 0; padding: 16px 20px; font-size: 9px; }
}

@media (max-width: 599px) {
  .consent { padding: 14px 24px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .consent-inner { grid-template-columns: minmax(0, 1fr) 70px 70px; gap: 6px; }
  .consent-message { font: 10px/14px var(--font-consent); }
  .consent-choice { min-height: 44px; padding: 9px 4px; font-size: 11px; }
}

/* Recommended extra-small fallback: prioritize readable, reachable choices. */
@media (max-width: 359px) {
  .consent-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .consent-message { grid-column: 1 / -1; font-size: 12px; line-height: 1.5; }
  .consent-choice { font-size: 12px; }
}

/* Recommended interaction states; source hover endpoints were not supplied. */
@media (hover: hover) {
  .job-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .category-card:hover { border-color: var(--color-ink); }
}

.recruit-shell :focus-visible,
.consent :focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}

.cta-card:focus-visible,
.nav-link--entry:focus-visible {
  outline-color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  .recruit-shell *, .consent * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

The directory line heights in this starter are slightly more forgiving than the measured single-line declarations, allowing longer content to wrap. The footer and notice retain compact reference sizing; enlarge them when adapting essential text. The notice reserve must follow its actual height, particularly below 360px or when text is enlarged. CSS alone does not implement consent decisions.

Tailwind v4 Token Mapping

Optional mapping for a project already using Tailwind v4. This does not imply that the original site uses Tailwind. Define the custom properties above first; the responsive heading and inset aliases then follow those properties.

@theme inline {
  --color-canvas: #f0f0f0;
  --color-surface: #ffffff;
  --color-ink: #242422;
  --color-accent: #fefa32;
  --color-directory-link: #3c73a9;
  --color-subtle: #f7f7f6;
  --color-secondary: #525252;
  --color-rule: #e8e8e8;

  --font-interface: 'Noto Sans JP', sans-serif;
  --text-page-title: var(--text-hero);
  --text-section: var(--text-heading);
  --text-summary-copy: var(--text-summary);
  --text-job-title: var(--text-role);
  --text-directory-action: var(--text-link);

  --spacing-panel-x: var(--panel-x);
  --spacing-panel-y: var(--panel-y);
  --spacing-module-gap: 8px;
  --spacing-navigation-rail: 263px;

  --radius-panel: 8px;
  --radius-navigation: 6px;
  --radius-control: 4px;
  --ease-interface: cubic-bezier(0.4, 0.4, 0, 1);
}

Sources & Evidence

Inspected original and final page: baigie recruitment homepage. The supplied browser observation records HTTP 200 with no URL change.
Recorded capture session: 2026-09-12T18:29:46.260Z, equivalent to September 13, 2026, 03:29:46 JST. Desktop viewport: 1440 × 1000; mobile viewport: 390 × 844 CSS pixels. Individual screenshot timestamps and exact scroll offsets were not provided.
Visual evidence: three current desktop captures and two current mobile captures showing the opening content, application strip, and workplace gallery. These establish visible composition, photography, persistent desktop navigation, and the bottom cookie overlay.
Rendered DOM and computed styles: supplied text, anchor destinations, element bounds, colors, font declarations, padding, gaps, corner radii, transitions, and sampled animation values. These are the authority for measurements labeled as measured.
Page identity: the inspected title names 株式会社ベイジ; the footer displays © 2026 baigie Inc.; the homepage links to https://baigie.me/. No production-role claim is derived from those identity elements.
Inspection limitations: no additional browsing or commands were performed for this analysis. Linked pages, hover/focus states, cookie outcomes, form submissions, mobile navigation, gallery activation, and hero media behavior were not tested. Some embedded asset references are truncated. Service workers and SharedWorkers were disabled during the supplied inspection, which may limit conclusions about behavior dependent on them.

This reference describes the current homepage evidence at the recorded viewports. Derived gallery grouping, estimated visual details, and recommended implementation behavior are explicitly separated from measured source values.