Qiita (キータ) DESIGN.md

Overview

Visual Theme & Atmosphere

Qiita is where Japanese engineers publish technical articles. The surface is white, set at 16px on 908 of 1,999 elements, with ink that is black at 87% — and the whole system is shaped like Material Design without saying so.

The tell is in the role names: highEmphasis, mediumEmphasis, disabled, divider, surface, surfaceVariant, scrim, onContainerText, elevation. Then a five-hue tonal scale numbered 0 to 110, and a type scale of headline / subhead / body. That vocabulary comes from one place.

What it adds on top is Qiita's own: three tokens for markdown rendering, two for the Advent Calendar, and a separate accent for Qiita Team, the B2B product.

Primary tasks

• Read the feed, filter it, open an article.
• Sign up or sign in — a pair of buttons that swap emphasis depending on where they sit.

Brand Narrative

Qiita has been the place Japanese engineers post what they learned for over a decade, and the token set is built around that one activity. Three properties exist only to render markdown — inline code, blockquote, visited link — and two exist for the Advent Calendar, a December tradition where engineers fill a 25-day schedule with posts. A design system that names a seasonal event is a design system that expects to still be here next December.

The Material vocabulary underneath says something else: this is a product that chose a mature convention rather than inventing one, and spent its own invention on markdown and calendars.

Principles

• Borrow the convention, name your own nouns. Material's emphasis layer, Qiita's markdown and Advent tokens.
• A hue is a family, not a ramp: Text, Container, Border and Dim for each.
• Two products, one sheet. Qiita green and Qiita Team blue side by side.

Personas

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

Colors

Measured 2026-09-22 with getComputedStyle on qiita.com. All 129 properties sit under Qiita's own prefixes — no framework, no icon-font namespace, no ad widget.

Two greens, for two products

