Tabio / I'M SOCKS MANIA!! vol.25 — Style Reference

A narrow fashion scrapbook surrounded by oversized portraits, weekday colors, and playful cutout figures.

Original URL: tabio.com/jp/im_socks_mania_vol25/ Final URL: tabio.com/jp/im_socks_mania_vol25/ Theme: warm cream opening, followed by seven coordinated weekday palettes. Inspected: September 13, 2026, 02:14:40 JST; supplied retrieval timestamp: 2026-09-12T17:14:40.757Z. Viewports: desktop 1440 × 1000 and mobile 390 × 844, in CSS pixels. Scope: supplied current-page screenshots and rendered DOM covering the opening compositions, introduction, seven outfit chapters, gallery states, product annotations, desktop surroundings, and store/social footer. The supplied response status is 200, with no redirect.

This is a fashion editorial feature within Tabio's online store. Seven outfits connect socks and shorts to the days of a summer week. Large English lettering and cutout models provide the graphic identity; small Japanese paragraphs explain the styling; compact product links connect the editorial photographs to shopping.

The central reading column stays 390px wide on both inspected viewports. Desktop space becomes an extension of the art direction: a large tinted portrait occupies the left side, a persistent title identifies the feature, and seven miniature weekday posters form a rail on the right. The far-right area remains largely empty. On mobile, the same reading column fills the viewport and the surrounding desktop composition disappears.

The defining relationships are scale contrast, alternating color pairs, and photography that keeps the socks visible. Huge rotated words coexist with 11px editorial copy. Rectangular posters and caption strips coexist with generously rounded photographs. Purchase controls remain small dark pills attached to the relevant image.

How to Read This Reference

Measured values come from the supplied rendered element rectangles, computed styles, and custom properties. Both desktop and mobile measurements are available.
Visual estimates describe geometry visible in the screenshots where the relevant element was not included in the DOM sample. These include photograph radii, miniature poster dimensions, and title-art proportions.
Palette values for weekday text and caption strips are exact computed colors. Assigning those colors to the large surrounding fields is a visual correspondence; the sampled body remains cream and the sampled sections are transparent.
Implementation aliases are descriptive names introduced here. Original custom properties are identified separately.
Recommendations, including the Quick Start, are adaptation guidance. Breakpoints, accessible target sizes, and replacement implementation techniques are not presented as original source rules.
The evidence contains settled screenshots rather than an interaction recording. Different visible states do not establish autoplay timing, gesture support, or transition mechanics.

Tokens — Colors

Default Palette

Name	Value	Alias / source	Role and evidence
Warm Cream	`#F5F4E7`	`--paper` / source `--color-cream`	Measured body background at both viewports; visible opening canvas
Charcoal Ink	`#393641`	`--ink` / source `--color-black`	Measured body text, product labels, and BUY backgrounds; visually used for the opening title
White	`#FFFFFF`	`--white` / source `--color-white`	Measured BUY text and footer background; visible product-label strips and reversed desktop identity

The source token named --color-black is a slightly purple charcoal, not pure black. That distinction softens the cream opening and unifies labels, icons, and buttons.

Chapter Palette Pairs

Every color below is independently present in computed chapter text or caption-strip styles. The field assignments follow the visible chapter artwork and surrounding color treatment.

Day	Field assignment, visually associated	Accent, measured in paragraph text	Caption-strip treatment, measured
MON / 01	Mint `#BAE3DE`	Coral `#F29A88`	Coral background, mint lettering
TUE / 02	Peach `#FADAC4`	Vermilion `#E9430F`	Vermilion background, peach lettering
WED / 03	Lavender `#8E9ACD`	Peach `#FADAC4`	Peach background, lavender lettering
THU / 04	Vermilion `#E9430F`	Lemon `#F7EF5C`	Lemon background, vermilion lettering
FRI / 05	Sky `#8BCAE0`	Lemon `#F7EF5C`	Lemon background, sky lettering
SAT / 06	Lemon `#F7EF5C`	Sky `#8BCAE0`	Sky background, lemon lettering
SUN / 07	Blush `#F7C2BE`	Blue `#3D73BA`	Blue background, blush lettering

Thursday's captured desktop surroundings are saturated orange-red; Sunday's are pale pink. Their enlarged left portraits receive matching color treatment. The exact painting layer and tint opacity were not supplied. Do not interpret transparent section backgrounds in the DOM as evidence that the visible chapters remain cream.

The small weekday posters are artwork with their own printed colors and photographs. For example, the Thursday miniature appears more orange than the surrounding red field. Recoloring every pixel of the miniature with a single CSS accent would lose this distinction.

Declared Values Without a Verified Visible Role

Source token	Value	Interpretation
`--color-red`	`#EA0A0A`	Declared, but not the measured Thursday text/ribbon red
`--swiper-theme-color`	`#007AFF`	Declared slider-related default; not proof that visible pagination uses this color
`--swiper-navigation-size`	`44px`	Declared control size; no corresponding arrow geometry was supplied

Empty image-link wrappers also report browser-default blue. That computed link color should not become an additional design accent when the rendered content is a graphic.

Tokens — Typography

Japanese Editorial Copy

