JY-CONTENTS — Style Reference

A creative notebook ruled in black, highlighted in neon, and covered with expressive stickers.

Website: JY-CONTENTS Original URL: https://jy-contents.com/ Final URL: https://jy-contents.com/ Response: HTTP 200; unchanged destination. Theme: light gray and white, with fluorescent yellow and vivid pink accents. No theme selector was verified. Inspected: September 13, 2026, at 02:53 JST; supplied retrieval timestamp: September 12, 2026, 17:53:44.250 UTC. Viewports: desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels. Scope: the current blog homepage, including its masthead, featured articles, news, article count, New Topics, categories, ranking, tag sections, random articles, footer navigation, keyword playground, and closing wordmark. Visual coverage consists of three desktop captures and two mobile captures, supplemented by rendered text, links, element rectangles, and computed styles. Article destinations and expanded menu states were not inspected.

JY-CONTENTS presents design, programming, freelance work, and personal interests through a dense editorial homepage. Its identity comes from a disciplined underlying grid carrying exuberant decoration: enormous slab-serif lettering, fluorescent article highlights, emoji faces, circular stamps, repeated text, and tilted keyword capsules. Light gray occupies most of the page. Fine black rules make the long document feel organized even when its typography and artwork deliberately overflow their local frames.

The browsing structure offers several routes into the same archive: featured stories, recent or updated posts, categories, popular articles, tags, and random selections. Small dates and category labels support large, colorful article artwork. The strongest contrast is between the quiet structural canvas and the loud content placed on it.

How to Read This Reference

Measured values come directly from the supplied rendered DOM and computed styles. They describe the two recorded viewport states, not a complete stylesheet.
Declared tokens are exact custom-property values present in the page. A declaration alone does not establish that every matching-looking component uses that variable.
Visual estimates, marked approximately or with ≈, come from the original-page captures. They are not pixel-sampled colors or computed dimensions.
Recommendations and all Quick Start code are adaptations for a new implementation. Proposed breakpoints, accessibility improvements, and fallback behavior are not claims about the original site.
Font stacks are recorded exactly where available. Font files, full loading behavior, and the family used by every illustrated or unsampled label were not supplied.
The DOM includes repeated ribbons and offscreen carousel slides. Their large or negative coordinates should not be interpreted as the dimensions of the visible page.
Static captures establish appearance and available states. They do not establish autoplay intervals, easing curves, drag physics, hover outcomes, or successful control activation.

Tokens — Colors

Default Palette

Name	Value	Evidence	Role / implementation alias
Notebook Gray	`#EDEDED`	Measured body background: `rgb(237, 237, 237)` at both viewports	Dominant canvas; `--color-canvas`
Charcoal Ink	`#262626`	Measured body text and menu fill; declared `--wp--preset--color--black`	Typography, dark labels, and menu surface; `--color-ink`
White Paper	`#FFFFFF`	Measured desktop article-count surface and reversed text; declared white preset	White sections, sticker interiors, and reversed labels; `--color-paper`
Fluorescent Yellow	`#F8FF3C`	Exact declared `--wp--preset--color--yellow`; visually consistent with feature panels and highlights	Featured content, selected emphasis, and mobile slogan ribbon; `--color-yellow`
Signal Pink	`#FF2167`	Exact declared `--wp--preset--color--red`; visually consistent with title bands and circular actions	Article-title highlights and prominent archive actions; `--color-pink`
Rule Black	`#000000`	Exact declared `--clr-border`	Recommended structural stroke token; individual border colors were not comprehensively sampled
News Blush	`≈#FFD7F6`	Visual estimate from the desktop news strip	Secondary announcement surface; `--color-news`

The yellow and pink values are exact source presets, while their association with particular unsampled fills is supported visually. The gray body, charcoal text, dark menu background, and white reversed text have direct computed-color evidence.

The custom-property inventory also contains generic WordPress colors, gradients, shadows, code-highlighting settings, and a blue slider variable. Those declarations are not evidence of a broad rainbow interface or a general elevation system. Keep the reusable UI palette focused on the colors above.

Accent Distribution

Yellow creates a field: the featured article sits inside a large fluorescent panel; ranking titles receive smaller yellow highlights.
Pink creates a signal: featured titles use white text on pink strips, and the ranking archive action uses a pink circle.
Gray creates continuity: ranking rows, borders, and keyword areas remain connected to the surrounding canvas.
White creates a pause: the large brand oval and footer regions provide relief from the dense content.
Additional colors belong primarily to imagery: poster greens, oranges, blues, and purples vary by article. The central smiling face contains a soft pastel gradient, and the partly visible TAG graphic uses blue dimensional shading.

Tokens — Typography

Zilla Slab — Identity and Editorial Display

Measured stack: 'Zilla Slab', serif.

The header JY mark and enormous opening JY use weight 600. CONTENTS uses 700; Latin keyword capsules use 500; NEW TOPICS uses 600; the outlined ENJOY BEING CREATIVE! ribbon uses 700.

This family provides the page's broad, sturdy letterforms. Preserve the extreme size difference between the opening identity and the compact article information. The closing wordmark is visually consistent with the slab-serif system, but its computed family was not included in the supplied sample.

Zen Kaku Gothic New — Japanese Content and Metadata

Measured stack: 'Zen Kaku Gothic New', serif.

The body uses weight 400. Featured dates and excerpts use 500, featured titles use 600, and New Topics titles and sequence numbers use 700. Japanese keywords switch to this stack while neighboring Latin keywords use Zilla Slab.

The serif fallback is part of the recorded stack. Do not silently describe it as a generic sans-serif fallback. A new implementation may choose a more suitable fallback deliberately, but that would be an adaptation.

VT323 — Utility Labels and Counters

Measured stack: VT323, serif, generally weight 400.

Verified uses include MENU, GO!, MORE, and the large total-article number. Its narrow pixel-like shapes make small controls feel like arcade or terminal labels. The footer's copyright text also looks pixel-like, but its computed family was not sampled.

Article sequence numbers in New Topics use Zen Kaku Gothic New, not VT323. Keep these two numeric systems distinct.

Doto — The News Label

Measured stack: Doto, serif, weight 400.

The English NEWS label uses a dotted display treatment. Its neighboring Japanese prefix, 超-, uses Zen Kaku Gothic New. This mixed-font label is a specific detail worth retaining.

Type Scale

All values below are measured CSS pixels. Desktop and mobile values are independent observations; they are not inferred from a shared scaling formula.

