# Spark Journal by KDDI — Style Reference > Navy ink, pastel sparks, and graph paper frame a lively editorial magazine. **Website / Original URL:** [spark-journal.kddi.com](https://spark-journal.kddi.com/) **Final URL:** [https://spark-journal.kddi.com/](https://spark-journal.kddi.com/) **Theme:** light in the supplied captures **Inspected:** September 12, 2026, at 06:32:04.841 UTC / 15:32:04.841 JST **Viewports:** desktop 1440 × 1000 CSS px; mobile 390 × 844 CSS px **Scope:** the current homepage, using five supplied captures and rendered DOM/computed-style evidence. Visual coverage includes the opening article carousel, the introduction, a desktop category section, related-site banners, social links, and the footer. DOM evidence additionally establishes feature teasers, latest articles, category card layouts, video content, ranking, and series. Article destinations and open utility panels were not inspected. Spark Journal is an editorial brand-media homepage. Large article images introduce its stories immediately; compact dates and substantial Japanese headlines sit below. Deep navy unifies text, borders, and navigation, while orange, cyan, pink, and lavender identify four editorial categories. Fine graph-paper lines and oversized spark silhouettes connect otherwise different photographs, comic graphics, and flat illustrations. The desktop composition has a distinctive frame: narrow side rails carry vertical section labels and archive links, while generous inner margins contain staggered feature teasers and asymmetric article groups. Mobile changes this organization deliberately. Section labels become horizontal, latest articles form a vertical stack, and secondary category stories become image-and-text rows. The result keeps editorial variety without shrinking the entire desktop layout uniformly. ## How to Read This Reference - **Measured** means a value reported by the supplied rendered DOM or computed element styles. - **Source token** means a custom property present in the supplied evidence. Its presence does not prove that every matching component uses it. - **Calculated** means arithmetic based on supplied measurements or source formulas, normally at the observed 16px root size. - **Estimated** means a visual approximation from a capture, including image boundaries and unsampled decorative shapes. - **Recommended** means implementation guidance for a new project. The Quick Start is an adaptation, not extracted production code. Computed font-family lists establish declared stacks, not successful loading of every font. Likewise, offscreen elements with dimensions do not establish that a dropdown was opened. Screenshot geometry and DOM measurements were captured at nearby states; animated positions can differ slightly. ## Tokens — Colors ### Default Palette All hexadecimal values in this table are source tokens. The body foreground and background also have matching computed values. | Name | Value | Source token | Role | | --- | --- | --- | --- | | Navy Ink | `#0e0d6a` | `--color-base` | Headlines, links, category labels, fine outlines, menu fill, and primary icons | | Cool Paper | `#f2f3f8` | `--color-bg` | Main page canvas and pale editorial surfaces | | White | `#ffffff` | `--color-white` | Image frames, pill controls, category tabs, and footer areas | | Body Charcoal | `#22223b` | `--color-black` | Introductory and explanatory paragraphs; this token is not pure black | | Grid Gray | `#dde0e7` | `--color-gd` | Graph-paper lines and pale separation details | | Pale Gray | `#e7e9f2` | `--color-ge` | Additional declared neutral; individual assignments are not established by the sampled elements | The page gains contrast from navy against light surfaces. Pink and blue support content grouping rather than replacing navy as the reading color. Strong yellow, black, and red inside article graphics belong to those images; they are not additional global action colors. ### Category Palette | Source UI label | Accent token | Exact source gradient | Category mark | | --- | --- | --- | --- | | `つなぐ` | `--color-tsunagu: #fdc372` | `linear-gradient(135deg, #fdc372 2.88%, #fef2ca 69.74%)` | Curved four-point sparkle | | `テクノロジー` | `--color-technology: #88d8fe` | `linear-gradient(132.95deg, #88d8fe 4.31%, #d9f8fe 68.39%)` | Eight-point starburst | | `暮らし` | `--color-kurashi: #ffafcb` | `linear-gradient(135deg, #ffafcb 2.88%, #ffede5 70.58%)` | Curved three-point mark | | `みらい` | `--color-mirai: #d8a8ff` | `linear-gradient(135deg, #d8a8ff 2.88%, #ffe3f6 70.58%)` | Five-point star | The desktop category capture visibly confirms a cyan technology field followed by a pink-to-peach living field. The other gradient definitions are present in both viewport token sets, although those complete sections are not shown in the supplied images. Behind the opening carousel, a very large peach-and-pink spark extends across the header and into the following grid area. Its appearance is observed, but its exact fill construction and geometry were not sampled. Do not identify that decoration as one of the category gradients solely because its colors are similar. ## Tokens — Typography ### Default Interface and Japanese Text - **Computed default stack:** `Geist`, `Local Noto Sans JP`, `Noto Sans JP`, `Hiragino Sans`, followed by Japanese system fallbacks and `sans-serif`. - **Measured body:** 16px, weight 400, 28px line height, 0.8px tracking. - **Source emphasis weights:** `--fw-medium: 500` and `--fw-bold: 600`. - **Character:** clear sans-serif text with moderately open tracking. Headlines gain emphasis through weight and placement rather than unusually large type. Geist heads the default stack, while Japanese-capable families follow it. The evidence does not identify the actual font file used for each glyph. Preserve this distinction when specifying font assets. ### English Section Labels `--ff-title` begins with `Montserrat`, then `Montserrat Alternates`, Geist, and the Japanese fallback stack. Computed labels such as `Feature`, `What's new`, and `Category` use this stack at 20px, weight 600, with a 24px line height and normal tracking. These labels run down the desktop side rail and across the top of mobile sections. Montserrat Alternates is a fallback in the declared stack; the evidence does not establish intentional alternation between the two faces. ### Vertical Japanese Titles `--ff-vertical` begins with `Local Noto Sans JP` and `Noto Sans JP`. Desktop section tabs use this stack, as do the long vertical feature headlines. Feature headlines are regular weight 400, approximately 24px on desktop and 20px on mobile. Their quieter weight distinguishes them from bold article headlines. ### Numbers and Dates `--ff-number` starts with `Zalando Sans Expanded`, then Geist and the default fallbacks. The visible carousel counter has conspicuously wide numerals, including an outlined current number. The date-size token is `--fz-date: .625rem`, or 10px at the observed root. However, sampled date wrapper paragraphs report inherited 16px text with a 12.5px rectangle height. The inner date renderer was not included. Treat 10px as a source token supported by the small visual appearance, not as a directly measured inner-glyph size. ### Brand Graphics The desktop logo occupies a measured 300 × 60px box; mobile uses 105 × 40px. Its arrangement changes from a broad horizontal wordmark to a compact stacked version. Use authorized logo artwork rather than attempting to recreate its lettering with a font. The introductory slogan is visible in the captures but corresponds to an empty-text paragraph in the extraction. Its exact rendering method and font assignment are unverified. Its apparent type size is approximately 40px on desktop and 28px on mobile, estimated from the images. ### Type Scale | Role | Desktop | Mobile | Weight / leading | Evidence | | --- | --- | --- | --- | --- | | Default body | 16px | 16px | 400 / 1.75 | Measured | | Header category links | 13px | Hidden from the compact header | 600 / 1.7 | Measured desktop; mobile visibility observed | | Header utility labels | 12px | 12px where text remains visible | 600 / 1.5 | Measured | | Article category label | 12px | 12px | 600 / 1.5 | Measured | | Major article title | 24px | 18.065px | 600 / 1.5 | Measured | | Standard article title | 16px | 15.024px | 600 / 1.65 | Measured | | Introductory paragraph | 18px | 13.057px | 400 / 1.65 | Measured | | Feature description | 14px | 13.024px | 400 / 1.7 | Measured | | English section label | 20px | 20px | 600 / 1.2 | Measured | | Japanese section tab | About 20px | 16.032px | 600; desktop vertical layout | Measured | | Vertical feature headline | 23.997px | 20.033px | 400 / 1.6 | Measured | | Date | 10px token | 10px token | Inner renderer not sampled | Source token | Most Japanese interface text uses tracking close to `0.05em`: 1.2px on a 24px headline, 0.6px on a 12px category label, and approximately 0.903px on an 18.065px mobile headline. The motion toggle uses normal tracking. ## Tokens — Spacing & Shapes **Density:** small utility controls and close image metadata, balanced by broad section margins and prominent artwork. ### Responsive Units The original root remains 16px at both supplied viewports. Numerous source tokens interpolate using a numeric viewport-width value and `clamp()`. At the observed root, that numeric value is 1440 on desktop and 390 on mobile. For example, the following are equivalent simplifications at a 16px root: ```css /* Calculated equivalents at the observed root size */ --title-large: clamp(1.125rem, calc(.991rem + .5664vw), 1.5rem); --lead-size: clamp(.813rem, calc(.701rem + .472vw), 1.125rem); --layout-gap: clamp(20px, calc(12.83px + 1.89vw), 40px); --grid-cell: clamp(10px, calc(6.415px + .944vw), 20px); ``` The source also normalizes its viewport calculation against the measured rem size. These simpler formulas should not be described as identical under every browser text-size setting. ### Spacing Scale Values below are calculated from source tokens and rounded to two decimals. | Source token | Desktop | Mobile | Useful interpretation | | --- | --- | --- | --- | | `--space-08-b` | 10px | 10px | Small fixed block spacing | | `--space-07-b` | 20px | 10.10px | Small fluid block spacing | | `--space-06-b` | 20px | 20px | Fixed metadata separation | | `--space-05-b` | 30px | 20.10px | Medium block spacing | | `--space-04-b` | 40px | 30.10px | Card-row and component spacing | | `--space-03-b` | 60px | 40.20px | Section inset scale | | `--space-02-b` | 80px | 60.20px | Large section spacing | | `--space-01-b` | 120px | 60.59px | Major editorial spacing | | `--gap` | 40px | 20.20px | Main content gap | | `--space-07-i` | 20px | 10.10px | Small inline inset and grid-cell scale | Token names do not guarantee component usage. For example, the desktop side-rail offset is 80px, while mobile `--offset` changes to the approximately 20.20px gap token. ### Border Radius | Element / token | Desktop | Mobile | Evidence | | --- | --- | --- | --- | | Sampled article-link wrapper | 16px | 8.077px | Measured; matches fluid `--radius-01-02` | | Visible white media frame | Approximately 16px | Approximately 16px | Estimated from captures; separate from the link wrapper | | Inner article image | Approximately 8px | Approximately 4–8px | Estimated; exact inner styles were not supplied | | Category section tab | 8px | 8px | Measured | | Utility buttons and archive pills | Fully rounded | Fully rounded | Measured effective pill radius | | Section rules and social panel | Square | Square | Observed | The fixed source radius tokens are 16px, 8px, and 4px. Two additional tokens interpolate between 8–16px and 4–8px. Do not copy the link wrapper's computed radius onto every nested layer: the screenshot shows distinct outer-frame and inner-image curvature. ### Layout Measurements | Element | Desktop 1440 × 1000 | Mobile 390 × 844 | Status | | --- | --- | --- | --- | | Document height | 10,825.66px | 11,836.48px | Measured; content/state dependent | | Header rectangle | 1440 × 101px | 390 × 71.09px | Measured | | Logo box | 300 × 60px | 105 × 40px | Measured | | Main start position | y = 101px | y = 61.19px | Measured | | Active carousel link | 680 × 532.5px | 343.53 × 353.75px | Measured for the selected story | | Active carousel x position | 380px | 23.23px | Measured | | Carousel image | 640 × 360px | About 323.34 × 181.88px | Desktop estimated; mobile calculated at 16:9 | | Adjacent carousel gap | 20px | 10.09px | Calculated from link rectangles | | Carousel arrow button | 60 × 40px | 45.13 × 30.09px | Measured | | Desktop rail-to-rail region | Approximately 1280px | Reorganized into ordinary content flow | Observed | | Latest-article card width | 360px | 349.63px | Measured | | Category lead-card width | 560px | 349.63px | Measured | | Secondary category card | 260px, stacked anatomy | 349.63px, horizontal anatomy | Measured | | Grid-cell size | 20px | 10.10px | Calculated source token | **Header discrepancy:** the mobile header rectangle is approximately 9.91px taller than the main-content offset. The opening image also begins near y = 61px. These measurements should remain separate; the supplied data does not establish the rule responsible for the overlap. ## Components ### Site Header **Role:** persistent identity, category access, motion control, and utility entry points. Desktop anatomy runs left to right: wide logo, motion toggle, flexible space, four category links, AI pill, search pill, and navy menu pill. The logo begins at x = 40px. The motion toggle starts at x = 360px and measures 110.58 × 30px. Category links use approximately 20px separation. The menu is 60 × 40px at the far right, with a 40px outer margin. White utilities have a pale outline and navy text. Their 12px labels sit beside small icons; the motion toggle includes a navy circular pause symbol. The menu reverses this treatment with a solid navy surface and white lines. At 390px, the logo becomes stacked and begins at x ≈ 20.19px. The motion button narrows to 99.67px but retains its text. AI becomes a 50 × 30px icon pill. A navy control approximately 50 × 30px displays search and menu symbols. The four category links and separate search-label pill are absent from the visible compact header. The header appears at the top of both mobile captures, including the footer view. This supports its availability at those scroll positions, but does not identify whether the implementation uses fixed positioning, sticky positioning, or conditional visibility. The desktop header is not visible in the supplied footer capture. A skip-to-main link is present in the DOM and positioned above the viewport in the sampled resting state. Its actual focus reveal was not tested. ### AI and Search Utilities **Role:** alternative routes into the publication's content. The supplied DOM contains AI introductory text, a short accuracy note, a `質問する` action, search submission controls, and `閉じる` controls. Desktop submit buttons measure 160 × 40px; mobile equivalents measure approximately 120.39 × 40px. They use navy fill, white 16px text, weight 600, and pill geometry. These are DOM-supported component details. No capture shows an open AI, search, or menu panel. Panel placement, input styling, focus behavior, loading states, answers, search results, and submission behavior remain unverified. Do not turn these latent elements into an asserted screenshot of an open panel. ### Featured Article Carousel **Role:** the first and largest route into current stories. Four logical articles appear in the supplied content. Repeated DOM links are carousel copies, not twelve independent stories. Both opening captures show the smartphone-dependency article at position `3 / 4`. Each slide contains two visually distinct regions: 1. A white, navy-outlined media frame containing a landscape image and a small category label. 2. An unboxed information block below, containing the date followed by the headline. On desktop, the active slide is centered at x = 380px with a 680px width. Its image is approximately 640 × 360px, inset 20px from the outer frame. The category line sits below the image with a 10px gap and uses a colored category mark, a 5px icon/text gap, and 12px navy text. The frame ends near y = 519px. The date wrapper starts at y = 539px; the title begins at y = 561.5px. The title occupies two 36px lines. The entire linked article extends to y = 633.5px, so the white frame should not wrap around the date and headline. Mobile preserves this hierarchy. The link is 343.53px wide, with approximately 10.09px image insets and a 323.34px image width. The same headline wraps into three lines at 18.065px / 27.097px. Neighboring slides remain visible as narrow clipped previews at the viewport edges. Previous and next pills flank a wide numeral counter below the title. Desktop controls begin at y = 653.5px; mobile controls begin at y = 434.94px. The current number has an outlined appearance, while the slash and total are filled navy. A visible fraction is part of this component's identity. ### Keyword Ticker **Role:** a lightweight topic-discovery strip between the carousel and brand introduction. White pills run horizontally across a graph-paper background. Each contains an emoji and a bold 16px label, including `Starlink`, `南極`, and `カーボンニュートラル`. The pill sequence is repeated in the DOM and clipped at the viewport edges. Desktop pills are 40px tall; mobile pills are 38px tall. The icon/text gap is 5px, and the inter-pill gap is also approximately 5px. Mobile preserves the 16px type size while reducing horizontal padding. The strip occupies approximately 80px vertically in the desktop capture and 78px on mobile. Fine navy rules and the grid background connect it to the next section. Repetition suggests a looping presentation, but direction, speed, and pause response were not demonstrated by the supplied interaction evidence. ### Brand Introduction **Role:** explains the publication after readers have already encountered its stories. A graph-paper field contains the slogan `ときめきが見つかる、KDDIのブランドメディア`, an explanatory paragraph, and a white pill linking to `Spark Journalとは`. Desktop uses a broad graphic headline at left and a measured 460px paragraph column at right. The paragraph is 18px / 29.7px in Body Charcoal. Its about link is approximately 209.89 × 40px, aligned to the paragraph's left edge. Mobile places the headline above the paragraph. The paragraph is 309.25px wide, starts at x = 40.38px, and uses 13.057px / 21.544px. The about link retains its approximately 210px width and becomes centered. Preserve this extra inner margin: it is narrower than the mobile article-card width. ### Section Rails and Labels **Role:** establishes recurring editorial chapters through the long homepage. Desktop sections use approximately 80px rails at both edges. Thin navy rules separate the rails from the central area. The left rail carries a small English label followed by a Japanese tab; the right rail carries an archive link and a small arrow pill. English labels read down the rail. Japanese tab text remains upright in a vertical arrangement. General sections such as `特集` and `新着記事` use navy tabs with white text. Category sections use white tabs, navy text, and the corresponding pastel symbol. At 390px, the English label and Japanese tab become a horizontal pair above the content. Their measured gap is about 10px. Archive links move to a horizontal, right-aligned position below the content. This is a layout change, not simply smaller vertical rails. ### Feature Teasers **Role:** gives curated themes a different rhythm from ordinary articles. The DOM establishes three staggered desktop teasers, each 360px wide, arranged at x = 140px, 540px, and 940px. Each uses a 280px main column, a 20px gap, and a 60px title column. The long Japanese title runs vertically beside the main content rather than above it. The second teaser begins 120px lower than the first; the third begins 40px lower. Descriptions use 14px / 23.8px text. This deliberate staggering contributes an editorial spread-like composition. Mobile retains a horizontal sequence. Teasers measure 270.88px wide, with a 200.78px main column, approximately 10.10px gap, and the same 60px title column. The first three x positions are approximately 41.38px, 342.34px, and 643.31px. Their vertical offsets are approximately 0, 60.58, and 30.09px. Two arrow controls are present below the sequence. The structure is supported by DOM geometry, but the supplied screenshots do not show the feature artwork. Image styling, hover appearance, and drag behavior should not be invented. ### Article Cards **Role:** a reusable story entry with separate media and reading layers. The recurring anatomy is a linked wrapper containing a white media frame, an image, a category line, and an external date/headline block. The date and title align with the image's inner left edge rather than with the frame outline. | Variant | Desktop anatomy | Mobile anatomy | | --- | --- | --- | | Latest article | 360px card; approximately 340px image; 16px title | 349.63px stacked card; approximately 329.63px image; 15.024px title | | Category lead | 560px card; approximately 540px image; 24px title | 349.63px stacked card; 18.065px title | | Category secondary | 260px card; approximately 240px image; title below | Full-width horizontal row; media at left, date and title at right | The mobile secondary row is particularly important. A measured example has columns of 151.13px and 178.31px, separated by 20.20px. The category stays inside the left media frame. The date begins at the top of the right column, followed approximately 5px later by the title after the date line. Inner media insets shrink to approximately 5px. Secondary titles remain approximately 15px / 24.79px, allowing several lines. Do not impose the lead-card layout on every mobile story. Row heights vary with the title length. The DOM exposes `記事を見る` within linked content, but the resting captures do not show a large standalone action button on each image. Its reveal conditions were not tested. ### Category Editorial Sections **Role:** groups stories into four recognizable worlds while retaining a shared navigation system. Each category uses its pastel gradient and a large, pale decorative category shape. The desktop living section clearly shows this treatment: a pink field, an oversized translucent curved mark, a flat illustration at left, and photographic article cards at right. The central desktop content spans approximately x = 140–1300px. Within it, the introduction is about 400px wide, while the story area starts at x = 740px and is 560px wide. A lead article fills the story area; secondary articles form two 260px columns separated by 40px. The visible living illustration is approximately 400 × 300px. A person in pale turquoise clothing walks through a simplified town against a saturated pink sky. Flat shapes, a low horizon, and a dark navy bag make the illustration legible without intricate texture. Each category contains five stories in the supplied text. The mobile measurements show a compact introduction followed by a full-width lead and horizontal secondary rows. The measured introduction paragraph is 164.72px wide, approximately half the available content width. Its accompanying mobile illustration bounds were not supplied. ### Latest Articles, Video, Ranking, and Series **Role:** supplies complementary ways to browse the publication. | Section | Established content and structure | Evidence limit | | --- | --- | --- | | `What's new` / `新着記事` | Three equal 360px desktop cards; three vertically stacked 349.63px mobile cards | Geometry and typography measured; no dedicated section screenshot | | `Videos` / `おすすめ動画` | A dated recommended-video item and a video archive link | Player controls, playback, and layout details are unverified | | `Ranking` / `ランキング` | Five ordered stories with visible rank numbers in extracted text | Full visual arrangement and update logic are unverified | | `Series` / `連載` | Two logical series entries, repeated carousel content, and a counter totaling two | Only the bottom edge of the section is visible in the desktop footer capture | Use these sections to preserve multiple editorial entry points. Their DOM presence does not justify fabricating a video modal, ranking period selector, or complete series animation. ### Related-Site Banner Strip **Role:** links readers to other KDDI publications and initiatives. A white horizontal band contains differently branded rectangular banners. The desktop capture shows approximately 245 × 98px banner images, around 20px gaps, partial items at the edges, and centered previous/next controls below. These dimensions are visual estimates. Individual banners retain their own photography, typography, and logos. The shared strip organizes them through consistent height and spacing rather than recoloring every brand. Repeated outbound links appear in the DOM, but automatic movement and mobile banner geometry are unverified. ### Follow-us Panel **Role:** a calm social subscription point before the legal footer. Desktop uses an approximately 1280 × 182px rectangular panel with a 1px navy outline and a graph-paper background. An outlined `Follow us` display treatment sits at left, explanatory content occupies the middle, and X, Facebook, and YouTube marks sit at right. The panel begins approximately 80px from each viewport edge. The outlined heading appears around 40px high, estimated from the capture. Its actual font or artwork method was not sampled. The official-account heading is heavier than the small explanatory line. On mobile, the panel is approximately 350px wide. The visible official-account heading is centered, body copy remains left aligned, and the three social marks form a centered row below. The top of this panel is outside the footer capture, so that image does not establish whether the `Follow us` heading is hidden or simply above the crop. Social marks keep their recognizable black, blue, and red treatments. They are intentional brand-color exceptions to the navy interface palette. ### Footer **Role:** corporate identity, policy access, and a quiet end to the long page. The footer switches to a white field with generous whitespace. Desktop legal links occupy two columns at the left; the KDDI logo and `Spark Your Journey` line sit at the right. Copyright is right aligned near the bottom. Mobile places all nine legal/utility links in a single column with approximately 35px row spacing. The KDDI mark follows after a generous gap, then left-aligned copyright wraps into two lines. Horizontal margins are approximately 20px. Link text appears around 12px, estimated from the capture. Most corporate and policy links show a small northeast arrow. The AI terms link does not show the same external-link marker in the supplied captures. The original page's KDDI branding, corporate links, and copyright support its corporate identity. ## Tokens — Motion & Interaction | Treatment | Supplied value or evidence | What can be concluded | | --- | --- | --- | | Base duration | `--duration-base: 1s` | Declared timing basis; not a universal animation length | | Utility-button transitions | Background, border, and color at `0.2s` | Measured transition definitions; endpoint colors were not exercised | | Carousel arrow transitions | Background and border at `0.2s` | Measured definitions | | Keyword-pill transition | Border at `0.2s` | Measured definition | | Slider duration | `--slider-duration: 1.2s` | Source token; actual component assignment and autoplay interval are unverified | | Desktop header movement | `inset-block-start 0.3s` | Measured transition; triggering scroll behavior is unverified | | Mobile header transition | `none` | Measured in the supplied mobile state | | General easing | `cubic-bezier(.47, 0, 0, 1.15)` | Declared curve with overshoot; individual assignments are unverified | | Global motion control | Visible `動きを停止`; alternate `動きを再生` in DOM | Pause/resume affordance exists; full behavior was not tested | | Reduced-motion initialization | Supplied startup excerpt checks system preference and a saved preference | Preference-aware initialization is supported; end-to-end behavior remains unverified | | Repeated article, keyword, and banner sequences | Duplicated DOM entries and clipped horizontal presentation | Supports carousel/loop structure, not an exact motion schedule | Both opening captures show the same selected story. They do not independently demonstrate an automatic slide advance. The presence of a 1.2-second slider token must not be mistaken for a 1.2-second autoplay interval. Most sampled elements report `animation: none`. This does not rule out motion on an ancestor, pseudo-element, or JavaScript-controlled track. Conversely, decorative sparks should not be described as morphing or parallax-driven without direct evidence. For a new implementation, preserve explicit motion control, keep manual navigation available, and use the supplied timing scale only where the intended transition is established. Exact autoplay cadence should remain a product decision until verified. ## Surfaces | Layer | Appearance | Purpose | | --- | --- | --- | | Page canvas | Cool Paper with navy foreground | Common foundation for the editorial interface | | Graph-paper region | Two perpendicular 1px Grid Gray lines, with 20px desktop and approximately 10.10px mobile cells | Connects topic navigation, introduction, and social content | | Category field | Pastel gradient with a large pale category silhouette | Distinguishes editorial chapters | | Media frame | White fill, fine navy outline, rounded corners | Gives photographs and graphics a consistent container | | Article information | Transparent background beneath or beside the frame | Keeps dates and headlines integrated with the surrounding section | | Utility pill | White with pale outline, or navy with white symbols | Compact navigation hierarchy | | Footer and banner band | White with broad spacing | Separates corporate navigation from the colorful editorial body | The exact grid source is: ```css background-image: linear-gradient(90deg, #dde0e7 1px, transparent 1px), linear-gradient(#dde0e7 1px, transparent 1px); background-position: -1px -1px; ``` No general shadow-elevation system is visible in the supplied captures. A shadow within the comic thumbnail belongs to the artwork. Rounded white media frames should remain crisp and flat. ## Imagery The imagery deliberately combines documentary photographs, designed editorial thumbnails, and category illustrations. The common frame makes these styles coexist without requiring a single photographic filter. The selected hero thumbnail is a comic composition with a salmon field, large navy Japanese lettering on yellow blocks, a phone-like result panel, and expressive faces. Those letters are embedded artwork. Keep the separate HTML article headline below it so the publication remains readable outside the image. Other visible stories use photographs of an Antarctic expedition, public figures presenting recycled phones, convenience-store activity, and a consultation space. Preserve meaningful subjects and embedded captions when cropping. The recurring article-image proportion is approximately 16:9. Category illustration uses broad geometric silhouettes and saturated flat colors within a 4:3 composition. Its simplified person, bag, buildings, and landscape communicate a topic at a glance. The large background marks repeat the category-symbol language at a much larger scale. ### Observed Asset References No image `src` URLs or downloadable asset filenames were supplied. The references below identify content associations and inline icon definitions; article links are not direct image URLs and their destinations were not opened. | Asset or visual | Evidence reference | Observed use | | --- | --- | --- | | Smartphone-dependency comic thumbnail | [Homepage article link](https://spark-journal.kddi.com/tsunagu/article00370) | Selected carousel image; salmon, navy, yellow, and comic panels | | Antarctic expedition photograph | [Homepage article link](https://spark-journal.kddi.com/tsunagu/article00377) | Neighboring carousel story | | Phone-recycling photograph | [Homepage article link](https://spark-journal.kddi.com/kurashi/article00376) | Large living-category card | | Convenience-store collage | [Homepage article link](https://spark-journal.kddi.com/kurashi/article00365) | Carousel neighbor and secondary category card | | Category marks | `--icon-tsunagu`, `--icon-technology`, `--icon-kurashi`, `--icon-mirai` | Inline SVG definitions with 20 × 20 viewboxes | | Utility symbols | `--icon-search`, `--icon-ai`, `--icon-pause`, `--icon-play`, `--icon-prev`, `--icon-arrow` | Inline SVG definitions with 10 × 10 viewboxes | | Header and footer logos | Supplied top and footer captures | Responsive publication identity and corporate signature | | Living-category illustration | Desktop category capture | Flat person-and-town illustration; source asset path unavailable | Use authorized image and logo assets. Keep normal image rendering for photography and illustration; no pixelated or halftone rendering treatment is established for the page shell. ## Layout & Responsive Behavior | Area | Desktop observation | Mobile observation | | --- | --- | --- | | Header | Wide logo, category navigation, labeled AI/search, menu | Stacked logo, retained motion label, compact utility icons | | Opening carousel | Centered 680px slide with large neighboring previews | Centered 343.53px slide with narrow neighboring previews | | Article headline | 24px, two lines for the selected story | 18.065px, three lines for the same story | | Keyword strip | Horizontal, 40px pills | Horizontal, 38px pills; 16px text retained | | Introduction | Headline and paragraph in separate columns | Headline above narrower paragraph; centered about link | | Section labels | Vertical side rails | Horizontal labels above content | | Feature teasers | Three staggered columns | Horizontal sequence with arrows and retained vertical titles | | Latest articles | Three equal columns | One vertical stack | | Category stories | Lead plus two-column secondary grid | Full-width lead plus horizontal secondary rows | | Social panel | Heading, copy, and icons distributed across one wide panel | Stacked copy and centered icons | | Legal footer | Two link columns; brand at right | Single link column; brand and copyright below | The desktop frame uses approximately 80px outer rails and 60px additional inner padding, putting ordinary content near x = 140px. At mobile width, ordinary cards use approximately 20.19px outer margins. The introduction uses approximately 40.38px margins, while the hero uses its own centering rule. These are three distinct width systems. The declared `--max-width` is `max(1440px, 90rem)`, equivalent to 1440px at the observed root. Only 1440px and 390px were inspected; exact breakpoint thresholds, tablet layouts, and behavior beyond the declared maximum are unverified. At mobile width, headline and paragraph sizes change selectively. Body defaults and keyword text remain 16px, while the introductory paragraph becomes about 13px. A single global scale factor would miss these relationships. The sampled page heights are approximately 10.83k desktop pixels and 11.84k mobile pixels. They describe this content snapshot, not a fixed implementation height. Let article titles and section content determine the vertical flow. ## Do’s and Don’ts ### Do - Use `#0e0d6a` consistently for primary reading text, outlines, and navigation. - Keep the four category colors tied to their labels and distinct symbols. - Pair fine navy framing with pale grid backgrounds and broad pastel fields. - Keep article dates and headlines outside the white image frame. - Preserve visible neighboring carousel slides and the fraction counter. - Use 600-weight article titles with approximately `0.05em` tracking. - Retain vertical Japanese feature headlines and staggered teaser placement. - Give category sections a large lead story and smaller supporting stories. - Change supporting mobile cards into horizontal rows while keeping lead cards stacked. - Preserve the compact motion control in the mobile header. - Keep photography, comic artwork, and flat illustration distinct within the shared frame. - Allow the footer to finish the page with white space and compact corporate links. ### Don't - Don't flatten every content group into one identical card grid. - Don't put dates and titles inside a large white box when the observed component leaves them unboxed. - Don't turn all mobile cards into tiny two-column thumbnails. - Don't recolor article artwork or social logos to force every pixel into the category palette. - Don't use saturated category colors for long reading text. - Don't add diffuse card shadows, glass blur, or thick borders to the editorial shell. - Don't replace the separate category symbols with one generic star. - Don't assume the logo or introductory slogan is ordinary text using the default font stack. - Don't present hidden utility-panel measurements as a tested open state. - Don't infer an autoplay interval from the slider-duration token. - Don't use fixed section heights derived from this content snapshot. ## Recommended Implementation Additions These are recommendations for a new implementation, not claims of missing or existing behavior on the original: - Preserve the supplied skip-link pattern and verify that focus reveals it above the header. - Give icon-only AI, menu, search, and carousel controls explicit accessible names. The text-only extraction is insufficient to assess existing accessible names. - Expand small 30px control hit areas toward 44px where possible without enlarging their visible pill surfaces. - Keep one logical set of carousel links in the accessibility tree; exclude visual clones from keyboard navigation. - Let users pause automatic motion and continue navigating manually. Apply the preference consistently to sliders, tickers, and decorative movement. - Implement open utility panels with suitable focus management, Escape handling, and focus restoration after the actual interaction model is specified. - Use semantic dates and descriptive article links. Do not rely on text embedded in thumbnails as the only accessible story title. - Reserve image aspect ratios to prevent layout shifts, and load below-the-fold artwork progressively. - Test long Japanese titles and increased text size. The observed 10px date token and approximately 13px mobile paragraphs merit legibility checks. - Verify the mobile header/main overlap before reproducing it; do not silently treat 61.19px and 71.09px as interchangeable. ## Agent Prompt Guide ### Quick Color Reference - Main ink and outlines: `#0e0d6a`. - Page canvas: `#f2f3f8`. - Media frames and utility pills: `#ffffff`. - Explanatory copy: `#22223b`. - Graph-paper lines: `#dde0e7`, 1px thick. - Connection category: `#fdc372` toward `#fef2ca`. - Technology category: `#88d8fe` toward `#d9f8fe`. - Living category: `#ffafcb` toward `#ffede5`. - Future category: `#d8a8ff` toward `#ffe3f6`. ### Overall Prompt “Create a Japanese editorial brand-media homepage inspired by Spark Journal by KDDI. Use deep navy `#0e0d6a` on cool paper `#f2f3f8`, white image frames with fine outlines, pastel category gradients, and a subtle graph-paper pattern. Begin with a centered article carousel showing neighboring slides, a framed 16:9 image with a small category line, and an unboxed date and bold Japanese headline underneath. Add compact white arrow pills and a wide fraction counter. Follow with emoji topic pills, a publication introduction, staggered feature teasers with vertical Japanese titles, latest articles, and category sections pairing flat illustrations with documentary photographs. Use vertical desktop section rails and horizontal mobile headings. On mobile, retain full-width lead stories and convert supporting category stories into image-and-text rows. Keep explicit motion controls and avoid invented utility-panel states.” ### Example Component Prompts 1. **Article carousel:** “At 1440px, center a 680px article link with a white navy-outlined media frame, a 640 × 360px image, and a 12px category label inside the frame. Put the small date and a 24px/36px, weight-600 Japanese headline below on the page background. Show portions of adjacent slides and a `3 / 4` counter between white arrow pills. At 390px, use an approximately 344px slide and an 18px/27px headline.” 2. **Category section:** “Build a desktop editorial section with 80px side rails, a pink-to-peach background, a large pale curved category symbol, a 400px introduction and flat illustration at left, and a 560px story area at right. Place one large article above two 260px supporting columns. Keep dates and headlines outside the white media frames.” 3. **Mobile supporting story:** “Create a roughly 350px-wide linked row with a 151px media column, a 20px gap, and a 178px text column. Keep the category beneath the image inside a small white outlined frame. Put the date above a 15px/25px Japanese title at right. Allow the row height to follow the text.” 4. **Feature teaser:** “Use a staggered editorial teaser with a main image-and-description column and a narrow vertical Japanese headline column. Use regular-weight 24px vertical text on desktop and approximately 20px on mobile. Preserve horizontal overflow and arrow navigation on narrow screens.” 5. **Social footer:** “Create a square-cornered graph-paper panel with a fine navy outline. On desktop, place an outlined `Follow us` treatment at left, official-account copy in the middle, and original-color X, Facebook, and YouTube marks at right. Stack the copy and center the icons on mobile, then follow with a spacious white legal footer.” ## Quick Start ### CSS Custom Properties This adaptation supplies the core palette, responsive type, article anatomy, category layout, and footer surfaces. It abbreviates the source font fallbacks and assumes any required font files are registered separately. It does not fetch assets or implement carousel, AI, search, or menu behavior. The 64rem breakpoint, sticky header, hover underline, and focus treatment are recommendations. Mobile uses a stable approximately 71px header in ordinary flow rather than reproducing the unresolved 61.19px main offset. Frame radii follow visual estimates; link-wrapper radii follow measured tokens. ```css :root { /* Source colors with implementation aliases */ --ink: #0e0d6a; --paper: #f2f3f8; --white: #ffffff; --body-ink: #22223b; --grid-line: #dde0e7; --pale-line: #e7e9f2; --connection: #fdc372; --technology: #88d8fe; --living: #ffafcb; --future: #d8a8ff; --gradient-connection: linear-gradient(135deg, #fdc372 2.88%, #fef2ca 69.74%); --gradient-technology: linear-gradient(132.95deg, #88d8fe 4.31%, #d9f8fe 68.39%); --gradient-living: linear-gradient(135deg, #ffafcb 2.88%, #ffede5 70.58%); --gradient-future: linear-gradient(135deg, #d8a8ff 2.88%, #ffe3f6 70.58%); /* Declared source families; loading is a separate concern */ --font-jp: 'Local Noto Sans JP', 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; --font-body: 'Geist', var(--font-jp); --font-display: 'Montserrat', 'Montserrat Alternates', var(--font-body); --font-number: 'Zalando Sans Expanded', var(--font-body); --weight-bold: 600; /* Source-equivalent calculations at a 16px root */ --text-large: clamp(1.125rem, calc(.991rem + .5664vw), 1.5rem); --text-card: clamp(.938rem, calc(.916rem + .0944vw), 1rem); --text-lead: clamp(.813rem, calc(.701rem + .472vw), 1.125rem); --text-category: .75rem; --text-date: .625rem; --layout-gap: clamp(20px, calc(12.83px + 1.89vw), 40px); --small-inset: clamp(10px, calc(6.415px + .944vw), 20px); --grid-cell: var(--small-inset); --radius-link: clamp(8px, calc(5.132px + .755vw), 16px); --radius-image: clamp(4px, calc(2.566px + .378vw), 8px); --radius-frame: 16px; --radius-pill: 9999px; --motion-hover: 200ms; --motion-slider: 1200ms; --motion-header: 300ms; --ease-editorial: cubic-bezier(.47, 0, 0, 1.15); /* Recommended layout aliases */ --header-size: 71px; --slide-size: min(680px, 88.085vw); } * { box-sizing: border-box; } body { margin: 0; color: var(--ink); background: var(--paper); font: 400 1rem/1.75 var(--font-body); letter-spacing: .05em; } img { display: block; max-width: 100%; } button, input { font: inherit; } button { cursor: pointer; } a { color: inherit; } .grid-paper { background-image: linear-gradient(90deg, var(--grid-line) 1px, transparent 1px), linear-gradient(var(--grid-line) 1px, transparent 1px); background-size: var(--grid-cell) var(--grid-cell); background-position: -1px -1px; } .journal-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; min-height: var(--header-size); padding-inline: var(--layout-gap); border-bottom: 1px solid var(--ink); background: var(--paper); } .journal-logo { width: 105px; height: 40px; object-fit: contain; } .journal-nav { display: none; } .motion-toggle { margin-inline-start: auto; } .pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 30px; padding: 4px 14px; border: 1px solid var(--grid-line); border-radius: var(--radius-pill); color: var(--ink); background: var(--white); font-size: .75rem; font-weight: var(--weight-bold); line-height: 1.5; text-decoration: none; transition: background-color var(--motion-hover), border-color var(--motion-hover), color var(--motion-hover); } .pill--ink { color: var(--white); background: var(--ink); } /* Native scrolling is a recommended baseline, not verified source behavior. */ .hero-track { display: flex; gap: var(--small-inset); overflow-x: auto; padding-inline: calc((100% - var(--slide-size)) / 2); padding-block-end: 6px; scroll-snap-type: x mandatory; } .hero-track > .article { flex: 0 0 var(--slide-size); scroll-snap-align: center; --frame-inset: var(--small-inset); } .carousel-controls { display: flex; justify-content: center; align-items: center; gap: 20px; margin-block: 20px 30px; } .carousel-arrow { width: 45px; min-height: 30px; padding: 0; } .carousel-count { min-width: 60px; text-align: center; font-family: var(--font-number); font-weight: 600; } .carousel-count strong { color: transparent; -webkit-text-stroke: 1px var(--ink); } .article { --frame-inset: 10px; --frame-gap: 10px; display: block; min-width: 0; border-radius: var(--radius-link); text-decoration: none; } .article__frame { display: block; padding: calc(var(--frame-inset) - 1px); border: 1px solid var(--ink); border-radius: var(--radius-frame); background: var(--white); } .article__image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-image); } .article__category { display: flex; align-items: center; gap: 5px; margin: var(--frame-gap) 0 0; font-size: var(--text-category); font-weight: 600; line-height: 1.5; } .category-mark { width: 10px; height: 10px; flex: none; color: var(--category-color, var(--connection)); fill: currentColor; } .article__info { display: block; margin-block-start: 20px; padding-inline: var(--frame-inset); } .article__date { display: block; font-family: var(--font-number); font-size: var(--text-date); line-height: 1.25; } .article__title { margin: 10px 0 0; font-size: var(--text-card); font-weight: 600; line-height: 1.65; overflow-wrap: anywhere; } .article--lead .article__title, .hero-track .article__title { font-size: var(--text-large); line-height: 1.5; } .article--compact { display: grid; grid-template-columns: 43.225% minmax(0, 1fr); align-items: start; gap: var(--layout-gap); --frame-inset: 5px; --frame-gap: 5px; } .article--compact .article__info { margin: 0; padding: 0; } .article--compact .article__title { margin-block-start: 5px; } .keyword-strip { padding-block: 20px; border-bottom: 1px solid var(--ink); } .keyword-track { display: flex; gap: 5px; overflow-x: auto; padding-inline: 10px; } .keyword { flex: none; min-height: 38px; gap: 5px; font-size: 1rem; line-height: 1.75; } .journal-section { border-bottom: 1px solid var(--ink); } .section-label { display: flex; align-items: center; gap: 10px; margin: 0; padding: 40px var(--layout-gap) 30px; } .section-label__english { font: 600 20px/1.2 var(--font-display); letter-spacing: normal; } .section-label__badge { margin: 0; padding: 2px 10px; border-radius: 8px; color: var(--ink); background: var(--white); font-size: 1rem; font-weight: 600; } .section-content { min-width: 0; padding: 0 var(--layout-gap) 40px; } .section-more { display: flex; justify-content: flex-end; padding: 0 var(--layout-gap) 40px; font-weight: 600; } .category--connection { background: var(--gradient-connection); --category-color: var(--connection); } .category--technology { background: var(--gradient-technology); --category-color: var(--technology); } .category--living { background: var(--gradient-living); --category-color: var(--living); } .category--future { background: var(--gradient-future); --category-color: var(--future); } .category-layout { display: grid; gap: 40px; } .category-intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: var(--layout-gap); } .category-intro p { margin: 0; color: var(--body-ink); font-size: var(--text-lead); line-height: 1.65; } .category-intro img { width: 100%; aspect-ratio: 4 / 3; border-radius: 16px; } .article-grid, .latest-grid { display: grid; gap: 30px; } .follow-panel { display: grid; gap: 20px; margin: 60px var(--layout-gap); padding: 30px 20px; border: 1px solid var(--ink); background-color: var(--white); } .follow-panel__title { margin: 0; text-align: center; font: 600 40px/1.2 var(--font-display); color: transparent; -webkit-text-stroke: 1px var(--ink); } .social-links { display: flex; justify-content: center; gap: 20px; } .journal-footer { padding: 0 var(--layout-gap) 60px; background: var(--white); } .footer-links { display: grid; gap: 16px; font-size: .75rem; } .footer-links a { text-decoration: none; } /* Recommended interaction feedback */ a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; } @media (hover: hover) { .article:hover .article__title { text-decoration: underline; text-underline-offset: .2em; } .pill:hover { border-color: var(--ink); } } /* Recommended breakpoint; original threshold was not supplied. */ @media (min-width: 64rem) { :root { --header-size: 101px; } .journal-header { gap: 20px; padding-inline: 40px; } .journal-logo { width: 300px; height: 60px; } .motion-toggle { margin-inline-start: 0; } .journal-nav { display: flex; gap: 20px; margin-inline-start: auto; font-size: 13px; font-weight: 600; } .carousel-arrow { width: 60px; min-height: 40px; } .keyword { min-height: 40px; } .journal-section { display: grid; grid-template-columns: 80px minmax(0, 1fr) 80px; max-width: 1440px; margin-inline: auto; } .section-label { flex-direction: column; justify-content: flex-start; padding: 30px 20px; border-right: 1px solid var(--ink); } .section-label__english { writing-mode: vertical-rl; } .section-label__badge { writing-mode: vertical-rl; padding: 12px 9px; font-size: 20px; } .section-content { padding: 60px; } .section-more { align-items: flex-end; justify-content: center; padding: 30px 20px; border-left: 1px solid var(--ink); } .section-more a { writing-mode: vertical-rl; } .category-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; } .category-intro { display: block; max-width: 400px; padding-block-start: 60px; } .category-intro img { margin-block-start: 40px; } .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; } .article--lead { grid-column: 1 / -1; } .latest-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } .article--compact { display: block; --frame-inset: 10px; --frame-gap: 10px; } .article--compact .article__info { margin-block-start: 20px; padding-inline: 10px; } .article--compact .article__title { margin-block-start: 10px; } .follow-panel { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 40px; margin: 80px; padding: 60px; } .journal-footer { padding-inline: 80px; } .footer-links { grid-template-columns: repeat(2, max-content); column-gap: 80px; } } /* JavaScript controllers must also honor either pause condition. */ [data-motion='paused'] [data-animated] { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { [data-animated] { animation: none !important; } .hero-track { scroll-behavior: auto; } .pill { transition: none; } } ``` ### Article Markup The asset path below is an example application filename, not an observed original-site asset. Replace it with an authorized image. This example uses a single link and keeps the date/title outside the media frame. The SVG reproduces the supplied connection-category mark. ```html

