Design System Inspiration of MiriCanvas

1. Visual Theme & Atmosphere

MiriCanvas (미리캔버스) is MIRIDIH's browser-based design service: its public template and pricing surfaces position design creation as something users can begin from ready-made material instead of specialist software. The visible system is deliberately spare: a white canvas (#ffffff), dark ink (#16181d), and an aqua-teal action color (#21afbf) recur across the home, template, and pricing routes. This gives the public experience a clear action hierarchy without turning every surface into brand decoration. MIRIDIH frames its broader purpose as reducing inconvenient moments in design and enabling easier communication through design; its corporate site also describes a move from domestic success toward global markets. Those company statements provide context for the inclusive product positioning, but they are not UI-token evidence.

The collector confirms a loaded, site-hosted Pretendard Variable face throughout styled public UI. A 64px/700 homepage heading with 96px line-height sits above smaller 28px, 24px, and 14px steps; the contrast is soft geometry rather than an assertion about a private editor system. The evidence packet covers public surfaces only. It does not establish authenticated-editor styling, marketing-only feature-page styling, help-center chrome, or a complete responsive system.

Key characteristics:

• Aqua teal (#21afbf) on an observed 40px public CTA
• White (#ffffff), Ink (#16181d), and Ink Soft (#23242a) as recurring public-surface neutrals
• Pretendard Variable is loaded and used by visible styled UI; fallback family names are not promoted
• 8px, 10px, 12px, and 16px are observed radii, with 8px the strongest public-button cluster
• An expanded navigation menu is the only captured interaction state; it is white, 16px-rounded, and softly elevated

2. Color Palette & Roles

Action and canvas

• Primary teal (#21afbf): observed background of a high-confidence public CTA on home, templates, and pricing.
• Teal text (#1c95a2): observed on a public text-action button; keep it distinct from the filled primary action.
• Canvas / on-primary (#ffffff): observed page and menu surface, and white CTA text.

Text

• Ink (#16181d): observed primary text on the three public routes.
• Ink Soft (#23242a): observed on high-confidence public navigation buttons.
• Muted (#70798f): repeated lower-emphasis public text observation.

No semantic error, success, disabled, hover, focus, or editor color token is asserted from this packet.

3. Typography Rules

Evidence classes

• Live computed surface-use + loaded source corroboration: Pretendard Variable is the computed family for styled public UI and is backed by a matching loaded FontFace record (215 observed uses; 92 MiriCanvas-hosted subset source URLs). It is the only family promoted to tokens.typography.family.
• Declared-only fallbacks: Figtree, IBM Plex Sans JP, Pretendard JP Variable, and Pretendard Std Variable occur later in the computed stack of styled elements, but the supplied FontFaceSet evidence does not match them as loaded faces. They remain declared-only and are not UI-family tokens.
• Unresolved capture artifact: Times appears in some captured unstyled DOM fragments and in the expanded menu record without a matching loaded face or source URL. It is not treated as a MiriCanvas type choice.
• Official distributed font asset: Pretendard's upstream project documents the variable family and its SIL Open Font License 1.1. This establishes the upstream font's distribution/license boundary; it does not establish a MiriCanvas-owned font asset.
• Official product-use announcement: none located in the first-party sources reviewed for this update.

Observed hierarchy

4. Component Stylings

Only the following public-surface variants have sufficient selector and computed-style provenance. No hover, pressed, focused, disabled, error, dialog, tab, toast, or authenticated-editor variant is inferred.

Public buttons

Filled primary

• Background: #21afbf
• Text: #ffffff
• Radius: 8px
• Padding: 8px 16px
• Font: 14px / 500 / Pretendard Variable
• Height: 40px
• Use: High-confidence CTA record on home, surface-2, and surface-3; representative selector home::[data-omd-capture="21"].

Navigation item

• Background: transparent
• Text: #23242a
• Radius: 8px
• Padding: 8px 16px
• Font: 14px / 500 / Pretendard Variable
• Height: 40px
• Use: High-confidence public navigation record on all three surfaces; representative selector home::[data-omd-capture="12"].

Navigation switcher item

• Background: transparent
• Text: #23242a
• Radius: 8px
• Padding: 12px
• Font: 14px / 500 / Pretendard Variable
• Height: 44px
• Use: High-confidence public navigation record on all three surfaces; representative selector home::[data-omd-capture="1"].

Menu trigger

• Background: transparent
• Text: #23242a
• Radius: 8px
• Padding: 8px 12px 8px 16px
• Font: 14px / 500 / Pretendard Variable
• Height: 40px
• Use: High-confidence trigger with aria-haspopup="menu"; representative selector home::[data-omd-capture="9"].

Expanded navigation

Menu open

• Background: #ffffff
• Text: #000000
• Radius: 16px
• Padding: 16px
• Shadow: rgba(11, 60, 65, 0.2) 0px 6px 20px 0px
• Height: 321px
• Use: Observed only in expanded / menu-open state on all three surfaces; representative selector home::[data-omd-interaction-capture="menu-0-0"].

Medium- and low-confidence captures (including a 56px white button, a 48px white button, and a 46px input) remain raw observations in .verification.md; they are not promoted as canonical component variants because their visible purpose and/or confidence is insufficient.

---

Verified: 2026-07-13 Tier 1 sources: https://www.miricanvas.com/ko (public product marketing surface, supplied computed-style/FontFaceSet evidence), https://www.miricanvas.com/ko/templates (public template surface, supplied computed-style evidence), https://www.miricanvas.com/ko/pricing (public pricing surface, supplied computed-style evidence), https://www.miridih.com/ko/home (operator context and values), https://help.miricanvas.com/hc/ko/articles/4413862566937 (documentation domain: editor controls, not UI tokens), https://help.miricanvas.com/hc/ko/articles/56483608870681 (documentation domain: content license boundary, not UI tokens) Tier 2 sources: https://getdesign.md/miricanvas (attempted; fetch unavailable), https://styles.refero.design/?q=miricanvas (query attempted; fetch unavailable) Conflicts unresolved: none

Tier 2 token/component data could not be retrieved, so no Tier 2 comparison is asserted.

5. Layout Principles

The public packet establishes component-level spacing, not a full grid. Observed spacing values are 4px, 6px, 8px, 12px, 14px, 16px, 20px, 24px, and 56px; the strongest component pairs are 8px 16px, 12px, and 14px 24px. The page-level grid, card-rail behavior, and authenticated-editor layout are unresolved.

Observed public geometry is a small radius ladder: 8px is common on navigation and the filled CTA; 10px, 12px, and 16px occur less often. Do not turn the capture frequency into a claim about an exhaustive design scale.

6. Depth & Elevation

The high-confidence filled CTA and navigation records have box-shadow: none. One expanded navigation menu state has rgba(11, 60, 65, 0.2) 0px 6px 20px 0px. No card, modal, editor, hover-lift, or general elevation policy is established from the new packet.

7. Do's and Don'ts

Do

• Use #21afbf with white text for the observed public filled-action pattern.
• Use the loaded Pretendard Variable family for a reconstruction of these public surfaces.
• Retain the observed 8px / 14px 500 / 40px geometry where the standard public CTA or navigation item is intended.
• Treat the 16px rounded, shadowed menu only as an expanded navigation state.

Don't

• Substitute an unresolved or declared-only fallback family as if it were loaded MiriCanvas UI typography.
• Add hover, disabled, focus, error, modal, toast, or editor-state specifications from this public packet.
• Generalize the menu's shadow to all cards or buttons.
• Treat Help Center styling or a feature/marketing page as evidence for the authenticated product editor.

8. Responsive Behavior

No viewport comparison or responsive-state capture was supplied. Breakpoints, navigation collapse behavior, touch-target policy, and mobile editor behavior are absent from this reference rather than inferred from desktop public routes.

9. Agent Prompt Guide

For a public MiriCanvas-inspired CTA, use a white canvas, #21afbf filled action, #ffffff text, 8px radius, 8px 16px padding, 40px height, and Pretendard Variable 14px/500. For public navigation, use transparent background, #23242a text, 8px radius, and the same 40px / 14px 500 baseline. Use the white 16px-rounded menu with the recorded shadow only after a menu is explicitly expanded.

10. Voice & Tone

The public product copy is direct, inclusive, and task-oriented. The template route promises that complex design can be completed with a template in three minutes; the business route frames the service as an all-in-one answer for creation, management, and made-to-order printing. This is source context for voice, not evidence of an editor microcopy system.

Avoid inventing editor error messages, onboarding wording, or persona-specific voice rules: these were not available in public evidence.

11. Brand Narrative

MiriCanvas is operated by MIRIDIH. The operator's official corporate page says it aims to change inconvenient moments in design and enable people to communicate more easily through design; it lists integrity, customer focus, data-driven work, and high standards as operating values. The same page describes current growth beyond the domestic market, providing a bounded account of the brand's present direction.

The public MiriCanvas ecosystem shows two verified contexts rather than one undifferentiated surface. Template and pricing routes serve public discovery and plan comparison, while the business and Help Center materials describe organization-level governance, approval, and content use. The company’s terms state that rights in service-provided content remain with the original author/content provider or company as applicable and that use follows the license agreement. That is a license boundary, not a claim that every template, font, or customer output has the same rights.

12. Principles

1. Ease communication through design. MIRIDIH's stated mission supports clear, approachable public entry points. UI implication: retain the public routes' plain action hierarchy, without asserting unobserved editor flows.
2. Customer focus and high standards. These are MIRIDIH's stated values. UI implication: treat a visual token as canonical only when its source domain and computed evidence agree.
3. Governable team creation. Official help documentation allows owners and managers to constrain colors, fonts, templates, and elements for members. UI implication: brand-governance controls are product capabilities, not a license to promote documentation chrome into the public token system.
4. Licensed content has boundaries. The service terms describe content rights and license-based use. UI implication: do not characterize templates or font assets as universally “copyright safe” without a specific applicable license.

13. Personas

These are evidence-backed stakeholder groups, not fictional individuals or demographic personas.

Workspace owners and managers. The editor-control documentation identifies these roles as configuring permitted editor functions and brand-managed colors, fonts, templates, and elements.

Workspace members. The same documentation identifies members as the people to whom those configured controls apply.

Review collaborators. The design-approval guide describes people requesting approval and exchanging feedback in a workspace.

Organization and franchise operators. The official business material addresses organizations that need consistent design, production, and distribution across headquarters and locations.

14. States

No public runtime empty, loading, error, success, validation, disabled, skeleton, or reduced-motion state was captured. This reference deliberately does not prescribe them.

15. Motion & Easing

No duration, easing curve, transition, or reduced-motion rule was captured in the supplied evidence. No motion token is asserted.