Computed family: dnp-shuei-gothic-kin-std, sans-serif, also declared through --font-dnp-shuei.

The sampled body, introduction, chapter paragraphs, vertical captions, and product-label containers use this stack. Regular copy is compact and relatively tightly tracked. Vertical captions become heavier and more widely tracked, while the two-line introduction heading gains emphasis through weight and generous leading.

Computed family information establishes the requested stack. It does not independently verify which installed or downloaded face supplied every glyph.

English Utility Labels

BUY family: indivisible-variable, sans-serif, declared through --font-indivisible.

The purchase labels use 11px, weight 700, with a 17.6px computed line height. Their short uppercase wording and dark capsule make them recognizable without competing with the photographs.

--font-sofia: 'sofia-pro', sans-serif and --font-notosans: 'Noto Sans JP', sans-serif are also declared. Their use on a specific visible element is not established by the supplied sample.

Artwork Lettering

The giant SOCKS AND SHORTS composition uses extremely condensed, heavy English lettering, rotated into tall lanes and interwoven with model cutouts. The left desktop identity uses a more compact stacked arrangement. Weekday headings are broad, bold, and paired with a small style number.

The exact display font and asset format are unknown. The sampled H1, H2, and H3 wrappers contain no extracted text, so their inherited font sizes do not measure the lettering inside the visible graphics. Preserve the artwork when available; identify any substitute typeface as an adaptation.

Type Scale

Role	Measured size	Weight	Line height	Tracking
Body baseline	`11px`	`400`	`17.6px`	Normal
Introduction heading	`19px`	`700`	`38px`	Normal
Introduction paragraph	`12px`	`400`	`21.8182px`	`-0.36px`, equivalent to `-0.03em`
Chapter paragraph	`11px`	`400`	`20.9px`	`-0.88px`, equivalent to `-0.08em`
Vertical caption	`13px`	`600`	`13px`	`1.3px`, equivalent to `0.1em`
Product-label container	`11px`	`400`	`20.9px`	Normal
BUY	`11px`	`700`	`17.6px`	Normal
Footer container	`11px`	`400`	`17.6px`	Normal

Product-name lettering appears heavier inside its white strips, but the nested text styling was not sampled. The copyright is visually smaller than the footer's inherited 11px; approximately 9px is a screenshot estimate, not a computed measurement.

The root element reports 11px at both viewports. The Quick Start uses explicit pixel values rather than assuming the original numeric rem values can be copied into a conventional 16px root.

Tokens — Spacing & Shapes

Density: small annotations and tightly composed graphic elements separated by substantial photographic and chapter spacing.

There is no evidence of a universal spacing grid. The layout combines specific editorial widths with repeated 60px chapter insets.

Spacing Scale

Use	Value	Evidence
Gap between vertical caption strips	`5px`	Derived from measured 33px strips at 38px intervals
Caption-strip padding	`10px`	Computed on all sampled strips
Left caption-group inset	`15px`	Measured relative to the reading column
Introduction heading-to-body gap	`15px`	Derived from measured rectangles
Cover-to-introduction heading gap	`18px`	Header ends at y=800; heading starts at y=818
Introduction-to-first-section gap	`20px`	Derived from paragraph and section bounds
Footer vertical padding	`22px`	Computed
Introduction side inset	`30px`	Measured: 330px within a 390px column
Product-photo side inset	Approximately `37.5px`	Visual estimate for a 315px-wide image
Chapter-copy side inset	`41.5px`	Measured: 307px within a 390px column
Article-to-weekday-rail gap	Approximately `50px`	Screenshot estimate
Chapter top padding	`60px`	Computed for all seven sections
Final chapter bottom padding	`60px`	Computed

Border Radius

Element	Treatment	Evidence
Opening poster and weekday miniatures	Square corners	Visual
Vertical caption strips	`0`	Computed
Outfit and sock-detail photographs	Approximately `48–50px`	Visual estimate
Product-name strips	Square, thin dark outline	Visual; outline approximately 1px
BUY pills	Fully rounded	Computed radius: 1440px desktop and 844px mobile
Pagination dots	Circular	Visual

The oversized BUY radius is simply sufficient to produce a capsule. A reusable implementation can use 9999px; reproducing the viewport-sized radius is unnecessary.

Layout Measurements

Element	Desktop: 1440 × 1000	Mobile: 390 × 844
Reading column	x=`525`, width=`390px`	x=`0`, width=`390px`
Opening header	`390 × 800px`	`390 × 800px`
Introduction heading	x=`555`, y=`818`, width=`330px`	x=`30`, y=`818`, width=`330px`
Introduction body	y=`909`, height≈`109.06px`	Same
Chapter-copy width	`307px`	`307px`
First section start	y≈`1038.06`	Same
Seven section heights	Approximately `1231–1312px` each	Same measured heights
Final section end	y≈`9891.69`	Same
Footer element	x=`525`, width=`390px`, height≈`120.31px`	x=`0`, same width and height
Document height	`10113px`	`10113px`

The matching vertical measurements are strong evidence that desktop retains the mobile-sized editorial layout rather than enlarging or rearranging it.

Components

Desktop Surrounding Composition

