Design System Inspiration of maum.ai

1. Visual Theme & Atmosphere

maum.ai (마음AI) is a Korean artificial-intelligence company that now calls itself "The Physical AI Company" and describes its work as "Building Robot Brains". Its company page says it was founded in 2014 (회사설립년도 2014년 1월) as an AI specialist able to take technology from development to industrial deployment, and that it is moving beyond AI that processes documents and data toward AI embedded in robots and machines that judge and act for themselves. The company overview on the same page lists (주)마음에이아이, CEO 유태준, a head office in Pangyo, Seongnam, and 130 staff. The site still carries traces of its former name, MindsLab (마인즈랩): a "2022 마인즈랩 사업보고서" disclosure label and an engine-owner value MindsLab that the interface labels 마음AI.

The product story is built on four foundation models — MAAL (an edge agent LLM), SUDA (speech-to-text, LLM and text-to-speech combined on-device for zero-latency voice conversation), BODA (a vision-language model) and WoRV (a vision-based robotics model) — and on MAIED (Maum AI Edge Device), an edge module that runs them without the cloud. The home page puts robots first: JINDO BOT, a domestically built four-legged robot; AIden, a conversational, self-driving service robot; an unmanned pesticide sprayer; a barrier-free kiosk with an AI human; and Woochi Bot, a performance humanoid for events. Its headline asks visitors to subscribe to Physical AI robots.

The website is quiet and near-monochrome. Pages are white with #111111 text set in Pretendard at weight 500. The home headline is the one expressive type moment: Jamsil at 72px, weight 700. The home call to action is a charcoal #343434 pill that turns into a blue-to-green gradient on hover. Product pages add a left menu whose selected item is a dark #292d33 tile and whose hover is a pale #f2f3f7 fill with a thin #d2dcea line. Colour appears in the chatbot product: its primary action, 새로운 대화, is filled in indigo #4262ff, and its selected list item sits on a pale blue #e2edfc. Depth is almost absent; 131 of the 150 recorded elements compute box-shadow: none, and the rest are transparent rings, a hairline under the cards and one lifted back-to-top button.

Key Characteristics:

• Near-monochrome marketing pages: white, #111111 text, #595959 and #949ca5 greys, #8e8e8e navigation
• Jamsil 72px / 700 for the home headline; Pretendard 500 for body and 700 for navigation and actions
• A charcoal #343434 pill call to action whose hover is a blue-to-green gradient
• Indigo #4262ff as the filled primary action of the chatbot product, with a pale blue #e2edfc selection
• 12px corners on menu and action tiles, 10px on cards, pills for the marketing call to action
• Pale #f2f3f7 hover fills with a 1px #d2dcea line under menu and list items
• Flat surfaces; only the back-to-top button is lifted

Primary tasks

• Browse the robot and Physical AI product lineup
• Read what the foundation models and the MAIED edge module do
• Try the maumChatbot and see which models it offers
• Find a contact path to the company

2. Color Palette & Roles

Every token below was read on 2026-09-30 by the deterministic collector from the logged-out home (maum.ai), the product showcase (/physical-ai-service) and the chatbot page (/maum-gpt), and hover values by the fixed keyboard probe. The home and /physical-ai-service are marketing pages; /maum-gpt is a separate evidence domain, the maumChatbot product, and components from it are labelled "chatbot product surface". No value is taken from the app behind the login.

Primary