Role	Desktop	Mobile	Weight / line-height detail
Body	`16px`	`16px`	`400`; body line height `24px`
Header JY	`47.52px`	`31.2px`	Zilla Slab `600`; line height `1`
Opening JY	`331.2px`	`234px`	Zilla Slab `600`; line height `1`
Opening CONTENTS	`67.68px`	`46.8px`	Zilla Slab `700`; line height `1`
Latin header keywords	`31.68px`	`19.5px`	Zilla Slab `500`; line height `1`
Japanese header keyword	`28.8px`	`16.38px`	Zen Kaku Gothic New `500`
MENU	`21.6px`	`18.72px`	VT323 `400`; line height `1`
Featured date	`15.84px`	`13.65px`	`500`; line height `1`
Featured title	`20.88px`	`19.5px`	`600`; line heights `27.144px` / `25.35px`
Featured excerpt	`14.4px`	`12.87px`	`500`; line heights `18.72px` / `16.731px`
Featured GO! text	`24.48px`	`23.4px`	VT323 `400`; line height `1`
NEWS	`25.92px`	`23.4px`	Doto `400`; line height `1`
News story text	`17.28px`	`15.6px`	`400`; line heights `17.28px` / `21.84px`
Outlined slogan	`95.04px`	`58.5px`	Zilla Slab `700`; tracking `4.32px` / `1.17px`
Total article number	`120.96px`	`105.3px`	VT323 `400`; line height `1`
NEW TOPICS	`43.2px`	`31.2px`	Zilla Slab `600`; line height `1`
New Topics sequence number	`24.48px`	`27.3px`	`700`; larger on mobile
New Topics date	`13.392px`	`14.43px`	`400`; narrow vertical arrangement
New Topics category	`11.52px`	`13.65px`	`400`; outlined capsule
New Topics title	`16.848px`	`17.55px`	`700`; line heights `21.9024px` / `22.815px`
New Topics excerpt	`13.68px`	`13.65px`	`400`; line heights `17.784px` / `17.745px`

Most sampled text uses normal letter spacing. The outlined slogan's explicit tracking is an exception. Several section containers inherit a 16px line height even though the body is 24px; use component-specific leading rather than assuming the body setting applies everywhere.

The featured GO! anchor reports a larger inherited font size and browser-blue color, but its visible child reports VT323 and charcoal on desktop, white on mobile. The visible child is the relevant typography evidence; browser-blue is not a visible action-color token.

Tokens — Spacing & Shapes

Structural character: fine rules, nearly full-width sections, compact labels, and concentrated pockets of oversized artwork.

Source scaling limitation: several dimensions equal simple viewport percentages at the recorded widths. For example, desktop JY is numerically 23vw, while mobile JY is 60vw. These are arithmetic equivalents, not verified source declarations. The original breakpoints and complete formulas were not supplied.

Spacing Scale

Use	Desktop measurement	Mobile measurement
Header horizontal outer inset	`21.58px`	`5.83px`
Header top position	`17.27px`	`9.75px`
Header horizontal inner padding	`21.58px`	`5.83px`
Menu padding	`5.39px 13.5px`	`4.68px 10.92px`
Keyword horizontal padding	`14.4px`	`7.8px`
Featured date-to-title gap	`≈11.52px`, calculated from rectangles	`≈5.84px`, calculated from rectangles
Featured title-to-excerpt gap	`≈12.95px`, calculated from rectangles	`≈8.58px`, calculated from rectangles
New Topics card outer padding	`33.12px`	`23.4px 0`
New Topics text left inset within card	`33.11px`	`39.86px`
NEW TOPICS heading padding	`6.048px 48.96px`	`3.9px 31.2px`

There is no demonstrated universal 8px source grid. For a reusable implementation, a recommended spacing vocabulary is 4, 8, 12, 16, 24, 32, 48, 64px, supplemented by fluid dimensions for the identity, ribbons, and featured panel.

Border Radius

Element	Value / appearance	Evidence status
Masthead	`10.08px` desktop; `6.63px` mobile	Measured
Menu and header keyword capsules	`100px`	Measured
NEW TOPICS heading	`50%`	Measured; creates an oval around a wide label
Article cards	`0`	Measured
Featured outer panel	`≈18–20px` desktop; `≈4–6px` mobile	Visual estimate
Brand background	Circular desktop; horizontally oval mobile	Visual observation
Stamps and circular GO! action	Circle	Visual observation
Footer keyword capsules	Fully rounded	Visual observation

Layout Measurements

Element	Desktop at 1440 × 1000	Mobile at 390 × 844
Document height	`8687.67px`	`11918.56px`
Main content width	`1439px`	`389px`
Header box	`1395.83 × 86.56px`	`377.33 × 50.45px`
Featured section	Starts at `y=218.27`; height `505.42px`	Starts at `y=137.56`; height `853.11px`
News section	Starts at `y=723.69`; height `40.31px`	Starts at `y=1080.36`; height `137.64px`
Article-count section	Starts at `y=982.86`; height `200.16px`	Starts at `y=1348.63`; height `159.89px`
New Topics content plane	`x=330.98`; width `1108.02px`	`x=0`; width `389px`
First New Topics card	`368.33 × 444.31px`	`389 × 435.52px`

Additional screenshot estimates:

The desktop featured panel begins near (564, 245) and measures approximately 807 × 396px.
Its poster is approximately 387 × 363px; the information column is measured at 366.31px wide.
The mobile featured panel begins near (41, 399) and is approximately 341px wide. Its poster is about 320 × 304px.
The mobile panel continues below the first capture; its complete outer height is not directly visible.
The central header face is approximately 84px across on desktop and 48px on mobile.
The desktop keyword playground occupies about 580px vertically in the bottom capture; the mobile version occupies about 400px.

Components

Framed Masthead

Role: compact identity and access to the main menu/search affordance.

A thin rounded frame sits just inside the viewport edges. JY is aligned left, a circular smiling face is centered independently, and a dark MENU capsule sits right. A fluorescent yellow wave runs horizontally behind them. The face has heart-shaped eyes, a wide toothy grin, delicate black outlines, and a soft pastel fill.

The desktop menu box measures approximately 101.30 × 32.38px; mobile measures 85.80 × 28.06px. Its visible anatomy is a magnifying-glass symbol, a plus sign, and the VT323 MENU caption. The recorded trigger has no usable destination URL in the evidence. Treat it as a menu affordance; the expanded state and search execution were not tested.

The header's DOM contains menu-related labels, archive destinations, SEARCH, and recent-topic text. That establishes available content in the markup, not the appearance or accessibility of an opened overlay.

Header Keyword Ribbon

Role: expose the taxonomy while immediately establishing the site's playful character.

