Design System Inspiration of mikan

1. Visual Theme & Atmosphere

mikan (英語アプリmikan) is Japan's most-downloaded English-vocabulary learning app — over 10 million downloads — and its surfaces read exactly as the product promises: bright, friendly, and relentlessly encouraging. The corporate site (mikan.link) opens on a warm off-white canvas (#f7f4f3) and white cards (#ffffff), with a single high-energy citrus orange (#ff4c0a) doing all the heavy lifting. That orange is the brand's namesake — mikan is the Japanese mandarin orange — and it appears on every call-to-action, every English section label ("Service", "News"), and every Japanese section heading. The eye is trained to read orange as "go here, do this," while text sits in a calm near-black charcoal (#333333) and a deep navy (#000e22) so the page never feels shouty despite the saturated accent.

The typographic personality is clean Japanese-web standard: display headlines run in Hiragino Kaku Gothic ProN at weight 900 (36px hero copy, 60px English section labels) — heavy, rounded, approachable gothic letterforms that handle CJK and Latin with equal warmth. The full stack falls back gracefully through "Helvetica Neue", Arial, "Hiragino Sans", Meiryo, sans-serif, the standard macOS/Windows Japanese ladder. Body copy drops to a comfortable 16px at weight 400 with a generous 1.7 line-height, optimized for the dense kanji-kana mix of Japanese reading. The result is a tone that is confident but never corporate-cold — the visual equivalent of the app's "小さな『できた』の積み重ね" ("a stack of small I-did-it! moments") mission.

What distinguishes mikan from its ed-tech peers is its flat, almost shadowless restraint on the corporate site paired with a deliberately playful 3D "hard-shadow" button on the toB product surface. The corporate CTAs are flat orange rectangles at a tidy 6px radius; but on mikan for School (school.mikan.com) the primary button shifts to a warmer accent orange (#ff7f09) sitting on a solid offset shadow (#e26f00 0px 4px 0px 0px) — a tactile, pressable, game-like affordance that signals the friendlier, more energetic toB tone. Deep navy (#001c46) full-width bands break up the white, and step numerals are set in Oswald (46px, weight 600) in marigold (#fd9b12) for a crisp, numbered-tutorial rhythm. It is an education brand that looks like learning should feel: bright, low-friction, and quietly rigorous.

Key Characteristics:

• Citrus brand orange (#ff4c0a) reserved for every CTA + section heading — the single "action/identity" color
• Hiragino Kaku Gothic ProN weight 900 for display headlines — heavy, rounded, friendly CJK gothic
• Noto Sans / Noto Sans JP weight 700 on the toB mikan for School surface
• 3D hard-shadow buttons (#e26f00 0px 4px 0px 0px) on School — playful, tactile, pressable
• Warm off-white canvas (#f7f4f3) + deep navy (#001c46) bands instead of stark white-on-black
• Near-black charcoal (#333333) and navy ink (#000e22) for text — never harsh pure black for body
• Conservative radius ladder: 4px → 6px → 8px → 10px → 12px → 20px cards
• Oswald numerals (#fd9b12 marigold) for step counters — numbered-tutorial cadence

2. Color Palette & Roles

Primary

• mikan Orange (#ff4c0a): The namesake citrus brand color. CTA backgrounds, English section labels ("Service", "News"), and Japanese section headings on the corporate site. The system's single saturated "action + identity" hue.
• Marigold (#fd9b12): Warmer secondary orange used for the School download pill and the Oswald step numerals (01/02/03). A softer, more golden companion to the primary.
• Accent Orange (#ff7f09): The mikan for School primary-CTA fill and outline-border color. Mid-bright orange that reads slightly warmer than the corporate primary.

Deep & Ink

• Brand Navy (#001c46): Deep navy full-width section bands on the corporate site, providing dark contrast against the orange and white.
• Ink Navy (#000e22): Near-black blue-tinted text color for primary copy on dark/light surfaces.
• Charcoal (#333333): The workhorse text color across nav, cards, and body — a warm near-black, never pure #000000.
• Muted Grey (#666666): Secondary/metadata text, captions, fine print.

Neutral & Surface

• Pure White (#ffffff): Card surfaces, button text on orange/navy, primary content background.
• Warm Canvas (#f7f4f3): The page's warm off-white background — a barely-there peach-grey that softens the orange.
• Surface Grey (#fafafa): Light grey card-inner / alternating-block surface.
• Surface Alt (#f9f9f9): A near-white alternating section background.
• Hairline (#eeeeee): Thin borders and dividers — the primary separation device in the shadow-light corporate system.

Functional / Depth

• Orange Shadow (#e26f00): The solid offset color of the School 3D hard-shadow button (#e26f00 0px 4px 0px 0px) — a darker burnt-orange that grounds the pressable affordance.
• On-Primary White (#ffffff): Text/icon color on all orange and navy fills.

3. Typography Rules

Font Family

• Display (corporate): Hiragino Kaku Gothic ProN — the full stack is -apple-system, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif. Weight 900 at display sizes; weight 700 for nav.
• Body / toB (School): Noto Sans JP (and Noto Sans) at weight 700 for headings, weight 400 for body — the Google CJK web standard.
• Numerals: Oswald — condensed Latin for step counters (01/02/03) at weight 500–600, in marigold.
• Misc Latin: Lato appears on a School download button label.

Hierarchy

Principles

• Heavy display, calm body: Hiragino weight 900 carries every corporate headline; weight 400 carries every paragraph at a roomy 1.7 line-height. The weight jump is the primary hierarchy signal.
• Orange is a typographic role, not just a fill: English/Japanese section labels are set in brand orange (#ff4c0a), making color part of the type system rather than decoration.
• CJK-first stack with graceful Latin fallback: the -apple-system → Hiragino Kaku Gothic ProN → Meiryo → sans-serif ladder guarantees consistent gothic rendering across macOS, iOS, and Windows.
• Oswald owns numerals: condensed Latin numerals (01/02/03) give the toB step tutorials a crisp, counted cadence distinct from the rounded gothic body.
• Two surfaces, two body fonts: the corporate site leans on the system Hiragino stack; mikan for School standardizes on Noto Sans JP — both gothic, both friendly, never serif for UI.

4. Component Stylings

Buttons

Corporate CTA (Primary)

• Background: #ff4c0a
• Text: #ffffff
• Radius: 6px
• Padding: 15px 30px
• Font: 15px Hiragino weight 700
• Height: 48px
• Use: Corporate site call-to-action — "採用情報", "View More →"

School Primary (3D Fill)

• Background: #ff7f09
• Text: #ffffff
• Radius: 8px
• Padding: 17px 30px
• Shadow: #e26f00 0px 4px 0px 0px
• Font: 16px weight 400
• Height: 61px
• Use: mikan for School primary CTA — "無料トライアルのお申し込み" (pressable 3D hard-shadow)

School Secondary (3D Outline)

• Background: #ffffff
• Text: #333333
• Border: 2px solid #ff7f09
• Radius: 8px
• Padding: 17px 30px
• Shadow: #e26f00 0px 4px 0px 0px
• Font: 16px weight 400
• Height: 65px
• Use: School secondary action — "資料請求する"

Download Pill (Marigold)

• Background: #fd9b12
• Text: #ffffff
• Radius: 4px
• Font: 15px weight 400
• Height: 44px
• Use: School "資料ダウンロード" download button

Cards & Containers

News / Notice Card

• Background: #ffffff
• Text: #333333
• Radius: 10px
• Padding: 20px
• Use: News / お知らせ list card on corporate home (flat, no shadow)

Careers Card

• Background: #ffffff
• Text: #333333
• Radius: 12px
• Padding: 20px
• Use: Job-posting card prefixed with 🍊 ("英語アプリmikanフロントエンドエンジニア")

Review / Interview Card

• Background: #ffffff
• Text: #333333
• Radius: 8px
• Use: Note interview / student-review card linking to note.com

Badges

Step Numeral

• Text: #fd9b12
• Font: 46px Oswald weight 600
• Use: Numbered step counter (01 / 02 / 03) on mikan for School feature sections

Navigation

• Background: #ffffff
• Text: #333333
• Font: 16px Hiragino weight 700
• Active: brand orange #ff4c0a text on the active item
• Use: Top horizontal nav ("Top", "About", "Members", "News", "Contact")

---

Verified: 2026-06-17 (omd:add-reference CREATE — Tier 1 live inspect, 2 surfaces) Tier 1 sources: https://mikan.link/ (corporate site, live computed style); https://school.mikan.com/ (mikan for School toB product surface, live computed style) Tier 2 sources: getdesign.md/mikan — no entry (empty); styles.refero.design/?q=mikan — no brand-specific result (only default trending cards returned) Conflicts unresolved: none. Two-surface palette split documented intentionally: corporate brand orange #ff4c0a (flat 6px CTA) vs mikan for School accent orange #ff7f09 (3D hard-shadow 8px CTA) + marigold #fd9b12. Both retained as distinct variant subgroups in §4.

5. Layout Principles

Spacing System

• Base unit: 8px (with 4px sub-step)
• Scale: 4px, 8px, 12px, 16px, 20px, 30px, 48px, 64px
• Notable: CTA horizontal padding lands at 30px (measured) giving the orange buttons a generous, tappable hit area; cards use 20px / 24px inner padding

Grid & Container

• Centered single-column hero with the 36px Hiragino weight-900 headline as the anchor
• News / careers cards arranged in responsive multi-column grids that wrap to single column on mobile
• Feature sections alternate white (#ffffff) and warm canvas (#f7f4f3), broken by deep navy (#001c46) full-width bands
• mikan for School uses numbered (01/02/03) feature blocks with Oswald counters anchoring each step

Whitespace Philosophy

• Friendly breathing room: despite being information-rich ed-tech, the surfaces stay airy with generous vertical rhythm between sections.
• Flat segmentation: corporate sections separate by background tint (warm canvas vs white) and #eeeeee hairlines rather than heavy elevation.
• Color as anchor: deep navy bands and orange section labels create rhythm without arbitrary decoration.

Border Radius Scale

• XSmall (4px): School download pill, small inner elements
• Small (6px): corporate CTA buttons
• Medium (8px): School CTAs, review cards
• Large (10–12px): news cards, careers cards — the card workhorse
• XLarge (20px): larger feature containers
• Pill (320px / full): rounded avatar/icon chips

6. Depth & Elevation

Shadow Philosophy: mikan's corporate site is near-shadowless — live inspection found box-shadow: none across the hero, nav, headings, and most cards. Depth and grouping are communicated through flat tinted surfaces (#f7f4f3, #fafafa), thin #eeeeee hairlines, and deep navy (#001c46) contrast bands. The one deliberate exception lives on mikan for School: a solid-offset 3D hard-shadow (#e26f00 0px 4px 0px 0px) on the primary buttons — not a soft blur but a flat, game-like, pressable affordance that matches the more energetic toB tone. This split is intentional: calm flat marketing chrome on corporate, playful tactile buttons where the product wants kids and teachers to tap.

7. Do's and Don'ts

Do

• Use the citrus brand orange (#ff4c0a) for every corporate CTA and section heading — it's the namesake "action + identity" color
• Set display headlines in Hiragino Kaku Gothic ProN weight 900 — heavy, rounded, friendly CJK gothic
• Use Noto Sans JP weight 700 for headings on the mikan for School surface
• Apply the 3D hard-shadow (#e26f00 0px 4px 0px 0px) on School primary buttons for a pressable, playful feel
• Use near-black charcoal (#333333) or navy ink (#000e22) for text instead of pure black
• Separate corporate sections with warm tint (#f7f4f3) and #eeeeee hairlines, and break rhythm with deep navy (#001c46) bands
• Set step numerals (01/02/03) in Oswald, marigold (#fd9b12)
• Keep radius conservative — 4px–12px on buttons and cards

Don't

• Spread orange across many decorative elements — keep it the single action/identity signal
• Use pure black (#000000) for body text — reserve charcoal #333333 and navy ink #000e22
• Put the 3D hard-shadow on corporate buttons — corporate CTAs stay flat 6px
• Set body copy in a light weight or a serif — gothic at weight 400 owns reading text
• Use soft blurred drop shadows for elevation — the system is flat plus one hard-offset exception
• Mix in a second saturated accent hue beyond the orange family (orange / marigold / accent-orange)
• Set Japanese headlines in a thin weight — display is always weight 700–900
• Use positive, decorative letter-spacing on dense CJK body — keep it tight and legible

8. Responsive Behavior

Breakpoints

Touch Targets

• Corporate CTA at 48px height with 15px 30px padding — comfortably tappable
• School primary CTA at 61px height — large, unmistakable, with 3D affordance
• Nav links at 16px weight 700 within a generous header

Collapsing Strategy

• Hero: 36px Hiragino headline scales down on mobile, weight 900 maintained
• News / careers card grids: multi-column → single column stack
• Navy contrast bands and warm-canvas sections maintain full-width treatment
• School numbered steps (01/02/03) stack vertically on narrow viewports

Image Behavior

• App screenshots and illustrations sit flat (no shadow) on corporate, consistent with the flat system
• Cards maintain their 8–12px radius across breakpoints

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA / brand: mikan Orange (#ff4c0a)
• School primary CTA: Accent Orange (#ff7f09) + 3D shadow (#e26f00)
• Marigold accent / numerals: (#fd9b12)
• Deep band background: Brand Navy (#001c46)
• Heading / body text: Charcoal (#333333), Ink Navy (#000e22)
• Muted text: Muted Grey (#666666)
• Background: Pure White (#ffffff), Warm Canvas (#f7f4f3)
• Hairline: (#eeeeee)

Example Component Prompts

• "Create a corporate hero on warm canvas (#f7f4f3). Headline at 36px Hiragino Kaku Gothic ProN weight 900, color #333333. One orange CTA: #ff4c0a background, white text, 6px radius, 15px 30px padding, 15px weight 700 — '採用情報'. Section label 'Service' at 60px weight 900 in brand orange #ff4c0a."
• "Design a mikan for School primary button: #ff7f09 background, white text, 8px radius, 17px 30px padding, with a 3D hard-shadow #e26f00 0px 4px 0px 0px. Beside it an outline variant: white background, 2px solid #ff7f09 border, #333333 text, same shadow."
• "Build a news card: white background, 10px radius, 20px padding, no shadow, #333333 text. A careers card uses 12px radius with a 🍊 prefix on the title."
• "Create a numbered feature step: Oswald numeral '01' at 46px weight 600 in marigold #fd9b12, followed by a Noto Sans JP 24px weight 700 heading in #333333."
• "Create top nav: white header, Hiragino 16px weight 700 links (#333333), brand orange #ff4c0a on the active item."

Iteration Guide

1. Brand orange (#ff4c0a) is the single corporate action/identity color — don't dilute it
2. Hiragino Kaku Gothic ProN weight 900 for every corporate headline; Noto Sans JP 700 for School
3. Flat by default — separate with #f7f4f3 tint, #eeeeee hairlines, and #001c46 navy bands
4. The 3D hard-shadow (#e26f00 0px 4px 0px 0px) belongs to School buttons only
5. Text is charcoal #333333 / navy ink #000e22, never pure black for body
6. Oswald + marigold (#fd9b12) for step numerals (01/02/03)
7. Radius stays conservative: 4–12px buttons and cards

---

10. Voice & Tone

mikan's voice is warm, encouraging, and achievement-celebrating — an English-learning companion that turns a daunting task (memorizing tens of thousands of words) into a stream of small wins. The brand mission "小さな『できた』の積み重ねをずっと支える" ("supporting the steady accumulation of small I-did-it! moments") sets the register: motivational, kind, never scolding. Copy treats the learner as someone capable who just needs momentum, not a struggling student to be lectured. The toB mikan for School voice stays equally friendly while adding concrete teacher-facing benefit framing ("先生の学習管理を効率化" / "streamline teachers' study management").

Voice samples (verbatim from live surfaces):

• "小さな『できた』の積み重ねをずっと支える" — corporate hero (mission, achievement-framed). (verified live 2026-06-17)
• "生徒の学習が続く仕組み" — mikan for School section heading ("the system that keeps students learning"). (verified live 2026-06-17)
• "できた！を実感できるmikanの学習ステップ" — School feature sub-head ("mikan's study steps where you feel I did it!"). (verified live 2026-06-17)

Forbidden register: shame-based study pressure, exam-anxiety fear appeals, cold institutional tone, undefined jargon. mikan keeps the tone of an encouraging coach, not a stern teacher.

11. Brand Narrative

mikan (株式会社mikan) builds Japan's most-used English-vocabulary learning app, 英語アプリmikan, which has surpassed 10 million downloads ("1000万ダウンロード突破" stated on the homepage). The product's premise is behavioral, not just instructional: language acquisition is hard mostly because momentum is hard to sustain, so mikan engineers the experience around "小さな『できた』" — small, frequent, felt moments of success — to keep learners coming back day after day. The name itself, mikan (みかん, the mandarin orange), gives the brand its cheerful citrus identity and its signature orange.

The company has grown from a single consumer app into a two-sided education business: the toC 英語アプリmikan for individual learners, and mikan for School (school.mikan.com), a toB service for schools and cram schools that wraps the same learning engine in teacher-facing management tools ("先生の学習管理を効率化"). Partnerships with established Japanese education publishers (KADOKAWA's 『真・英文法大全』, Z会's 速読速聴・英単語 series) extend the content library, positioning mikan as infrastructure for English study rather than a single app.

What mikan refuses, visible in its design: the cold, exam-pressure aesthetic of legacy Japanese cram-school materials, and the gamified-but-hollow look of attention-farming apps. What it embraces: a bright, friendly citrus identity; heavy, approachable gothic type; flat, fast, low-friction layouts; and playful tactile buttons that make tapping "next" feel like a small reward. The design is the mission rendered visually — learning that feels like a stack of small wins.

12. Principles

1. Celebrate small wins. The product is built on "小さな『できた』." UI implication: surface progress visibly and frequently; reward the next tap with a tactile, satisfying affordance (the School 3D hard-shadow button).
2. One bright signal. Orange (#ff4c0a) means "this is mikan, do this." UI implication: reserve the saturated citrus for CTAs and section identity so the action is never ambiguous; don't dilute it with decorative color.
3. Friendly, never intimidating. English study should feel approachable. UI implication: heavy but rounded gothic type, generous whitespace, warm off-white canvas — no cram-school severity.
4. Flat and fast, with a tactile reward. UI implication: keep marketing chrome flat (tint + hairline + navy bands); reserve the playful 3D shadow for the moments where a tap should feel good.
5. Two audiences, one warmth. Learners and teachers both get an encouraging tone. UI implication: the toB School surface stays as friendly as the consumer app while adding concrete benefit framing.

13. Personas

Personas below are fictional archetypes informed by publicly observable mikan user segments (Japanese students preparing for English exams, working adults relearning vocabulary, teachers adopting toB tools), not individual people.

佐藤ひなた, 17, 名古屋. A high-schooler studying for university entrance English. Uses mikan in short bursts between classes because the "できた！" feedback keeps her going when flashcards would bore her. Chose mikan because it felt like a game that happened to teach, not a test.

田中健, 34, 東京. A working professional rebuilding his English vocabulary for work. Values that mikan turns a dreaded chore into a daily streak of small wins he can finish on the train. Trusts the brand's calm, non-pushy tone.

山本先生, 45, 新潟. A high-school English teacher who adopted mikan for School to manage student study at scale. Appreciates that the toB dashboard streamlines assignment tracking ("先生の学習管理を効率化") while students still get the friendly app they already like.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is friendly but restrained. The signature interaction is the School 3D hard-shadow button press — on tap, the #e26f00 0px 4px 0px 0px offset collapses so the button visibly "presses down," a tactile reward consistent with the "できた！" philosophy. Section content fades in from below at motion-standard / ease-enter. Celebration moments (lesson complete) may use a brief bouncy accent, but routine UI avoids gratuitous spring. Under prefers-reduced-motion: reduce, all transitions collapse to instant and the button-press offset becomes a static state change; the product remains fully functional.