つなぐ

子どもが納得するスマホのルールを考える
``` The empty image alternative is appropriate only when the image adds no essential information beyond the linked headline. Supply a meaningful alternative when it does. Use `article--compact` for supporting category rows; omit both modifiers for standard latest-article cards. The CSS is a reference implementation and was not browser-tested during this analysis. It does not reproduce branded artwork, exact feature-carousel behavior, background spark geometry, or utility-panel logic. ### Tailwind v4 Token Mapping Optional aliases for a project already using Tailwind v4. This is not evidence that the original site uses Tailwind. Define the custom properties above first. ```css @theme inline { --color-journal-ink: var(--ink); --color-journal-paper: var(--paper); --color-journal-body: var(--body-ink); --color-journal-grid: var(--grid-line); --color-journal-connection: var(--connection); --color-journal-technology: var(--technology); --color-journal-living: var(--living); --color-journal-future: var(--future); --font-journal: var(--font-body); --font-journal-display: var(--font-display); --font-journal-number: var(--font-number); --text-journal-large: var(--text-large); --text-journal-card: var(--text-card); --text-journal-lead: var(--text-lead); --spacing-journal-gap: var(--layout-gap); --spacing-journal-inset: var(--small-inset); --radius-journal-frame: var(--radius-frame); --radius-journal-image: var(--radius-image); } ``` ## Sources & Evidence - **Inspected original and final homepage:** [Spark Journal by KDDI](https://spark-journal.kddi.com/). The supplied browser record reports HTTP 200 and identical original/final URLs. - **Capture record:** September 12, 2026, at `2026-09-12T06:32:04.841Z`; desktop 1440 × 1000 CSS px and mobile 390 × 844 CSS px. - **Visual evidence:** three desktop captures showing the opening carousel, a technology/living category boundary, and the lower page/footer; two mobile captures showing the opening carousel/introduction and footer. - **Rendered evidence:** page text, original-page links, custom properties, computed typography, element rectangles, grid columns, radii, transition declarations, and document heights at both viewports. Article URLs referenced above were present as homepage links; their destination pages were not inspected. - **Observation procedure:** the supplied browser process included an initial observation of at least five seconds and bounded checks for loading, finite animation completion, layout stability, and image decoding. Perpetual animations were paused for readiness checks and then resumed. Scrolling traversed intermediate positions. These measures do not prove that every delayed state was reached. - **Interaction limits:** no supplied event trace demonstrates clicking carousel arrows, pausing motion, opening AI/search/menu panels, submitting forms, or playing video. Hover endpoints, keyboard behavior, and exact automatic-motion cadence remain unverified. SharedWorkers and service workers were disabled in the supplied inspection environment. This reference describes the current homepage represented by those captures and measurements. Source values, calculated dimensions, visual estimates, and recommended adaptations are identified separately throughout.