• maum Indigo (#4262ff): The fill of 새로운 대화, the primary action of the maumChatbot page (208 × 56, 12px radius, #ffffff label). It is the primary because it is the only chromatic colour that fills a primary action on the captured surfaces; the marketing home's call to action is charcoal, and nothing else carries a saturated hue. The evidence is one control on one page, and the probe found no hover or pressed change on it.
• On Primary (#ffffff): Labels on the indigo, charcoal, slate and dark-tile fills.

Actions

• Charcoal (#343434): The Contact Us pill on the home page, the marketing site's call to action. On hover and press its fill gives way to linear-gradient(93deg, rgb(107, 157, 205) 0%, rgb(113, 166, 47) 170.68%).
• Slate (#5b636d): Retrieval 모델 설정, the secondary action at the foot of the chatbot sidebar.
• Dark Tile (#292d33): The selected item (HOME) of the /physical-ai-service left menu.

Text

• Ink (#111111): The document default on every page, headings and menu labels.
• Lead Grey (#595959): Product descriptions in the home carousel.
• Nav Muted (#8e8e8e): Home navigation links at rest; they turn #111111 on hover.
• Muted (#949ca5): Small meta text and header utility links on the product pages.

Surface & Borders

• White (#ffffff): The back-to-top button; the page canvas is the browser's white (the body computes a transparent background).
• Selected Tint (#e2edfc): The selected chatbot in the /maum-gpt list.
• Hover Surface (#f2f3f7): Hover fill of menu items, list items and the KOR toggle.
• Hairline (#dee4eb): The 1px border and bottom line of the product cards.
• Underline (#d2dcea): The 1px bottom border of the selected chatbot and the hover line under menu and list items.

Brand assets, not tokens

• The Contact Us hover gradient (rgb(107, 157, 205) to rgb(113, 166, 47)) is a state fill, not a colour token.
• The left icon rail of the product pages sets its labels in rgba(255, 255, 255, 0.3) on a dark rail whose fill the collector did not record.
• The maum.ai logo was not measured; no logo colour is claimed.

3. Typography Rules

Font Family

• Live surface use: Pretendard (118 observed uses) and Jamsil (2), both loaded / high, self-hosted by maum.ai: Pretendard as OTF files (maum.ai/assets/Pretendard-Regular-….otf and other weights) and Jamsil as maum.ai/assets/The-Jamsil-1-Thin-….ttf through The-Jamsil-4-Medium-….ttf and further weights. Pretendard carries body, navigation, headings and buttons on all three pages; Jamsil sets the home headline and its container.
• Official distributed font assets: Pretendard is an open-source Korean typeface by Kil Hyung-jin (orioncactus); its LICENSE, opened on 2026-09-30, states the SIL Open Font License 1.1. Jamsil's served files are named "The-Jamsil", which matches the typeface The Jamsil (더잠실); no distributor or licence page was opened this session, so its origin and licence are not stated.
• Official product use: no maum.ai page opened this session names its typefaces, so no statement of official product use is made.
• Declared only (no visible use): Orbitron (Regular to Bold, self-hosted at maum.ai/assets/Orbitron-….ttf, 0 observed uses), Pretendard Variable (from jsDelivr, pretendard@1.3.9, 0 uses) and swiper-icons (the carousel library's icon font). No Orbitron text was observed, so no Orbitron specimen or size is given.
• Unresolved: Jamsil's distributor and licence.

Hierarchy

Principles

• One display moment: Jamsil appears only in the home headline; everything else is Pretendard.
• Medium by default: the body weight is 500, not 400; navigation and actions step up to 700.
• Tight lines: headings run near 1.0 line height, and body text sits at 20px on 16px.

4. Component Stylings

Buttons

Contact call to action (marketing)

• Background: #343434
• Text: #ffffff
• Radius: 9999px
• Padding: 20px 32px
• Height: 65px (192px wide)
• Font: 20px / 600 / 25px Pretendard
• Hover / pressed: the fill becomes linear-gradient(93deg, rgb(107, 157, 205) 0%, rgb(113, 166, 47) 170.68%)
• Focus: browser default ring only

New chat (chatbot primary)

• Background: #4262ff
• Text: #ffffff
• Radius: 12px
• Padding: 0 0 0 48px (icon inset at the left)
• Height: 56px (208px wide)
• Font: 16px / 700 / 20px Pretendard
• States: no hover or pressed change

Retrieval settings (chatbot secondary)

• Background: #5b636d
• Text: #ffffff
• Radius: 12px
• Padding: 0 0 0 48px
• Height: 56px
• Font: 16px / 700 / 20px Pretendard
• States: no hover or pressed change

Back to top

• Background: #ffffff
• Radius: 9999px (48 × 48)
• Shadow: rgba(18, 44, 72, 0.2) 0px 2px 8px 0px
• States: no hover or pressed change

Language toggle (KOR)

• Text: #111111
• Radius: 8px
• Size: 80 × 40px
• Font: 16px / 500 / 20px Pretendard
• Hover / pressed: background #f2f3f7

Navigation

Home navigation link

• Text: #8e8e8e
• Font: 16px / 700 / 20px Pretendard
• Hover / pressed: #111111 after a 0.2s colour transition

Side menu item (product pages)

• Text: #111111
• Radius: 12px
• Padding: 32px 16px
• Height: 64px (176px wide)
• Font: 16px / 700 / 20px Pretendard
• Selected: background #292d33, text #ffffff, 16px / 600, 52px tall
• Hover / pressed: background #f2f3f7 with a 1px #d2dcea line; the selected item fades to opacity 0.9

Chatbot list item

• Background: transparent
• Text: #111111
• Radius: 12px
• Padding: 16px 20px
• Height: 48px (208px wide)
• Font: 16px / 700 / 20px Pretendard
• Selected: background #e2edfc with a 1px #d2dcea bottom border
• Hover / pressed: background #f2f3f7 with a 1px #d2dcea line

Cards & Inputs

Product card

• Background: transparent
• Border: 1px solid #dee4eb
• Radius: 10px
• Size: 355 × 487px
• Shadow: rgb(222, 228, 235) 0px 1px 0px 0px

Chat input

• Text: #111111
• Padding: 8px 40px
• Height: 40px (517px wide)
• Font: 16px / 500 / 24px Pretendard
• Disabled: disabled for logged-out visitors

---

Verified: 2026-09-30 (deterministic collector capture of three public, logged-out maum.ai pages plus fixed keyboard-probe state reads and first-party context) Tier 1 sources: https://maum.ai/ ; https://maum.ai/physical-ai-service ; https://maum.ai/maum-gpt ; https://maum.ai/company ; https://maum-ai.github.io/ ; https://github.com/maum-ai Tier 2 sources: getdesign.md/maum-ai (HTTP 200, the name does not appear in the response) and styles.refero.design/?q=maum (HTTP 200, the name appears only as the echoed query), requested 2026-09-30; no Tier 2 value used Conflicts unresolved: none

5. Layout Principles

Spacing System

• Contact Us: 20px 32px padding at 65px height
• Side menu items: 32px 16px padding (16px on the selected tile)
• Chatbot list items: 16px 20px padding at 48px height
• Chatbot actions: a 48px left inset for the icon
• Frequent spacing values in the capture: 16, 20, 32, 4 and 56px

Grid & Container

• Home: a fixed header with navigation, the Jamsil headline and Contact Us, a horizontal product carousel of 340 × 464 tiles, a MAIED section, foundation-model blocks and a contact form (not captured or used).
• /physical-ai-service: a dark icon rail, a 176px left menu and a grid of 355 × 487 product cards under a 48px heading.
• /maum-gpt: a 208px sidebar with 새로운 대화, the chatbot list and Retrieval 모델 설정, beside the chat area and its disabled input.

Whitespace Philosophy

• Quiet marketing: large white space around a few headings and one call to action.
• Soft segmentation: hover fills and a 1px line mark the active row; cards use a hairline, not a shadow.

Border Radius Scale

• 0px: the default (122 of the recorded radii)
• 8px: the language toggle
• 10px: product cards
• 12px: side menu items, chatbot list items and chatbot actions
• 9999px: the Contact Us pill and the back-to-top circle

6. Depth & Elevation

Shadow Philosophy: maum.ai is flat. Its only real shadow lifts the back-to-top button; cards and active rows are marked with 1px lines.

7. Do's and Don'ts

Do

• Keep marketing pages white and near-monochrome, with #111111 text
• Set one headline in Jamsil 700 and everything else in Pretendard, 500 for body and 700 for actions
• Fill the product's primary action in #4262ff with a white label and 12px corners
• Use a charcoal #343434 pill for the marketing call to action
• Mark hovered rows with #f2f3f7 and a 1px #d2dcea line; mark the selected tile #292d33 or #e2edfc
• Keep cards flat with a #dee4eb hairline

Don't

• Don't spread #4262ff across marketing pages; it appears only on the chatbot's primary action
• Don't add drop shadows to cards
• Don't set body copy in Jamsil
• Don't use Orbitron; it is declared but was never observed in use
• Don't invent focus styles; every probed control shows only the browser's default ring
• Don't render Pretendard or Jamsil with another face in their place

8. Responsive Behavior

Breakpoints

Only the 1440 × 900 desktop viewport was captured. Class names such as laptop-sm:order-4, laptop:inline and tablet:text-base show named tablet and laptop breakpoints; no breakpoint value was measured.

Touch Targets

• Contact Us: 65px tall
• Side menu items: 64px (selected 52px)
• Chatbot actions: 56px
• Chatbot list items: 48px; back-to-top 48 × 48
• Language toggle: 40px

Collapsing Strategy

Not captured.

Image Behavior

• Product and robot imagery sits flat in carousel tiles and 10px-radius cards.

9. Agent Prompt Guide

Quick Color Reference

• Product primary action: #4262ff with #ffffff
• Marketing call to action: #343434 pill; hover gradient rgb(107, 157, 205) to rgb(113, 166, 47)
• Secondary action: #5b636d; selected tile #292d33
• Text: #111111, #595959, #8e8e8e (navigation), #949ca5 (meta)
• Surfaces: #ffffff, #e2edfc (selected), #f2f3f7 (hover)
• Lines: #dee4eb (cards), #d2dcea (rows)

Example Component Prompts

• "Create a marketing call to action: #343434 pill, white 20px Pretendard label at weight 600, 20px 32px padding, 65px tall; on hover replace the fill with linear-gradient(93deg, rgb(107, 157, 205) 0%, rgb(113, 166, 47) 170.68%)."
• "Create a chatbot sidebar: a #4262ff 새로운 대화 button (white 16px / 700 label, 12px radius, 208 × 56, icon inset 48px), a list of 48px items with 12px radius and 16px 20px padding (selected #e2edfc with a 1px #d2dcea bottom border, hover #f2f3f7), and a #5b636d settings button at the foot."
• "Build a product card: transparent background, 1px solid #dee4eb border, 10px radius, a 32px / 600 product name in #111111 and 14px / 500 meta text in #949ca5; no shadow."

Iteration Guide

1. White and near-monochrome; #111111 text
2. Jamsil for one headline only; Pretendard 500 / 700 elsewhere
3. #4262ff only for the product's primary action
4. Charcoal pill for the marketing call to action
5. 12px tiles, 10px cards, pills for the call to action
6. Flat; 1px lines instead of shadows

---

10. Voice & Tone

maum.ai's voice is confident, technical and matter-of-fact: short statements about what its models and robots do, product names that read like engineering designations, and direct calls to action.

Voice samples (verbatim, opened 2026-09-30):

• "로봇에 두뇌를 탑재하다" — the page heading on maum.ai.
• "Physical AI 로봇을 구독하세요." — home headline.
• "The Physical AI Company — Building Robot Brains" — /company.
• "마음AI는 2014년 설립된 인공지능 전문 기업으로, AI 기술 개발부터 실제 산업 현장 적용까지 가능한 역량을 보유하고 있습니다." — /company.
• "지금 MAAL과 대화해 보세요." — /maum-gpt.
• "AI for the Physical World" — the maum.ai BRAIN Team site.

Forbidden register: consumer-app cuteness, exclamation-heavy hype, vague superlatives, jargon left unexplained for an enterprise reader.

11. Brand Narrative

maum.ai's company page tells its story in two moves. First, what it is: an AI specialist founded in 2014 that can take technology from research to the field. Second, where it is going: from AI that handles documents and data to "Physical AI", AI that sits inside robots and machines and decides and acts on its own. It claims to be the only Korean company to have taken Physical AI all the way to commercial use, and lists deployments across defence (perimeter and patrol robots), construction (site-safety inspection), agriculture (autonomous tractors), manufacturing (assembly), logistics (autonomous yard tractors), shipbuilding (welding), smart homes, public services (care robots, the maum-TOUCH barrier-free kiosk), service (AIden) and promotion (WOOCHI BOT). A "Physical AI Data Factory" runs from simulation through field trials and commercial operation to monitoring.

The rebrand from MindsLab to maum.ai shows in that reframing, and in what the site still carries: a label for the "2022 마인즈랩 사업보고서" and an engine owner recorded as MindsLab but shown as 마음AI. The company's research arm, the maum.ai BRAIN Team, publishes at maum-ai.github.io under the line "AI for the Physical World". It works on Embodied AI, Agentic LLM, Audio Intelligence, Robotics and Physical World Modeling, with recent papers at EMNLP Findings, INTERSPEECH and ICASSP, and keeps its code in the public GitHub organisation github.com/maum-ai.

The website reflects the same engineering posture: little colour, one strong headline, square-edged structure, and saturated indigo kept for the moment a visitor actually uses the product.

12. Principles

1. Robots first. The home leads with robots to subscribe to. UI implication: products appear as a large visual carousel before any explanation.
2. Models as named parts. MAAL, SUDA, BODA and WoRV are presented as components of a robot brain. UI implication: terse names with one concrete line each.
3. Quiet until it matters. UI implication: monochrome marketing pages; indigo #4262ff only on the product's primary action. (An editorial reading of the captured pages, not a maum.ai statement.)
4. From research to the field. The company page stresses deployment. UI implication: concrete capability copy rather than slogans.
5. Flat and engineered. UI implication: 1px lines and pale fills mark state; no card shadows.

13. Personas

Personas below are fictional archetypes informed by publicly observable maum.ai audiences (industrial and public-sector buyers of robots, ML engineers), not individual people.

정민석, 41, 서울. Head of AI transformation at a manufacturer evaluating robots for the factory floor. Wants concrete capability claims and integration paths, not slogans.

Grace Lim, 33, 판교. An ML engineer assessing maum.ai's models. Reads the BRAIN Team site and the GitHub organisation before booking a call, and tries the maumChatbot first.

한도윤, 47, 대전. A public-sector procurement lead reviewing AI and defence solutions. Needs a formal, credible surface and a clear contact path.

14. States

Only these states were observed on the three captured pages; nothing else is specified here.

Error, empty, loading and success states were not captured and are not described.

15. Motion & Easing

The probe read the transitions the controls compute. Home navigation links transition colour, background, border, text-decoration colour, fill and stroke over 0.2s with cubic-bezier(0.4, 0, 0.2, 1). The side menu items, chatbot list items and the KOR toggle transition colour, background, opacity, box-shadow, transform and filters over 0.15s with the same curve. Contact Us, 새로운 대화, Retrieval 모델 설정 and the back-to-top button compute transition: all 0s, so their changes are instant. No other duration or easing is specified.