Single-line outlined capsules alternate with colorful emoji faces. Latin tags use Zilla Slab; Japanese tags use Zen Kaku Gothic New. The ribbon is visibly clipped at the viewport edges. It remains a horizontal ribbon on mobile.

Measured Latin capsule height is 40px on desktop and 25px on mobile. The repeated text groups measure 4778.08px and 2676.59px wide respectively. Links resolve to actual tag archives, such as /tag/canvas/ and /tag/javascript/.

Duplication and the sampled horizontal offset support a marquee-like construction. Exact movement direction, speed, pause behavior, and implementation are unknown.

Ruler Dividers

Role: give the page a notebook or measuring-tool rhythm.

A fine horizontal rule supports a sequence of short vertical ticks, with periodically longer marks. One ruler separates the keyword ribbon from the opening feature; another appears below the news strip. Desktop tick height is approximately 15–23px.

These details are thin and regular. Repeating CSS gradients or an SVG can reproduce them. Such a technique would be an implementation recommendation because the original rendering method was not supplied.

Opening Brand Emblem

Role: the dominant identity gesture above the article archive.

Large JY lettering overlaps a white outlined shape, with CONTENTS tightly positioned below. On desktop the white shape is nearly circular, approximately 360px across. On mobile it becomes a wide oval, approximately 319 × 212px, while the JY remains exceptionally large at 234px.

Desktop places this emblem to the left of the feature panel. Mobile gives it a dedicated centered block above the panel. Preserve the close spacing and overlap between JY, CONTENTS, and the white shape; ordinary heading margins would weaken the emblem.

Featured Article Panel

Role: foreground one article from an eight-item selection.

The desktop anatomy is:

A fluorescent yellow outer panel with a dark outline and moderately rounded corners.
A large, nearly square poster at left, with a thin dark edge.
A narrow vertical oval outside the left edge containing ピックアップ in pink.
A circular PICK UP stamp above the right-hand copy.
A date, a white-on-pink title, a short charcoal excerpt, and a small outlined GO! link.
An overlapping outlined progress circle below the panel and PREV / NEXT controls aligned toward the right.

The desktop capture displays the article dated 2025.10.01, with the counter 3 / 8. Its poster combines oversized black lettering with orange, cyan, lime, and purple shapes. The stamp contains cartoon eyes and a dark center label reading 見テ.

The mobile capture displays the 2025.05.20 article, corresponding to 4 / 8 in the DOM. The composition stacks: poster first, an overlapping circular stamp near its lower edge, then date and text. Its green and purple poster has very large rounded black lettering, and the stamp's center reads 注目.

Title highlights follow the wrapped lines rather than filling the entire information column. For a new implementation, an inline span with box-decoration-break: clone is a useful way to reproduce this appearance.

On mobile the GO! text becomes white, and its measured anchor width increases from approximately 108px to 286px. The complete painted mobile button lies below the initial screenshot, so its fill should not be inferred from the text color alone.

Carousel Navigation

Role: identify the current feature and offer adjacent slides.

The desktop counter sits near the bottom of a large outlined circle overlapping the card's lower-left edge. PREV and NEXT are compact text controls separated by a short horizontal line. The DOM includes all eight article entries, including offscreen slides.

The two captured states establish different active slides. They do not establish whether the change came from autoplay, manual input, or another lifecycle event. Swipe support, looping rules, disabled states, and timing remain unverified.

News Strip

Role: provide a brief site announcement between the feature and the archive.

Desktop uses three adjoining cells: a dark label block, a flexible pale-pink story region, and a narrow MORE cell. The label combines the Japanese prefix with dotted NEWS lettering. Fine vertical rules divide the cells.

At mobile width the section changes from flex to block and grows from 40.31px to 137.64px. The label appears above the wrapped story, and MORE becomes a full-width bottom row. This is a substantive rearrangement rather than a uniformly scaled desktop strip.

Outlined Slogan Band

Role: provide a large typographic transition.

ENJOY BEING CREATIVE! repeats beyond the viewport. Letters are transparent inside and outlined with a fine dark stroke. At desktop size, portions of the large lettering are visibly masked by adjacent horizontal boundaries.

The computed text color is transparent; it should not be treated as missing text. The visible outline supplies the shape. Keep the slogan much larger than ordinary headings while allowing it to be cropped within its decorative band.

Total Article Counter

Role: communicate the archive's size.

The current rendered count is 89 at both viewports. The number uses VT323 at 120.96px desktop and 105.3px mobile, with a small outlined 総記事数 label above it. Desktop rendered text includes TOTAL and ARTICLE on either side; those flanking words are absent from the mobile visible-text extraction.

The desktop section has a measured white background. The mobile section's sampled background is transparent over the gray page. The large pink center treatment is only partially visible at the bottom of the supplied desktop opening capture; its complete geometry is not documented by that crop.

New Topics Article Grid

Role: present recently added or updated content through numbered editorial cards.

Desktop reserves approximately 23% of the main width before the New Topics content plane. Within the remaining approximately 77%, cards occupy three columns. The first row's cards are about 368–369px wide, with approximately 1px between adjoining rectangles. The supplied rendered text contains nine entries.

Each linked card contains a principal content column and a narrow metadata rail on its right. The rail groups a sequence number, date, and category capsule. The date and category rectangles are tall and narrow, consistent with a vertical arrangement. Below the upper media region, a bold Japanese title and compact excerpt align to the principal content column.

The mobile cards span the 389px content width and stack vertically. Their text column begins around x=39.86px and measures 260.63px wide; metadata remains near x=319–344px. Sequence numbers, dates, category labels, and titles become slightly larger on mobile, even though the overall page is narrower.

Six entries appear in the mobile rendered index, compared with nine on desktop. The ALL POST destination remains available. Preserve access to the complete archive when using a smaller mobile selection.

The supplied screenshots do not show this section directly. Its layout and typography above are grounded in DOM rectangles and computed styles; image crop details and hover behavior remain unverified.

Category Navigation

Role: provide five broad editorial entry points.

The rendered categories pair English labels with Japanese labels: OTHERS / その他, DESIGN / デザイン, FREELANCE / フリーランス, PROGRAMMING / プログラミング, and BOOKS / 本.

All five are present at both viewports and link to category archives. Their complete visual arrangement is outside the supplied screenshot crops. Reuse the verified bilingual hierarchy, but treat any proposed category-row layout as a recommendation.

Ranking Section

Role: combine prominent popular stories with a faster compact list.

The desktop screenshot shows two equal-width regions divided near x=720px. The left side contains larger panels for the top three articles. The right side contains compact entries for ranks four through ten, as established by the full rendered text.

