미리캔버스 DESIGN.md

Design System Inspiration of MiriCanvas

Overview

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

Primary tasks

• Start a design from a ready-made template
• Compare plans on the pricing page before subscribing
• Request approval on a design and exchange feedback with reviewers
• Restrict which colors, fonts, and templates teammates can use
• Order printed material made from a finished design

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.

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.

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.

Colors

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.

Typography

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

Layout

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.

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.

Elevation & Depth

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. The icon-only templates carousel arrow has rgba(0, 0, 0, 0.1) 0px 2px 8px 0px (added 2026-09-29, §4). No card, modal, editor, hover-lift, or general elevation policy is established from the new packet.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.menu-open: rgba(11, 60, 65, 0.2) 0px 6px 20px 0px

Motion & Easing

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

Components

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: the bundle holds no ::state-* frame for any element on the three routes, and its only interaction records are the three menu expansions.

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"].
• Note (2026-09-29): the first of the four switcher links (home::[data-omd-capture="0"]) computes a #ffffff fill while the other three are transparent. No selected attribute is recorded, so no selected style is declared.

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 is the panel container's own computed colour; the menu labels sit in children that were not sampled (noted 2026-09-29)
• 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"].

Updated 2026-09-29: the medium- and low-confidence captures July held back (the 56px white button, the 48px white button, the 46px input) are promoted below with their measured rest values, together with other variants transcribed from the same 2026-07-13 bundle; nothing was re-measured. The collector's confidence counts occurrences, so a single element such as the hero action reads low without its values being uncertain; each entry names its selector and count. The three navigation variants above compute a fill of rgba(35, 36, 42, 0), which is transparent.

Hero actions (home)

Filled

• Background: #21afbf
• Text: #ffffff
• Radius: 12px
• Padding: 14px 24px
• Font: 18px / 500 / 26px Pretendard Variable
• Height: 56px (200 × 56)
• Use: home hero primary action, home::[data-omd-capture="22"]; the same style closes a later home section (home::[data-omd-capture="49"], 197 × 56).

White

• Background: #ffffff
• Text: #1c95a2
• Radius, padding, font, and height: as the filled action (200 × 56)
• Use: the link beside the hero primary action, home::[data-omd-capture="23"].

White large button

• Background: #ffffff
• Text: rgba(0, 0, 0, 0.8)
• Radius: 12px
• Padding: 14px 24px
• Font: 18px / 500 / 26px Pretendard Variable
• Height: 56px
• Use: one labelled 146 × 56 copy near the foot of home (home::[data-omd-capture="59"]) and three icon-only 56 × 56 copies ("34" to "36").

Pricing controls

Plan text button

• Background: transparent
• Text: #1c95a2
• Radius: 8px
• Padding: 8px 16px
• Font: 14px / 500 / 20px Pretendard Variable
• Size: 249 × 40
• Use: three plan buttons in one row (surface-3::[data-omd-capture="24"], "26", "27") beside a filled plan button in the filled-primary style (surface-3::[data-omd-capture="25"], 249 × 40). Border width 0px.

Billing toggle options

• Background: transparent
• Text: #505462 (surface-3::[data-omd-capture="22"]) and #23242a ("23")
• Radius: 0px
• Padding: 0px 12px
• Font: 14px / 400 / 19.88px Pretendard Variable
• Size: 48 × 40 each
• States: two options at rest in different text colours. Neither carries an aria state, so which one is selected is not recorded and no selected value is declared.

White plan button

• Background: #ffffff
• Text: rgba(0, 0, 0, 0.8)
• Radius: 10px
• Padding: 12px 20px
• Font: 16px / 500 / 24px Pretendard Variable
• Height: 48px (143 × 48; surface-3::[data-omd-capture="30"] is 113 × 48)
• Use: surface-3::[data-omd-capture="29"].

Templates controls

Search field

• Background: transparent
• Text: #16181d
• Font: 16px / 400 / 24.48px Pretendard Variable
• Size: 827 × 46
• Use: surface-2::[data-omd-capture="22"]. The input's own border width is 0px; any visible frame belongs to a wrapper that was not sampled, so no border is declared.

Carousel arrow

• Background: #ffffff
• Border: 1px rgba(88, 98, 118, 0.1)
• Radius: 50%
• Size: 40 × 40
• Shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px 0px
• Use: icon-only template carousel arrows, surface-2::[data-omd-capture="40"] and "61"; the glyph colour was not sampled.

Footer social link

• Background: rgba(88, 98, 118, 0.05)
• Radius: 50%
• Padding: 8px
• Size: 40 × 40
• Use: five icon-only links per footer, home::[data-omd-capture="61"] to "65" (pricing: surface-3::[data-omd-capture="32"] to "36").

Every component in this section is a rest capture. The bundle holds no state frame for any MiriCanvas element, and the open menu above is its only interaction capture.

---

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.

States

No public runtime empty, loading, error, success, validation, disabled, skeleton, or reduced-motion state was captured. This reference deliberately does not prescribe them. The bundle also holds no hover, pressed, or focus frame for any element, so no pointer state is declared; the open navigation menu (§4) is the only captured interaction state.

Live state probe, 2026-10-16 (https://www.miricanvas.com/ko), primary-button: focus — no visible change (measured 2026-10-16).

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.

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.

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.

Governance

Known Gaps

• Contrast, primary-button. Text #ffffff on #21afbf measures 2.64:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, nav-item. Text #23242a on #00000000 measures 1.36:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, nav-switcher-item. Text #23242a on #00000000 measures 1.36:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, menu-trigger. Text #23242a on #00000000 measures 1.36:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, hero-primary-cta. Text #ffffff on #21afbf measures 2.64:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, hero-secondary-cta. Text #1c95a2 on #ffffff measures 3.58:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, pricing-billing-toggle. Text #505462 on #00000000 measures 2.79:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, template-search-input. Text #16181d on #00000000 measures 1.18:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.