CADDi DESIGN.md

Design System Inspiration of CADDi (キャディ)

Overview

Visual Theme & Atmosphere

CADDi builds an AI data platform for manufacturing. Its own company page gives the mission as 「モノづくり産業のポテンシャルを解放する」, the head office in Asakusabashi, Taito-ku, Tokyo, 加藤勇志郎 as CEO and co-founder, and 911 employees as of 1 July 2026. The products are CADDi Drawer, CADDi Quote and the AI Data Platform.

The interface is completely square. In a census of 2,500 elements the only radius other than zero was a single 50% avatar. Buttons, selects, cards, images — nothing is rounded, and the token set publishes a radius scale that the page does not use.

Colour is equally restrained: #1f2533 ink on white, #d5d7e0 rules, and one blue #224bd2 that appears only as a link colour and a focus ring.

The spacing is the system. 54 of the 158 properties are --space-*, and they are not one scale — they are four directional families drawn from a shared raw ramp.

Primary tasks

• Understand the platform and reach a contact form.
• Switch language, which is the other control the header offers.

Brand Narrative

CADDi states its mission as unleashing the potential of the manufacturing industry, works from Asakusabashi in Taito-ku, Tokyo, is led by co-founder 加藤勇志郎, and had 911 employees on 1 July 2026. It ships CADDi Drawer for custom-parts procurement, CADDi Quote for quotation, and an AI Data Platform underneath both.

The interface reads like software for people who look at engineering drawings: square, grey, one blue, one weight of type doing most of the work, and a spacing system that names the direction of every gap.

Principles

• Name the direction, not just the size. inline, stack, inset, block.
• Two surfaces, and hovering crosses between them. Pale to dark, dark to pale.
• Square, everywhere. A radius scale exists and is left alone.

Personas

Not researched. No persona claim is made from a UI capture.

Colors

Measured 2026-09-22 with getComputedStyle on caddi.com/ja-jp/platform/. 25 of the 158 properties are colours, and they are heavily aliased: the same nine values carry 25 names.