The large panel anatomy includes a dark repeated NO.2 or NO.3 strip, a large underlined rank number with a smaller Japanese suffix, top-right date and category, a yellow-highlighted title, a short excerpt, and an article thumbnail at the lower right. Visible thumbnails are approximately 169 × 162px.

Compact rows use a rank number at left, a title with date below, and a small thumbnail at the far right. Visible rows are approximately 137px high, and thumbnails are approximately 62 × 60px. Long titles can visibly truncate in this compact format. Thin rules, shared backgrounds, and aligned columns establish hierarchy without elevated cards.

Below both regions, a broad band centers a pink GO! circle beside RANKING TOP 50. The circle is approximately 83px across and the band approximately 210px high in the desktop crop.

All ten ranked entries are present in the mobile text evidence. Their mobile visual arrangement was not captured, so stacking the desktop halves is a recommendation rather than an observed rule.

Middle Tag Section and Random Articles

Role: encourage exploration beyond recency and popularity.

Below ranking, the desktop crop reveals part of a large blue extruded TAG graphic with dimensional shading and a soft shadow. The DOM contains four pairs of repeated tag groups, alternating English TAG and Japanese tag captions, plus repeated JYCONTENTS text.

The complete middle tag composition is not pictured. Its direction of movement, spatial arrangement, and any 3D implementation are unknown; the visible lettering might be a rendered asset.

The following UNINTENTIONAL section is labeled as random articles and contains four linked entries in both viewport records. Each entry includes a number, date, category, title, and excerpt. A single captured set cannot establish when or how randomization occurs.

Footer Archive and Utility Navigation

Role: repeat major destinations near the end of a long document.

The rendered footer includes POST, RANK, CATE, and TAG with Japanese descriptions, followed by repeated identity text, a GO TOP link, and secondary navigation.

The mobile screenshot clearly shows four white, rule-separated rows: ABOUT, SOCIAL(X), NEWS, and 仕事依頼. Each has a small parenthesized index number beside the large label. Rows are approximately 48–50px tall. PRIVACY POLICY and TOP appear beneath as smaller text links in a taller white region.

A compact two-cell utility rail is visible at the upper-right edge of the lower-page captures. It combines a menu/search symbol and an upward chevron. Its repeated viewport-edge placement supports a persistent-control appearance; its exact fixed or sticky positioning rule and activation behavior were not supplied.

Keyword Playground

Role: close the browsing experience with an expressive taxonomy scene.

A gray, outlined field has a small centered KEY WORD label. White keyword capsules appear at varied rotations, overlapping and partly cropped at the field edges. Small attached capsules say drag. Large yellow expressive faces are mixed into the composition.

Desktop tags are approximately 40–46px in visible text size; mobile tags are approximately 25–30px. These are visual estimates, not computed font measurements. The desktop scene includes more terms in its rendered text than the mobile scene.

The drag labels advertise manipulation. No pointer-drag trace was provided, so gravity, collisions, throwing, bounce, and the underlying engine are unverified. For an adaptation, keep the archive destinations available in ordinary links even when a decorative physics scene is added.

Closing Wordmark and Slogan

Role: end the page with a strong typographic signature.

Desktop places a straight slogan line above the oversized JY-CONTENTS wordmark on white. COPYRIGHT, ALL RIGHTS RESERVED., and the year [2026] sit in compact utility text around it. Fine horizontal rules separate the bands.

The mobile capture shows a fluorescent yellow slogan ribbon tilted across the boundary between the keyword scene and the footer. It carries 「創る」をおもいっきり楽しむ！✌. The wordmark fits nearly edge to edge beneath the ribbon, with copyright information compressed into small strips.

These are the two recorded presentations. The precise breakpoint and whether additional animated states exist are unknown.

Tokens — Motion & Interaction

Treatment	Evidence	Verified limit
Menu plus and caption	Computed transition `0.2s` at both viewports	Transition target and resulting state not recorded
Header keyword links	Desktop transition `0.2s`; mobile `none`	Hover color or transform not recorded
Featured GO! text	Computed transition `0.3s` at both viewports	End-state appearance not recorded
MORE control	Computed transition `0.2s` at both viewports	Activation and hover result not recorded
Featured carousel	Eight entries; desktop `3 / 8`, mobile `4 / 8`; PREV / NEXT labels	No verified autoplay interval, easing, swipe behavior, or click result
Header keyword ribbon	Duplicated groups, overflow, and a sampled mobile horizontal offset	No measured loop duration or direction
Outlined slogan and ranking text	Repeated text extending beyond visible bounds	Motion timing and triggering conditions unknown
Keyword playground	Rotated overlapping capsules with drag labels	Actual drag behavior and physics untested
Utility rail / GO TOP	Visible controls and a top anchor in the rendered links	Scroll behavior and positioning mechanism untested

Most sampled elements report animation: none. That does not rule out motion on ancestors, pseudo-elements, JavaScript-controlled transforms, or unsampled artwork. A bare transition: all without a duration does not establish a meaningful animation token.

The supplied capture process waited for load and stability, temporarily paused perpetual animations during readiness checks, and resumed them afterward. Consequently, the screenshots may show different animation phases. No frame sequence or action-by-action interaction log was supplied.

Recommended motion direction: keep expressive movement concentrated in decorative ribbons, stamps, and the keyword scene. Preserve reading stability in article titles and metadata. Use explicit carousel controls and offer a pause mechanism for ongoing motion. Select durations through testing rather than presenting invented values as source measurements.

Surfaces

Layer	Appearance	Purpose
Main canvas	Solid `#EDEDED`	Continuous editorial background
White pause	White fill with thin black boundaries	Brand oval, footer, and desktop counter region
Featured field	Fluorescent yellow, dark outline, rounded corners	Priority article selection
Title highlight	Pink behind white text, or yellow behind charcoal text	Differentiate feature titles from ranking titles
News strip	Pale pink with a dark label cell	Brief announcement
Article and ranking cells	Shared gray surface, square corners, fine rules	Dense browsing structure
Capsule / sticker	Thin outline, rounded or circular shape	Keywords, badges, and playful labels
Dimensional graphic	Blue extruded lettering with visible shading	Isolated visual accent below ranking

There is no visible general-purpose card-shadow system. The dimensional TAG artwork is a localized exception; its shadow may be embedded in an asset. Likewise, the pastel face gradient should not become a gradient treatment for every UI surface.

Imagery

The main article images behave like miniature graphic posters. The desktop feature uses stretched black lettering over orange, cyan, purple, and lime forms. The mobile feature uses chunky black lettering on vivid green with a purple typographic background. Ranking thumbnails repeat these article identities at much smaller sizes.

