Design System Inspiration of coconala
1. Visual Theme & Atmosphere
coconala (ココナラ) is a skills marketplace where individuals sell services — illustration, design,
web work, video, marketing, consulting, fortune-telling, counselling and lessons. It is run by
株式会社ココナラ (coconala Inc.), founded on 4 January 2012 and based in Sakuragaokacho, Shibuya,
Tokyo. The company's stated vision is 「一人ひとりが『自分のストーリー』を生きていく世の中をつくる」 — a
world where each person lives their own story — by making individual knowledge, skills and
experience visible and connecting them to whoever needs them.
The site is light and practical: white and cool grey surfaces #f3f4f5 and #e7eaeb, a
blue-grey ink #202a2e, and coconala's green #00a38d for sign-up and actions. The logo is
multicoloured; the interface keeps to green.
What makes it worth reading:
- A full named palette. Nineteen colour ramps as custom properties —
--gray-*, --green-*,
--blue-*, --lightPurple-*, --warmPink-*, --violet-* and more — plus --_<colour>-opacityN
alpha variants.
- States from the ramp. The sign-up button steps
--green-400 → --green-600 → --green-800
on hover and press; the outline button uses the green's alpha variants.
- A blue-grey neutral ramp. Its greys lean blue (
#202a2e, #4d656d, #ced4d6) rather than
pure grey.
Primary tasks
- Search and browse services by category.
- Sign up or log in.
2. Color Palette & Roles
Measured with getComputedStyle on coconala.com: 336 root custom properties, of which Tailwind's
--tw-* (51) and Swiper's variable are excluded. The rest are first-party colour ramps and alpha
variants.
Green (brand and actions)
- Brand (
#00a38d) — --green-400; the sign-up fill and outline button.
- Brand hover (
#00866e) — --green-600 · press (#006650) — --green-800.
- Green 200 (
#7ac9bb) — --green-200.
Ink and surfaces
- Foreground (
#202a2e) — --gray-900; page text.
- Text secondary (
#4d656d) — --gray-600; the search category label.
- Label (
#333333) — category tile labels.
- Canvas (
#ffffff) · Surface (#f3f4f5, --gray-25) · Surface strong (#e7eaeb,
--gray-50).
- Border (
#ced4d6) — --gray-100; the carousel buttons' border.
Other ramps
Link #0977e5 (--blue-700, the tile anchors' colour) · Blue 500 #0098ff ·
Orange 500 #ff9900 · Red 500 #ff3b30.
3. Typography Rules
Font family
The system Japanese stack: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif. No brand text face loads; the only web
font is an icon font.
Scale
Body and links 14px/400; tile labels 14px/300; header buttons 11px/600.
4. Component Stylings
Measured on the home page. The header lives inside web components (before-login-header) with
buttons in nested shadow roots; focus was read under a real Tab key, and a hover counted only when
:hover matched.
- Log in — ログイン: transparent, green
#00a38d 11px/600, a 50% green border, 4px, 32px. Hover
tints the fill rgba(0,163,141,0.04); press and focus 0.12.
- Sign up — 会員登録:
#00a38d fill, white, 4px, 32px. Hover #00866e, press and focus
#006650, the border following the fill.
- Category tile — one of 19 (デザイン制作 measured): an icon over a
#333333 14px/300 label, 108px
tall. Hover fades the tile to 70% opacity.
Radius
4px on header buttons, 6px on the search field, 5–8px on the bottom sign-up bar buttons.
5. Layout Principles
- A header with a combined category-and-keyword search, a second navigation row, an orange coupon
banner, a three-up promotional carousel and a grid of category tiles.
6. Depth & Elevation
Flat; the carousel's arrow buttons sit on white with a #ced4d6 border.
7. Do's and Don'ts
Do
- Use
#00a38d for actions, with #00866e hover and #006650 press.
- Pull neutrals from the blue-grey ramp (
#202a2e, #4d656d, #ced4d6).
- Tint outline buttons with the green's alpha variants on hover and press.
Don't
- Don't use the logo's other colours for interface actions; actions are green.
- Don't use pure grey neutrals.
- Don't count Tailwind variables as coconala tokens.
8. Responsive Behavior
Not measured. Desktop 1440×1000 only.
9. Agent Prompt Guide
Quick Color Reference
#00a38d green · #00866e hover · #006650 press · #202a2e ink · #4d656d secondary ·
#f3f4f5 / #e7eaeb surfaces · #ced4d6 border · #0977e5 link blue
Example Component Prompts
- "A 32px green
#00a38d button, white 11px/600, 4px radius; hover #00866e, press #006650."
- "An outline twin: green label and 50% green border, filling to 4% green on hover and 12% on
press."
10. Voice & Tone
Not assessed as authored voice.
11. Brand Narrative
coconala's vision is for each person to live their own story, made practical as a marketplace for
individual skills. The interface is a calm frame of blue-greys around one green action colour; the
colour comes from the sellers' work and the promotions.
12. Principles
- One action colour. Green, stepped along its own ramp.
- Neutrals with a hue. Blue-leaning greys.
- A palette as infrastructure. Nineteen named ramps with alpha variants.
13. Personas
Not researched. No persona claim is made from a UI capture.
14. States
Hover: the sign-up fill darkens to #00866e; the log-in button tints 4%; tiles fade to 70%. Press:
#006650 and a 12% tint. Focus: the pressed fill plus the browser's ring.
15. Motion & Easing
Not measured.
Tier 1 sources: https://coconala.com/ (live homepage — 336 root custom properties read via getComputedStyle, Tailwind and Swiper excluded; three components measured at rest, hover, pressed and focus, the header inside nested shadow roots, captured 2026-09-26); https://coconala.com/zz-this-does-not-exist (nonsense-path control — HTTP 404, read 2026-09-26); https://coconala.co.jp/company/ (会社概要 — 株式会社ココナラ, coconala Inc., founded 2012-01-04, Sakuragaokacho, Shibuya, Tokyo, read 2026-09-26); https://coconala.co.jp/company/message/ (代表挨拶 — the vision 「一人ひとりが『自分のストーリー』を生きていく世の中をつくる」, read 2026-09-26)