Design System Inspiration of Pairs (ペアーズ)
1. Visual Theme & Atmosphere
Pairs is a Japanese dating app run by 株式会社エウレカ (Eureka, Inc.) in Tokyo. In May 2015 Match
Group, the US online-dating company, acquired Eureka outright and kept Pairs running as its own
brand. The stylesheet looks beyond Japan: alongside the Japanese font stack it carries one for
Korean and one for Traditional Chinese.
The landing page is light, soft and teal. A brand cyan #00c1d4 carries every interactive
border and label, a pale #e0f8fc tints whole sections, text sits in a green-grey
#325151 rather than black, and the calls to action sit on a mint-to-cyan gradient —
#70dfab to #3bd6cb to #20cfe3. Everything round is fully round.
What makes it worth reading:
- The gradient is an image token.
--color-pairs-gradient is not a CSS gradient but a
url(data:image/png…) — a 29×6 PNG stretched across the button. Its colours had to be read off
its pixels.
- Every type step has two sizes.
--text-headline-0-pc is 2.5rem and --text-headline-0-sp
1.875rem — the desktop and smartphone sizes are separate tokens, not a fluid scale.
- Hover inverts. The gradient buttons turn white with a teal label; the outline button fills.
Primary tasks
- Sign up (新規登録); start free; log in.
- Read member stories and the "happiness report".
2. Color Palette & Roles
Measured with getComputedStyle on www.pairs.lv: 217 root custom properties, 264 across all
rules. Tailwind v4's are excluded — --tw-*, the stock --text-xs…6xl, --radius-sm…3xl,
--font-weight-*, tracking and leading defaults, and Tailwind's own lab() greys
(--color-gray-100…900), none of which paints anything on the page. About 100 remain, Pairs' own.
Teal — the brand
--color-pairs-blue-00…06 (there is no -04):
- Primary (
#00c1d4) — pairs-blue-03. The most-painted teal: the login button's border and
label, every hover label and border (9 backgrounds, the interactive colour).
- Primary Link (
#0096a9) — pairs-blue-01, also --color-fontColor-link.
- Primary Strong (
#00aec2) — pairs-blue-02, accent text (17 elements).
- Primary Deep (
#007f90) — pairs-blue-00.
- Primary Light (
#a5eaf5) — pairs-blue-05, the login button's hover fill.
- Primary Surface (
#e0f8fc) — pairs-blue-06, section backgrounds (10).
A separate, bluer ramp, --color-blue-00…04 (#007bcc first), is not the brand teal. Keep them
apart.
The gradient
--color-pairs-gradient is url(data:image/png;base64,…), a 29×6 raster. Sampled across its
middle row at x = 0, 7, 14, 21 and 28 it reads #70dfab, #3bd6cb, #20cfe3, #40d2e5, #46d2e5
— Gradient Start (#70dfab), a mint; Gradient Mid (#3bd6cb), a teal; Gradient End
(#20cfe3), a cyan, easing slightly lighter at the right edge. It is the background of both sign-up
buttons.
Ink and neutrals
--color-gray-00…07: #0a2c2f · #325151 · #678181 · #96aaaa · #bfcfcf · #dae4e5 ·
#ebf2f2 · #f4fbfb — greys with a green-teal cast throughout.
- Ink (
#0a2c2f) — gray-00, --color-fontColor-primary. --color-fontColor-secondary is the
same at 70%.
- Foreground (
#325151) — gray-01. The colour of most <p> text on the page.
- Gray 02 (
#678181) · Gray 03 (#96aaaa).
- Border (
#dae4e5) — gray-05. The hairline on 934 elements — the page separates things
with lines, not shadows.
- Gray 06 (
#ebf2f2) · Surface (#f4fbfb) — gray-07 · Canvas (#ffffff).
--color-fontColor-placeholder is #22252766 — a different near-black at 40%, rendered on
placeholder text.
Status and accents
Red #d03138 (ramp to #ef3f45 and #ffefeb) · Green #028541 · Yellow
#f1bf00 · Orange #ff8831 · Purple #6e7de2 · Blue #007bcc.
3. Typography Rules
Font family
--font-sans-ja is "Roboto", "Noto Sans JP", system-ui, sans-serif, and body, headings and
buttons all compute it. document.fonts shows Roboto 400 and 700 and Noto Sans JP 400 and
700 loaded — Roboto for Latin letters and numerals, Noto Sans JP for Japanese. Both are open
Google-published faces, recorded as what is served.
The same stylesheet carries --font-sans-ko ("Nanum Gothic"), --font-sans-ko-noto-sans-kr and
--font-sans-zh-tw ("Noto Sans TC") for Korean and Traditional Chinese; they are not used on
the Japanese page.
Scale — two sizes per step
| token | -pc | -sp | weight | line height |
|---|
| headline-0 | 2.5rem | 1.875rem | 700 | 130% |
| headline-1 | 2.375rem | 1.75rem | 700 | 130% |
| headline-2 | 1.5rem | 1.125rem | 700 | 130% |
| headline-3 | 1.375rem | 1rem | 700 | 150% |
| headline-4 | 1.125rem | .875rem | 700 | 150% |
| headline-5 | 1rem | .875rem | 700 | 150% |
| headline-6 | .875rem | .75rem | 700 | 150% |
| body-1 | 1.125rem | .875rem | 400 | 150% |
| body-1-wide | 1.125rem | .875rem | 400 | 200% |
| body-2 | 1rem | .75rem | 400 | 150% |
| caption-1 | .875rem | .625rem | 400 | 150% |
| caption-2 | .75rem | .625rem | 400 | 150% |
Headlines are always 700 and body and captions always 400 — weight marks the family, size marks the
step. --breakpoint-pc is 1024px.
4. Component Stylings
Four components, every state on its own page load, focus read before the mouse moved.
- Sign up (header) — the brand gradient with a white 16px/700 label, a pill 36px tall. Hover and
press drop the gradient: the button turns white with a
#00c1d4 label and a 2px #00c1d4
border, over 0.3s.
- Start free (large) — the same gradient and the same inversion, 72px tall, 18px/700, 90px
radius.
- Log in — transparent with a 2px
#00c1d4 border and label. Hover fills #a5eaf5 and turns
the label white.
- Testimonial cards — links with
#000000 text and a #dae4e5 hairline. Nothing changes on hover or press.
The two button patterns are mirror images: the filled gradient empties to an outline, the outline
fills.
Focus is the browser's
Every measured control shows Chrome's auto ring under :focus-visible. No focus colour is
recorded. The header navigation (ホーム, 料金) could not be isolated on the page and is not measured.
Radius
Pills everywhere for buttons (a 9999px-class radius, 12 elements); cards at 24px (18) and
16px (14); 90px on the large button; a few one-offs (48px, 40px).
5. Layout Principles
- Lines, not shadows: the
#dae4e5 hairline separates cards, lists and sections.
- Pale teal bands (
#e0f8fc) alternate with white to structure the long page.
- Desktop and smartphone are designed as two sizes of one scale, switched at
--breakpoint-pc.
6. Depth & Elevation
One shadow on the page: rgba(0,0,0,0.2) 0 0 18px 0, a soft centred glow, used once. Elevation is
otherwise absent.
7. Do's and Don'ts
Do
- Use
#00c1d4 for interactive borders and labels, and the mint-to-cyan gradient for the primary
call to action.
- Set text in the green-grey
#325151 (or #0a2c2f for emphasis), not black.
- Separate with
#dae4e5 hairlines.
- Pick the
-pc or -sp size of a type step rather than scaling one size.
Don't
- Don't use the
--color-blue-* ramp as the brand colour; the brand is --color-pairs-blue-*.
- Don't count Tailwind's
lab() greys or stock text sizes as Pairs tokens.
- Don't recreate the gradient as brighter or more saturated than its sampled stops.
8. Responsive Behavior
Not measured beyond the tokens: desktop 1440×1000 only. The -sp sizes and
--breakpoint-pc: 1024px describe the phone layout; it was not rendered.
9. Agent Prompt Guide
Quick Color Reference
#00c1d4 brand teal · gradient #70dfab → #3bd6cb → #20cfe3 · #0096a9 link · #a5eaf5 light ·
#e0f8fc surface · #325151 text · #0a2c2f ink · #dae4e5 hairline · #f4fbfb / #ffffff
backgrounds · #d03138 red
Example Component Prompts
- "A 36px pill:
linear-gradient(90deg, #70dfab, #3bd6cb, #20cfe3), white 16px/700; hover turns it
white with a #00c1d4 label and 2px #00c1d4 border."
- "An outline pill: 2px
#00c1d4 border and label; hover fills #a5eaf5 with a white label."
10. Voice & Tone
Not assessed as authored voice.
11. Brand Narrative
Pairs sells trust in a category that needs it, and the page looks it: clean, soft and pale, with a
single fresh teal and no hard edges. The gradient — mint into cyan — is the one flourish, and it is
spent on the button that starts everything.
The token set reads like a product built for more than one country and more than one screen: a font
stack per market, a type scale that names its desktop and phone sizes separately, and a brand ramp
kept apart from a generic blue so that the two never blur. A Tailwind build sits underneath, but the
brand decisions are written as Pairs' own tokens on top of it.
12. Principles
- One teal, one gradient. Teal for interaction, the gradient for the first step.
- Soft, not black. Green-grey text on white and pale teal.
- Two screens, two sizes. Every type step names both.
13. Personas
Not researched. No persona claim is made from a UI capture.
14. States
Four components. Hover: the gradient buttons invert to white with a teal label and border; the login
button fills pale teal with a white label; testimonial cards do not change. Focus is the browser's
auto ring throughout. No disabled state was observed.
15. Motion & Easing
The buttons transition over 0.3s. No motion token is published.
Tier 1 sources: https://www.pairs.lv/ (live landing page — 217 root custom properties read via getComputedStyle, Tailwind v4 excluded; the --color-pairs-gradient PNG decoded and sampled by pixel; four components measured at rest, hover, pressed and focus; Roboto and Noto Sans JP loaded, captured 2026-09-26); https://www.pairs.lv/zz-this-does-not-exist (nonsense-path control — a real HTTP 404, 「ページが見つかりませんでした。」, captured 2026-09-26); https://eure.jp/ (株式会社エウレカ corporate site, read 2026-09-26)
Regional sources: https://thebridge.jp/en/2015/05/eureka-acquired-by-match-group (BRIDGE, 2015-05 — "Japan's Eureka, developer of dating and couple apps, acquired by Match Group"); https://www.globaldatinginsights.com/news/02062015-japanese-dating-developer-eureka-acquired-by-the-match-group/ (Global Dating Insights — "Japanese Dating Developer Eureka Acquired By The Match Group")
