Design System Inspiration of Wantedly

1. Visual Theme & Atmosphere

Wantedly is Japan's "business SNS connected by empathy" (共感でつながるビジネスSNS), and its visual system is engineered to make job hunting feel like browsing a lifestyle magazine rather than scanning classified ads. The canvas is overwhelmingly white (#ffffff) with calm light-gray section bands (#f5f5f5), body text in a soft near-black (#24282a), and a single, disciplined splash of the corporate cyan (#21bddb) reserved for the one action that matters — joining. The official Brand Guide even codifies this restraint as a "Color Ratio": blue is the smallest slice of the palette, the neutrals do the talking. The result reads as airy, photographic, and optimistic — closer to a consumer social product than to HR software.

Typography is a deliberate East-West duet. Latin display type is geometric and round — ITC Avant Garde Gothic in the brand guide, shipped on the web as its documented fallback Poppins — while Japanese text runs in Tazugane Gothic with Hiragino Kaku Gothic fallbacks, and functional Latin body text sits in Lato/Helvetica Neue. Hero statements are enormous Poppins Bold at 72px set in white over full-bleed photography of real workplaces (「私を本気にさせる仕事はどこにある?」— "Where is the work that makes me serious?"), while UI labels drop to a tidy 14–16px SemiBold. The emotional weight lives in the photography and the oversized question; the chrome stays quiet.