• Brand (#55c500) — --color-qiitaGreen. The logo green.
• Green Text (#357a00) — --color-greenText, --color-green80, and what the filled button actually paints. The interface green is a darker, contrast-safe step; the brand green is not used as a fill anywhere this capture measured.
• Team Blue (#4097db) — --color-teamBlue, the accent for Qiita Team. A second product in the same sheet.

The tonal scale — five hues, and each hue has roles

gray · green · red · blue · yellow, numbered 0–110, and each hue also publishes Text, Container, Border and Dim variants. So green is not just a ramp:

Green 70 #4cb100 · Green 90 #2b6300 · Green 20 #dff4cf · Green Container Dim #2b6300. Blue 30 #c0ddf3 · Blue 50 #7bb7e6 · Blue 70 #3987c4 · Blue Text #2c6897 — and that last one is the second-most-used ink on the page, 166 elements, because it is the link colour — with Blue Text Dim #204c6e a step darker for the pressed and visited cases. Red 30 #ffb8b8 · Red 90 #6d0303 · Red Container #bd0505. Yellow 70 #ae8803 · Yellow Container Dim #685103. Canvas (#ffffff) — --color-gray0, authored #fff; the grey ramp's zero step is the page itself. Gray 10 #f5f6f6 · Gray 20 #edeeee · Gray 30 #dfe0e0 — the three hover steps.

Bronze Text (#663700) with Bronze Container (#ffdcb3) sits outside the five hues, and there is no silver or gold sibling among the 129. Recorded as found; what it marks was not observed on this page.

Emphasis instead of a grey ramp

--color-highEmphasis is rgb(0 0 0 / 87%) and --color-divider is rgb(0 0 0 / 12%). The census agrees: rgba(0,0,0,.87) on 1,031 elements and rgba(0,0,0,.6) on 387. Ink Muted (#494b4b) is the one solid grey, used on the neutral outline button.

Five colours in the namespace that are not Qiita's

--color-twitter      #000000     --color-findy      #155aa8
--color-github       #1a1414     --color-findyDim   #003d83
--color-hatena-blog  #333333

Share targets and a partner. They are authored by Qiita and owned by someone else — a distinction worth keeping, because a consumer reaching for "a Qiita colour" should not get GitHub's. (Twitter is #000000, which dates the token to after the rebrand.)

Typography

Font family — absent, and the stack is a trap

No Latin or Japanese webfont loads. The page declares two @font-face entries: Material Symbols Outlined, which loads, and FontAwesome, which does not.

The rendered stack begins YakuHanJPs, -apple-system, "system-ui", "Segoe UI", "Hiragino Kaku Gothic ProN", … on 1,554 elements. YakuHanJPs is not among the loaded faces — it is declared first and falls through, so the text is set in the OS stack. A census that reads only the first name in the stack would report a typeface that never renders.

family is therefore absent. Two other census entries are artifacts and are named here so nobody promotes them: Times ×236 is non-visual <html> / <head> / <script> nodes picking up Chrome's serif default, and Arial ×156 is unstyled <input> and <button> elements falling through to the UA's form-control font.

Scale

Seven steps: 12 · 14 · 16 · 18 · 20 · 24 · 32px, named body-3 through headline-1. Rendered: 16px ×908 · 14px ×410 · 12px ×244 · 10px ×236 · 13.33px ×135.

Weights: 400 ×1,878 · 600 ×119 · 700 ×2. Effectively two.

Line height is a small matrix: headline 1.4 · subhead 1.6 with a dense 1.4 · body 1.8 with a dense 1.5. Dense as an axis, on a site whose whole purpose is long articles.

Values kept in prose

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

• typography.leading.headline: 1.4
• typography.leading.subhead: 1.6
• typography.leading.subhead-dense: 1.4
• typography.leading.body: 1.8
• typography.leading.body-dense: 1.5

Layout

• Emphasis, not greys. Ink is black at 87% and 60%; the solid grey is a single token.
• Every hue carries roles, so greenText and greenContainer exist beside green80.
• Hover is one rung down the grey ramp, from wherever the control starts.

Responsive Behavior

Not measured. Desktop 1440×1000 only.

Elevation & Depth

--elevation-* exists as a single token and no shadow was observed on any of the six controls. Separation is the rgb(0 0 0 / 12%) divider and the grey surfaces.

Motion & Easing

No motion token exists among the 129, and no transition value was captured on the six measured controls.

Tier 1 sources: https://qiita.com/ (live product surface — 129 custom properties read via getComputedStyle, six controls measured at rest, hover, pressed and focus, 2026-09-22); https://qiita.com/ (an independent second capture confirming that YakuHanJPs leads the font stack while only Material Symbols Outlined appears among the page's loaded faces, which is why tokens.typography.family is absent, 2026-09-22)

Components

Six controls measured, every state on its own page load. No state was left unmeasured.

The hover rule is one rung down the grey ramp

Four of the six controls hover to a grey step and nothing else: the two outline buttons to #f5f6f6 (gray10), the topic chip and the icon button to #edeeee (gray20), and the filter pill to #edeeee as well. The chip starts at gray20 and goes to #dfe0e0 (gray30) — one rung down from wherever it started.

The filled button is the exception: #357a00 → #2b6300, a step on the green ramp.

The six

• Filled — #357a00, white label, 8px radius, 88×34, 14px/600.
• Outline (green) — white, #357a00 text and border, same 8px and same 34px height.
• Outline (neutral) — the same component in #494b4b, 108×34.
• Topic chip — #edeeee, rgba(0,0,0,.6) label, 4px radius, 12px.
• Filter pill — white, 1px solid rgba(0,0,0,.12), 21px radius, 156×39. The only 21px on the page, and the only control bordered in the divider colour.
• Icon button — transparent, 44×44, fully round.

Which button is primary depends on where it is

The header pairs 新規登録 as the filled button with ログイン outlined. A recirculation panel lower down flips them — ログイン filled, 新規登録 outlined.

Both use the same two components. This is a placement decision, not two primaries, and it is recorded here so it is not read as an inconsistency.

Focus

All six render outline: rgb(0, 95, 204) auto 1px — Chrome's default. auto is the tell. Six independent component families and not one authored ring, so no focus token is recorded and none exists among the 129.

Radius

Rendered: 0px ×1,683 · 4px ×142 · 50% ×115 · 8px ×57 · 21px ×1 · 32px ×1. The page is mostly square; 4px is the chip, 8px the buttons.

States

Six components, every one with measured hover, pressed and focus, and nothing unmeasured. Hover and pressed are the same value on all six — the system separates "pointer is here" from rest, and not "pointer is down" from hover.

Focus is Chrome's on every one of them. --color-disabled exists and was not observed on a rendered control, so no disabled component is declared.

Do's and Don'ts

Do

• Take the interface green #357a00, not the logo green #55c500, for a filled control.
• Hover by stepping one rung down the grey ramp — gray10, gray20, gray30 exist for that.
• Use the emphasis tokens for ink rather than picking a grey.

Don't

• Don't take --color-github or --color-twitter as Qiita's. They are other companies'.
• Don't set YakuHanJPs because it leads the stack; it does not load.
• Don't author a focus ring from this reference — six controls, all Chrome's default.

Voice & Tone

Not assessed as authored voice. The measured surface is a feed of user-written article titles.

Agent Prompt Guide

Quick Color Reference

#55c500 logo green · #357a00 interface green · #2b6300 its hover · #4097db Qiita Team · #2c6897 links · #f5f6f6/#edeeee/#dfe0e0 hover steps · #494b4b solid grey · ink black at 87% / 60% / 12% divider · #bd0505 red container · #ae8803 yellow · #663700/#ffdcb3 bronze

Example Component Prompts

• "A 34px filled button: #357a00, white 14px/600 label, 8px radius, hover #2b6300."
• "Its outline twin: white with #357a00 text and border, hover fill #f5f6f6."
• "A 39px filter pill: white, 1px solid rgba(0,0,0,.12), 21px radius, hover #edeeee."

Governance

Known Gaps

• Contrast, button-icon. Text #000000de on #00000000 measures 1.00:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.