Role: extend the editorial identity into the space around the narrow article.

The left photographic region fills approximately 525px, ending exactly at the article's left edge in the desktop captures. The opening uses a washed-out collage of fashion imagery and large lettering. Thursday and Sunday use enlarged portraits with the corresponding red or pink tint.

A stacked SOCKS AND SHORTS identity remains around x≈165, y≈395, with a visual width near 195px. It is charcoal over the cream opening and white over the colored chapter states. Smaller lines below identify the summer-week concept and Tabio.

The identity and weekday rail retain their viewport positions across the supplied desktop scroll states. This is consistent with fixed or sticky presentation; their actual positioning declarations were not included. A fixed decorative layer is a reasonable reconstruction technique, not a measured source rule.

Masthead

Role: compact series and brand identification above the opening artwork.

Three marks occupy the top of the 390px column:

Mark	Position relative to column	Sampled wrapper size
`I'M SOCKS MANIA!!`	x=`32`, y=`20`	`119 × 22px`
Japanese series descriptor	x=`174`, y=`25`	`193 × 16.5px`
`by Tabio`	x=`309`, y≈`52`	`51 × 20.59px` heading wrapper

The brand link points to the Japanese online-store home. The masthead has no visible enclosing bar, divider, or card surface. Its tiny marks leave the graphic cover in control of the hierarchy.

Opening Cover

Role: introduce the seven-look concept as a fashion poster.

The mobile opening capture shows a dense composition of rotated SOCKS and SHORTS, the smaller connecting word AND, seven cutout outfit figures, a three-line summer-week subtitle, and a small volume marker. Figures overlap the spaces around the letters, creating an assembled magazine-cover effect.

The desktop opening capture shows another cover state: a bright yellow Saturday poster, a pale-blue SAT identifier, a model leaning forward, and STYLE 06. Its colored rectangle is approximately 390 × 560px, beginning near y=160; the cutout figure extends beyond its bottom edge.

Both are observed current-page compositions. The evidence does not establish whether their difference comes from timing, responsive behavior, or another state mechanism. Do not assign an autoplay interval or desktop-only rule to either composition.

Introduction

Role: explain the editorial premise before the weekday sequence.

The heading quotes the feature's subject: 靴下×ショートパンツ followed by 夏の一週間コーデ. It is centered in a 330px text region, set at 19px/38px, weight 700.

The following paragraph is also centered, at 12px/21.8182px, with slight negative tracking. Its manual line structure forms a narrow, calm block beneath the busy cover. The first outfit section begins 20px after this paragraph's measured bottom.

Weekday Preview Rail

Role: provide a persistent visual index to the seven looks on desktop.

Seven miniature portrait posters are stacked from MON / 01 to SUN / 07. At the inspected desktop size, each is approximately 64 × 93px, with approximately 20px between posters. The rail starts around x=965 and y=113, about 50px beyond the article's right edge.

Each preview repeats its chapter's model, oversized day lettering, number, and color pairing. The selected Thursday and Sunday previews are visibly tilted in their respective captures. Their transform values were not sampled.

The rail is absent from the supplied 390px mobile captures. No replacement menu is visible there. Click destinations, keyboard behavior, and whether the rail uses anchors or scripted scrolling remain unverified.

Recommended anatomy: a labeled navigation element containing seven links, each with a meaningful day/style name and a selected state. Preserve the tiny poster artwork while making the link semantics explicit.

Weekday Chapter Masthead

Role: establish the next outfit and reinforce the chapter palette.

The Thursday capture shows the clearest example: a very large THU, a thin horizontal rule, a small uppercase editorial subtitle including MODE AND CLASSIC, and a right-aligned STYLE 04 counter. The day identifier and supporting typography use the chapter's lemon accent against the red field.

Treat this as a compact editorial poster heading. The large day label, rule, subtitle, and number form one composition rather than four unrelated UI widgets. Its display font and exact type sizes are not established by the sampled text elements.

Outfit Gallery

Role: show the styling from multiple views before focusing on the socks.

The visible Thursday outfit photograph is approximately 350 × 486px, centered with roughly 20px side gutters. The studio background is light gray-white, with natural cast shadows. Large rounded corners soften the portrait rectangle without adding a border or shadow around the component.

Five small pagination dots are visible in the supplied Thursday and Sunday gallery states. Their visual diameter is approximately 6px, with roughly 4px gaps. Different Sunday captures show different selected dots and image crops. This establishes multiple gallery states, but does not identify the input that changed them.

Keep the caption overlay outside the image's clipping boundary. The photograph should be rounded; the vertical strips must remain free to protrude beyond it.

Vertical Caption Strips

Role: deliver short styling commentary with the rhythm of Japanese magazine annotations.

Two separate filled strips sit beside or overlap an outfit photograph. Each strip is 33px wide, produced by 13px text plus 10px padding on each side. Text is weight 600, with 13px line height and 1.3px letter spacing. Heights vary with the wording, from approximately 134px to 192px in the sample.

The strips are separated by 5px, share a top alignment, and retain unequal lower edges. Their square corners and solid fills contrast with the rounded photography.

