# Sodelab / Cybozu — Style Reference
> A social-design nursery built from sky blue, white paper panels, and a community of peculiar pastel creatures.
**Website:** [Sodelab](https://cybozu.co.jp/sodelab/)
**Original URL:** https://cybozu.co.jp/sodelab/
**Final URL:** https://cybozu.co.jp/sodelab/
**Theme:** light, with alternating white surfaces and blue section backgrounds; no alternate theme was verified.
**Inspected:** September 22, 2026. Supplied browser retrieval timestamp: `2026-09-22T14:03:49.954Z`, equivalent to 23:03:49.954 JST.
**Viewports:** desktop `1440 × 1000` and mobile `390 × 844` CSS pixels.
**Scope:** the current social-design program homepage: identity and navigation, illustrated opening, featured news, program explanation, five-stage experiment process, six featured teams, additional initiatives, news, social links, contact, and footer. Visual evidence comprises three desktop captures and two mobile captures; rendered DOM and computed styles extend beyond those visible regions. Linked pages and forms were not inspected.
Sodelab is a corporate program and content hub for social experiments. Its substantial explanation, project directory, research navigation, and news archive are central to the experience. The opening illustration establishes a welcoming tone, while the rest of the page gives the program an organized editorial structure.
The visual identity comes from contrasts in shape and scale: enormous rounded white sections, thin dark outlines, square paper-strip headlines, pale yellow backing layers, and loosely drawn characters. Sky blue holds the long page together. English captions and oversized outlined numbers add a technical rhythm without making the Japanese reading experience feel mechanical.
The mobile version reorganizes this composition. The character group moves below the headline, the featured-news capsule becomes a rectangular strip, process cards alternate against the screen edges, and social/contact controls precede the footer identity.
## How to Read This Reference
- **Measured** means a value appears in the supplied computed styles or element bounds. Measurements below are rounded where excessive decimal precision would be unhelpful.
- **Declared** means a custom property was supplied. Its existence does not prove that every suggested component uses it.
- **Estimated** means a visual approximation from the current-page screenshots, without pixel sampling or a corresponding computed property.
- **Recommended** means an implementation choice for reuse, not a verified feature of the original.
- Token names introduced here are implementation aliases unless explicitly identified as source properties.
- Element bounds may include transforms and font-metric adjustments. A reported rectangle is not always equal to the element's line-height multiplied by its line count.
- Small inherited font sizes on heading wrappers do not describe the larger text inside their child spans. Those child styles were not included for every component.
- Navigation entries can appear in the DOM while their containing menu is closed. Their presence and coordinates do not establish a visually inspected open-menu state.
## Tokens — Colors
### Default Palette
| Name | Value | Evidence | Role |
| --- | --- | --- | --- |
| Sky canvas | `#4bb2f8` | Measured body background: `rgb(75, 178, 248)` at both viewports | Main page background, visible between large white sections |
| White paper | `#ffffff` | Measured news and process surfaces; source `--color-txt` | White panels and reversed text on blue |
| Interface blue | `#42a9f1` | Source `--color-main2`; measured dates and section headings | Links, English captions, numbers, and blue emphasis |
| Pale blue outline | `#6dc0f8` | Source `--solid-main3: solid 1px #6dc0f8` | Fine blue rules; the featured-news outline has a similar visible hue |
| Cyan accent | `#47bff6` | Source `--color-main4` | Available supporting blue; exact application was not isolated |
| Butter yellow | `#fff79a` | Source `--color-accent` | Visually consistent with paper backing layers and contact-arrow accents |
| Reading ink | `#141414` | Measured foreground on white content | Japanese copy, navigation, and headlines |
| Rule ink | `#212121` | Source `--solid: solid 1px #212121` | Fine outlines and dividers |
| Utility charcoal | `#292929` | Source `--color-txt3`; measured featured-news caption | English utility text |
| Arrow charcoal | `#2d2d2d` | Source `--color-arrow2` | Available arrow color |
| Pale backing | `#f0f7f9` | Source `--color-shadow2` | Available pale surface/shadow color |
| Translucent backing | `rgba(31, 73, 102, 0.09)` | Source `--color-m-shadow4` | Available subtle blue-gray shadow |
The body inherits white text, but white content surfaces explicitly use dark text. Treat foreground and background as component pairs; copying the body's white foreground into a white card would lose the observed contrast.
The source also declares brighter yellow/orange and red values, including `#ffc036`, `#ffdc50`, `#f10b4c`, and `#ff3030`. Their component usage is not established here. They should not become additional primary interface colors simply because they exist in the stylesheet.
### Supporting Illustration Colors
These are **visual approximations**, useful for commissioning compatible artwork. They are not measured asset colors.
| Suggested alias | Approximate value | Visible use |
| --- | --- | --- |
| Pastel pink | `#f6d3da` | Large soft character bodies and parts of the organic background shapes |
| Mint | `#afe3b5` | Small creatures and green transitions |
| Lime | `#cde398` | Tall green characters |
| Aqua | `#91dce0` | Blue-green characters and background gradients |
| Lavender | `#bdbce7` | Supporting characters |
Use these within illustrations and a few large decorative shapes. The interface itself remains predominantly blue, white, dark ink, and pale yellow.
### Color and Gradient Behavior
Broad organic shapes blend cyan, mint, and yellow, or pink into warm yellow. They sit behind content or connect section boundaries. They are not used as text fills or as a universal card treatment.
White regions have a very faint textured appearance in the captures. Its implementation and asset source are unknown. A nearly invisible texture is an optional approximation; heavy grain would substantially change the result.
## Tokens — Typography
### Japanese Reading Text
- **Computed family:** `'LINE Seed JP', sans-serif`.
- **Common measured weight:** `400`.
- **Role:** paragraphs, navigation, news titles, team descriptions, and most interface copy.
- **Character:** open, approachable, and lightly weighted. Readability comes from size and generous leading rather than boldness.
- **Implementation alias:** `--font-jp`.
### Japanese Display Headings
- **Computed family:** `'senobi-gothic', sans-serif`.
- **Source property:** `--font-gothic2`.
- **Measured weight:** `400`.
- **Role:** major section headings and the program's concluding statement.
- **Tracking:** varies significantly by heading. Do not apply one negative tracking value globally.
### English Labels, Dates, and Numbers
- **Computed family:** `'Chakra Petch', sans-serif`.
- **Source property:** `--font-sans-serif`.
- **Measured weights:** `500` for the featured-news label/date, `400` for process captions, and `800` for large process/team numbers.
- **Tracking:** usually `0.1em` on the measured utility labels.
- **Role:** gives the soft illustration system a precise, slightly technical counterpoint.
The screenshots also show a pixel-like social-follow caption and pixel-like arrows. Their exact font or asset implementation was not supplied. Do not attribute them to Chakra Petch without further evidence.
Font-family declarations are verified; font-file URLs, licenses, and successful loading of every face were not independently checked.
### Type Scale
Values are measured unless explicitly marked as estimates.
| Role | Desktop size / line-height | Mobile size / line-height | Weight and tracking |
| --- | --- | --- | --- |
| Hero text inside paper strips | Approximately `42–44px`; child line-height unavailable | Approximately `21–22px`; child line-height unavailable | Visual estimate; predominantly regular |
| Main section heading | `64px / 64px` | `40.95px / 40.95px` | `400`, senobi-gothic |
| About heading tracking | `-7.36px` | `-4.709px` | Equivalent to approximately `-0.115em` |
| Process heading tracking | `-3.2px` | `-2.048px` | `-0.05em` |
| Team-list heading tracking | `-1.28px` | `-0.819px` | `-0.02em` |
| About introduction | `20px / 44px` | `17.55px / 37.05px` | `400`, approximately `-0.01em` tracking |
| Main explanatory paragraphs | `18px / 40px` | `15.6px / 34.125px` | `400`, normal tracking |
| Process/list introduction | `20px / 42px` | `16.575px / 32.175px` | `400` |
| Closing program statement | `26px / 54px` | `18.525px / 36.075px` | senobi-gothic, `-0.05em` |
| Featured-news caption | `30px / 30px` | `22.425px / 22.425px` | Chakra Petch `500`, `0.1em` |
| Featured-news date | `22px / 22px` | `15.6px / 15.6px` | Chakra Petch `500`, `0.1em` |
| Featured-news title | `20px / 37.647px` | `16.575px / 31.2px` | `400`, `0.1em` |
| Process body | `17px / 36px` | `14.625px / 29.25px` | `400` |
| Process English caption | `18px / 18px` | `12.675px / 12.675px` | Chakra Petch `400`, `0.1em` |
| Process number | `110px / 110px` | `68.25px / 68.25px` | Chakra Petch `800`; mobile tracking `0.05em` |
| Team number | `100px / 100px` | `53.625px / 53.625px` | Chakra Petch `800` |
| Team title | `32px / 32px` | `25.35px / 25.35px` | `400`, `0.05em` |
| Team description | `16px / 34px` | `15.6px / 31.2px` | `400` |
| `#Theme` caption | `20px / 20px` | `11px / 11px` | LINE Seed JP `400` |
The repeated paragraph line-height of approximately twice the font size is a defining token. Do not compress the editorial sections to a conventional `1.4` line-height.
**Wrapper caveat:** the hero paragraph inherits `10px` on desktop, and several composite `h3` wrappers report `11.7px`. Their visible child lettering is much larger. Those wrapper values are not usable headline specifications.
## Tokens — Spacing & Shapes
### Source Units and Containers
The measured root font size is `10px` on desktop and `9.75px` at the mobile viewport. The complete responsive root formula was not supplied. Do not extrapolate it from these two samples.
| Token or region | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Root `1rem` | `10px` | `9.75px` | Computed HTML font size |
| Source `--contents` | `1324.8px`, equivalent to `92vw` | `321.75px`, equivalent to `82.5vw` | Calculated from supplied custom-property expressions |
| Source `--contents-lg-l` | Not supplied | `341.25px`, or `87.5vw` | Declared mobile expression |
| Source `--contents-xl-l` | Not supplied | `355.875px`, or `91.25vw` | Declared mobile expression |
| About reading column | Approximately `582px` | `312px` | Measured paragraph widths |
| Mobile standard prose inset | — | `39px` each side | Measured, equivalent to `10vw` |
| Mobile footer/social inset | — | Approximately `34px` | Screenshot estimate; consistent with the `82.5vw` container |
| Mobile team-description width | — | `273px` | Measured, with `58.5px` side insets |
Containers are intentionally different. The site does not put all headings, illustrations, cards, and paragraphs on one universal left edge.
### Spacing Scale
| Use | Observed amount | Interpretation |
| --- | --- | --- |
| Desktop outer white-panel inset | Approximately `10px` | Narrow blue frame around the opening surface |
| Desktop navigation link padding | `33px 10px` | Tall navigation targets with compact horizontal separation |
| About composite-heading row gap | `24px` desktop; `11.7px` mobile | Child layout gap, not a general paragraph margin |
| Featured-news padding | `34px 60px 34px 116px` desktop | Large left inset accommodates the caption and decorative corner |
| Featured-news mobile padding | `29.25px 29.25px 37.05px` | Full-width strip with a compact two-column interior |
| Process-card padding | `70px 85.719px 90px 87.656px` desktop | Broad internal space around copy and number rail |
| Odd mobile process-card padding | `71.175px 53.625px 73.125px 39px` | Extra clearance toward the inset edge |
| Even mobile process-card padding | `71.175px 39px 73.125px 53.625px` | Mirrored layout |
| Mobile process-card separation | Approximately `63.37px` | Derived from consecutive measured card bounds |
| Team detail-link padding | `15px 19px` desktop; `18.525px 32.175px` mobile | Mobile action becomes taller despite its narrower width |
### Border Radius and Layering
| Element | Value | Status |
| --- | --- | --- |
| Paper-strip headline | Square corners | Visible in both opening captures |
| Desktop process card | `30px` | Measured |
| Odd mobile process card | `0 29.25px 29.25px 0` | Measured; flush left |
| Even mobile process card | `29.25px 0 0 29.25px` | Measured; flush right |
| Desktop featured-news capsule | `1000px` | Measured |
| Mobile featured-news strip | `0` | Measured |
| Mobile menu button | `39px 0 0 39px` | Measured |
| Desktop large white section corners | Approximately `110–125px` | Visual estimate |
| Mobile social tiles | Approximately `15px` | Visual estimate; menu tiles separately measure `14.625px` |
| Source `--radius-md` | `30px` desktop; `14.625px` mobile | Calculated from declared `rem` values |
| Source `--radius-lg` | `40px` desktop; `14.625px` mobile | Calculated from declared `rem` values |
Three distinct depth treatments are visible:
1. Pale yellow paper offset behind a fine dark outline.
2. Dark, solid offset shadows beneath social buttons.
3. Pale blue-gray or multicolor backing beneath larger links and panels.
These are small graphic layers, not a general system of blurred elevation shadows.
### Layout Measurements
| Element | Desktop `1440 × 1000` | Mobile `390 × 844` |
| --- | --- | --- |
| Header brand box | `314 × 85.59px`, at approximately `(80, 79)` | `225.22 × 61.39px`, at approximately `(58.5, 34.22)` |
| Hero headline wrapper | `437.06 × 282px`, at approximately `(70, 292.09)` | `238.45 × 130.80px`, at approximately `(34.13, 227.19)` |
| Featured-news link | `1324.8 × 142.87px`, at approximately `(57.59, 743.08)` | `390 × 212.81px`, at approximately `(0, 682.59)` |
| Process card | Approximately `681.88 × 393–396px` | Approximately `360.75 × 305.21px`; final card approximately `275.96px` high |
| About-page link | Approximately `554 × 174.4px` | Approximately `331.5 × 117.16px` |
| Team detail link | Approximately `539 × 48.22px` | Approximately `268.13 × 55.80px` |
| Mobile menu button | Not visible in the desktop opening | `78 × 78px`, at approximately `(312, 22.42)` |
| Document height | Approximately `11979px` | Approximately `14628px` |
The longer mobile document is consistent with sequential editorial content and a single-column team catalog. It is not a uniformly scaled desktop page.
## Components
### Brand and Primary Navigation
**Role:** identify the program and expose its major content areas.
The upper-left identity combines the Cybozu mark with the Sodelab wordmark and small English descriptor. Treat this as a coordinated graphic lockup. Recreating the wordmark with ordinary text would lose its distinctive spacing and small colored details.
On desktop, a white navigation capsule enters from the right edge at approximately `y = 60px`. Its rounded left end, thin blue outline, and pale backing echo the large featured-news link below. Each item has a dark Japanese label over a smaller, tracked blue English caption.
The seven visible destinations are `育苗実験一覧`, `そでらぼとは`, `プロジェクト`, `調査・提案`, `お知らせ`, `ダウンロード`, and `お問い合わせ`. The first six lead to program content; contact points to an external form.
The DOM also contains six team links beneath the first destination. A dropdown-like structure is supported by the DOM, but its opening trigger, appearance, and keyboard behavior were not exercised.
On mobile, the desktop capsule is replaced by a `78px` white menu tab attached to the right edge. A blue/cyan rounded border frames a small two-line icon with yellow accents. The tab appears at the same upper-right screen position in both the top and footer captures, consistent with persistent positioning. The supplied style subset does not establish its exact positioning rule.
### Illustrated Opening and Paper-Strip Headline
**Role:** state the mission and introduce the project's character world.
The current headline reads `ITとチームワークで より良い社会をつくる 実験をはじめています`. It is composed as three separately sized white strips with fine dark borders. Pale yellow rectangles sit a few pixels down and right, followed by a faint backing layer. Blue emphasis is confined to selected words such as `IT`, `チームワーク`, and `実験`.
On desktop, the strips occupy the left side while a broad mound of pastel creatures fills the lower-right area. Smaller creatures, dotted clusters, striped circles, pixel-edged speech balloons, and flowing gradients populate the margins. Some decorative elements intentionally extend beyond the viewport.
On mobile, the strips remain near the upper-left, with the main character group below them. The group is tall and compact in this captured state. Do not assume it is a simple scaled version of the desktop mound: responsive scene arrangement, alternative artwork, and animation state were not separately established.
**Construction guidance:** keep the strips as separate inline-sized blocks. Preserve sharp corners here even though most surrounding surfaces are rounded. Clip decorative overflow in its own layer so the paper backing and focus outlines remain intact.
### Featured-News Link
**Role:** connect the playful opening to current activity.
The entire white strip is one article link. Desktop anatomy is:
1. A `PICKUP NEWS` caption in Chakra Petch.
2. A thin vertical blue separator.
3. A blue date.
4. A dark, underlined Japanese article title.
The capsule is approximately `92vw` wide, with a visible blue border of about `5–6px` and a pale offset underneath. Small characters peek into its lower-left corner. The current item is dated `2026.09.08` and links to the report about `つづけるPROJECT`.
On mobile, the component loses its rounded outline and becomes a full-width white band with a blue top rule. The caption wraps into two lines in an approximately `115px` left column. The date and article title stack in the right column, beginning around `x = 144.3px`. Keep the article text available below the first viewport rather than forcing it into a fixed-height crop.
### Program Explanation
**Role:** explain the relationship between teamwork, individual concerns, and social design.
The desktop DOM measures a relatively narrow introduction at the left and an approximately `582px` reading column at the right. Three explanatory groups pair composite headings with generous paragraphs. Emphasized heading words use the same outlined-paper vocabulary visible elsewhere.
On mobile, the introduction and all three groups become a sequential reading column, generally `312px` wide. Body copy uses `15.6px` type with `34.125px` line-height. The concluding statement uses senobi-gothic, followed by a blue three-dot motif and a large rounded link to the About page.
The content structure is directly supported by the DOM. Detailed illustration placement within this section is not fully visible in the supplied captures.
### Five-Stage Process Cards
**Role:** turn an abstract social-experiment methodology into a readable sequence.
The five stages progress through finding change, experimenting, sharing, providing evidence, and having that evidence used. Their Japanese keyword labels are `変 化`, `実 験`, `共 有`, `提 供`, and `利 用`.
Each desktop card contains:
- A white surface with `30px` corners.
- A headline combining an outlined, yellow-backed keyword and a plain continuation.
- A short dark paragraph.
- A narrow side composition of vertical English wording and an oversized outlined number.
The observed English decoration reads `Seedlings Experment Process`; the spelling is preserved here as source UI text. Correcting it in a new product would be an editorial decision.
Desktop cards alternate right, left, right, left, right. Their measured x-positions are approximately `700.51px` and `57.59px`. Consecutive cards begin around `277–280px` apart while being roughly `393–396px` tall. This creates an overlapping vertical rhythm rather than five isolated rows on a uniform grid.
On mobile, cards form one sequence but retain an alternating attachment to the viewport edges. Odd cards touch the left edge; even cards touch the right edge. Only the inward-facing corners are rounded. Numbers move toward the top edge, and the decorative caption changes sides with the layout.
Use an ordered list in a new implementation so that the visual staggering does not alter reading order.
### Experiment-Team Catalog
**Role:** provide durable entry points into the six featured initiatives.
A very large rounded white section introduces `育苗実験一覧` in blue. On desktop, the section heading sits left of an explanatory paragraph. Beneath it, two columns of rounded blue cards are slightly staggered; the second column starts approximately `44px` lower.
The visible card entrance and DOM establish this anatomy:
1. Small `#Theme` label.
2. Large two-digit number in Chakra Petch.
3. A substantial visual region.
4. Japanese team title.
5. A short description in white.
6. A full-width white pill link labeled `詳細を見る`.
The six topics concern disaster support, alternative learning, child-abuse prevention, school administrative reform, a school collaboration, and employment support. Individual media assets inside the cards were not sufficiently documented to specify their artwork or cropping.
On mobile, cards are sequential. Their text sits in a `273px` column, and the detail link is approximately `268px` wide and `56px` high. Longer team titles visibly wrap to two lines. Do not lock all titles or descriptions to a fixed single-line height.
### Additional Initiatives
**Role:** show that the six featured teams belong to a wider program.
The rendered text includes a separate ongoing-experiments introduction and three additional team labels. Preserve this distinction between detailed featured entries and supplementary initiatives. Their complete visual arrangement is not established by the supplied screenshots, so it should not be reconstructed as an invented card system.
### News Section
**Role:** publish current reports and announcements.
The desktop footer capture shows editorial content on the blue background. A larger featured article occupies the left side, while a compact article arrangement appears at the right. Images include documentary photography and information graphics rather than only character artwork.
Dates and titles use white text. Small white category labels have dark text and a thin yellow offset. Images have strongly rounded corners. The featured article's photograph and graphic are allowed to retain their original colors.
The DOM lists three recent articles. The mobile news arrangement is not visible in the supplied mobile captures; only its content and links are established.
### Social-Link Tiles
**Role:** provide three clear external destinations.
The footer presents X, note, and Threads beneath a pixel-like `Follow Our SNS !!` caption. Each service has a white rounded tile with a fine dark border and a hard dark shadow shifted down and right. Keep the native service marks distinct from the site's character illustrations.
The mobile screenshot shows three tiles in one row, each approximately `93 × 78px`, with roughly `15px` corners. The DOM separately measures identically sized social links inside the mobile navigation structure; this supports a shared visual vocabulary, but does not prove the footer uses the same selectors.
The X tile includes the small source caption `(旧Twitter)`.
### Contact Panel
**Role:** make contact available as part of the footer's navigation system.
A large white outlined panel contains `お問い合わせ` above `Contact Us`. Small creatures overlap two corners. A thin cyan-to-mint backing layer adds depth.
On desktop, the panel is approximately `205px` wide and `166px` tall by visual estimate. A pale yellow arrow area occupies its lower-right corner. On mobile, the panel becomes approximately `317px` wide and `108px` tall; the arrow sits toward the left of the centered wording.
The link target is `https://c-po.form.kintoneapp.com/public/contact`. Only the destination was observed; the form itself was not inspected.
### Footer and Back-to-Top Link
**Role:** finish the page with identity, navigation, social access, and corporate utilities.
Desktop places the brand and navigation at left, social tiles near the center-right, and the contact panel at far right. A large white surface with deeply rounded upper corners separates it from the blue news section. Corporate links and copyright sit below.
Mobile changes the order: social caption and tiles, contact panel, horizontal divider, centered brand lockup, two-column navigation, then corporate utility links. Copyright runs vertically near the right edge of the navigation area.
The desktop captures also show a green character associated with a pixel-like upward arrow and `TOPへ`. Its anchor points to `#top`. Smooth scrolling, hover behavior, and its appearance threshold were not verified. A corresponding control is not visible in the supplied mobile footer.
## Tokens — Motion & Interaction
### Verified Declarations
| Treatment | Supplied value | What the evidence establishes |
| --- | --- | --- |
| Balloon animation | `2.7s steps(10) infinite balloon` | Several decorative balloon elements have a repeating stepped animation |
| Brand link | `opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1)` | Opacity transition is declared; its active-state endpoint was not supplied |
| Desktop navigation | `color 0.4s cubic-bezier(0.215, 0.61, 0.355, 1)` | Color transition is declared |
| Large links and social tiles | `transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1)` | Transform transition is declared; travel distance is unknown |
| Editorial reveals | Opacity and transform, `1.15s cubic-bezier(0.23, 1, 0.32, 1)` | Reveal-style transition declarations occur throughout the content |
| Reveal delays | Examples include `0.38s`, `0.56s`, `0.74s`, `0.92s`, `1.28s` | Staggered timing is supported by computed styles |
| Source load-fade token | `300ms cubic-bezier(0.215, 0.61, 0.355, 1)` | Declared token; exact component application unknown |
| Source general-fade token | `1200ms cubic-bezier(0.215, 0.61, 0.355, 1)` | Declared token |
| Source marker token | `1500ms cubic-bezier(0.77, 0, 0.175, 1)` | Declared token; marker behavior not independently inspected |
| Source swipe token | `3000ms cubic-bezier(0.77, 0, 0.175, 1) infinite` | Declared token; do not infer a carousel from its name |
The motion vocabulary mixes stepped decorative loops with eased content and link transitions. Applying stepped motion to every component would not reflect the supplied evidence.
### Interaction Limits
The collection included an initial observation of at least five seconds and traversed intermediate scroll positions. Perpetual animations were paused during readiness checks and resumed afterward. This supports stable visual inspection, but it is not a frame-by-frame motion recording.
Animation keyframes, movement amplitudes, character choreography, hover endpoints, menu opening, submenu expansion, focus behavior, and reduced-motion support were not supplied or exercised. The Quick Start's small hover displacement and optional bobbing distance are recommendations.
Observed anchor destinations establish navigation intent. They do not establish successful external navigation or the behavior of the destination pages.
## Surfaces
| Layer | Appearance | Function |
| --- | --- | --- |
| Page canvas | Flat sky blue | Connects the full document and frames white regions |
| Large editorial surface | White, very broad upper curves, faint visible texture | Holds program explanation, catalog introduction, and footer |
| Process panel | White with moderate rounding | Separates each methodology stage |
| Team card | Blue, rounded, white typography | Groups a project's number, visual, explanation, and detail link |
| Headline strip | Square white paper, fine dark border, yellow backing | Gives selected statements a physical, assembled quality |
| Social tile | White, dark outline, solid dark offset | Makes small external destinations feel tactile |
| Major link | White with blue or multicolor backing | Provides a clear destination without an unrelated accent color |
| Decorative field | Pastel organic gradient | Connects illustration clusters and section boundaries |
Keep the fine outlines visible. The design loses much of its identity if every shape is reduced to an unoutlined rounded rectangle.
## Imagery
The main illustrations are irregular, friendly creatures with tiny faces, unequal eyes, loose contours, and varied body shapes. Their diversity makes the teamwork message visible. A large group carries the opening composition, while individual creatures recur at corners, links, and section transitions.
Their linework is thin and hand-drawn rather than uniformly geometric. Most character edges appear smooth; pixelation is localized to speech-balloon contours, certain arrows, and small graphic lettering. Do not apply `image-rendering: pixelated` to all illustrations or photographs.
Decorative motifs include:
- Cyan-to-mint-to-yellow and pink-to-yellow organic shapes.
- Small circular dot clusters with changing pastel colors.
- Diagonal stripe circles partially cropped by the page edge.
- Blue speech balloons with stepped pixel-like boundaries.
- Tiny worm-like or seed-like figures between larger characters.
Photography appears in the news area and remains documentary and full color. Preserve that distinction between imaginative program artwork and evidence of real activity.
### Observed Asset References
No image URLs, filenames, or asset manifest were supplied. The following table identifies visible assets by role only; it does not invent downloadable paths.
| Asset role | Observed location | Reuse guidance |
| --- | --- | --- |
| Cybozu/Sodelab identity lockup | Header and footer | Use an authorized brand asset; preserve its internal proportions |
| Main creature assembly | Opening desktop and mobile captures | Allow separate responsive composition; do not stretch |
| Small character cutouts | News link, process boundary, contact, back-to-top | Place as separate decorative layers when assets permit |
| Pixel-edged speech balloons | Opening margins | Preserve stepped outlines and their offset backing |
| Dots, stripes, and organic gradients | Opening and section boundaries | CSS can approximate these supporting motifs |
| News photographs and graphics | Desktop news/footer capture | Preserve readable crops and natural color |
| Social service marks | Footer tiles | Use the appropriate service assets and accessible names |
Original character artwork carries much of the identity. CSS can reproduce panel geometry and supporting decoration, but it cannot substitute for the illustration system.
## Layout & Responsive Behavior
### Desktop Organization
The page is a long editorial scroll. Its major regions are the illustrated opening, program explanation, process, team catalog, supplementary initiatives, news, and footer.
The opening combines a left headline with a right illustration and a wide news capsule near its base. The explanation uses unequal text columns. The process uses alternating cards. The featured teams form two columns. The footer spreads its roles across the width.
Section boundaries overlap visually. In the supplied desktop bounds, the process section includes `500px` of bottom padding and the following catalog begins before that full bounding region ends. Do not model every section as a rigid non-overlapping box separated by the same margin.
The primary desktop navigation is absent from the supplied middle and footer captures. A sticky desktop navigation state is therefore not established.
### Mobile Organization
At `390px` wide:
- The brand remains large, and the upper-right menu tab stays visible in both supplied screen positions.
- The hero headline begins around `y = 227px`; the creature group occupies the lower half of the opening.
- Featured news starts around `y = 683px` and becomes a full-width rectangular strip.
- Main reading paragraphs generally use `39px` side insets.
- Process cards alternate between the left and right screen edges, with a `29.25px` gap to the opposite edge.
- The team catalog becomes a single sequence, with narrower internal reading columns.
- Social links and contact move ahead of the footer brand/navigation.
- Footer navigation uses two columns, and copyright becomes vertical.
### Breakpoints and Scaling Limits
The source exposes `--mqDown-md: 767`, plus larger breakpoint tokens including `1440` and `1441`. These are declared values, not a complete set of inspected media-query rules.
Only the two stated viewports were captured. Tablet, intermediate desktop widths, landscape phones, text zoom, and viewport-safe-area behavior remain unverified. A new implementation should choose navigation breakpoints by actual label fit rather than assuming the desktop capsule works down to `768px`.
Preserve content reflow and deliberate decorative clipping separately. Out-of-bounds speech balloons are part of the visual composition; out-of-bounds reading text or keyboard focus would be a defect.
## Do’s and Don’ts
### Do
- Build the page around sky blue `#4bb2f8`, white surfaces, dark reading text, and interface blue `#42a9f1`.
- Retain the difference between rounded section surfaces and square headline strips.
- Use fine dark outlines and small, crisp backing layers.
- Keep Japanese body text light and spacious, with leading close to twice its size.
- Pair Japanese display headings with tracked English captions and large outlined numbers.
- Let characters overlap panel edges while keeping text legible.
- Preserve the desktop process stagger and the mobile edge-attached sequence.
- Treat the project directory, research navigation, and news as substantive content architecture.
- Keep documentary photography visually distinct from the decorative character world.
- Recompose the footer for mobile, including its social-first order.
### Don’t
- Don't make every card, panel, and button share one radius or shadow.
- Don't replace the characters with generic geometric blobs or stock business illustrations.
- Don't make blue gradients the fill of every control.
- Don't use heavy display weights for all Japanese headings.
- Don't interpret inherited `10px` wrapper text as the actual hero type size.
- Don't shrink the desktop news capsule intact onto a phone.
- Don't force process cards into a regular five-column feature grid.
- Don't crop team titles or long article headlines to match a decorative fixed height.
- Don't pixelate smooth character art or news photography.
- Don't invent a menu animation, carousel, parallax system, or hover endpoint from token names alone.
## Recommended Implementation Additions
These are recommendations for a new implementation, not verified properties of the original:
- Give the menu button an accessible name, `aria-expanded`, and `aria-controls`. If the menu becomes a modal overlay, implement appropriate focus containment, Escape handling, and focus return.
- Keep hidden navigation genuinely unavailable to keyboard and assistive-technology navigation until opened.
- Use semantic headings and an ordered list for the process, even when its visual numbers overlap card boundaries.
- Render the hero message as accessible text. Hide decorative duplicates if animation splits the letters into multiple visual layers.
- Give purely decorative creatures empty alternatives and meaningful editorial images specific alternatives.
- Check blue-on-white and white-on-blue text contrast, particularly small English captions and team descriptions. Introduce a darker text-blue token where necessary for accessibility.
- Preserve visible focus rings outside the hard offset shadows. Ensure decorative overflow clipping does not cut them off.
- Provide a reduced-motion state for repeated loops and entrance effects. Keep content visible if JavaScript fails or motion is disabled.
- Load fonts with a usable fallback and avoid leaving the page unreadable while custom faces load.
- Verify intermediate widths and enlarged text. The long seven-item desktop navigation is especially sensitive to available width.
- Reserve image dimensions to avoid shifting the long page as character and news assets decode.
## Agent Prompt Guide
### Quick Color Reference
- Main page background: `#4bb2f8`.
- White cards, headline strips, and footer: `#ffffff`.
- Main text: `#141414`; thin rules: `#212121`.
- Interface blue: `#42a9f1`; pale outline blue: `#6dc0f8`.
- Yellow paper backing: `#fff79a`.
- Illustration colors: subdued pink, mint, lime, aqua, and lavender.
- Shadows: mostly crisp offsets; use blur sparingly.
### Overall Prompt
“Create a Japanese social-design program homepage inspired by Sodelab. Use sky blue `#4bb2f8`, large white sections with broad curved corners, fine dark outlines, and small pale yellow backing layers. Pair regular LINE Seed JP body copy with senobi-gothic section headings and Chakra Petch dates, English captions, and oversized outlined numbers. Build an opening with three square white headline strips at left and a group of irregular pastel creatures at right. Follow it with a wide featured-news capsule, spacious program explanation, five alternating process cards, a two-column experiment directory, news, and a substantial footer. On mobile, recompose the artwork below the headline, make featured news a full-width strip, alternate process cards against the screen edges, and place social/contact controls before the footer identity. Keep original artwork and interaction behavior separate from the reusable CSS shell.”
### Example Component Prompts
1. **Headline:** “Compose the actual Japanese mission statement as three separately sized white paper strips. Use thin dark borders, square corners, a pale yellow layer shifted down-right, regular-weight text, and blue emphasis on selected words. Keep the strips stacked with almost no vertical gap.”
2. **Featured news:** “Create a desktop white capsule with a substantial pale blue outline, a tracked `PICKUP NEWS` label, vertical divider, blue date, and an underlined Japanese article title. On a phone, remove the rounded ends and use a full-width strip with the label left and date/title stacked right.”
3. **Process:** “Arrange five white process cards alternately right and left on a sky-blue field. Each combines a yellow-backed keyword label, explanatory text, vertical English decoration, and a large outlined number. On mobile, use one sequence of alternating edge-attached cards with rounding only toward the page interior.”
4. **Team catalog:** “Place numbered blue experiment cards inside a large white section. Use two slightly staggered columns on desktop and one column on mobile. Keep white descriptions spacious, allow long Japanese titles to wrap, and finish each card with a white pill-shaped detail link.”
5. **Footer:** “Build a white footer with a Cybozu/Sodelab identity area, bilingual navigation, three outlined social tiles with hard charcoal shadows, and a creature-decorated contact panel. On mobile, put social and contact first, add a fine divider, then center the identity above two-column navigation.”
6. **Motion:** “Use the evidenced `2.7s steps(10)` timing for optional decorative balloon loops and approximately `1.15s` eased opacity/transform entrances. Keep motion distances modest and explicitly chosen for the new implementation. Do not invent source hover endpoints or require animation to reveal essential content.”
## Quick Start
### CSS Custom Properties
This is a reusable adaptation, not recovered source CSS. It uses a conventional root size and explicit component values. Fonts must be supplied separately; no font or image asset URLs were available in the evidence.
Measured endpoint values inform the typography, featured-news layout, and process-card geometry. Hero positioning, section curvature, a `1100px` navigation-collapse breakpoint, hover travel, and decorative motion amplitudes are recommendations. The `767px` content breakpoint follows a declared source breakpoint value, but its complete original rules were not supplied.
Apply `class='sodelab'` to the page wrapper. Keep illustration assets in a separate decorative layer and place actual image elements inside `.hero-art` when authorized artwork is available.
```css
:root {
/* Measured colors and source-declared accents */
--sky: #4bb2f8;
--paper: #ffffff;
--ink: #141414;
--rule: #212121;
--blue: #42a9f1;
--blue-line: #6dc0f8;
--yellow: #fff79a;
--pale-shadow: #f0f7f9;
/* Source font-family assignments; load fonts separately */
--font-jp: 'LINE Seed JP', sans-serif;
--font-display: 'senobi-gothic', sans-serif;
--font-latin: 'Chakra Petch', sans-serif;
--text-body: 18px;
--leading-body: 40px;
--text-section: 64px;
--radius-card: 30px;
--radius-section: 120px; /* Visual approximation */
--radius-pill: 1000px;
--wide: 92%;
--ease-link: cubic-bezier(0.215, 0.61, 0.355, 1);
--ease-reveal: cubic-bezier(0.23, 1, 0.32, 1);
--motion-link: 400ms var(--ease-link);
--motion-reveal: 1150ms var(--ease-reveal);
}
.sodelab,
.sodelab * {
box-sizing: border-box;
}
.sodelab {
margin: 0;
color: var(--ink);
background: var(--sky);
font-family: var(--font-jp);
font-size: var(--text-body);
font-weight: 400;
line-height: var(--leading-body);
}
.sodelab img {
display: block;
max-width: 100%;
height: auto;
}
.sodelab :where(h1, h2, h3, p) {
margin: 0;
}
.wide {
width: var(--wide);
margin-inline: auto;
}
.section-title {
font-family: var(--font-display);
font-size: var(--text-section);
font-weight: 400;
line-height: 1;
letter-spacing: -0.02em;
}
.section-title--about { letter-spacing: -0.115em; }
.section-title--process { letter-spacing: -0.05em; }
.white-section {
position: relative;
color: var(--ink);
background: var(--paper);
border-radius: var(--radius-section) var(--radius-section) 0 0;
padding-block: 150px;
}
/* Desktop identity and navigation */
.site-header {
position: absolute;
inset: 0 0 auto;
z-index: 20;
}
.brand {
position: absolute;
top: 79px;
left: 80px;
width: 314px;
}
.desktop-nav {
position: absolute;
top: 60px;
right: 0;
display: flex;
padding-left: 25px;
border: 1px solid var(--blue);
border-right: 0;
border-radius: 60px 0 0 60px;
background: var(--paper);
box-shadow: -4px 4px 0 var(--pale-shadow);
}
.desktop-nav a {
display: block;
padding: 33px 10px;
color: var(--ink);
text-decoration: none;
transition: color var(--motion-link);
}
.nav-jp {
display: block;
font-size: 18px; /* Screenshot-based approximation */
line-height: 1;
white-space: nowrap;
}
.nav-en {
display: block;
margin-top: 8px;
color: var(--blue);
font-family: var(--font-latin);
font-size: 15px; /* Screenshot-based approximation */
line-height: 1;
letter-spacing: 0.1em;
}
.menu-tab {
display: none;
position: fixed;
top: 22.425px;
right: 0;
width: 78px;
height: 78px;
border: 5px solid var(--blue-line);
border-right: 0;
border-radius: 39px 0 0 39px;
background: var(--paper);
color: var(--ink);
cursor: pointer;
}
/* The desktop scene is an approximation of the captured composition. */
.hero {
position: relative;
min-height: 733px;
margin: 10px 10px 0;
padding: 282px 60px 0;
border-radius: 30px 30px 0 0;
background: var(--paper);
isolation: isolate;
}
.hero-decoration {
position: absolute;
inset: 0;
overflow: hidden;
z-index: -1;
pointer-events: none;
}
.hero-copy {
position: relative;
z-index: 2;
font-size: 44px; /* Visual estimate */
font-weight: 400;
line-height: 1.5;
}
.paper-line {
display: table;
position: relative;
padding: 11px 14px;
border: 1px solid var(--rule);
background: var(--paper);
box-shadow:
7px 7px 0 var(--yellow),
8px 8px 0 var(--rule),
14px 14px 0 var(--pale-shadow);
}
.paper-line + .paper-line { margin-top: -1px; }
.paper-line em { color: var(--blue); font-style: normal; }
.hero-art {
position: absolute;
right: 13%;
bottom: 0;
width: 36%;
pointer-events: none;
}
.hero-art img { width: 100%; object-fit: contain; }
/* Featured news: one link with a caption and a metadata/content group. */
.pickup {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: 290px minmax(0, 1fr);
align-items: center;
gap: 60px;
width: var(--wide);
min-height: 143px;
margin-inline: auto;
padding: 34px 60px 34px 116px;
border: 6px solid var(--blue-line);
border-radius: var(--radius-pill);
color: var(--ink);
background: var(--paper);
box-shadow: 0 6px 0 var(--pale-shadow);
text-decoration: none;
transition: transform var(--motion-link);
}
.pickup-label {
display: flex;
align-items: center;
min-height: 40px;
border-right: 1px solid var(--blue-line);
color: #292929;
font: 500 30px/1 var(--font-latin);
letter-spacing: 0.1em;
}
.pickup-body {
display: grid;
grid-template-columns: 148px minmax(0, 1fr);
align-items: center;
gap: 46px;
min-width: 0;
}
.pickup-date {
color: var(--blue);
font: 500 22px/1.2 var(--font-latin);
letter-spacing: 0.1em;
}
.pickup-title {
font-size: 20px;
font-weight: 400;
line-height: 1.88235;
letter-spacing: 0.1em;
text-decoration: underline;
text-decoration-color: var(--blue-line);
text-underline-offset: 8px;
text-decoration-thickness: 1px;
overflow-wrap: anywhere;
}
/* Keep ordered-list semantics even though cards alternate visually. */
.process-list {
display: flex;
flex-direction: column;
width: var(--wide);
margin: 0 auto;
padding: 0;
list-style: none;
}
.process-step {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 156px;
gap: 20px;
width: 51.47%;
min-height: 393px;
padding: 70px 85.7px 90px 87.7px;
border-radius: 30px;
background: var(--paper);
}
.process-step:nth-child(odd) { align-self: flex-end; }
.process-step:nth-child(even) { align-self: flex-start; }
.process-step + .process-step { margin-top: -116px; }
.process-heading {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
font-size: 28px; /* Recommended child size; not measured */
font-weight: 400;
line-height: 1.5;
}
.keyword {
display: inline-block;
padding: 8px 16px;
border: 1px solid var(--rule);
color: var(--blue);
background: var(--paper);
box-shadow: 5px 5px 0 var(--yellow), 6px 6px 0 var(--rule);
}
.process-copy p {
margin-top: 42px;
font-size: 17px;
line-height: 36px;
}
.process-rail { text-align: center; }
.process-kicker {
display: inline-block;
color: var(--blue);
font: italic 400 18px/1.4 var(--font-latin);
letter-spacing: 0.1em;
writing-mode: vertical-rl;
}
.process-number {
display: block;
margin-top: 26px;
color: var(--paper);
font: 800 110px/1 var(--font-latin);
-webkit-text-stroke: 1px var(--blue);
text-shadow: 3px 3px 0 var(--yellow);
}
@supports not (-webkit-text-stroke: 1px black) {
.process-number { color: var(--blue); }
}
/* Reusable catalog and footer surfaces */
.team-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 48px 20px;
margin: 0;
padding: 0 26px;
list-style: none;
}
.team-card {
padding: 50px 70px;
border-radius: 50px; /* Visual approximation */
color: var(--paper);
background: var(--blue);
}
.team-card:nth-child(even) { transform: translateY(44px); }
.team-card h3 { font-size: 32px; font-weight: 400; line-height: 1.2; }
.team-card p { margin-top: 30px; font-size: 16px; line-height: 34px; }
.detail-link {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 49px;
margin-top: 36px;
padding: 15px 19px;
border: 1px solid var(--rule);
border-radius: var(--radius-pill);
color: var(--ink);
background: var(--paper);
font-size: 16px;
line-height: 1.4;
text-decoration: none;
box-shadow: 5px 5px 0 var(--yellow);
transition: transform var(--motion-link);
}
.site-footer {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 50px;
align-items: start;
padding: 120px 60px 70px;
border-radius: var(--radius-section) var(--radius-section) 0 0;
background: var(--paper);
}
.social-row { display: flex; gap: 20px; }
.social-tile {
display: grid;
place-items: center;
width: 108px;
min-height: 100px;
border: 1px solid var(--rule);
border-radius: 30px;
color: var(--ink);
background: var(--paper);
box-shadow: 6px 6px 0 #444;
text-decoration: none;
transition: transform var(--motion-link);
}
.contact-panel {
position: relative;
display: grid;
place-content: center;
min-width: 205px;
min-height: 166px;
padding: 24px;
border: 1px solid var(--rule);
border-radius: 40px;
background: var(--paper);
color: var(--ink);
text-align: center;
text-decoration: none;
box-shadow: 6px 6px 0 #a9dfcb;
}
.footer-nav {
display: grid;
grid-template-columns: repeat(3, max-content);
gap: 24px 28px;
}
.footer-nav a { color: var(--ink); text-decoration: none; }
/* Recommended motion distances; source endpoints were not supplied. */
@media (hover: hover) {
.pickup:hover,
.detail-link:hover,
.social-tile:hover { transform: translate(-2px, -2px); }
}
.has-bob { animation: recommended-bob 2.7s steps(10) infinite; }
@keyframes recommended-bob {
50% { transform: translateY(-6px); }
}
/* Apply only when an entrance is intentionally triggered. */
.is-entering { animation: recommended-enter var(--motion-reveal) both; }
@keyframes recommended-enter {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.sodelab :where(a, button):focus-visible {
outline: 3px solid var(--ink);
outline-offset: 5px;
}
/* Fit-based recommendation, not an observed source breakpoint. */
@media (max-width: 1100px) {
.desktop-nav { display: none; }
.menu-tab { display: block; }
.process-step { padding-inline: 36px; }
.pickup { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding-inline: 32px; }
.pickup-body { grid-template-columns: 1fr; gap: 12px; }
.site-footer { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
:root {
--wide: 82.5%;
--text-body: 15.6px;
--leading-body: 34.125px;
--text-section: 40.95px;
--radius-section: 40px; /* Recommended mobile surface radius */
}
.brand { top: 34.22px; left: 15%; width: 57.75%; }
.white-section { padding-block: 96px; }
.hero {
min-height: 682.6px;
margin: 0;
padding: 227.2px 8.75% 0;
border-radius: 0;
}
.hero-copy { font-size: 22px; line-height: 1.45; }
.paper-line { padding: 4px 10px; }
.hero-art { right: auto; left: 15%; bottom: 12px; width: 72%; }
.pickup {
grid-template-columns: 115.05px minmax(0, 1fr);
gap: 0;
width: 100%;
min-height: 212.8px;
padding: 29.25px 29.25px 37.05px;
border: 0;
border-top: 5px solid var(--blue-line);
border-radius: 0;
box-shadow: none;
}
.pickup-label {
display: block;
border: 0;
font-size: 22.425px;
line-height: 1.05;
}
.pickup-body { display: block; }
.pickup-date { display: block; font-size: 15.6px; }
.pickup-title { margin-top: 12px; font-size: 16.575px; line-height: 31.2px; }
.process-list { width: 100%; gap: 63.37px; }
.process-step {
display: block;
width: 92.5%;
min-height: 276px;
padding: 71.175px 53.625px 73.125px 39px;
border-radius: 0 29.25px 29.25px 0;
}
.process-step + .process-step { margin-top: 0; }
.process-step:nth-child(odd) { align-self: flex-start; }
.process-step:nth-child(even) {
align-self: flex-end;
padding-inline: 53.625px 39px;
border-radius: 29.25px 0 0 29.25px;
}
.process-heading { max-width: calc(100% - 70px); font-size: 23px; gap: 10px; }
.keyword { padding: 5px 10px; }
.process-copy p { margin-top: 30px; font-size: 14.625px; line-height: 29.25px; }
.process-rail { position: absolute; top: -8px; right: 32px; width: 105px; }
.process-number { margin-top: 0; font-size: 68.25px; letter-spacing: 0.05em; }
.process-kicker { position: absolute; top: 76px; right: 16px; font-size: 12.675px; }
.process-step:nth-child(even) .process-rail { right: auto; left: 32px; }
.process-step:nth-child(even) .process-heading { margin-left: 92px; max-width: none; }
.team-grid { grid-template-columns: 1fr; gap: 30px; padding-inline: 10px; }
.team-card { padding: 42px 48.5px; border-radius: 30px; }
.team-card:nth-child(even) { transform: none; }
.team-card h3 { font-size: 25.35px; }
.team-card p { font-size: 15.6px; line-height: 31.2px; }
.detail-link { min-height: 56px; padding: 18.525px 32.175px; }
.site-footer { gap: 34px; padding: 60px 8.75%; }
.footer-social { order: 1; }
.footer-contact { order: 2; }
.footer-identity { order: 3; padding-top: 40px; border-top: 1px solid var(--rule); }
.footer-legal { order: 4; }
.social-row { gap: 19.5px; }
.social-tile { width: calc((100% - 39px) / 3); min-height: 78px; border-radius: 15px; }
.contact-panel { min-width: 0; min-height: 108px; border-radius: 30px; }
.footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; }
}
@media (prefers-reduced-motion: reduce) {
.sodelab *,
.sodelab *::before,
.sodelab *::after {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
}
```
The CSS intentionally leaves artwork, the menu's open state, and reveal triggering to the application. Reduced-motion CSS does not itself pause animated image files, video, or canvas rendering.
A minimal component structure for the featured-news link and one process item follows. The observed article destination is included; the process card is explanatory content rather than a fabricated link.
```html
PICKUP NEWS