Nulab DESIGN.md

Design System Inspiration of Nulab (株式会社ヌーラボ)

Overview

Visual Theme & Atmosphere

Nulab is a Fukuoka software company, established 29 March 2004, that builds collaboration tools: Backlog (project and task management), Cacoo (online whiteboard), Nulab Pass (security and governance) and Nulab Flowbase (workflow automation).

The corporate surface is white, calm and set entirely in Noto Sans JP — 119 of 119 text elements, with no second family anywhere. The brand colour is a soft purple #7a6abf, used sparingly; the dominant rendered text colour is a mid grey.

What makes this reference unusual is the shape of its token set rather than its look. 146 own custom properties, and the organising idea is one product per family:

--backlog-*   --cacoo-*   --typetalk-*   --nulab-*   --nulabpass-*   --flowbase-*
--button-backlog / -hover / -pressed / -disabled        … and the same four for each product
--banner-backlog / -secondary                           … and the same pair for each product

Seven products, each with a brand colour, a background, a light background, a banner pair and a four-state button ramp. It is a multi-product system published as one sheet, and it is the clearest example of that pattern in this catalog.

Primary tasks

• Understand what each of the four current products does and reach it.
• Enter Backlog's own site, which runs its own colour on the same skeleton.

Brand Narrative

Nulab was established on 29 March 2004 and is headquartered in Tenjin, Fukuoka, with a Tokyo office. Its own About page lists Backlog, Cacoo, Nulab Pass and Nulab Flowbase.

The token set is the more revealing document. It carries a complete colour and button family for seven names — including Typetalk, which the About page no longer lists, and Flowbase, which it does — so the sheet reads as an accumulating record of the product line rather than a snapshot of it. A company that ships several products from one small team publishes one stylesheet and adds a family each time.

Principles

• A product is a family, not a colour. Brand, background, banner and a four-state button.
• Four states, always the same shape. Base → hover → pressed → disabled, one hue.
• Share the ring. #cbc2e8 is the only focus value in the system, across both brands.

Personas

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

Colors

Measured 2026-09-22 with getComputedStyle on nulab.com/ja/. 206 custom properties resolve; 60 are WordPress internals (--wp--preset--*, --wp-admin-theme-color-*) and are not recorded. The remaining 146 are Nulab's.

Corporate purple — the four-state ramp