Placement	Chapters	Measured x positions within the 390px column
Left group	MON, THU, FRI	`15px` and `53px`
Right group	TUE, WED, SAT, SUN	`319px` and `357px`

Thursday's strips overlap the upper-left area of the photograph. Sunday's overlap its lower-right area and extend slightly beyond the rounded image. Use vertical Japanese layout for the captions; rotating an entire horizontal sentence would not reproduce the visible character orientation.

Editorial Paragraph

Role: explain the outfit and the relevant sock material, color, or construction.

The paragraph occupies a centered 307px region. It uses the chapter accent at 11px/20.9px, with -0.88px tracking. Most entries occupy three or four lines in the measured layout.

The visual effect is a small magazine caption with generous surrounding space. It should remain associated with the preceding look, rather than becoming a boxed description or a large marketing paragraph.

Product Detail Photograph and Annotation

Role: connect the styling story to the specific socks.

A second, closer photograph isolates the lower legs, socks, and shoes. The Sunday image is approximately 315 × 320px, centered with about 37.5px side margins and approximately 50px corner radii. Its natural photographic background remains visible.

The annotation is positioned over the photograph near the relevant leg. It contains two individually sized white product-name strips with thin charcoal outlines, followed by a dark BUY capsule. A fine leader line visually points toward the product. The leader-line implementation was not supplied.

Label placement varies by image. Sunday places the label toward the upper-right, approximately 66% across and 19% down its photo; these percentages are visual reconstruction estimates. Do not apply one universal pin position to all seven products.

BUY measurements: 65 × approximately 23.59px, white text on #393641, 11px/17.6px, weight 700, and 2px 10px computed padding. Its animation can affect captured geometry, so a 24px static height is a practical approximation.

Availability State

Tuesday and Saturday explicitly show （※着用商品完売） in the editorial text. Their product names remain present, but the supplied link inventory contains no BUY link for either look. The other five chapters have product links.

Preserve this distinction when reusing the component: an editorial image and product label can remain visible after the featured item becomes unavailable. Availability here describes the supplied page text; the product pages themselves were not inspected.

Store Exit and Social Footer

Role: return the reader to the broader store after the final look.

A white region begins immediately after the Sunday chapter. The ONLINE STORE graphic appears as a centered dark pill, approximately 162 × 21px visually. Its sampled inline anchor is only 11px high, which does not describe the full graphic's visible height.

The store-link region and footer together occupy approximately 221px vertically. The footer element itself is 390 × 120.31px, with 22px computed top and bottom padding.

Four dark social marks are centered below: TikTok, Instagram, X, and YouTube. Their measured link boxes are 16.5 × 18.25px, separated by 22px. A small ©tabio corporation line closes the page. The white footer remains confined to the reading column on desktop while the surrounding page stays in the Sunday color state.

Tokens — Motion & Interaction

Treatment	Evidence	Verified value or limitation
BUY loop	Computed animation	`2s ease-out infinite poyopoyo`
BUY color changes	Computed transition	`color 0.3s, background 0.3s`; destination colors were not sampled
Opening composition changes	Different supplied opening states	Sequence, trigger, and timing unknown
Gallery state changes	Different photographs and active dots	Autoplay, drag, swipe, arrow behavior, and duration unknown
Weekday selection	Tilted THU and SUN previews	Exact angle, scale, trigger, and transition unknown
Surrounding color and portrait changes	Thursday and Sunday desktop captures	Association with the visible chapter is observed; threshold and interpolation are unknown
Persistent desktop identity and rail	Stable placement across scroll captures	Fixed/sticky mechanism not provided
Product and store navigation	Rendered href values	Link destinations observed; navigation results not tested

The poyopoyo keyframe body was not included. Its name does not establish a bounce amplitude, translation distance, or scale sequence. The Quick Start therefore preserves the measured color-transition duration but does not invent that loop.

The supplied browser process waited for layout and image readiness and temporarily paused perpetual animations during readiness checks. This supports settled-state inspection, not a complete motion specification. No reduced-motion behavior, focus state, hover endpoint, or scroll animation duration was independently verified.

Surfaces

Layer	Appearance	Purpose
Opening canvas	Flat warm cream	Quiet background for dark cover lettering and cutout figures
Active chapter surroundings	Broad coordinated color field	Extend each outfit's palette across desktop space
Left desktop photograph	Enlarged image under a strong tint	Add scale and atmosphere without overpowering the persistent identity
Reading column	No general enclosing border or shadow	Preserve the feeling of a continuous editorial strip
Outfit and detail photographs	Light studio backgrounds, large rounded corners	Carry the clothing and material detail
Vertical captions	Square, solid accent strips	Create directional emphasis around photography
Product labels	White strips with thin dark outlines	Maintain label legibility over photographs
Purchase and store actions	Dark capsules with white lettering	Consistent compact commerce affordance
Closing region	White, limited to the central column	Give the store and social exit a clean finish

There is no visible general elevation system. Separation comes from color, photographic framing, scale, and overlap. Soft card shadows, glass blur, and ornamental gradients would add a different visual language.

Imagery

The imagery combines two complementary treatments: cutout fashion figures on graphic posters, and full photographic scenes against a light studio wall and floor.