• Primary (#224bd2) — --color-primary-500. The link colour and the focus ring; it is never a fill at rest anywhere this capture measured.
• Primary Deep (#0d34b5) — --color-primary-600.
• Foreground (#1f2533) — one value under four names: --color-text-primary, --color-neutral-800, --color-bg-dark and --color-state-default. It is the ink, the dark fill and the default state, all at once — 80 elements.
• Text Secondary (#606985) — --color-text-secondary, also --color-neutral-500 and --color-state-current.
• Text Tertiary (#374059) — --color-text-tertiary, also --color-neutral-700 and --color-border-on-dark.
• Border (#d5d7e0) — --color-border-secondary, --color-neutral-200, and — this one is worth noting — --color-state-hover.
• Surface (#f4f5f8) — --color-bg-subtle / --color-neutral-50.
• Canvas (#ffffff) — --color-neutral-0, --color-bg-primary, --color-text-inverse, --color-border-inverse.
• Status: Error #ff4e57 · Success #2ec7cc — a teal, not a green · Warning #e9c212.

The aliasing is the interesting part. A consumer reading --color-state-default and a consumer reading --color-text-primary get the same #1f2533, so the role names are a vocabulary over a very small palette rather than nine independent decisions.

Typography

Font Family — four faces, three of them commercial

• --font-family-body is "NB International Pro" — a Latin grotesk, rendered on 32 elements of the platform page and 84 of the company page.
• --font-family-mono is "JetBrains Mono", on 12–18 elements.
• --font-family-display is "Zalando Sans Expanded" — declared and not loaded. It appears in no font the browser reported, so it is recorded here in prose and not as a token.
• The face that actually carries the page is MFW-PIshiiGothicStdN — Morisawa's Pi Shii Gothic, in three weights (R, M, B) totalling 145 elements on the platform page. It comes from the fallback chain rather than from a --font-family-* token, which is how a Japanese site usually reaches its CJK face.

Both the declared Latin face and the rendered Japanese one are recorded, because taking either alone misrepresents the page.

Scale

Eight published steps: 12 · 14 · 16 · 20 · 24 · 32 · 40 · 48px. Rendered, 16px leads on 78 elements, then 14px on 58.

Weights: --font-weight-regular 400 · -medium 500 · -bold 700. The page is a 500-weight page — 109 elements at medium against 38 bold and 33 regular.

Five line heights: tight 1.25 · display 1.2 · body 1.5 · normal 1.5 · relaxed 1.75. Letter spacing is 0 for both body and display.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• typography.leading.tight: 1.25
• typography.leading.display: 1.2
• typography.leading.body: 1.5
• typography.leading.normal: 1.5
• typography.leading.relaxed: 1.75

Layout

Spacing named by direction, not only by size

54 tokens in four families, each 2xs → 4xl, all drawn from --space-scale-*:

Plus --space-section-sm/md/lg at 48 / 80 / 120 and --space-section-padding-x at 96.

inline and stack carry the same numbers, so the distinction is not about value — it is about intent, and reading --space-stack-md tells you the direction before you look it up. The raw --space-scale-* ramp underneath runs 0 · 2 · 4 · 6 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 56 · 64 · 80 · 96 · 120 · 160px.

The rest

Three max-widths — --size-max-width-sm 800 · -md 1000 · -lg 1600px — and a fixed header offset, --caddi-header-offset 111px, with a stuck menu bar at 80px.

Responsive Behavior

Not measured. Desktop 1440×1100 only. The three max-widths and the fixed header offset are declared; no breakpoint was observed.

Elevation & Depth

No shadow token exists and none was observed on any measured control. With no radius and no shadow, separation is done entirely by the #d5d7e0 rule and the #f4f5f8 surface.

Motion & Easing

No motion token exists. Durations are written inline on the controls and differ by component: background 0.2s, background-color 0.2s, color 0.2s on the primary button, background-color 0.15s, border-color 0.15s on the select, and color 0.3s on the contact block. Three components, three durations, no shared value.

---

Tier 1 sources: https://caddi.com/ja-jp/platform/ (live product surface — 158 custom properties read via getComputedStyle, three controls measured at rest, hover, pressed and focus, 2026-09-22); https://caddi.com/ja-jp/company/ (CADDi's own company page — mission, headquarters, representative, headcount and the product list, and a second brand-owned Japanese surface carrying the same token set, 2026-09-22); https://caddi.com/ja-jp/ (the landing surface, where the census of typefaces and the square-radius reading were taken; 2026-09-22)

Components

Three controls measured on live content pages, each state read on its own page load.

Primary — and it inverts

#1f2533 fill, #ffffff text, 1px transparent border, 0px radius, 48px, 16px 20px padding, 14px/500. Hover and pressed swap it end to end: #f4f5f8 fill, #1f2533 text and border. Focus: outline: rgb(34, 75, 210) solid 2px — that is --color-primary-500, and solid is the tell that it is authored rather than the browser's auto.

Language select — the same move, mirrored

#f4f5f8 fill, #1f2533 text, 1px solid #d5d7e0, 0px radius, 160×43, 16px/500. Hover and pressed go to #1f2533 with white text and a matching border.

Put beside the primary button, the pair describes the whole interaction language: there are two surfaces, pale and dark, and hovering moves a control from one to the other.

Contact

Transparent with #224bd2 text, 0px radius, 153×47, 16px/400, transition: color 0.3s. Hover and pressed fill with #224bd2.

Its focus is the browser's (auto 1px), unlike the two above — it is a CMS-authored block rather than a CaddiButton, and the difference shows. No focus value is recorded for it.

Radius — declared, unused

--radius-s 4 · -m 6 · -l 8 · -full 200px are all published. The rendered page uses none of them: every measured control computes border-radius: 0px, and the whole census found one 50% and one 1px. The scale exists and the design does not draw on it.

States, and the tokens that are not styles

Two of three components carry measured hover, pressed and focus; the third carries hover and pressed with the browser's focus ring. The pattern is a single move — invert — applied in both directions.

46 tokens carry interface copy rather than style. --label-login is "Log in", --label-drawer is "CADDi Drawer", --label-copyright is "© CADDi, Inc.", --label-privacy-recruiting is "Recruiting Privacy Policy", and a run of industry names (--label-auto "Automotive", --label-plant "Plant & Chemical") sits beside them. All in English, on a ja-jp page.

Two of them are worth recording as found:

• --label-mission is "文字列値" — literally "string value", a placeholder that reached production.
• Six have degenerate names — --label---, --label-----, --label------ — carrying "Previous", "Announcements", "Back to list", "Media coverage" and "Press releases". A generator that ran out of slugs.

Neither is promoted to a token here. They are recorded because a reader of this system should know that its --label-* layer is generated, and that generated layers carry their mistakes into the custom-property namespace where nothing checks them.

Do's and Don'ts

Do

• Pick a spacing token by direction — inline for a row gap, stack for a column gap, inset for padding — even though the numbers coincide.
• Use #224bd2 for focus at solid 2px; it is the system's one authored ring.
• Keep corners square. The radius tokens exist; the design does not use them.

Don't

• Don't treat the colour names as nine separate values. --color-state-default, --color-text-primary, --color-neutral-800 and --color-bg-dark are all #1f2533.
• Don't set Zalando Sans Expanded because --font-family-display names it — it does not load.
• Don't assume every control shares the focus ring. The CMS-authored contact button falls back to the browser's.

Voice & Tone

Not assessed as authored voice — but see §14, because 46 tokens carry interface copy.

Agent Prompt Guide

Quick Color Reference

#224bd2 primary, links and focus · #0d34b5 primary deep · #1f2533 ink and dark fill · #606985 secondary · #374059 tertiary · #d5d7e0 rules · #f4f5f8 surface · #ffffff canvas · #ff4e57 error · #2ec7cc success · #e9c212 warning

Example Component Prompts

• "A 48px square button: #1f2533 fill, #ffffff 14px/500 label, 16px 20px padding, no radius; hover inverts to #f4f5f8 fill with #1f2533 text and border; focus draws #224bd2 solid 2px."
• "A 43px square select: #f4f5f8 fill, 1px solid #d5d7e0, #1f2533 16px/500 label, inverting to #1f2533 on hover."

Governance

Known Gaps

• Contrast, button-contact. Text #224bd2 on #00000000 measures 3.01:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.