ANDPAD DESIGN.md

Design System Inspiration of ANDPAD

Overview

Visual Theme & Atmosphere

ANDPAD connects construction-site work with business management: photographs, schedules, drawings and chat sit within a cloud construction-project management service. It launched in 2016. In May 2020, the company changed its name from Oct to ANDPAD and renewed its logo around the idea of building together and supporting one another. Its mission is “幸せを築く人を、幸せに。” (2020 brand announcement, tenth-anniversary announcement).

The homepage gives that identity a direct visual expression: black Japanese headings, white space, square red actions and imagery of buildings, people and the product. Bright red #ef3340 and deeper red #c8102e distinguish the two adjacent header actions. The hero pairs a large statement on the left with moving imagery divided into tall rectangular panels on the right. These are observations of the captured homepage, rather than published brand prescriptions.

The product is expanding beyond its original construction-management application. ANDPAD's 2026 anniversary announcement describes an evolution into AI through Stellarc, alongside BPO, funding and human-resource services. The live homepage title now leads with “建設バーティカルAI”. The company's published design writing also documents Tsukuri, a system primarily for its SaaS products as of December 2023. The measurements below belong specifically to the public Japanese marketing homepage; no equivalence with Tsukuri's application tokens is established. (Anniversary announcement, Tsukuri design account).

Primary homepage tasks are to explore products, industries and customer stories, inspect pricing, request information and contact the company. The measured URL stayed https://andpad.jp/, with HTML lang="ja"; there was no regional redirect.

Brand Narrative

The 2020 name and logo change linked ANDPAD's identity to accomplishing work with other people. The 2026 anniversary material traces the service from its 2016 construction-management launch toward wider support for construction businesses. The rectangular imagery and red actions are the live marketing expression measured here. (Brand announcement, anniversary history).

Principles

ANDPAD's published Tsukuri account identifies consistent experiences across its products as a design-system need and describes replacing individually judged colour rules with more systematic tokens. The brand announcement stresses building with others. For recreating the measured homepage, the practical rules are square geometry, clear action labels and red feedback at the interactive label or surface. The latter rules are derived from observation, rather than quoted company principles. (Tsukuri account, brand announcement).

Personas

No behavioral personas were verified; the privacy notice identifies project participants including subcontractors, partner businesses, their employees and clients as users. (Privacy notice).

Colors

These are computed colours from first-party homepage controls and the rendered census. Their registry names describe observed roles; they are not claims about named ANDPAD CSS variables.

The census also records #222222 on four borders and #cccccc on one. Nine paragraph entries are #c0c0c0; this is an observed secondary ink, not the body foreground. No semantic success, warning or error palette was verified.

All 47 recorded root custom properties, also found by the stylesheet walk, are WordPress --wp--preset--* defaults. Their colours, gradients, shadows, font sizes, spacing and aspect ratios are excluded from ANDPAD's token set. No first-party custom-property namespace was observed in the readable sheets.

Typography

The evidence classes remain separate:

• Official product use: the opened first-party brand and Tsukuri articles do not specify a product font family.
• Live-loaded: the survey's document.fonts census reports loaded: []. No family or font specimen is published from this capture.
• Official distributed assets: no company-distributed font package or font licence was verified.
• Declared-only: body, h1 and button CSS begin with 中ゴシックBBB. The measured pricing link and hero anchor declare 見出ゴMB31. Readable @font-face rules name 太ゴB101, 見出ゴMB31 and 中ゴシックBBB, each with font-weight: bold, and TypeSquare source URLs under wf.typesquare.com. Those declarations do not establish a loaded face.
• Unresolved: a Google Fonts stylesheet requests M PLUS 1p and Open Sans; that stylesheet was unreadable to the CSS walk, and neither face appears in the loaded census. Actual glyph selection and the CSS fallback stack's use remain unverified. Substitute: none chosen.