Cutouts have expressive poses and visible accessories: bags, hats, glasses, shoes, and socks. Their placement around the huge title makes the cover feel composed by hand. Keep their silhouettes clear and avoid cropping away the shoes or lower legs, which carry the feature's subject.

The outfit photographs preserve cast shadows and clothing texture. The closer product images show mesh, ribbing, lace-like knitting, embroidery, and the relationship between the sock and shoe. Smooth photographic rendering is appropriate; pixelated image rendering would be unrelated to the observed treatment.

Desktop background portraits are much larger and quieter than the central images. Color tinting reduces their detail so white identity lettering remains readable. The exact blend mode and opacity are unknown.

Observed Asset References

No image src inventory, native dimensions, or asset filenames were supplied. The following identifies observed artwork without inventing paths.

Artwork	Evidence location	Use
Rotated title and seven cutout figures	Mobile opening capture	Main cover composition
Yellow Saturday poster with leaning model	Desktop opening capture	Another observed cover state
Enlarged collage and chapter portraits	Desktop captures	Left surrounding artwork
Seven small weekday posters	Desktop captures	Persistent visual index
Rounded full-outfit photographs	Thursday and Sunday captures	Gallery imagery
Sock-and-shoe close-ups	Desktop and mobile Sunday captures	Product detail
Series, Tabio, store, and social marks	Opening and footer captures	Brand and navigation graphics

Use authorized artwork or suitably licensed replacements. CSS can reproduce the layout and annotation system; it cannot reproduce the specific models, photographs, or custom title composition by itself.

Observed Link References

These are hrefs extracted from the original page, not separately inspected destinations.

Location	Observed destination
MON BUY	Product 011132954, color 52
WED BUY	Product 011132300, color 62
THU BUY	Product 011170163, color 12
FRI BUY	Product 081140018, color 42
SUN BUY	Product 011132806, color 01
Masthead and ONLINE STORE	Tabio Japanese online store

The color query parameters belong to the observed destinations. Preserve them when linking the corresponding featured variant.

Layout & Responsive Behavior

Observed Desktop Layout

At 1440px wide, the article is centered in the entire viewport:

(1440 − 390) / 2 = 525px

It is not centered between the left artwork and the right navigation. Those surrounding elements are positioned around an already centered reading column. The right rail starts approximately 50px after the article and leaves about 410px of open space beyond the previews.

The large left photograph and persistent identity balance the tiny rail asymmetrically. This deliberate imbalance is part of the design; equal-width sidebars would change its character.

Observed Mobile Layout

At 390px wide, the article starts at x=0 and occupies the full viewport. The header remains 800px tall, text keeps the same sizes and widths, and chapter positions match desktop. The visible opening ends near the bottom of the first mobile viewport, with the introduction heading just entering view.

The desktop background composition and weekday rail are absent. The final white store/social region spans the full mobile width. The page remains a long scrolling document rather than an application shell with internal scrolling panels.

Unverified Ranges and Recommended Rules

Only the two specified viewports were inspected. The exact breakpoint, behavior below 390px, tablet composition, short desktop layout, and safe-area handling are unknown.

For a new implementation:

Use width: min(100%, 390px) for the reading column.
Preserve measured geometry at 390px, while allowing text and image widths to shrink below that size.
Introduce the desktop surroundings only when they fit without overlapping the article. The Quick Start uses 1000px as a recommended breakpoint.
A seven-item rail is approximately 771px tall. Hide or adapt it on short screens; the example requires 820px height before showing it.
Let paragraphs determine chapter height. Do not hardcode the measured 10,113px document height.
Keep product pins relative to their photographs and test them with translated labels and text zoom.

Do’s and Don’ts

Do

Keep the article at 390px on the inspected desktop scale and center it in the viewport.
Treat desktop margins as part of the art direction: large left portrait, persistent identity, small right previews, and open far-right space.
Preserve the seven coordinated field/accent pairs.
Combine huge condensed English title artwork with compact Japanese editorial text.
Keep the vertical captions as two separate square strips with unequal lengths.
Retain rounded outfit and product photographs while leaving poster artwork square.
Keep socks, shoes, and lower legs visible in image crops.
Position product labels according to each photograph's composition.
Preserve the difference between linked products and the two explicitly sold-out looks.
Reuse the same charcoal for labels, commerce controls, and footer icons.

Don’t

Don't replace the editorial sequence with a generic product-card grid.
Don't stretch the central photographs across the entire desktop viewport.
Don't give every component the same rounded-card container.
Don't turn the small BUY annotations into full-width primary banners.
Don't substitute pure black for the measured charcoal.
Don't use the declared generic red or slider blue as substitutes for the measured weekday palette.
Don't infer a display font from empty heading wrappers.
Don't crop away the featured socks to make every photograph share a fashionable aspect ratio.
Don't claim autoplay, swipe gestures, parallax, or smooth scrolling without additional evidence.
Don't invent unavailable asset paths, production credits, or animation keyframes.

Recommended Implementation Additions

These are improvements for a new implementation, not verified features of the original page.

