Design System Inspiration of Milddang (I Hate Flying Bugs)

1. Visual Theme & Atmosphere

밀당PT (Mildang PT) is the online one-to-one tutoring service for middle- and high-school students run by 아이헤이트플라잉버그스 (I Hate Flying Bugs Inc., IHFB), a Seoul education company. Its own history page tells the arc: in 2012 a small office in 연지동 began building technology to analyse education data; the team then ran online learning services, including one for civil-service exam candidates, learning how to keep students studying to the end online; and in 2019 it launched 밀당PT, which pairs AI with a teacher's management as one-to-one "온택트" learning. Today the company sits in 여의도 파크원 and describes the service as AI diagnosis, a personal study plan and four one-to-one management sessions a week, led by 퍼스널티처 it says it selects at a final pass rate of 3%. The team explains its name in one line: a team that dreamed of bug-free services became a team that solves education problems. The corporate site states the mission as "사람의 가능성에 기술을 더해 질 높은 교육 기회의 평등을 만들어갑니다" and lists three businesses: 스쿨PT, 밀당PT and AI 디지털교과서.

The brand now speaks in two visual registers on two sites. The corporate site, ihateflyingbugs.com, is sober and editorial: a 74px Pretendard Bold hero set in white over the hero backdrop, charcoal #15171c navigation that turns blue #0064ff on hover, ruled link rows, and a white hero link with a 3px corner. The product site, mildang.kr, is a long, high-energy sales page: a hero with a white headline and pale #aeb9c8 navigation, a mint-teal #32d7b4 신청 pill in the header with its own teal glow, white review cards on a 16px radius with a soft shadow, and a navy #232952 lead-form panel. Its company page, /service/, mixes dark and light bands with 51.84px headlines at weights 700 and 900, deep teal-grey #10212b text and teal eyebrows.

Key Characteristics:

• Mint teal as the product action colour: #32d7b4 on the header 신청 pill, #20c9a7 on the in-page 상담 action (hover #3ad7b8) and #16bea8 on the form submit
• A corporate blue #0064ff that appears only on interaction and selection on ihateflyingbugs.com
• Pretendard everywhere, from 400 body to 900 headlines; large display sizes carry tight negative tracking (-3.108px at 74px, -1.296px at 51.84px)
• A product hero with pale navigation and white type; light bands in #10212b and teal-grey text on the company page
• Soft depth on the product site (review cards, the teal glow under the header pill, the navy form panel) and flat, ruled layouts on the corporate site

Primary tasks

• Book a free consultation for a middle- or high-school student through the lead form.
• Start 밀당PT from the header 신청 button.
• Read student outcomes and reviews before deciding.
• Understand how AI diagnosis, a personal roadmap and 1:1 management fit together.
• Learn who runs the service and how long the company has worked on it.

2. Color Palette & Roles

Every token below was read on 2026-09-30 from four public, logged-out pages: ihateflyingbugs.com and its 밀당PT page (corporate), mildang.kr and mildang.kr/service/ (product marketing). Hover values come from the collector's frames or from the fixed keyboard probe. The two sites are separate evidence domains; each role says which one it comes from. The student app (student.mildang.kr) was not captured and no app value is claimed.

Primary

