--- id: mildang name: Milddang (I Hate Flying Bugs) display_name_kr: 밀당 (아이헤이트플라잉버그스) country: KR category: education homepage: "https://www.ihateflyingbugs.com/" primary_color: "#00b29d" logo: type: favicon slug: "https://www.google.com/s2/favicons?domain=ihateflyingbugs.com&sz=128" verified: "2026-07-02" added: "2026-07-02" omd: "0.1" tokens: source: live-extract extracted: "2026-07-02" note: "primary = live Mildang PT product-signature teal (#00b29d); corporate accent = magenta (#cc3366, link color); sibling School PT line uses periwinkle blue (#555dfa). Near-black ink #111111 for nav/headings, #333333 body. Shadowless flat system — separation via tinted teal (#e5f7f5/#dff1f1) and grey (#efeff1) surfaces. Single family: Pretendard." colors: primary: "#00b29d" primary-tint: "#e5f7f5" primary-tint-alt: "#dff1f1" accent-magenta: "#cc3366" accent-blue: "#555dfa" ink: "#111111" ink-pure: "#000000" body: "#333333" slate: "#494c4f" muted: "#999999" canvas: "#ffffff" surface: "#efeff1" dark: "#2f3233" on-primary: "#ffffff" typography: family: { sans: "Pretendard" } display: { size: 32, weight: 700, lineHeight: 1.40, use: "Hero / page H1 headline, Pretendard Bold" } heading: { size: 20, weight: 700, lineHeight: 1.40, tracking: -0.2, use: "Section / card H2·H3, Pretendard Bold" } nav: { size: 16, weight: 600, lineHeight: 1.50, use: "Top-nav item, Pretendard SemiBold" } body: { size: 16, weight: 400, lineHeight: 1.50, use: "Standard reading text, Pretendard Regular" } spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 20, xl: 28, xxl: 48, section: 64 } rounded: { sm: 3, md: 8, lg: 40, full: 9999 } shadow: none: "none" components: card-mildang: { type: card, bg: "#00b29d", fg: "#ffffff", radius: "8px", padding: "20px 16px", use: "Mildang PT entry card — teal, the private-education flagship line" } card-school: { type: card, bg: "#555dfa", fg: "#ffffff", radius: "8px", padding: "20px 16px", use: "School PT entry card — periwinkle blue, the public-education line" } card-neutral: { type: card, bg: "#efeff1", fg: "#111111", radius: "8px", padding: "20px 16px", use: "Newsroom / neutral entry card on grey surface" } card-tinted: { type: card, bg: "#dff1f1", fg: "#333333", radius: "40px", use: "Rounded tinted-teal persona/segment card on the Mildang PT page" } cta-pill: { type: button, bg: "#00b29d", fg: "#ffffff", radius: "40px", font: "16px / 700 Pretendard", use: "Teal pill CTA — teal is the single action color" } nav-link: { type: tab, fg: "#111111", font: "16px / 600 Pretendard", active: "magenta #cc3366 text", use: "Top-nav item; inactive language toggle sits at #999999" } badge-teal: { type: badge, bg: "#e5f7f5", fg: "#00b29d", radius: "40px", font: "16px / 700 Pretendard", use: "Tinted-teal emphasis label on Mildang PT surfaces" } footer-band: { type: listItem, bg: "#2f3233", fg: "#ffffff", font: "16px / 400 Pretendard", use: "Dark corporate footer band (I Hate Flying Bugs Inc. info)" } components_harvested: true --- # 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 | Role | Font | Size | Weight | Line Height | Letter Spacing | Notes | |------|------|------|--------|-------------|----------------|-------| | Display / H1 | Pretendard | 32px (2.00rem) | 700 | 1.40 (44.8–48px) | normal | Hero + page headlines | | Heading / H2·H3 | Pretendard | 20px (1.25rem) | 700 | 1.40 (28px) | -0.2px | Section / card heads | | Nav | Pretendard | 16px (1.00rem) | 600 | 1.50 | normal | Top-navigation items | | Body | Pretendard | 16px (1.00rem) | 400 | 1.50 (24px) | normal | Standard reading text | ### 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 | Level | Treatment | Use | |-------|-----------|-----| | Flat (Level 0) | No shadow | Page background, inline text, most surfaces | | Tint (Level 1) | Teal tint (`#e5f7f5` / `#dff1f1`) or grey (`#efeff1`) background shift | Card / section separation without elevation | | Color (Level 2) | Saturated product fill (`#00b29d` / `#555dfa`) | Product-entry cards that must read as tappable | | Dark (Level 3) | Dark band (`#2f3233`) | Corporate footer anchor | **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 | Name | Width | Key Changes | |------|-------|-------------| | Mobile | <640px | Single column, product cards stack, hero headline compresses | | Tablet | 640-1024px | 2-up product cards, moderate padding | | Desktop | 1024-1440px | Full layout, 3-up product-entry grid, centered editorial column | ### 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. | Context | Tone | |---|---| | Corporate mission | Purpose-driven, plain. "High-Quality Education for Equal Opportunity." Never superlative. | | Product headlines | Descriptive and concrete. "High-Quality Personalized…", "AI-based 1:1 Personalized…". Explains, doesn't boast. | | Segment sections | Audience-addressed, calm. "Students", "Lecturers", "Parents", "Ontact Teachers" — each spoken to directly. | | Nav / wayfinding | Functional and human. "Who we are", "What we do", "Newsroom". | | Trust / company | Steady and transparent — corporate identity (I Hate Flying Bugs Inc.) stated plainly in the footer. | **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 | State | Treatment | |---|---| | **Empty (no assigned lessons)** | White canvas. Single Ink (`#111111`) line at body size explaining nothing is assigned yet, with one teal (`#00b29d`) pill CTA to start. No illustration clutter. | | **Empty (saved / history none yet)** | Muted (`#999999`) single line: nothing here yet, plus a calm path back. Honest, non-pressuring. | | **Loading (content fetch)** | Skeleton blocks on a tinted-teal (`#e5f7f5`) or grey (`#efeff1`) surface at final dimensions, 8px radius. Flat pulse — no shadow shimmer, consistent with the shadowless system. | | **Loading (session compute)** | Inline progress within the card; previous values stay visible. | | **Error (fetch/session failed)** | Inline message in Ink (`#111111`) with a plain-language explanation and a retry. No bare "오류가 발생했습니다" — always states the next step. | | **Error (form validation)** | Field-level message below the input; describes what is valid, not just "필수". | | **Success (lesson / action complete)** | Brief inline confirmation in a calm tone with teal (`#00b29d`) accent; next-step detail linked below. No celebratory emoji. | | **Skeleton** | Tinted-teal (`#dff1f1`) or grey (`#efeff1`) blocks at final dimensions, 8px / 40px radius, flat pulse. | | **Disabled** | Muted (`#999999`) text on a reduced-opacity surface; teal actions fade rather than turn grey, to preserve the brand read. | ## 15. Motion & Easing **Durations**: | Token | Value | Use | |---|---|---| | `motion-fast` | 120ms | Hover, card/pill press, focus | | `motion-standard` | 220ms | Card / section reveal, sheet, dropdown | | `motion-slow` | 320ms | Page-level transitions, hero reveal | **Easings**: | Token | Curve | Use | |---|---|---| | `ease-enter` | `cubic-bezier(0.2, 0.6, 0.25, 1)` | Arriving — cards, sheets, segment blocks | | `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals | | `ease-standard` | `cubic-bezier(0.25, 0.1, 0.25, 1)` | Two-way transitions | **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. --- Source: https://oh-my-design.kr/design-systems/mildang · Raw twin of references/mildang/DESIGN.md Install 400 verified references for your AI coding agent: npx oh-my-design-cli install-skills