The interface combines these posters with a different kind of imagery: expressive yellow faces, outlined cartoon eyes, a smiling pastel medallion, circular stamps, and blue dimensional lettering. Their shared quality is graphic exaggeration rather than a uniform illustration technique.

Preserve the distinction between ordinary UI text and lettering embedded in article images. Article posters should remain legible as complete compositions where possible. Do not globally apply pixelated image rendering: the pixel-like character is verified in utility fonts, while the posters and face outlines are visually smooth.

Observed Asset References

Image source URLs were not included in the supplied evidence. The following are article destinations associated with visible artwork, not image download paths.

Artwork	Original-page association	What is established
Orange/cyan/lime/purple feature poster	Design article ③	Visible in the current desktop feature and a compact ranking thumbnail
Green/purple feature poster	Design article ②	Visible in the current mobile feature
Blue/purple/yellow VGD poster	First design roundup	Visible beside rank two in the desktop crop
Green typographic poster with eyes	Blog production article	Visible beside rank three in the desktop crop
Pastel smiling medallion	Homepage masthead	Appearance is visible; file path and construction method unknown
Circular PICK UP eye stamp	Featured panel	Two center-label states are visible; asset implementation unknown
Blue dimensional TAG lettering	Below desktop ranking	Partially visible; complete asset and rendering technique unknown

The article destinations above were present in the homepage links. Their pages were not opened during this analysis.

Layout & Responsive Behavior

The desktop homepage is a long, nearly full-width editorial composition. Its opening pairs a large identity zone with a landscape featured panel. Later sections alternate between dense article arrangements and broad typographic or decorative breaks. The ranking crop uses equal left and right halves, while New Topics occupies an offset content plane with three columns.

At 390px, the hierarchy is recomposed. The brand emblem gets its own block, the feature becomes vertical, the news strip stacks, and New Topics becomes a one-column list. The mobile document is about 11,919px tall, compared with about 8,688px on desktop, despite the smaller New Topics selection.

Area	Observed desktop	Observed mobile
Masthead	Wide frame, `86.56px` high	Compact frame, `50.45px` high
Keywords	Single-line capsules and faces	Same ribbon model at smaller size; edge clipping retained
Opening identity	Left of feature; circular white shape	Above feature; wider oval shape
Featured story	Poster and copy side by side	Poster above copy; stamp overlaps the lower poster edge
Featured title	`20.88px`	`19.5px`; remains prominent
News	Three adjoining horizontal regions	Vertically arranged label, story, and MORE
Article counter	White section; flanking English words present	Transparent section background; flanking words absent from visible text
New Topics	Three columns; nine rendered entries	One column; six rendered entries
New Topics metadata	Narrow right rail	Right rail retained; several labels become larger
Footer slogan	Straight line on white	Tilted fluorescent ribbon in the captured state
Keyword playground	Approximately `580px` high	Approximately `400px` high

Only these two viewport sizes were supplied. Tablet layouts, landscape phones, browser zoom, text enlargement, and safe-area behavior remain unverified. Do not infer an exact source breakpoint from the endpoint captures.

For a new implementation, start with a breakpoint near 48rem, then test whether the featured copy and article grid remain comfortable around that width. Contain overflow within decorative ribbons and scenes; maintain ordinary document flow for articles and navigation.

Do’s and Don’ts

Do

Anchor the page in measured gray #EDEDED, charcoal #262626, and fine structural rules.
Use yellow for large feature fields and ranking highlights, with pink for feature-title bands and prominent circular actions.
Preserve the three distinct typographic roles: slab-serif identity, Japanese editorial copy, and pixel-like utility labels.
Retain Doto specifically for the dotted NEWS label.
Keep the huge JY emblem, tightly joined CONTENTS line, and white circle or oval.
Make poster artwork a major part of article discovery.
Preserve the narrow metadata rail in New Topics cards across the two observed layouts.
Use square article cells alongside a limited vocabulary of capsules, circles, and ovals.
Recompose the feature and news sections for mobile.
Provide several meaningful routes into the archive.
Treat cartoon stamps and tilted keywords as distinctive components with clear boundaries.
Keep counts, dates, slide totals, and article selections driven by current content.

Don’t

Replace the archive structure with an unrelated conversion funnel.
Put every article inside a spacious rounded card with a soft shadow.
Apply all declared WordPress preset colors to the visible interface.
Use VT323 for every number or Zilla Slab for Japanese body copy.
Shrink the desktop layout uniformly until it fits a phone.
Turn decorative edge clipping into page-wide horizontal overflow.
Crop away the defining lettering of article posters merely to enforce a generic ratio.
Convert every image into pixel art because some labels use a pixel-like font.
Treat repeated DOM text as multiple distinct articles or assume all carousel slides are simultaneously visible.
Specify autoplay, physics engines, hover transformations, or opening animations as verified features.
Generalize the blue 3D artwork into a site-wide elevation style.

Recommended Implementation Additions

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

Use semantic buttons for menu and carousel operations, with explicit names and an accurate expanded state for the menu.
Give small visible controls a comfortable hit area. The observed menu and featured links have compact painted dimensions; a 44px interaction target is a useful adaptation.
Provide a visible focus indicator and make complete article destinations accessible without nested links.
Keep one logical page heading and a clear section hierarchy, even if the visual identity is repeated at several sizes.
Exclude decorative ribbon copies from assistive technology and keyboard navigation. Keep a canonical, accessible collection of tag links.
Pause automatic carousel movement when appropriate, and let users pause persistent ribbons. Respect reduced-motion preferences in both CSS and JavaScript.
Provide keyboard-accessible tag archives alongside any drag scene. Dragging must not be the sole route to a topic.
Check white-on-pink text at its actual size and weight; use a darker approved pink where smaller text requires greater contrast.
Consider a slightly larger minimum for mobile excerpts, whose observed featured size is 12.87px.
Preserve image dimensions during loading, prioritize the initially visible poster, and defer below-the-fold imagery.
Keep decorative animation dormant when offscreen, while preserving article readability and ordinary scrolling.

Agent Prompt Guide

Quick Color Reference

Main page: #EDEDED.
Text and dark menu: #262626.
Structural rules: #000000 as a declared source border token.
Featured field and ranking highlights: source yellow #F8FF3C.
Featured title bands and prominent circular action: source pink #FF2167.
White shapes and reversed labels: #FFFFFF.
News surface: approximately #FFD7F6, a screenshot-based estimate.
Multicolor variation: concentrate it inside posters, faces, stamps, and isolated decorative lettering.

