Design System Inspiration of Milddang (I Hate Flying Bugs)

1. Visual Theme & Atmosphere

Milddang (밀당) is the AI-driven 1:1 tutoring product of the Korean edu-tech company I Hate Flying Bugs (IHFB), and its site reads like a calm, editorial education brand rather than a loud cram-school ad. The canvas is pure white (#ffffff), text sits in a soft near-black (#333333 for body, #111111 for headings and nav) rather than pure black, and the whole page is built on a single typeface — Pretendard — used at every level. The atmosphere is trustworthy and quietly optimistic: this is a company whose stated mission is "High-Quality Education for Equal Opportunity," and the visual language deliberately avoids the hard-sell urgency of the private-tutoring market.

The organizing idea is one product, one color. IHFB runs two education lines and codes each with a saturated hue: the private-education flagship Mildang PT owns a confident teal (#00b29d), while the public-education School PT line owns a periwinkle blue (#555dfa). Across the corporate home these appear as large, evenly-sized product-entry cards, so the color itself becomes the wayfinding. A magenta accent (#cc3366) carries links and corporate emphasis, and neutral entries (Newsroom) fall back to a light grey card (#efeff1). On the Mildang PT product surface the teal returns as the accent throughout, backed by two tinted-teal wash surfaces (#e5f7f5 and #dff1f1) that group persona and feature blocks.

What distinguishes Milddang from its edu-tech peers is its restraint with depth. Live inspection found box-shadow: none across nav, hero, product cards, headings, and segment cards on both surfaces — this is a deliberately flat, shadowless system. Separation is achieved with flat color: tinted teal and grey surfaces, plus a dark corporate footer band (#2f3233). Geometry is soft and consistent: 8px radius on the home entry cards, and generous 40px pills/rounded cards on the Mildang PT page. The result is a clean, mobile-native, education-first aesthetic that feels credible and calm rather than promotional.

Key Characteristics:

• Single typeface — Pretendard — at every level; Bold (700) for display/headings, Regular (400) for body
• Product-as-color wayfinding: Mildang PT teal (#00b29d) vs School PT blue (#555dfa)
• Magenta (#cc3366) reserved for links and corporate accent
• Near-black text (#111111 headings, #333333 body) instead of pure black — warm and trustworthy
• Flat, shadowless depth (box-shadow: none); separation by tinted teal (#e5f7f5, #dff1f1) and grey (#efeff1) surfaces
• Soft geometry: 8px entry cards, 40px pills/rounded feature cards, 50% circular avatars
• Slate ladder for text hierarchy: #333333 body → #494c4f secondary → #999999 muted/inactive
• Dark corporate footer band (#2f3233) anchors the parent-company identity (I Hate Flying Bugs Inc.)

2. Color Palette & Roles

Primary

• Mildang Teal (#00b29d): Primary brand color for the Mildang PT (private-education) line — the product-entry card background and the accent color throughout the Mildang PT surface. The system's core "this is Mildang" hue.
• Teal Tint (#e5f7f5): Lightest tinted-teal wash surface used for emphasis labels and feature blocks on Mildang PT.
• Teal Tint Alt (#dff1f1): A slightly deeper tinted-teal surface for rounded persona/segment cards.

Accent & Sibling Line

• Corporate Magenta (#cc3366): Link color and corporate emphasis accent across the home (appears ~14× in the text-color scan). Not a fill color — a text/accent hue.
• School PT Blue (#555dfa): The periwinkle blue owned by the sibling public-education line (School PT); appears as its product-entry card background.

Text / Ink

• Ink (#111111): Primary heading and nav color — a near-black used instead of pure black for warmth.
• Ink Pure (#000000): Occasional maximum-contrast heading text (appears heavily in the fg scan on white sections).
• Body (#333333): The dominant body-text color (×138 in the fg scan) — standard reading text.
• Slate (#494c4f): Secondary text and captions.
• Muted (#999999): Tertiary / inactive text (e.g. the inactive KOR / ESP language toggles).

Neutral & Surface

• Canvas (#ffffff): Page background, white sections, and text color on teal/blue/dark surfaces.
• Surface Grey (#efeff1): Light grey card/section surface for neutral entries (Newsroom) and alternating blocks.
• Dark (#2f3233): The dark corporate footer band background.
• On-Primary (#ffffff): White text and headings placed on the teal, blue, and dark surfaces.

3. Typography Rules

Font Family

• Sans (only family): Pretendard, with sans-serif fallback — used for headlines, nav, and body alike. There is no display/body split; hierarchy comes entirely from size and weight.

Hierarchy

Principles

• One typeface, weight-driven hierarchy: Pretendard carries everything. Contrast comes from Bold (700) for display/headings vs Regular (400) for body — never a font swap.
• Bold display, calm body: Headlines run at 700; running text stays a quiet 400 at 16px with a comfortable 1.5 line-height for dense hangul legibility.
• Slight negative tracking on section heads: 20px headings carry -0.2px letter-spacing; display and body stay at normal tracking.
• Near-black, not black, for text: Headings/nav sit at #111111 and body at #333333; pure black #000000 is reserved for maximum-contrast moments.

4. Component Stylings

Buttons

Teal CTA Pill

• Background: #00b29d
• Text: #ffffff
• Radius: 40px
• Font: 16px / 700 / Pretendard
• Use: Primary action pill on Mildang PT surfaces — teal is the single action color

Cards & Containers

Mildang PT Entry Card

• Background: #00b29d
• Text: #ffffff
• Radius: 8px
• Padding: 20px 16px
• Use: Private-education (Mildang PT) product-entry card on the corporate home grid

School PT Entry Card

• Background: #555dfa
• Text: #ffffff
• Radius: 8px
• Padding: 20px 16px
• Use: Public-education (School PT) product-entry card — sibling line, periwinkle blue

Neutral Entry Card

• Background: #efeff1
• Text: #111111
• Radius: 8px
• Padding: 20px 16px
• Use: Newsroom / neutral entry card on the grey surface

Tinted-Teal Segment Card

• Background: #dff1f1
• Text: #333333
• Radius: 40px
• Use: Rounded persona/segment card (Students / Lecturers / Parents) on the Mildang PT page

Badges

Teal Emphasis Label

• Background: #e5f7f5
• Text: #00b29d
• Radius: 40px
• Font: 16px / 700 / Pretendard
• Use: Tinted-teal emphasis label / tag on Mildang PT surfaces

Navigation

Top Nav Item

• Text: #111111
• Font: 16px / 600 / Pretendard
• Padding: 30px 0px
• Active: magenta #cc3366 link/accent
• Use: Corporate nav ("Who we are", "What we do", "Newsroom"); the inactive language toggle (KOR / ESP) sits at #999999

Footer

Dark Corporate Band

• Background: #2f3233
• Text: #ffffff
• Font: 16px / 400 / Pretendard
• Use: Dark footer band carrying the parent-company (I Hate Flying Bugs Inc.) info and links

---

Verified: 2026-07-02 (omd:add-reference CREATE — Tier 1 live inspect, 2 surfaces) Tier 1 sources: https://www.ihateflyingbugs.com/ , https://www.ihateflyingbugs.com/mildang-pt-en/ , https://medium.com/mildang Tier 2 sources: getdesign.md/mildang (generic SPA shell, no data) ; styles.refero.design/?q=mildang (no genuine entry — first result resolves to unrelated "AngelList") Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: ~4px
• Scale: 4px, 8px, 12px, 16px, 20px, 28px, 48px, 64px
• Notable: entry-card padding lands at 20px 16px (measured); nav items use a tall 30px vertical padding for an 80px header hit area; persona cards on Mildang PT use a 28px inset with a large image gutter

Grid & Container

• Corporate home: a full-width grey hero, then an evenly-sized product-entry card grid (Mildang PT / School PT / Newsroom), each card ~385px wide × 160px tall
• Mildang PT page: centered editorial column with rounded persona/segment cards (Students, Lecturers, Parents, Ontact Teachers) at ~240px tall
• Alternating white (#ffffff) and tinted-teal (#e5f7f5 / #dff1f1) / grey (#efeff1) full-width bands
• A dark corporate band (#2f3233) closes the page

Whitespace Philosophy

• Editorial calm over density: generous vertical rhythm between sections; the education message is given room to breathe rather than crammed.
• Flat segmentation: sections separate by background color (teal tint vs grey vs white), never by shadow or heavy borders.
• Color as structure: the product colors (teal, blue) do the wayfinding work that a busier site would hand to iconography or dividers.

Border Radius Scale

• Small (3px): fine inner elements
• Medium (8px): the home product-entry cards — the workhorse
• Large (40px): pills and rounded feature/persona cards on Mildang PT
• Full (50% / 9999px): circular avatars and round icons

6. Depth & Elevation

Shadow Philosophy: Milddang is a near-shadowless system. Live inspection found box-shadow: none across the nav, hero, product cards, headings, and Mildang PT segment cards on both surfaces. Depth and grouping are communicated entirely through flat color — tinted teal and grey wash surfaces, saturated product fills, and a single dark corporate band. This is a deliberate modern-flat choice that keeps the education UI feeling clean, fast, and approachable; when emphasis is needed the system reaches for its product color (#00b29d), never elevation.

7. Do's and Don'ts

Do

• Use Pretendard for everything — display, nav, and body; drive hierarchy with weight (700 vs 400)
• Reserve teal (#00b29d) as the Mildang PT action/brand color — keep it the product's single hue
• Use periwinkle blue (#555dfa) only for the School PT (public-education) sibling line
• Use magenta (#cc3366) for links and corporate accent, not as a fill
• Use near-black #111111 for headings/nav and #333333 for body instead of pure black
• Separate sections with flat tinted-teal (#e5f7f5 / #dff1f1) and grey (#efeff1) surfaces, not shadows
• Keep geometry soft — 8px entry cards, 40px pills, 50% circular avatars
• Let color carry the wayfinding — one product, one color

Don't

• Use drop shadows for elevation — Milddang is a flat, shadowless system
• Mix the two product colors — teal is Mildang PT, blue is School PT; keep the lines distinct
• Spread teal across unrelated UI — it dilutes the product signal
• Use pure black (#000000) for body text — reserve near-black #333333 / #111111
• Swap fonts for headlines — Pretendard owns every level; change weight, not typeface
• Use magenta (#cc3366) as a large fill — it is a link/accent hue only
• Add hard-sell urgency chrome (banners, countdowns) — the brand voice is calm and education-first

8. Responsive Behavior

Breakpoints

Touch Targets

• Product-entry cards at ~160px tall with 20px 16px padding — large, unambiguous tap targets
• Nav items with 30px vertical padding create an ~80px header band
• Rounded 40px pills give a generous, tappable hit area on Mildang PT

Collapsing Strategy

• Product-entry grid: 3-up → 2-up → single-column stacked
• Persona/segment cards: side-by-side → stacked full-width
• Tinted/white/grey alternating bands maintain full-width treatment
• Hero: 32px headline scales down on mobile, weight 700 maintained

Image Behavior

• Illustrations and product screenshots carry no shadow at any size, consistent with the flat system
• Circular avatars (50%) and rounded cards (40px / 8px) hold their radius across breakpoints

9. Agent Prompt Guide

Quick Color Reference

• Mildang brand / CTA: Teal (#00b29d)
• Teal tint surfaces: #e5f7f5, #dff1f1
• Sibling line (School PT): Blue (#555dfa)
• Link / corporate accent: Magenta (#cc3366)
• Heading / nav: Ink (#111111)
• Max-contrast heading: #000000
• Body text: #333333
• Secondary text: Slate (#494c4f)
• Muted / inactive: #999999
• Background: White (#ffffff)
• Grey surface: #efeff1
• Dark footer band: #2f3233

Example Component Prompts

• "Create a product-entry card grid on white. Three equal cards (~385×160): a teal card #00b29d, a periwinkle-blue card #555dfa, and a grey card #efeff1, each 8px radius, 20px 16px padding, white or #111111 heading in Pretendard 20px weight 700, no shadow."
• "Design a hero: full-width grey band, H1 in Pretendard 32px weight 700, line-height 1.4, color white on image (or #111111 on white). Body 16px Pretendard weight 400, #333333."
• "Build a Mildang PT feature block: tinted-teal #dff1f1 rounded card (40px radius), heading Pretendard 20px 700 #111111, body 16px 400 #333333, a teal #00b29d pill CTA (40px radius, white text), no shadow."
• "Create top nav: white header, Pretendard 16px weight 600 links in #111111, magenta #cc3366 on active/link, inactive language toggle at #999999."

Iteration Guide

1. Pretendard everywhere; hierarchy is weight (700 display/headings, 600 nav, 400 body), never a font swap
2. Teal (#00b29d) = Mildang PT; blue (#555dfa) = School PT — never blend the two lines
3. No shadows — separate with tinted-teal (#e5f7f5 / #dff1f1) and grey (#efeff1) surfaces
4. Soft geometry — 8px entry cards, 40px pills, 50% avatars
5. Text is #111111 / #333333, never pure black for body; #000000 only for max contrast
6. Magenta (#cc3366) is a link/accent hue, not a fill
7. Dark band (#2f3233) closes the page as the corporate footer

---

10. Voice & Tone

Milddang's voice is calm, credible, and mission-framed — an education brand that treats teaching quality as a public good rather than a sales pitch. The corporate line "High-Quality Education for Equal Opportunity" sets the register: earnest, purposeful, and free of cram-market urgency. Copy speaks to students, parents, and teachers as partners in learning, and it decodes the product (AI-based 1:1 personalized tutoring) in plain terms rather than hyping the technology.

Voice samples (verbatim from live surfaces):

• "High-Quality Education for Equal Opportunity" — corporate hero headline (mission-framed). (verified live 2026-07-02)
• "High-Quality Personalized…" — Mildang PT product H1 (product promise). (verified live 2026-07-02)
• "AI-based 1:1 Personalized…" — Mildang PT feature heading (what the product is). (verified live 2026-07-02)

Forbidden register: cram-school fear-selling, countdown/urgency pressure, undefined AI buzzwords left unexplained, exclamation-heavy hype, grade-guarantee claims.

11. Brand Narrative

Milddang (밀당) is the flagship product of I Hate Flying Bugs (IHFB), a Korean edu-tech company whose mission — stated plainly on its home — is "High-Quality Education for Equal Opportunity." The company builds two education lines: Mildang PT, an AI-based 1:1 personalized tutoring service for private education, and School PT, its counterpart aimed at public education. The founding premise reframes tutoring quality — historically gated by geography and household income — as something that software-assisted personalization can distribute more equally.

The product's core is AI-based 1:1 personalized tutoring: the site addresses each stakeholder in the learning loop directly — students, lecturers, parents, and "Ontact" (online-contact) teachers — signaling that the product is a coordinated system, not a single app. The IHFB R&D team documents this work publicly on its team blog ("밀당PT와 스쿨PT를 개발하는 IHFB R&D팀"), reinforcing an engineering-led, transparent posture.

What Milddang refuses, visible in its design: the loud, urgency-driven chrome of the Korean private-tutoring market (no countdowns, no fear-selling, no grade-guarantee banners). What it embraces: a flat, shadowless, education-first interface; a calm single typeface (Pretendard); and a disciplined one-product-one-color palette (Mildang teal #00b29d, School blue #555dfa) that makes the two lines legible at a glance while a warm magenta (#cc3366) carries the corporate voice.

12. Principles

1. Equal opportunity is the product. The mission ("High-Quality Education for Equal Opportunity") is the design brief. UI implication: keep the interface approachable and non-intimidating; never gate basic understanding behind jargon or paywalled chrome.
2. One product, one color. Each education line owns a hue. UI implication: reserve teal (#00b29d) for Mildang PT and blue (#555dfa) for School PT; never blend them, so the color itself is the wayfinding.
3. Calm over urgency. The brand rejects cram-market pressure tactics. UI implication: no countdowns, no fear-selling banners; give the education message editorial room to breathe.
4. Flat and honest. Depth is communicated by color, not decoration. UI implication: box-shadow: none; separate with tinted-teal and grey surfaces and a single dark corporate band.
5. Speak to every learner in the loop. Students, lecturers, parents, and teachers each get an addressed segment. UI implication: structure surfaces around audiences, not features; use rounded tinted-teal cards to make each segment feel welcoming.

13. Personas

Personas below are fictional archetypes informed by publicly observable Milddang / IHFB user segments (Korean students in personalized tutoring, their parents, and participating teachers), not individual people.

김서연, 16, 대구. A high-school student using Mildang PT for 1:1 personalized study. Values that the plan adapts to what she actually gets wrong instead of a one-size lecture. Chose Milddang because the interface felt calm and school-like, not like a pressure-selling academy app.

이준호, 45, 인천. A parent of two evaluating tutoring options. Distrusts grade-guarantee marketing and countdown discounts. Trusts Milddang's plain "equal opportunity" mission framing and the transparent stakeholder sections (students / parents / teachers).

박지은, 33, 서울. An Ontact (online-contact) teacher delivering Mildang PT sessions. Appreciates that the product treats lecturers as a first-class audience with their own segment, and that the flat, uncluttered UI keeps her focused on the student rather than the chrome.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and quiet — consistent with the flat, calm, education-first aesthetic. Product-entry cards respond to press with a subtle scale/opacity shift; segment blocks fade-in from below at motion-standard / ease-enter. No bounce or spring — an education brand signals steadiness and focus, not playfulness. Under prefers-reduced-motion: reduce, all transitions collapse to instant; the product remains fully functional.