Give weekday links accessible names such as “Thursday, style 04,” and expose the current chapter with aria-current.
Provide a semantic heading for the graphic cover and useful alternatives for outfit photographs. Decorative duplicate portraits and background cutouts can use empty alternatives.
Give each BUY link a product-specific accessible name, while retaining the short visible label.
Increase effective touch targets around compact purchase controls. For dense pagination and social controls, add spacing or separate controls rather than creating overlapping hit areas.
Provide keyboard-operable gallery controls and a clear selected state. Small visual dots alone should not be the only practical input.
Respect reduced motion and allow any continuous button animation or automatic gallery movement to stop.
Check chapter text contrast, particularly pale accent pairs, and consider a larger body size with less negative tracking for a readability-focused adaptation.
Supply intrinsic image dimensions to prevent layout shifts; prioritize opening imagery and defer lower-page images where appropriate.
Retain visible availability wording and avoid leaving an apparently actionable purchase control on an unavailable item.

Agent Prompt Guide

Quick Color Reference

Opening paper: #F5F4E7; charcoal identity and controls: #393641.
MON: mint #BAE3DE with coral #F29A88.
TUE: peach #FADAC4 with vermilion #E9430F.
WED: lavender #8E9ACD with peach #FADAC4.
THU: vermilion #E9430F with lemon #F7EF5C.
FRI: sky #8BCAE0 with lemon #F7EF5C.
SAT: lemon #F7EF5C with sky #8BCAE0.
SUN: blush #F7C2BE with blue #3D73BA.
Product labels and closing surface: white; purchase capsules: charcoal with white text.

Overall Prompt

“Create a Japanese fashion editorial feature presenting seven summer outfits built around socks and shorts. Keep a 390px reading column centered on desktop and full-width at a 390px mobile viewport. Open with a cream magazine-cover composition containing huge rotated condensed English lettering and overlapping cutout outfit figures. Follow with seven weekday chapters using coordinated color pairs, large day identifiers, rounded studio photographs, two narrow vertical Japanese caption strips, compact editorial paragraphs, and sock-detail images with small outlined product labels and charcoal BUY pills. On desktop, add a large tinted portrait and persistent title to the left, seven miniature weekday posters to the right, and generous open space beyond them. End with a white store and social footer. Preserve supplied artwork; label unverified motion and responsive choices as implementation decisions.”

Example Component Prompts

Cover: “Compose a 390px-wide, approximately 800px-tall cream fashion cover. Place tiny series and brand marks at the top, huge dark rotated SOCKS AND SHORTS lettering through the center, and seven full-body cutout figures in the surrounding gaps. Keep shoes and socks visible. Use authorized lettering artwork rather than assigning an unverified source font.”
Thursday chapter: “Use an orange-red field with lemon typography. Group a large THU identifier, fine rule, short editorial subtitle, and STYLE 04 number above a rounded studio portrait. Overlay two separate lemon strips with red vertical Japanese copy near the upper-left edge. Follow with a narrow paragraph and a sock-detail photograph.”
Product annotation: “On a rounded close-up photograph of socks and shoes, place two small white product-name strips with thin charcoal outlines near the featured leg. Add a 65px-wide charcoal BUY capsule and a fine leader line. Position the annotation for this image, keeping the sock material unobstructed.”
Desktop framing: “Center the unchanged 390px article in a wide viewport. Fill the left margin with a large tinted portrait and a persistent stacked feature title. Place seven approximately 64 × 93px weekday posters 50px to the right of the article. Leave the remaining right margin open. Tilt the active preview using an explicitly chosen adaptation value.”
Closing region: “Finish the pink Sunday chapter with a white central-column region. Center a small dark ONLINE STORE pill, then a widely spaced row of four compact social marks and a tiny copyright line. Use no card shadow or decorative divider.”

Quick Start

CSS Custom Properties

This is a reusable adaptation, not recovered source CSS. It preserves measured widths, typography, caption geometry, and palette values. Photograph radii, some image spacing, the desktop breakpoint, and the selected-preview angle are estimates or recommendations.

Suggested structure: .socks-feature contains the decorative .desktop-backdrop, .desktop-identity, a main.reading-column, and nav.week-nav. The reading column contains .cover, .intro, seven .look[data-day] sections, .store-exit, and .feature-footer. Each look contains its masthead artwork, .look-gallery, .look-copy, and .product-photo.

The example gives each chapter an explicit background as a resilient adaptation. The sampled original sections are transparent. Setting data-active-day on the outer feature extends the selected palette into the desktop surroundings; selection logic is not included. Original image assets, gallery behavior, and the unavailable poyopoyo keyframes must be supplied separately.

:root {
  /* Exact colors from supplied computed styles */
  --paper: #f5f4e7;
  --ink: #393641;
  --white: #ffffff;
  --mint: #bae3de;
  --coral: #f29a88;
  --peach: #fadac4;
  --vermilion: #e9430f;
  --lavender: #8e9acd;
  --lemon: #f7ef5c;
  --sky: #8bcae0;
  --blush: #f7c2be;
  --blue: #3d73ba;

  /* Observed font stacks; font files are not bundled */
  --font-editorial: 'dnp-shuei-gothic-kin-std', sans-serif;
  --font-action: 'indivisible-variable', sans-serif;

  --reading-width: 390px;
  --intro-inset: 30px;
  --copy-inset: 41.5px;
  --chapter-space: 60px;
  --caption-width: 33px;
  --caption-gap: 5px;

  /* Visual estimates and practical equivalents */
  --photo-radius: 50px;
  --pill-radius: 9999px;
  --preview-width: 64px;
  --preview-height: 93px;
  --preview-gap: 20px;
  --preview-offset: 50px;
}