Overall Prompt

“Create an editorial homepage for a Japanese creative and programming blog inspired by JY-CONTENTS. Use a light gray #EDEDED canvas, charcoal text, and fine black rules. Pair enormous Zilla Slab identity lettering with Zen Kaku Gothic New article copy, VT323 utility labels, and a dotted Doto NEWS caption. Build a framed masthead with a central smiling medallion and yellow wave, an overflowing ribbon of outlined keyword capsules and expressive faces, and a featured article in fluorescent yellow with a colorful poster and pink title highlights. Follow with a numbered article grid, category navigation, a ranking section combining large stories and compact rows, and a strong typographic footer with a keyword playground. On mobile, stack the feature and news, retain the article metadata rail, and preserve the oversized identity. Treat decorative movement as optional and pausable; do not invent source timings.”

Example Component Prompts

Featured article: “A fluorescent yellow panel with a thin dark outline, a nearly square graphic poster at left, and compact Japanese article details at right. Place a circular cartoon-eye PICK UP stamp above the date, use white text on pink line-following title highlights, and add an outlined GO! link. On a phone, put the poster above the copy and overlap the stamp at the poster's lower edge.”
New Topics card: “A square-cornered editorial cell on light gray. Use a main media and text column plus a narrow right rail containing a bold sequence number, vertically arranged date, and outlined category capsule. Separate adjoining cards with fine rules. Use three columns on a wide screen and one column on mobile.”
Ranking: “Split a desktop section into two equal halves. On the left, use large top-three panels with repeated dark rank strips, yellow-highlighted titles, excerpts, and colorful thumbnails. On the right, use compact numbered rows with a date and a small thumbnail aligned to the far edge. Finish with a large pink GO! circle beside RANKING TOP 50.”
Masthead and ribbon: “A shallow rounded outline frame containing a slab-serif JY mark, an independently centered pastel smiling face, and a dark pixel-caption MENU control. Run a fluorescent wave behind these elements. Below, arrange outlined keyword capsules and yellow expressive faces in a single clipped horizontal ribbon.”
Footer playground: “A gray field with a small centered KEY WORD caption, white outlined keyword capsules at varied angles, small drag labels, and expressive yellow faces. Follow with a nearly full-width slab-serif wordmark and tiny utility copyright text. On mobile, place a tilted yellow slogan ribbon across the boundary. Provide ordinary topic links alongside any optional drag interaction.”

Quick Start

CSS Custom Properties

This is a usable adaptation, not extracted source CSS. It retains a conventional 16px root, uses the verified font stacks, and approximates the recorded desktop proportions with fluid values. The 48rem breakpoint is recommended, not measured. Small control hit areas and mobile excerpt sizes are deliberately increased.

Load the named fonts through the new project's font setup; no font-file URLs were supplied. Provide project-owned or authorized artwork for the face, stamps, and posters. CSS reproduces the shell, not the original illustrations, carousel logic, or drag behavior.

:root {
  /* Measured colors and exact declared accent presets */
  --color-canvas: #ededed;
  --color-ink: #262626;
  --color-paper: #ffffff;
  --color-rule: #000000;
  --color-yellow: #f8ff3c;
  --color-pink: #ff2167;

  /* Visual approximation, not a sampled source color */
  --color-news: #ffd7f6;

  /* Recorded computed font stacks */
  --font-editorial: 'Zilla Slab', serif;
  --font-body: 'Zen Kaku Gothic New', serif;
  --font-utility: 'VT323', serif;
  --font-news: 'Doto', serif;

  /* Adapted fluid scale, matching desktop reference endpoints */
  --text-logo: clamp(1.95rem, 3.3vw, 2.97rem);
  --text-brand: clamp(12rem, 23vw, 20.7rem);
  --text-contents: clamp(2.925rem, 4.7vw, 4.23rem);
  --text-tag: clamp(1.21875rem, 2.2vw, 1.98rem);
  --text-feature: clamp(1.21875rem, 1.45vw, 1.305rem);
  --text-section: clamp(1.95rem, 3vw, 2.7rem);
  --text-utility: clamp(1.17rem, 1.5vw, 1.35rem);

  /* Recommended reusable spacing vocabulary */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  --rule: 1px solid var(--color-rule);
  --radius-pill: 100px;
  --radius-header: clamp(6.63px, .7vw, 10.08px);
  --radius-feature: clamp(6px, 1.4vw, 20px);
  --transition-control: 200ms;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-canvas);
  font: 400 1rem/1.5 var(--font-body);
}

button, input { font: inherit; }
a { color: inherit; }
img { display: block; max-inline-size: 100%; }

.jy-page { border-inline-end: var(--rule); }

.site-header {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-block-size: clamp(50.45px, 6vw, 86.56px);
  margin: 1.2vw 1.5vw 0;
  padding-inline: 1.5vw;
  border: var(--rule);
  border-radius: var(--radius-header);
}

.site-logo {
  justify-self: start;
  font: 600 var(--text-logo)/1 var(--font-editorial);
  text-decoration: none;
}

.header-face {
  inline-size: clamp(48px, 5.84vw, 84px);
  aspect-ratio: 1;
}

/* Supply an SVG containing the repeated wave shape. */
.header-wave {
  position: absolute;
  z-index: -1;
  inset-inline: 0;
  inset-block-start: 50%;
  inline-size: 100%;
  block-size: 32px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--color-yellow);
  stroke-width: 7;
  pointer-events: none;
}

.menu-trigger {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 44px;
  padding: 4px 13px;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-paper);
  background: var(--color-ink);
  font: 400 var(--text-utility)/1 var(--font-utility);
  cursor: pointer;
}

.tag-ribbon {
  overflow: hidden;
  padding-block: clamp(15px, 1.6vw, 23px);
}

.tag-track {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 18px);
  inline-size: max-content;
}

.tag-pill {
  display: inline-block;
  padding-inline: clamp(7.8px, 1vw, 14.4px);
  border: var(--rule);
  border-radius: var(--radius-pill);
  font: 500 var(--text-tag)/1.2 var(--font-editorial);
  text-decoration: none;
  white-space: nowrap;
}

.tag-pill:lang(ja) { font-family: var(--font-body); }

.tag-face {
  flex: none;
  inline-size: clamp(26px, 3vw, 44px);
}

.ruler {
  block-size: 24px;
  border-block-start: var(--rule);
  background-image:
    linear-gradient(90deg, var(--color-rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-rule) 1px, transparent 1px);
  background-size: 9.6px 15px, 48px 23px;
  background-repeat: repeat-x;
}