• Mildang Mint (#32d7b4): The fill of PT 신청하기 →, the one action in the header of both mildang.kr pages (144 × 42, 9px radius, a teal glow rgba(37, 216, 178, 0.15) 0px 8px 24px). It is the primary because it is the product site's persistent primary action: starting 밀당PT is what every page asks for, in this colour, from the same place. On hover and press the label turns white and the fill stays.
• On Primary (#07111f): The navy-black label on the mint pill.

Action family (product site)

• Action Teal (#20c9a7): Fill of 무료 상담 신청하기 near the foot of /service/ (260 × 60, square corners, white label).
• Action Teal Hover (#3ad7b8): Its settled hover and pressed fill, with a 2px lift.
• Submit Teal (#16bea8): Fill of the 무료 상담 신청( CLICK ) submit in the /service/ lead form (200 × 54, 7px radius).
• Form Panel (#232952): The navy panel that holds the home lead form. The home submit button has a transparent fill of its own and white text; the colour behind it is this panel.
• Accent Text (#12a78a): Uppercase eyebrows on the light bands of /service/.

Corporate accent

• IHFB Blue (#0064ff): Hover and pressed colour of the corporate navigation, the ruled text links and the language select's border, and the selected item (밀당PT) of the business sub-navigation at weight 700. It is never a fill.

Text

• Ink (#15171c): Corporate body, navigation and page titles.
• Product Ink (#222222): Default text of mildang.kr.
• Heading Teal-Grey (#10212b): Headlines, cards and rules on the light bands of /service/.
• Black (#000000): Review card headlines on mildang.kr.
• Slate (#666b76): The corporate 밀당PT lead paragraph and unselected sub-navigation.
• Nav Muted (#aeb9c8): mildang.kr header navigation over the hero.
• Footer Muted (#aeb2bd): Corporate footer links; the copyright line is #8e929d.

Neutral & Surface

• White (#ffffff): The corporate hero link, review cards, form fields and white type on dark bands.
• Band (#151520): The full-width disclaimer band at the foot of the mildang.kr home (text #aaaaaa).
• Hairline (#e0e3e8): Border of the corporate language select.
• Field Border (#c6d5d8): Border of the /service/ lead-form fields (text #092532). The home form uses #777777 borders with #000000 text.

Brand assets, not tokens

• Photography, illustrations and the logo were not measured, and no logo colour is claimed. The Partial record's product colours (#00b29d for Mildang PT, #555dfa for School PT, magenta #cc3366) no longer render on any captured page.

3. Typography Rules

Font Family

• Live surface use: Pretendard (380 observed uses, loaded / high) on all four pages. ihateflyingbugs.com self-hosts it from /assets/Pretendard-Regular.woff2 and /assets/Pretendard-Bold.woff2; mildang.kr self-hosts its own copies under /assets/uploads/2022/06/ (Regular, Medium, Bold, ExtraBold and more). The corporate stack falls back to "Apple SD Gothic Neo", "Malgun Gothic"; the product stack to -apple-system, system-ui, "Apple SD Gothic Neo".
• Official distributed font assets: Pretendard is by Kil Hyung-jin (orioncactus). Its LICENSE, opened on 2026-09-30, reads "This Font Software is licensed under the SIL Open Font License, Version 1.1." The identification rests on the declared family name; the served files' name tables were not inspected.
• Official product use: no page opened this session names the company's typeface, so no statement of official use is made.
• Declared only (no visible use): DS-DIGI, a digital-display face declared by @font-face on mildang.kr (/assets/uploads/2024/05/DS-DIGI.woff2) with 0 observed uses.
• Unresolved: none.

Hierarchy

Principles

• One family, a wide weight range: Pretendard carries every role; the product site pushes to 750, 800 and 900 while the corporate site stays at 400 and 700.
• Tight tracking at display sizes: about -4% at 74px, -2.5% at 51.84px and -3.5% at 40px; body text on /service/ keeps a small -0.4px.
• Spaced uppercase eyebrows: 12px labels with +1.7px or +1.8px tracking introduce sections on both sites.

4. Component Stylings

Buttons

Header 신청 pill (primary)

• Background: #32d7b4
• Text: #07111f
• Radius: 9px
• Padding: 0px 18px
• Height: 42px
• Font: 14px / 900 Pretendard
• Shadow: rgba(37, 216, 178, 0.15) 0px 8px 24px 0px
• Hover: label #ffffff, fill unchanged (color 0.18s)
• Pressed: label #ffffff, fill unchanged
• Focus: the browser's default ring only
• Use: PT 신청하기 → in the header of mildang.kr and /service/

In-page consultation action

• Background: #20c9a7
• Text: #ffffff
• Radius: 0px
• Padding: 18px 24px
• Height: 60px
• Font: 18px / 900 Pretendard, letter-spacing -0.4px
• Hover: background #3ad7b8, lifted 2px (0.25s background and transform)
• Pressed: background #3ad7b8, lifted 2px
• Focus: the browser's default ring only
• Use: 무료 상담 신청하기 near the foot of /service/

Lead form submit (/service/)

• Background: #16bea8
• Text: #ffffff
• Radius: 7px
• Padding: 8px
• Height: 54px
• Font: 18px / 700 / 20.7px Pretendard
• State: hover and pressed gave no settled probe reading; focus shows the browser's default ring
• Use: 무료 상담 신청( CLICK ) in the /service/ lead form

Lead form submit (home)

• Background: transparent, on the #232952 form panel
• Text: #ffffff
• Radius: 3px
• Padding: 8px 16px
• Height: 48px
• Font: 20px / 700 Pretendard
• Hover: an inner glow layer brightens (opacity 0.125 to 0.135)
• Use: 무료 상담 신청( CLICK ) in the home lead form

Corporate hero link

• Background: #ffffff
• Text: #111111
• Radius: 3px
• Padding: 15px 19px 15px 22px
• Height: 54px
• Font: 14px / 700 Pretendard
• Use: 아이헤이트플라잉버그스 소개 ↗ on the corporate hero

Ruled text link

• Text: #15171c
• Border: 1px bottom rule in #15171c
• Padding: 10px 0px
• Height: 43px
• Font: 14px / 700 / 22.4px Pretendard
• Hover: text and rule #0064ff
• Use: 밀당PT 만나보기 ↗ on the corporate 밀당PT page

Inputs & Forms

Lead form field (/service/)

• Background: #ffffff
• Text: #092532
• Border: 1px solid #c6d5d8
• Radius: 7px
• Padding: 0px 12px
• Height: 54px
• Font: 14px / 400 Pretendard
• Use: grade select and phone number field

Lead form field (home)

• Background: #ffffff
• Text: #000000
• Border: 1px solid #777777
• Radius: 3px
• Padding: 8px 12px
• Height: 48px
• Font: 16px / 400 Pretendard
• Use: grade select and phone number field

Lead form panel (home)

• Background: #232952
• Shadow: rgba(0, 0, 0, 0.5) 0px 4px 16px 0px
• Use: the navy panel around the home lead form

Language select (corporate)

• Background: #ffffff
• Text: #15171c
• Border: 1px solid #e0e3e8
• Radius: 4px
• Padding: 0px 28px 0px 14px
• Height: 44px
• Font: 14px / 700 Pretendard
• Hover: border #0064ff
• Use: 언어 선택 in the corporate header

Navigation

Corporate navigation

• Text: #15171c
• Padding: 12px 0px
• Height: 42px
• Font: 15px / 700 Pretendard
• Hover: text #0064ff
• Use: 회사소개, 사업소개, 뉴스룸

Business sub-navigation (corporate)

• Text: #666b76
• Height: 65px
• Font: 15px / 400 Pretendard
• Selected: text #0064ff at weight 700
• Use: 스쿨PT, 밀당PT, AI 디지털교과서

Cards

Review card

• Background: #ffffff
• Radius: 16px
• Shadow: rgba(0, 0, 0, 0.12) 0px 5px 32px 0px
• Size: 316 × 426
• Use: review carousel on the mildang.kr home

History row

• Text: #10212b
• Border: 1px bottom rule in #10212b
• Padding: 32px 0px 32px 48px
• Size: 702 × 142
• Use: company-history rows on /service/

Disclaimer band

• Background: #151520
• Text: #aaaaaa
• Padding: 16px 24px 32px
• Font: 12px / 400 Pretendard
• Use: data-source disclaimer at the foot of the mildang.kr home

---

Verified: 2026-09-30 (deterministic collector capture of four public, logged-out pages on ihateflyingbugs.com and mildang.kr plus fixed keyboard-probe state reads and first-party context) Tier 1 sources: https://www.mildang.kr/ ; https://www.mildang.kr/service/ ; https://www.ihateflyingbugs.com/ ; https://www.ihateflyingbugs.com/mildang-pt/ ; https://blog.naver.com/mildangpt Tier 2 sources: getdesign.md/mildang (HTTP 200, 30,807 bytes; the name does not appear in the response) and styles.refero.design/?q=mildang (HTTP 200; the string occurs 4 times, not inspected further), requested 2026-09-30; no Tier 2 value used Conflicts unresolved: none

5. Layout Principles

Spacing System

• Observed paddings rather than a declared scale: header pill 0 18px, in-page action 18px 24px, field inset 12px, history rows 32px vertical with a 48px left inset, corporate hero link 15px 19px 15px 22px.

Grid & Container

• Corporate pages use a 1216px content column (eyebrows, hero and the 밀당PT panel all measure 1216px wide) and three 384px link rows on the home.
• mildang.kr/service/ uses a 900px heading column and an 1180px content width; the review carousel on the home shows 316px cards.

Whitespace Philosophy

• The corporate site is short and airy: a hero, three ruled links and a footer.
• The product site is long (about 10,900px on the home and 10,200px on /service/) and alternates dark and light bands.

Border Radius Scale

• 3px: corporate hero link and home form fields
• 4px: corporate language select
• 7px: /service/ form fields and submit
• 9px: header 신청 pill
• 16px: review cards
• 0px: the in-page consultation action and ruled rows

6. Depth & Elevation

The corporate site is flat. The product site uses shadow sparingly and on purpose: a soft lift for review cards, a mint glow that makes the header pill read as lit, and a heavy shadow under the navy form panel.

7. Do's and Don'ts

Do

• Use #32d7b4 for the one primary action per view and set its label in #07111f
• Keep the teal family for actions: #20c9a7 and #16bea8 for consultation actions, #3ad7b8 for hover
• Keep #0064ff for corporate interaction and selection states
• Set everything in Pretendard and tighten tracking on large headlines
• Label eyebrows in 12px uppercase with wide tracking

Don't

• Don't use the corporate blue as a fill; it appears only as text and border colour
• Don't bring back #00b29d, #555dfa or #cc3366; none of them renders on the current sites
• Don't add a brand focus ring; the captured controls show only the browser default
• Don't mix the two sites' registers on one screen: the corporate pages are flat and ruled, the product pages dark and lit

8. Responsive Behavior

Breakpoints

All four pages were captured at 1440px wide only; no breakpoint was measured.

Touch Targets

• Header 신청 pill 42px tall, consultation action 60px, form fields 48px and 54px, corporate hero link 54px

Collapsing Strategy

The mildang.kr header has a menu toggle button (aria-controls="home-site-navigation"), which suggests a collapsed navigation at narrow widths; it was not measured.

Image Behavior

Not measured.

9. Agent Prompt Guide

Quick Color Reference

• Primary action: #32d7b4 with #07111f label
• Consultation action: #20c9a7 (hover #3ad7b8); form submit #16bea8
• Lead form panel: #232952
• Corporate accent: #0064ff
• Ink: #15171c (corporate), #222222 (product), #10212b (light bands)
• Muted: #666b76, #aeb9c8, #aeb2bd

Example Component Prompts

• "Header CTA: #32d7b4 fill, #07111f label 'PT 신청하기 →' in Pretendard 14px weight 900, 42px tall, 9px radius, 0 18px padding, glow rgba(37, 216, 178, 0.15) 0 8px 24px; on hover the label turns #ffffff."
• "Consultation button: #20c9a7, white 18px/900 label with -0.4px tracking, 60px tall, square corners, 18px 24px padding; hover #3ad7b8 and lift 2px."
• "Corporate nav: Pretendard 15px/700 in #15171c, hover #0064ff; a white select with a 1px #e0e3e8 border and 4px radius."

Iteration Guide

1. Mint #32d7b4 is the single primary action
2. Teals are for actions only
3. Blue #0064ff marks interaction on the corporate site
4. Pretendard only; weight and tracking make the hierarchy
5. Review cards: white, 16px radius, soft 32px-blur shadow

10. Voice & Tone

The corporate voice is mission-first and plain; the product voice is direct and outcome-led, speaking to parents about grades and admissions.

Voice samples (verbatim from pages opened on 2026-09-30):

• "사람의 가능성에 기술을 더해 질 높은 교육 기회의 평등을 만들어갑니다." — ihateflyingbugs.com hero
• "AI가 설계하고, 사람이 끝까지 함께합니다." — corporate 밀당PT page
• "좋은 교육의 기회가 환경에 좌우되지 않도록." — mildang.kr/service/ hero
• "버그 없는 서비스를 꿈꾸던 팀은, 교육 문제를 해결하는 팀이 되었습니다." — mildang.kr/service/ history

11. Brand Narrative

아이헤이트플라잉버그스 began in 2012 in a small office in 연지동, developing technology to analyse education data. It went on to run online learning services, including one for civil-service exam candidates, and in 2019 launched 밀당PT, joining AI with a teacher's management as one-to-one 온택트 learning (mildang.kr/service/). The company now works from 여의도 파크원, and the product site's footer names it as 아이헤이트플라잉버그스 ㈜ (업체명 밀당PT, 대표자 박찬용, 서울 영등포).

The company frames 밀당PT with numbers on its own page: a completion rate that rose from 13% at the start of the service to 96% three years later, a 3% final pass rate for its 퍼스널티처, and four one-to-one management sessions a week. The corporate 밀당PT page describes AI-based personalised curricula plus real-time questions and management from an online teacher, across English, maths and Korean content. Beside 밀당PT the company runs 스쿨PT for schools and an AI 디지털교과서 business.

Its stated purpose is equal access to good education: "교육 환경의 차이를, 기술과 1:1 관리로 줄입니다" and "사는 곳과 소득이 배움의 한계가 되지 않는 세상". The name I Hate Flying Bugs comes from the team's origins in building bug-free software.

12. Principles

1. Equal opportunity is the brief. Both sites lead with it. UI implication: keep explanations plain and address parents and students directly.
2. AI finds the direction, people complete the change. The service pairs AI diagnosis with a human teacher. UI implication: show the system as steps (진단, 설계, 관리, 피드백) rather than as a black box.
3. One primary action, in mint. UI implication: the header 신청 pill is the only #32d7b4 element; other actions use the neighbouring teals.
4. Two registers. UI implication: corporate pages stay flat and ruled with blue interaction; product pages use dark bands, teal actions and soft lift.

13. Personas

Personas below are fictional archetypes informed by the audiences the pages address (parents of middle- and high-school students, students, teachers), not individual people.

이준호, 45, 인천. A parent comparing tutoring options for a high-school student whose grades have stalled. Responds to concrete outcomes and wants a free consultation before paying.

김서연, 16, 대구. A student who studies better with a plan that adapts to her mistakes and a teacher who checks in several times a week.

박지은, 33, 서울. A 퍼스널티처 who manages students online and cares that the system hands her clear diagnostic data.

14. States

15. Motion & Easing

Only transitions read from the live pages are recorded:

• Header 신청 pill: color 0.18s ease on hover and press.
• Consultation action: background, transform 0.25s ease with a 2px lift on hover and press.
• Both lead form submits: transition: all 0s.

No durations or easing curves beyond these were measured, and none are declared.