Geometry is the system's most recognizable tell: almost everything you can press is a full pill. The cyan signup CTA rounds at 28px on a 56px height, secondary white buttons at 48px radius, and the codebase's pill token computes to an absurd 143986px — effectively infinite. Depth is shallow and friendly — white pills float on faint rgba(0,0,0,0.1) 2px shadows, cards on slightly stronger 8px blurs — and inputs skip borders entirely in favor of a translucent dark fill. Together with the dark editorial counterpart at wantedly.design (gray800 #292929 canvas, #424242 cards), the system spans two moods: a bright, hopeful consumer surface and a confident, gallery-dark brand stage.

Key Characteristics:

• One brand accent: corporate cyan blue400 (#21bddb), used live on exactly one element class — the primary CTA
• Pill-everything interaction chrome: 28px–48px radii on buttons, an effectively-infinite pill token for chips
• Poppins (ITC Avant Garde Gothic fallback) for display and labels; Lato/Helvetica Neue for body; Tazugane/Hiragino for Japanese
• 72px / 700 white hero type over full-bleed workplace photography
• Borderless inputs: translucent rgba(0,0,0,0.06) fills at a tight 4px radius
• Text links in a darker accessible teal (#006f8e) rather than the brand cyan
• Soft, low elevation — 2px-offset shadows only; separation mostly via #f5f5f5 bands and tinted panels
• A second, official dark-editorial mode (gray800 #292929 / #424242) on wantedly.design

2. Color Palette & Roles

Primary

• Blue400 (#21bddb): The corporate color (Pantone 311U), straight from the official Brand Guide and confirmed live as the signup CTA background. Used for the logo's dot, the primary action, and almost nothing else.
• Link Teal (#006f8e): The workhorse interactive color for text links and nav items — a darker, WCAG-friendlier sibling of the brand cyan, appearing on over a hundred nodes per page.
• Ink (#24282a): Default body text. A soft near-black with a hint of blue-green, never harsh pure black.

Neutral & Surface

• Pure White (#ffffff): Page canvas, button surfaces, text on cyan and dark grounds.
• Gray50 (#f5f5f5): Official light surface for section bands (hero, profile sections).
• Banner Gray (#eeeeee): Slightly deeper tint for wide recruiter banners.
• Mid Gray (#757575): Image placeholder / decorative rectangle fill.
• Gray800 (#292929): Official dark neutral — the entire canvas of wantedly.design and the dark logo background in the Brand Guide.
• Card Dark (#424242): Card surface on the gray800 canvas.

Functional

• Alert Red (#cc0000): Error text and attention markers (required fields, closed postings).
• Translucent ladder: text steps down through rgba(0,0,0,0.84) → 0.74 → 0.56 → 0.4 → 0.24 rather than discrete gray hexes; fills use rgba(0,0,0,0.03) and rgba(0,0,0,0.06) for panels and inputs. On dark surfaces the same trick inverts to rgba(255,255,255,0.7).

3. Typography Rules

Font Family

• Latin display: ITC Avant Garde Gothic (Brand Guide), shipped on the web as Poppins — the guide's own first fallback.
• Latin body: Lato (Brand Guide body font, used live on inputs) and Helvetica Neue for running text.
• Japanese: たづがね角ゴシック (Tazugane Gothic) per the Brand Guide, falling back to Hiragino Kaku Gothic ProN and Noto Sans CJK; Meiryo trails the stack.

Hierarchy

Principles

• Big question, small chrome: the hero headline is a 72px Bold question addressed to the reader; everything else stays at 14–16px. The size gap is the hierarchy.
• Weight split by script: Latin display takes 700, UI labels take 600, Japanese body stays at 400 — bold hangs on Poppins, legibility on the JP stack.
• Quiet H1: the semantic H1 is a 28px regular-weight line; visual drama is delegated to H2s. SEO structure and visual structure are decoupled.
• Opacity over hue: secondary text is made by lowering alpha on black (0.84/0.74/0.56/0.4), not by picking new gray hexes.

4. Component Stylings

Buttons

Primary (Signup CTA)

• Background: #21bddb
• Text: #ffffff
• Radius: 28px
• Height: 56px
• Font: 16px / 400 / Poppins
• Use: The single brand-blue action — account signup / submit

Secondary (White Pill)

• Background: #ffffff
• Text: rgba(0,0,0,0.56)
• Radius: 48px
• Padding: 0px 16px
• Height: 52px
• Font: 16px / 600 / Poppins
• Shadow: rgba(0,0,0,0.02) 0px 0px 0px (resting, near-flat)
• Use: 今すぐシゴトを検索, プロフィールを作成, お問い合わせ

SSO Button

• Background: #ffffff
• Text: rgba(0,0,0,0.56)
• Radius: 48px
• Padding: 0px 16px
• Height: 48px
• Font: 14px / 600 / Poppins
• Shadow: rgba(0,0,0,0.1) 0px 2px 6px
• Use: Facebook / Google / Apple sign-in row (Facebook label tinted in that service's blue)

Ghost Pill

• Background: transparent
• Text: rgba(0,0,0,0.56)
• Radius: 143986px (full pill token)
• Padding: 0px 20px
• Height: 36px
• Font: 14px / 600 / Poppins
• Disabled: text fades to rgba(0,0,0,0.24)
• Use: Footer feedback actions (返信が必要な方はこちら)

Inputs & Forms

Email Field

• Background: rgba(0,0,0,0.06)
• Text: rgba(0,0,0,0.84)
• Border: none
• Radius: 4px
• Padding: 6px 12px
• Height: 40px
• Font: 16px / 400 / Lato
• Use: Signup email capture — tinted fill instead of a stroked box

Cards & Containers

Elevated Card

• Background: #ffffff
• Radius: 12px
• Shadow: rgba(0,0,0,0.15) 0px 2px 8px
• Use: Fixed promotional banner card

Tinted Panel

• Background: rgba(0,0,0,0.06)
• Radius: 16px
• Padding: 20px 24px
• Use: App-download promos (気軽に会社訪問 / Wantedly People) with white 8px-radius QR tiles inside

Recruiter Banner

• Background: #eeeeee
• Radius: 24px
• Padding: 40px 80px 32px
• Use: Wide 採用担当者さまへ band before the footer

Dark Article Card (wantedly.design)

• Background: #424242
• Text: #ffffff
• Radius: 4px
• Use: Editorial article tiles on the gray800 canvas; secondary text rgba(255,255,255,0.7)

Navigation & Links

Text Link

• Text: #006f8e
• Font: 14px / 400 / Poppins
• Use: Default link color across nav, lists, and footer — darker than the brand cyan for contrast

Design-Site Nav Label (wantedly.design)

• Text: #ffffff
• Font: 14px / 600 / Poppins
• Letter-spacing: 0.2px
• Use: ARTICLE / TEAM / PHILOSOPHY uppercase items; muted state rgba(255,255,255,0.7)

---

Verified: 2026-06-10 Tier 1 sources: https://www.wantedly.com/ (live computed-style inspect, logged-out home); https://wantedly.design/ (live inspect, official design-org site); WantedlyBrandGuide_v2_0.pdf v2.0 Jun 2021 (official brand colors/typography/logo rules); https://wantedlyinc.com/ja/brand_assets (official Brand Assets page hosting the guide) Tier 2 sources: none available (getdesign.md/wantedly — "No designs found"; styles.refero.design ?q=wantedly — not listed, search attempted) Conflicts unresolved: none

5. Layout Principles

Spacing System

• Inputs run tight (6px 12px padding); buttons breathe horizontally (0 16–20px on fixed pill heights).
• Panels use a 20px 24px interior; the recruiter banner steps up to 40px 80px 32px.
• Footer block padding reaches 72px top — section seams are generous even when component padding is compact.

Grid & Container

• Full-bleed hero photography with the headline question overlaid; the signup form sits directly on the hero as a card-free cluster.
• Alternating white and #f5f5f5 full-width bands segment the page instead of ruled dividers.
• App-promotion panels pair copy with QR tiles in a two-column arrangement; the recruiter banner is a single centered column.
• wantedly.design runs a dark masonry-like article grid of #424242 tiles with uppercase Poppins navigation.

Whitespace Philosophy

• Photography carries the density: pages alternate between image-rich hero/profile sections and very sparse text sections — whitespace is concentrated around CTAs so the pill buttons always float in calm space.
• Tint, don't rule: separation is done with surface tints (#f5f5f5, rgba(0,0,0,0.03–0.06)) and radius, almost never with border lines.

Border Radius Scale

• 4px: inputs, dark editorial cards — the "tool" radius
• 8px: QR tiles, small media
• 12px: elevated banner cards
• 16px: tinted promo panels
• 24px: wide banners
• 28–48px → full pill: every button; the chip token computes to 143986px (effectively 9999/full)

6. Depth & Elevation

Shadow Philosophy: Elevation is minimal and neutral — small 2px offsets with soft 6–8px blurs, never colored, never layered. The system prefers tinted fills and full-bleed photography to create depth; shadows exist only so white pills remain legible on white-on-photo contexts. The dark editorial surface (wantedly.design) uses no shadows at all — #424242 cards on #292929 separate purely by value step.

7. Do's and Don'ts

Do

• Reserve #21bddb for the primary CTA and brand marks — follow the official Color Ratio where cyan is the smallest slice
• Make every pressable element a pill (28px+ radius on buttons; full-round chips)
• Set Latin display in Poppins Bold (ITC Avant Garde Gothic's documented fallback) and Japanese in the Tazugane/Hiragino stack
• Use #006f8e for text links — the darker teal, not the brand cyan
• Build secondary text with black alpha steps (0.84 / 0.74 / 0.56 / 0.4) on light, white alpha (0.7) on dark
• Use borderless rgba(0,0,0,0.06) fills at 4px radius for inputs
• Let full-bleed workplace photography carry emotion; keep UI chrome white, soft, and quiet
• Use gray800 #292929 with #424242 cards for dark editorial/brand surfaces

Don't

• Don't spread the cyan across badges, icons, or decorative elements — one accent, one job
• Don't draw borders on inputs or cards — tint and radius do the separating
• Don't use sharp rectangles for buttons — a square-cornered button is off-brand here
• Don't set Japanese body text bold; weight contrast belongs to Latin display type
• Don't recolor, outline, crop, deform, or drop-shadow the W logo, and never separate the mark from the logotype (Brand Guide misuse rules)
• Don't place the color logo on photography, gradients, or non-corporate-color fields — switch to the mono black/white mark
• Don't use heavy or colored shadows — elevation stays at 2px offsets with neutral alpha
• Don't add hype punctuation to CTAs — labels are plain verbs (今すぐシゴトを検索, プロフィールを作成)

8. Responsive Behavior

Breakpoints

Touch Targets

• Pill buttons hold 48–56px heights — comfortably tappable at every breakpoint.
• The product is aggressively app-forward: QR tiles and store badges appear in white 8px-radius tiles inside tinted panels, repeated per section.

Collapsing Strategy

• Hero: 72px display steps down on mobile while photography stays full-bleed.
• The signup module (email field + SSO pills) stacks vertically; SSO buttons keep 48px height.
• Recruiter banner's 40px 80px padding compresses horizontally first.

Image Behavior

• Photography is the brand surface: real workplaces and teams, edge-to-edge, with white display type overlaid.
• Logo visibility rules from the Brand Guide apply on photos: black logo on light imagery, white on dark — never the color logo over a photograph.

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: Blue400 (#21bddb)
• Text link: Dark Teal (#006f8e)
• Body text: Ink (#24282a)
• Background: White (#ffffff)
• Section band: Gray50 (#f5f5f5)
• Wide banner: Banner Gray (#eeeeee)
• Dark canvas: Gray800 (#292929)
• Dark card: Card Dark (#424242)
• Error: Alert Red (#cc0000)
• Secondary text: rgba(0,0,0,0.56); muted: rgba(0,0,0,0.4)

Example Component Prompts

• "Create a hero: full-bleed workplace photo, headline in Poppins 72px/700 white with 96px line-height phrased as a question (私を本気にさせる仕事はどこにある?). Below, an email input (rgba(0,0,0,0.06) fill, 4px radius, 40px tall, Lato 16px) and a cyan pill submit button (#21bddb bg, white text, 28px radius, 56px tall)."
• "Design a white pill button: #ffffff background, rgba(0,0,0,0.56) text, 48px radius, 52px height, 0 16px padding, Poppins 16px/600, shadow rgba(0,0,0,0.1) 0px 2px 6px."
• "Build an app-download panel: rgba(0,0,0,0.06) background, 16px radius, 20px 24px padding; inside, white QR tiles at 8px radius and a bold Poppins heading; body text #24282a 14px on Helvetica/Hiragino."
• "Create a dark editorial grid like wantedly.design: #292929 canvas, #424242 article cards at 4px radius, white titles, rgba(255,255,255,0.7) metadata, uppercase Poppins 14px/600 nav with 0.2px letter-spacing."
• "Make a recruiter banner: #eeeeee background, 24px radius, 40px 80px 32px padding, Poppins 40px/700 heading at rgba(0,0,0,0.84), one white pill CTA."

Iteration Guide

1. Blue #21bddb appears once per screen — on the action you want taken. If two elements are cyan, demote one.
2. Buttons are pills, inputs are 4px tinted boxes — keep those two geometries distinct.
3. Links are #006f8e, never the brand cyan; body ink is #24282a, never #000000.
4. Hierarchy = size contrast (72 → 40 → 16/14), not color contrast.
5. Use #f5f5f5 bands to break up long pages; borders are a last resort.
6. For dark/brand surfaces, jump to the official gray800 #292929 rather than inventing a navy.

---

10. Voice & Tone

Wantedly's voice is empathetic, direct, and aspiration-first. It speaks to the reader in first person about their own working life — hero copy literally voices the user's inner monologue (「私を本気にさせる仕事は どこにある?」) rather than advertising features. The register is warm but unsentimental: no salary talk, no recruiting jargon, no exclamation-mark hype; instead, plain verbs and an invitation to "go visit" (会社訪問) before deciding anything. The mission vocabulary — 「シゴトでココロオドル」(work that makes your heart dance) — deliberately uses katakana シゴト over the formal 仕事 to soften and personalize "work."

Voice samples:

• 「私を本気にさせる仕事は どこにある?」 — wantedly.com hero H2 (observed live 2026-06-10)
• 「さあ、このプロフィールで あなたのシゴトを面白く。」 — wantedly.com section headline (observed live 2026-06-10)
• 「究極の適材適所により、シゴトでココロオドルひとをふやす」 / "Create a world where work drives passion" — official mission, wantedlyinc.com
• 「共感でつながるビジネスSNS」 — site title tagline (observed live 2026-06-10)

11. Brand Narrative

Wantedly was founded in September 2010 by Akiko Naka (仲暁子) — a Kyoto University economics graduate who left Goldman Sachs equity sales, joined Facebook Japan's early team, and then set out to rebuild how people and companies meet (Akiko Naka — Wikipedia (JA), Crunchbase). The service launched publicly in February 2012 with a contrarian premise: job postings on Wantedly may not list salary or benefits. Instead, companies publish why they exist and what the team is like, and candidates click 話を聞きに行く ("go listen to their story") to casually visit — empathy first, conditions later. The company grew into Japan's leading professional social network with millions of users and tens of thousands of companies, and listed on the Tokyo Stock Exchange in 2017 (widely documented; not re-verified this pass).

The mission — 「究極の適材適所により、シゴトでココロオドルひとをふやす」("through the ultimate right-person-in-the-right-place, increase the number of people whose hearts dance at work") — is the design system's actual spec. The brand's visual restraint (one cyan, calm neutrals, soft pills) keeps the interface from competing with what Wantedly considers the real content: photographs of teams at work and the stories they tell. The Brand Guide's "Color Ratio" — cyan as the smallest slice — is the mission expressed as a palette rule: the platform recedes, passion takes the frame.

What Wantedly refuses: the transactional aesthetics of job boards — salary tables, urgency banners, aggressive reds (its only red, #cc0000, marks errors, not offers). What it embraces: a consumer-social grammar (profiles, feeds, "visits"), magazine-grade photography, geometric type with a friendly roundness, and an interface humble enough to let a stranger's workplace story make the sale.

12. Principles

1. Empathy before conditions. The founding product rule — sympathize with the why before discussing the what — translates to UI that leads with story and imagery, never compensation data. UI implication: cards and detail pages open with photography and mission copy; numbers and logistics sit below the fold.
2. One color, one action. The Brand Guide's Color Ratio makes cyan the rarest element on screen. UI implication: exactly one #21bddb element per view; all secondary actions are white or ghost pills.
3. Round is the brand. From the logo's dot to 48px-radius buttons, geometry stays circular and approachable. UI implication: never ship a sharp-cornered pressable; pills at 28px+ radius, panels at 16–24px.
4. The user is the protagonist. Hero copy is written in the user's first person, not the company's. UI implication: headline slots should hold aspirational questions addressed to "私" (me), with the product name absent.
5. Lower the barrier everywhere. 気軽に (casually) is a recurring brand word — visiting a company should feel as light as a coffee chat. UI implication: primary flows favor single-field forms, SSO pills, and QR-to-app handoffs over multi-step forms.

13. Personas

Personas below are fictional archetypes informed by Wantedly's publicly stated user segments (young professionals, startup teams, recruiters); they do not refer to real people.

Haruka Sato, 26, Tokyo. Third-year designer at a mid-size SIer, quietly browsing Wantedly on her commute. She isn't "job hunting" — she's collecting teams whose stories make her curious. Clicks 話を聞きに行く only when a company's photos look like a place she could belong. Would close the tab instantly if a posting led with salary bands and KPI language.

Kenji Yamamoto, 34, Fukuoka. Co-founder of a 12-person SaaS startup who writes the company's Wantedly stories himself. Treats the page like the company's magazine — he competes with bigger salaries by out-narrating them. Cares that the platform's chrome stays neutral so his team's photography does the persuading.

Mina Okada, 29, Osaka. Used Wantedly People to digitize a stack of business cards, then drifted into the feed. Halfway between "satisfied where I am" and "open to something interesting" — exactly the passive-talent middle the empathy-first model is built to move.

14. States

15. Motion & Easing

Motion tokens below are recommended values consistent with the observed system (soft, low-elevation, consumer-calm); Wantedly does not publish motion specs. (illustrative)

Durations:

Easings:

Motion rules.

1. Photography moves, chrome doesn't. Hero/story imagery may crossfade slowly; buttons and nav never animate position — a pill may gain shadow on hover (rgba(0,0,0,0.1) 0px 2px 6px), nothing more.
2. No bounce. The brand is warm but grown-up; spring overshoot would cheapen the empathy register. Keep curves monotonic.
3. Feed items fade up 8px on entry at motion-standard, staggered ≤60ms — enough life to feel social, not enough to feel gamified.
4. Reduced motion: under prefers-reduced-motion, crossfades become cuts and entry fades become instant; the system loses nothing essential because meaning never lives in motion.