.feature-section {
  display: grid;
  grid-template-columns: 37.8% minmax(0, 1fr);
  gap: 3.2vw;
  align-items: start;
  padding: 1.8vw 4.8vw 3.4vw 0;
}

.feature-brand {
  position: relative;
  isolation: isolate;
  inline-size: 26.5vw;
  margin-inline: auto;
  text-align: center;
  font-family: var(--font-editorial);
}

.feature-brand::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 12px 10px -12px;
  border: var(--rule);
  border-radius: 50%;
  background: var(--color-paper);
}

.brand-jy {
  display: block;
  font-size: var(--text-brand);
  font-weight: 600;
  line-height: 1;
}

.brand-contents {
  display: block;
  margin-block-start: -2.64vw;
  font-size: var(--text-contents);
  font-weight: 700;
  line-height: 1;
}

.feature-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.06fr minmax(0, 1fr);
  gap: 1.3vw;
  padding: 1vw;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-feature);
  background: var(--color-yellow);
}

.feature-poster {
  inline-size: 100%;
  block-size: auto;
  border: var(--rule);
}

.pickup-label {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-start: -3vw;
  padding: 14px 3px;
  border: var(--rule);
  border-radius: 50%;
  color: var(--color-pink);
  font-style: italic;
  writing-mode: vertical-rl;
}

.feature-copy {
  position: relative;
  min-inline-size: 0;
  padding-block-start: 11.8vw;
}

.pick-stamp {
  position: absolute;
  inset-block-start: 1vw;
  inset-inline-start: 50%;
  inline-size: 9.7vw;
  transform: translateX(-50%);
}

.feature-date {
  display: block;
  margin-block-end: .8vw;
  font-size: .99rem;
  font-weight: 500;
  line-height: 1;
}

.feature-title {
  margin: 0 0 .9vw;
  font-size: var(--text-feature);
  font-weight: 600;
  line-height: 1.3;
}

.marker {
  padding-inline: .12em;
  color: var(--color-paper);
  background: var(--color-pink);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.feature-excerpt {
  margin: 0 0 1vw;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.3;
}

.feature-go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  inline-size: 110px;
  min-block-size: 44px;
  margin-inline-start: auto;
  border: var(--rule);
  border-radius: var(--radius-pill);
  font: 400 1.53rem/1 var(--font-utility);
  text-decoration: none;
}

.news-strip {
  display: grid;
  grid-template-columns: 11% minmax(0, 1fr) 100px;
  border-block: var(--rule);
  background: var(--color-news);
}

.news-label, .news-more {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 40px;
}

.news-label {
  color: var(--color-paper);
  background: var(--color-ink);
}

.news-label strong {
  font: 400 1.62rem/1 var(--font-news);
}

.news-story {
  align-self: center;
  padding: 8px 14px;
  text-decoration: none;
}

.news-more {
  border-inline-start: var(--rule);
  font: 400 1.53rem/1 var(--font-utility);
  text-decoration: none;
}

.outline-band {
  overflow: hidden;
  border-block-end: var(--rule);
}

.outline-text {
  margin: 0;
  color: transparent;
  font: 700 clamp(58.5px, 6.6vw, 95.04px)/1 var(--font-editorial);
  letter-spacing: .045em;
  white-space: nowrap;
  -webkit-text-stroke: 1px var(--color-ink);
}

.topics-main {
  inline-size: 77%;
  margin-inline-start: 23%;
}

.section-heading {
  margin: 0;
  padding: 64px 16px 48px;
  text-align: center;
  font: 600 var(--text-section)/1 var(--font-editorial);
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border-block: var(--rule);
  background: var(--color-rule);
}

.topic-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 20px;
  padding: 2.3vw;
  background: var(--color-canvas);
  text-decoration: none;
}

.topic-content { min-inline-size: 0; }
.topic-image { inline-size: 100%; block-size: auto; }

.topic-title {
  margin: 14px 0 10px;
  font-size: 1.053rem;
  font-weight: 700;
  line-height: 1.3;
}

.topic-excerpt {
  margin: 0;
  font-size: .855rem;
  line-height: 1.3;
}

.topic-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.topic-number {
  border-block-end: var(--rule);
  font-size: 1.53rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Recommended method for the observed vertical metadata rail. */
.topic-date, .topic-category {
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-size: .837rem;
  line-height: 1;
}

.topic-category {
  padding: 7px 2px;
  border: var(--rule);
  border-radius: var(--radius-pill);
  font-size: .72rem;
}

.ranking-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block: var(--rule);
}

.ranking-columns > :first-child { border-inline-end: var(--rule); }

.rank-strip {
  overflow: hidden;
  padding-block: 7px;
  color: var(--color-paper);
  background: var(--color-ink);
  white-space: nowrap;
  font-family: var(--font-utility);
}

.rank-title .marker {
  color: var(--color-ink);
  background: var(--color-yellow);
}

.rank-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 62px;
  gap: 18px;
  align-items: center;
  min-block-size: 137px;
  padding: 18px;
  border-block-end: var(--rule);
  text-decoration: none;
}

.rank-row img { inline-size: 62px; block-size: auto; }

.archive-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-block-size: 210px;
  border-block-end: var(--rule);
  text-decoration: none;
  font-weight: 700;
}

.go-disc {
  display: grid;
  place-items: center;
  inline-size: 83px;
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--color-paper);
  background: var(--color-pink);
  font: 400 2.25rem/1 var(--font-utility);
}

.footer-links { background: var(--color-paper); }

.footer-links a {
  display: block;
  min-block-size: 49px;
  padding: 8px 10px;
  border-block-end: var(--rule);
  font: 600 1.65rem/1.2 var(--font-editorial);
  text-decoration: none;
}

.footer-links sup { font: 400 .65rem/1 var(--font-body); }

.keyword-field {
  position: relative;
  min-block-size: clamp(400px, 40.3vw, 580px);
  border-block: var(--rule);
  background: var(--color-canvas);
}

/* Static accessible fallback; physics is a separate enhancement. */
.keyword-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 32px;
}

.keyword-links .tag-pill { background: var(--color-paper); }

.footer-signature {
  position: relative;
  background: var(--color-paper);
}

.footer-slogan {
  margin: 0;
  padding: 36px 16px 12px;
  border-block-end: var(--rule);
  text-align: center;
  font-size: clamp(1rem, 2.3vw, 2.1rem);
}

.footer-wordmark {
  margin: 0;
  overflow: hidden;
  border-block-end: var(--rule);
  font: 600 14vw/.95 var(--font-editorial);
  white-space: nowrap;
}