* { box-sizing: border-box; }
body { margin: 0; }

.socks-feature {
  --canvas: var(--paper);
  --surround-ink: var(--ink);
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  color: var(--ink);
  background: var(--canvas);
  font: 400 11px/1.6 var(--font-editorial);
}

/* Palette mapping: field assignments follow the visual evidence. */
:where([data-day='mon'], [data-active-day='mon']) {
  --day-bg: var(--mint);
  --day-accent: var(--coral);
}
:where([data-day='tue'], [data-active-day='tue']) {
  --day-bg: var(--peach);
  --day-accent: var(--vermilion);
}
:where([data-day='wed'], [data-active-day='wed']) {
  --day-bg: var(--lavender);
  --day-accent: var(--peach);
}
:where([data-day='thu'], [data-active-day='thu']) {
  --day-bg: var(--vermilion);
  --day-accent: var(--lemon);
}
:where([data-day='fri'], [data-active-day='fri']) {
  --day-bg: var(--sky);
  --day-accent: var(--lemon);
}
:where([data-day='sat'], [data-active-day='sat']) {
  --day-bg: var(--lemon);
  --day-accent: var(--sky);
}
:where([data-day='sun'], [data-active-day='sun']) {
  --day-bg: var(--blush);
  --day-accent: var(--blue);
}

.socks-feature[data-active-day] {
  --canvas: var(--day-bg);
  --surround-ink: var(--white);
}

.reading-column {
  position: relative;
  z-index: 1;
  width: min(100%, var(--reading-width));
  margin-inline: auto;
}

.cover {
  height: 800px;
  background: var(--paper);
}

.masthead {
  position: relative;
  height: 80px;
}

/* Place supplied brand graphics inside these wrappers. */
.masthead-series {
  position: absolute;
  top: 20px;
  left: 8.205%;
  width: 30.513%;
}
.masthead-descriptor {
  position: absolute;
  top: 25px;
  left: 44.615%;
  width: 49.487%;
}
.masthead-brand {
  position: absolute;
  top: 52px;
  left: 79.231%;
  width: 13.077%;
}
.masthead img { display: block; width: 100%; height: auto; }

.cover-art {
  display: block;
  width: 100%;
  height: 720px;
  object-fit: contain;
}

.intro {
  width: calc(100% - 2 * var(--intro-inset));
  margin: 18px auto 20px;
  text-align: center;
}
.intro-heading {
  margin: 0 0 15px;
  font-size: 19px;
  font-weight: 700;
  line-height: 38px;
}
.intro-copy {
  margin: 0;
  font-size: 12px;
  line-height: 1.81818;
  letter-spacing: -0.03em;
}

.look {
  padding-top: var(--chapter-space);
  color: var(--day-accent);
  background: var(--day-bg);
}
.look:last-of-type { padding-bottom: var(--chapter-space); }
.look-masthead-art {
  display: block;
  width: calc(100% - 40px);
  height: auto;
  margin-inline: auto;
}

.look-gallery { position: relative; margin: 0; }
.look-photo {
  display: block;
  width: calc(100% - 40px);
  height: auto;
  margin-inline: auto;
  border-radius: var(--photo-radius);
}

/* The gallery wrapper stays unclipped so captions can protrude. */
.caption-strips {
  position: absolute;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: var(--caption-gap);
}
.caption-strips[data-side='left'] { left: 15px; top: -10px; }
.caption-strips[data-side='right'] { right: 0; bottom: -8px; }
.caption-strip {
  margin: 0;
  padding: 10px;
  width: var(--caption-width);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  color: var(--day-bg);
  background: var(--day-accent);
  font-size: 13px;
  font-weight: 600;
  line-height: 13px;
  letter-spacing: 0.1em;
}

/* Visual dot geometry; add separate accessible gallery controls. */
.gallery-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 14px 0 0;
}
.gallery-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--white);
}
.gallery-dot.is-active { background: var(--day-accent); }
.gallery-controls button { min-width: 44px; min-height: 44px; }

.look-copy {
  width: calc(100% - 2 * var(--copy-inset));
  margin: 34px auto 60px;
  font-size: 11px;
  line-height: 1.9;
  letter-spacing: -0.08em;
}

.product-photo {
  position: relative;
  width: calc(100% - 75px);
  margin: 0 auto;
}
.product-photo > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--photo-radius);
}

/* Sunday-like defaults; override the pin for each photograph. */
.product-pin {
  position: absolute;
  left: var(--pin-x, 66%);
  top: var(--pin-y, 19%);
  color: var(--ink);
}
.product-name { margin: 0 0 2px; font-size: 11px; }
.product-name span {
  display: table;
  margin-bottom: 2px;
  padding: 0 7px;
  border: 1px solid var(--ink);
  background: var(--white);
  line-height: 1.25;
}
.buy {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 24px;
  padding: 2px 10px;
  border-radius: var(--pill-radius);
  color: var(--white);
  background: var(--ink);
  font: 700 11px/17.6px var(--font-action);
  text-decoration: none;
  transition: color 300ms, background 300ms;
}