• Brand (#7a6abf) — --nulab-primary and --button-nulab.
• Brand Hover (#6e5fac) — --nulab-secondary and --button-nulab-hover.
• Brand Pressed (#625599) — --button-nulab-pressed.
• Brand Disabled (#cbc2e8) — --button-nulab-disabled.

Every product family is built the same way. --button-backlog #319b77 → hover #2c8c6b → pressed #277c5f → disabled #a1cbbe. --button-cacoo #4c7ebf → #4471ac → #3d6599 → #b7cbe5. --button-typetalk #f45748 → #dc4e41 → #c3463a → #eeafa9. Hover and pressed are consistently one and two steps darker; disabled is a light tint of the same hue.

Neutral

• Default (#74758b) — --button-default and --brand-nulab, a grey-violet that carries the product buttons on the corporate page.
• Default Hover (#696a7d) — --button-default-hover.
• Outline (#cbc2e8) — --outline-primary. One focus-ring token for the whole system.

Product marks

Backlog (#319b77) · Backlog Mark (#42ce9f) · Cacoo (#4c7ebf) · Typetalk (#f45748) · Nulab Pass (#775fed) · Flowbase (#1faddb) · Ad (#ffaa1d).

Two things are worth noticing. Backlog carries two greens — --brand-backlog #42ce9f for the mark and --button-backlog #319b77 for actions — and backlog.com's own buttons are neither: they render #f27100 orange. And --typetalk-* is still a complete family although Typetalk is not among the products Nulab's About page lists today. The sheet carries the product line including one that has left it.

Text, line and surface

• Foreground (#17171c) — --text-primary, also --color-black.
• Text Secondary (#5d5e6f) · Text Inactive (#9e9eae) · Error (#e50000).
• Border (#d5d5de) — --color-border; --border-primary #cacaca and -secondary #b7b7c4 sit beside it.
• Canvas (#ffffff) · Surface (#f5f5f7) — --color-off-white · Beige (#f8f3f0) — --color-beige, with a darker --color-dark-nude-beige #f2e8e1.
• Success (#00bd7b) · Alert (#ff6455).

Template categories

Five numbered background sets, each main / secondary / accent: amber #fff7eb / #fce4bd / #f9c066, mint #d9f5ec / #b3ebd9 / #7bddbc, violet #e5dfff / #c5c2fb / #8a84f7, blue #dcebff / #79b7ff / #4b91fa, yellow #fff0bd / #ffe48a / #ffcc24.

Typography

Font Family

Noto Sans JP, declared in --font-default as "Noto Sans JP", hiragino sans, "Hiragino Kaku Gothic ProN", … and loaded as a webfont on the page. The census found it on 119 of 119 text-bearing elements; no second family appears.

Scale

Rendered sizes: 14px on 51 elements, 16px on 33, 18px on 27, then 24, 12, 46, 40, 25 and 20 once or twice each. Weights: 400 on 77, 700 on 39, 600 on 3 — a two-weight page with a third used three times.

Layout

• One family per product, four states per button. The sheet scales by adding a product, not by adding a colour.
• The ring is shared, the fill is not. #cbc2e8 at 4px is constant across brands.
• Section rhythm and component rhythm are different scales, and neither borrows from the other: dp starts at 40px, button padding is in rem.

Responsive Behavior

Not measured. Desktop 1440×1000 only. The token set declares --content-width 75rem, --content-width-small 61.25rem, --base-gutter 48px and --base-japanese-gutter 1.5rem, but no breakpoint was observed.

Elevation & Depth

Two shadows were observed and neither is tokenised: rgba(28,28,28,0.2) 0 2px 4px on the corporate product button and rgba(0,0,0,0.2) 0 2px 4px on Backlog's large CTA. There is a seven-step z-index scale instead — --z-mobile-filter 90 · -secondary-header-backdrop 96 · -secondary-header 97 · -main-header-backdrop 98 · -main-header 99 · -mobile-nav 101 · -popup 111 — so stacking is systematised where elevation is not.

Motion & Easing

Durations were observed on every control and none is tokenised: background-color 0.25s ease-out, color 0.25s on the corporate product button, 0.2s on the consent controls, and background-color 0.2s, opacity 0.2s, border-… on Backlog's buttons. No easing token exists in the 146.

---

Tier 1 sources: https://nulab.com/ja/ (live corporate surface — 206 custom properties read via getComputedStyle, of which 146 are Nulab's and 60 are WordPress internals; three controls measured at rest, hover, pressed and focus, 2026-09-22); https://backlog.com/ja/ (Backlog's own product surface, Nulab-owned — three more controls measured across all four states, and the source of the #f27100 reading, 2026-09-22); https://nulab.com/ja/about/ (Nulab's own company page — establishment date, headquarters and the current product list; not cited for tokens)

Components

Measured live on two surfaces, with every control's focus read before the mouse moved and each control pinned by element handle.

The focus ring is one token, and it crosses the brands

--outline-primary is #cbc2e8, and it renders as outline: rgb(203, 194, 232) solid 4px on the corporate neutral button, on Backlog's filled button, on Backlog's outlined button and on Backlog's large CTA. solid 4px is authored — the browser's own ring is auto 1px — and the same value appears on nulab.com and backlog.com. One ring for two brands.

On the quieter controls it arrives as a box-shadow instead: rgb(203, 194, 232) 0 0 0 4px on the cookie-settings link and the purple consent button. Same colour, same 4px, different property.

Corporate — neutral product button

#74758b fill, #ffffff text, 4px radius, 247×56, 16px/700, 2px transparent border, and a rgba(28,28,28,0.2) 0 2px 4px shadow. Hover, pressed and focus all settle on #696a7d, and focus adds the 4px #cbc2e8 outline.

Token and render agree. --button-default is #74758b and --button-default-hover is #696a7d; the button measures rgb(116,117,139) and rgb(105,106,125).

Corporate — purple action and quiet link

The consent button is #7a6abf → #6e5fac on hover and pressed, exactly --button-nulab and --button-nulab-hover. The cookie-settings link is white with #7a6abf text, changes nothing on hover, and only drops its outline width on press.

Backlog — the same skeleton in orange

backlog.com runs the identical structure and a different colour:

• Filled: #f27100, #ffffff text, 2px transparent border, 4px radius, 102×40, 14px/700. Hover and pressed #bf5900.
• Outlined: #ffffff with 2px solid #f27100 and #f27100 text. Hover fills #fff8f2 and darkens text and border to #bf5900 in one move.
• Large CTA: the same orange at 305×70 and 18px/700, with a rgba(0,0,0,0.2) 0 2px 4px shadow.

The orange is not in the corporate sheet. --button-backlog is #319b77. Both readings are recorded on their own surfaces and neither overrides the other.

Spacing, radius and padding

A dp spacing scale: 0 · 40 · 64 · 80 · 96 · 104 · 112 · 120 · 128 · 144 · 152 · 160px — no steps below 40, so it is a section rhythm rather than a component one. Component spacing comes from a separate button padding scale, --button-horizontal-padding-sm/md/lg at 1.5 / 1.875 / 2.375rem, with --button-border-thickness 0.125rem (the 2px every button shows).

Radius as rendered: 4px on 10 elements, 16px on 5, 50% on 2.

States

Six components carry measured hover, pressed and focus. The pattern splits cleanly by weight: filled buttons move their fill (#74758b→#696a7d, #7a6abf→#6e5fac, #f27100→#bf5900) while quiet controls barely move at all — the cookie-settings link is identical on hover and only loses its outline width on press.

Focus is the one state every control has, and it is the same #cbc2e8 at 4px everywhere, rendered as an outline on filled controls and a box-shadow on quiet ones. Disabled exists as a token for each product family (--button-<product>-disabled) but was not observed on a rendered control, so no disabled component is declared.

Do's and Don'ts

Do

• Take a product's action colour from its own --button-<product> family, and its four states with it.
• Use #cbc2e8 at 4px for focus, as an outline on filled controls and a box-shadow on quiet ones.
• Set Noto Sans JP; it is declared and loaded, not a fallback.

Don't

• Don't read --wp--preset--* as Nulab's; 60 of the 206 properties are WordPress.
• Don't assume --brand-backlog #42ce9f is what Backlog's buttons paint. They paint #f27100.
• Don't use the dp scale for component padding. It has no step below 40px.

Voice & Tone

Not assessed as copy. The corporate surface carries 2,343 characters, mostly product names and one-line descriptions.

Agent Prompt Guide

Quick Color Reference

#7a6abf brand · #6e5fac hover · #625599 pressed · #cbc2e8 focus ring and disabled · #74758b/#696a7d neutral button · #f27100/#bf5900 Backlog action · #319b77 Backlog token · #4c7ebf Cacoo · #f45748 Typetalk · #775fed Nulab Pass · #1faddb Flowbase · #17171c text · #5d5e6f secondary · #f5f5f7 surface

Example Component Prompts

• "A 56px neutral button: #74758b fill, #ffffff 16px/700 label, 4px radius, 2px transparent border, hover and pressed #696a7d, focus adds outline: #cbc2e8 solid 4px."
• "Its outlined Backlog twin: #ffffff with 2px solid #f27100 and #f27100 text, hover fills #fff8f2 and moves text and border to #bf5900 together."

Governance

Known Gaps

• Contrast, backlog-button-primary. Text #ffffff on #f27100 measures 2.94:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, backlog-button-outlined. Text #f27100 on #ffffff measures 2.94:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, backlog-cta-primary. Text #ffffff on #f27100 measures 2.94:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.