The home base of your fandom.

JST

Seifuku

The Hello! Base design system. A seifuku is the matching uniform that makes a group read as one — which is exactly what a design system is. Every token here was worn by the site in 2013 and revived from its SCSS in 2026; nothing was invented, only formalized.

The wordmark

The original hello!base lockup, drawn in 2013 and recovered in 2026 from the hicon icon font's SVG glyphs (U+F001, U+F002). It renders in ink, in pink, and reversed on the dark bands; the hello! mark alone is the favicon, white on the pink chip.

Color

A cool grey ramp carries almost everything; pink is the only voice raised in running text. The saturated accents live exclusively in the two dark bands, where they label facts the way the old site color-coded its icons.

  • --page #F9FAFC Page ground
  • --pale-grey #EBEFF5 Section fills, rules
  • --rail #DFE3E8 Timeline rail, card frames
  • --light-grey #A0ABB6 Muted text
  • --med-grey #646D77 Secondary text
  • --dark-grey #454D57 Body text
  • --darker-grey #272E37 Headings, the vitals band
  • --navy #0B1C2D The happenings hero
  • --pink #FF5A91 Links, A-sides, the accent
  • --teal #00D7AE Leader flags, positives
  • --blue #30BEDA B-sides, footer hover
  • --cyan #00BAEB Date labels, search focus
  • --green #9BD034 Reserved (legacy brand green)

Type

Whitney SSm and Gotham SSm lead their stacks, as they did in 2013; Inter and Montserrat stand in until a Hoefler license returns, with Noto Sans JP for Japanese. The scale is the original 1.333 modular ratio on a 14px base. Personality comes from weight contrast — 200 and 300 against 600 and 800 — and italics are reserved for brand moments: the wordmark, the happenings title.

  • --scale-1 Morning Musume｡
  • --scale-2 Morning Musume｡
  • --scale-3 Morning Musume｡
  • --scale-4 Morning Musume｡
  • --scale-5 Morning Musume｡
  • --scale-6 Morning Musume｡

The profile pattern

Every subject — idol, group, release, event — introduces itself the same way: a white band with the romanized name set large over the light native name, then the dark vitals band, the system's signature. Labels are 10px Gotham caps, color-coded by kind: dates cyan, measurements teal, blood red, endings yellow.

Tsugunaga Momoko 嗣永桃子

Country Girls

Birthday March 6, 1992 Bloodtype O Height 149.9cm Birthplace Chiba Prefecture, Japan

The timeline chip

Happenings ride a 3px rail, each day a white chip with a grey inset crown — lifted intact from sections/_happenings.scss. Editorial voice is part of the system: present tense, canonical verbs, group names as designated on the day.

Badges and flags

Pills mark track roles — A-sides pink, B-sides blue — and the teal caps flag marks leadership wherever a lineup appears.

A-side B-side leader

Provenance

Primary sources: DESIGN_SYSTEM.md (the 2025 extraction) and the original stylesheets, recoverable from git history at 2ce3b188^:backend/base/assets/stylesheets/, with the wordmark recovered from backend/static/fonts/hicons.svg in the same commit. Deliberately not reproduced: the Symbolset icon font, a licensed artifact of its era.