Verified metrics survive the missing family: header actions are 12px/400 with 24px line height; pricing is 14px/700 with 28px line height; the outlined document link is 14px/700 with 28px line height. The construction-card anchor computes to 13px/400 and 26px line height, while its visible h3 label is 20px/700. The hero anchor computes to 22px/700 with 44px line height, but its Japanese CTA label is an image, not live text set in that font.

Layout

The desktop header puts the logo at the left, utilities above the main navigation, and paired red actions at the right. The hero uses an asymmetric text-and-imagery composition. Farther down, product cards form three columns: the survey records x positions 216, 560 and 905, with each card 304.7px wide. News rows span 994px. Use those measured relationships when recreating this desktop surface; a general spacing scale was not established.

Responsive Behavior

Only the 1440×1000 desktop surface was measured; mobile layouts, breakpoints and reduced-motion behavior are unverified.

Elevation & Depth

Filled hero and header links use the computed inset shadow rgba(0, 0, 0, 0.2) 0px -5px 0px -2px inset. The outlined document link, pricing link and construction-card anchor have box-shadow: none. Preserve this shallow lower-edge treatment on the filled links; there is no measured floating-card shadow to reuse.

Motion & Easing

The raw computed transition on the hero, both header actions and the outlined document link is background-color 0.5s ease 0s. The pricing link uses background-size 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s for its underline. The product-card anchor itself reports all 0s ease 0s; no descendant transition string was captured, so no duration is assigned to its extending line.

---

Measured 2026-11-06 from andpad.jp with the capture tool at 1440×1000, ja-JP. Company context comes from the linked first-party brand, history, privacy and design articles. Raw provenance, census, control identities, overlay limitations and host controls are recorded in the accompanying report and verification notes.

Components

All six measured controls are links. Heights and widths describe this 1440×1000 desktop capture.

The first pass could not measure the hero's pointer states because an Optemo chat iframe covered it. The second pass used hideOverlays: true for that control. Other reported pointer states matched the intended control's :hover, and pressed captures also matched :active. Some first-pass crops contain portions of the still-open chat overlay; the raw DOM measurements are retained with that limitation.

States

Each control has a settled authored hover change and a measured pressed state matching that hover treatment. In the recorded comparison scope, changedVsHover is empty for all six pressed captures. The scope includes the control and its pseudo-elements, descendants and their pseudo-elements, and three ancestor levels; it does not prove absence of changes inside external images or cross-origin frames.

Keyboard Tab focus adds rgb(0, 95, 204) auto 1px off 1px on all six links. This is Chrome's default ring, so no focus token is declared. On the product card, an ancestor also changes from translateY(30px)/opacity 0 to its visible position/opacity 1; both changes persist after blur and are excluded from focus styling. Disabled, invalid, selected and loading states were not verified.

Do's and Don'ts

• Keep the measured controls square and distinguish bright-red inquiry/download actions from the darker header document request.
• Preserve the outlined document link's red border when its surface fills red.
• Apply the product-card hover colour to VIEW MORE and its line; its heading stays black.
• Keep family declarations separate from loaded-font evidence, and exclude WordPress presets from the brand palette.
• Preserve a usable keyboard indicator; the measured browser ring is not a brand focus token.

Voice & Tone

The homepage combines the broad promise “経営から現場まで” with concrete tasks such as “資料請求”, “お問い合わせ” and “メールで資料を受け取る”. For this surface, use short Japanese action labels and specific work outcomes. This is an interpretation of the captured copy, not a verified corporate writing guideline.

Agent Prompt Guide

“Build a desktop marketing surface using white #ffffff, black #000000, square controls and bright red #ef3340. Pair 150×50px header links: document request in #c8102e, inquiry in #ef3340. Darken them on hover to #95102a and #b02d36 respectively. Make a 50px outlined document link with 10px 20px padding, a red border and 14px/700 computed type metrics; hover fills it red and makes its text white. Use three product-card columns, with a VIEW MORE line that grows from 21px to 32px. Font family: unresolved; substitute: none chosen.”

Governance

Known Gaps

• Contrast, hero-download. Text #ffffff on #ef3340 measures 4.02:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, header-contact. Text #ffffff on #ef3340 measures 4.02:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.