/* Recommended larger hit area without changing the visible pill. */
.buy::after { content: ''; position: absolute; inset: -10px 0; }

.store-exit { padding: 40px 0; background: var(--white); }
.store-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 162px;
  min-height: 21px;
  margin-inline: auto;
  border-radius: var(--pill-radius);
  color: var(--white);
  background: var(--ink);
  font: 700 12px/1 var(--font-action);
  text-decoration: none;
}
.feature-footer {
  padding: 22px 0;
  color: var(--ink);
  background: var(--white);
  text-align: center;
}
.social-links {
  display: flex;
  justify-content: center;
  gap: 22px;
  padding-top: 22px;
}
.social-links a { display: block; width: 16.5px; height: 18.25px; }
.social-links img,
.social-links svg { display: block; width: 100%; height: 100%; }
.copyright { margin: 22px 0 0; font-size: 9px; line-height: 1.6; }

.desktop-backdrop,
.desktop-identity,
.week-nav { display: none; }

/* Recommended breakpoint; the original breakpoint is unknown. */
@media (min-width: 1000px) {
  .desktop-backdrop {
    display: block;
    position: fixed;
    inset: 0 auto 0 0;
    width: calc((100vw - var(--reading-width)) / 2);
    pointer-events: none;
    background: var(--canvas);
  }
  .desktop-backdrop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    opacity: 0.2; /* Suggested tint approximation, not measured. */
  }
  .desktop-identity {
    display: block;
    position: fixed;
    top: 39.4%;
    left: calc((100vw - var(--reading-width)) / 4);
    width: 195px;
    transform: translateX(-50%);
    color: var(--surround-ink);
  }
}

@media (min-width: 1000px) and (min-height: 820px) {
  .week-nav {
    display: flex;
    position: fixed;
    z-index: 3;
    top: 50%;
    left: calc(50% + var(--reading-width) / 2 + var(--preview-offset));
    flex-direction: column;
    gap: var(--preview-gap);
    transform: translateY(-50%);
  }
  .week-nav a {
    display: block;
    width: var(--preview-width);
    height: var(--preview-height);
  }
  .week-nav img { display: block; width: 100%; height: auto; }
  .week-nav a[aria-current] {
    transform: rotate(var(--selected-tilt, -16deg));
    /* Suggested angle; the original transform was not sampled. */
  }
}

/* Recommended small-screen behavior beyond the inspected width. */
@media (max-width: 389px) {
  .cover { height: auto; }
  .cover-art { height: auto; }
}

.socks-feature :focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .socks-feature .buy,
  .socks-feature .week-nav a {
    animation: none;
    transition: none;
  }
}

The desktop identity needs authorized artwork that supports the required dark and white variants, or an appropriate SVG implementation. A CSS text color alone will not recolor an arbitrary bitmap. The selected-day attribute also needs application logic; CSS alone does not determine the visible chapter.

Tailwind v4 Token Mapping

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

@theme inline {
  --color-paper: var(--paper);
  --color-ink: var(--ink);
  --color-chapter: var(--day-bg);
  --color-chapter-accent: var(--day-accent);

  --font-feature: var(--font-editorial);
  --font-purchase: var(--font-action);

  --text-feature-copy: 11px;
  --text-feature-intro: 12px;
  --text-feature-caption: 13px;
  --text-feature-heading: 19px;

  --spacing-reading: 390px;
  --spacing-chapter: 60px;
  --spacing-caption-strip: 33px;

  --radius-feature-photo: 50px;
  --radius-feature-pill: 9999px;
}

Sources & Evidence

Inspected original and final page: Tabio — I'M SOCKS MANIA!! vol.25. The supplied browser record reports HTTP 200 and identical original/final URLs.
Capture time: 2026-09-12T17:14:40.757Z, corresponding to September 13, 2026, 02:14:40 JST.
Desktop evidence: three supplied 1440 × 1000 captures showing an opening state, the Thursday chapter, and the Sunday/closing region.
Mobile evidence: two supplied 390 × 844 captures showing the typographic opening cover and the Sunday/closing region.
Rendered measurements: element rectangles, computed typography, colors, padding, radii, transitions, animation declarations, custom properties, page text, and hrefs at both viewports. Both records report a 10,113px document height.
Interaction scope: scroll-position captures and multiple visible cover/gallery/selection states were supplied. Product navigation results, gallery inputs, hover/focus endpoints, exact state-change triggers, and motion keyframes were not supplied.
Inspection limitations: analysis uses only the supplied original-page evidence. No additional browsing or file inspection was performed. Image filenames, exact display lettering fonts, original breakpoints, and production credits could not be established. Asset geometry and tint treatments marked as estimates require implementation-time verification.

This reference describes the current editorial feature shown in the supplied inspection. Exact computed values, visual estimates, and recommended implementation choices are intentionally distinguished throughout.