.footer-legal {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  font: 400 1.25rem/1 var(--font-utility);
}

/* Recommended interaction feedback, not a measured hover state. */
@media (hover: hover) {
  .tag-pill { transition: background-color var(--transition-control); }
  .tag-pill:hover { background: var(--color-yellow); }
}

:where(a, button, input):focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 4px;
}

/* Recommended breakpoint; the original breakpoint is unknown. */
@media (max-width: 48rem) {
  :root {
    --text-logo: 8vw;
    --text-brand: 60vw;
    --text-contents: 12vw;
    --text-tag: 5vw;
    --text-feature: 5vw;
    --radius-feature: 5px;
  }

  .site-header {
    margin-block-start: 2.5vw;
    padding-inline: 1.5vw;
  }

  .ruler {
    block-size: 20px;
    background-size: 7.8px 12px, 39px 19px;
  }

  .feature-section {
    display: block;
    padding: 0 1.7vw 40px;
  }

  .feature-brand {
    inline-size: 82vw;
    margin-block-end: 8vw;
  }

  .feature-brand::before { inset: 28px 0 0; }
  .brand-contents { margin-block-start: -8.2vw; }

  .feature-card {
    display: block;
    margin-inline-start: 8.5vw;
    padding: 2.4vw;
  }

  .pickup-label { inset-inline-start: -8vw; }
  .feature-copy { padding-block-start: 19.5vw; }

  .pick-stamp {
    inset-block-start: -13.5vw;
    inline-size: 32vw;
  }

  .feature-date {
    margin-block-end: 6px;
    font-size: .853rem;
  }

  .feature-title { margin-block-end: 9px; }

  .feature-excerpt {
    margin-block-end: 16px;
    font-size: .875rem;
    line-height: 1.45;
  }

  .feature-go {
    inline-size: 90%;
    margin-inline: auto;
  }

  .news-strip { grid-template-columns: 1fr; }
  .news-story { padding: 14px 8px; }

  .news-more {
    border-inline-start: 0;
    border-block-start: var(--rule);
  }

  .topics-main { inline-size: 100%; margin-inline-start: 0; }
  .topic-grid { grid-template-columns: 1fr; }
  .topic-card { padding: 24px 10.2%; gap: 19px; }
  .topic-title { font-size: 1.097rem; }
  .topic-excerpt { font-size: .875rem; }
  .topic-number { font-size: 1.706rem; }
  .topic-date { font-size: .902rem; }
  .topic-category { font-size: .853rem; }

  /* Proposed mobile ranking arrangement; not visually verified. */
  .ranking-columns { grid-template-columns: 1fr; }
  .ranking-columns > :first-child { border-inline-end: 0; }

  .footer-slogan {
    position: relative;
    z-index: 1;
    padding: 16px 8px;
    border: var(--rule);
    background: var(--color-yellow);
    transform: rotate(9deg);
    font-weight: 700;
  }

  .footer-wordmark { padding-block-start: 12px; font-size: 12.8vw; }
  .footer-legal { padding: 8px; font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tag-track, .outline-text, .pick-stamp {
    animation: none;
    transition: none;
  }

  /* Also disable automatic motion in the associated JavaScript. */
  .tag-ribbon:focus-within { overflow-x: auto; }
}

A minimal featured-card structure follows. The filenames are local implementation placeholders, not discovered original-site asset paths. This example is one static slide; navigation and slide state need a separate implementation.

<article class='feature-card' aria-labelledby='feature-title'>
  <span class='pickup-label' aria-hidden='true'>ピックアップ</span>
  <img
    class='feature-poster'
    src='/assets/feature-poster.webp'
    width='960'
    height='900'
    alt='Colorful typographic poster for the featured design article'
  >
  <div class='feature-copy'>
    <img class='pick-stamp' src='/assets/pick-stamp.svg' alt=''>
    <time class='feature-date' datetime='2025-10-01'>2025.10.01</time>
    <h2 class='feature-title' id='feature-title'>
      <span class='marker'>ここ最近で凄いなと思ったwebデザインをご紹介③</span>
    </h2>
    <p class='feature-excerpt'>A short introduction to the selected article.</p>
    <a class='feature-go' href='/articles/design-selection/'>
      GO! <span aria-hidden='true'>→</span>
    </a>
  </div>
</article>

Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. These do not imply that the original website uses Tailwind. Define the custom properties above first.

@theme inline {
  --color-canvas: #ededed;
  --color-ink: #262626;
  --color-paper: #ffffff;
  --color-rule: #000000;
  --color-yellow: #f8ff3c;
  --color-pink: #ff2167;
  --color-news: #ffd7f6;

  --font-editorial: 'Zilla Slab', serif;
  --font-body: 'Zen Kaku Gothic New', serif;
  --font-utility: 'VT323', serif;
  --font-news: 'Doto', serif;

  --text-identity: var(--text-brand);
  --text-keyword: var(--text-tag);
  --text-feature-title: var(--text-feature);
  --text-section-title: var(--text-section);

  --radius-capsule: 100px;
  --radius-masthead: var(--radius-header);
  --radius-feature-panel: var(--radius-feature);
}

Sources & Evidence

Inspected original page: https://jy-contents.com/. The supplied browser record reports HTTP 200 and the same final URL.
Capture timestamp: 2026-09-12T17:53:44.250Z, equivalent to September 13, 2026, 02:53:44.250 JST.
Desktop evidence: three original-page captures at 1440 × 1000, showing the opening composition, a ranking segment, and the bottom keyword/footer area. The rendered document height is 8687.671875px.
Mobile evidence: two original-page captures at 390 × 844, showing the opening composition and the bottom navigation/keyword/footer area. The rendered document height is 11918.5625px.
Rendered evidence: page title, visible-text extraction, original-page link destinations, custom properties, element rectangles, font stacks, font sizes, weights, line heights, spacing, radii, display modes, and selected transition values.
Interaction evidence: supplied scroll-based capture coverage, visible navigation affordances, different recorded carousel states, repeated ribbon content, and drag labels. No menu activation, carousel-button test, hover sequence, drag trace, or destination-page inspection was supplied.
Inspection limitations: the screenshots are selected crops rather than a complete visual record of every section. The computed-style sample is partial and includes offscreen content. Image source paths, full CSS, media queries, motion keyframes, font files, and JavaScript behavior were not available. The capture process disabled SharedWorkers and service workers and cannot establish delayed-content completeness.

This reference describes the current homepage at the recorded destination. Exact values are attributed to supplied measurements or declarations; screenshot estimates and implementation recommendations are labeled separately.