Native Astro design system

One motivo brand,two expressions.

The marketing website can be spacious and editorial. The application remains compact and functional. Both use the same identity, accessible colors, semantic meanings, and typography.

Decision rule

White leads. Rice creates rhythm. Ink is reserved for deliberate, high-impact moments.

Brand identity

Mark, wordmark, and descriptor.

The note-shaped “m” remains two-tone wherever color is available. The descriptor supports the wordmark and should never compete with it.

motivomusic learning
motivomusic learning
motivomusic learning

Small

motivomusic learning

Medium

motivomusic learning

Without descriptor

motivo

Color foundation

Four source colors, stable semantic meaning.

Source colors

Ink

#18212B
--motivo-ink

Primary text, dark sections, and primary actions.

Coral

#E96B4C
--motivo-coral

Brand moments, decorative accents, and conversion.

Paper

#F7F3EA
--motivo-paper

A warm supporting surface for editorial sections.

Indigo

#596BFF
--motivo-indigo

Focus, links, selection, and informational states.

Accessible derivatives

Ink soft

#2C3744
--motivo-ink-soft

Hover and secondary dark surfaces.

Coral strong

#B84628
--motivo-coral-strong

Small coral text and accessible coral controls.

Surface

#EEE8DA
--motivo-surface

Tinted sections, footer, and quiet grouping.

Indigo strong

#3B4AD1
--motivo-indigo-strong

Links and informational text on light surfaces.

Reusable surface hierarchy

Primary

White canvas

Learning journeys, forms, directories, pricing, and product UI.

Secondary

Rice support

Explanations, testimonials, guidance, and editorial pauses.

Occasional

Ink emphasis

Campaign moments, proof, major calls to action, and the footer.

Typography

Editorial display, practical interface.

Display

Fraunces · Noto Serif TC/SC

Music begins with a clear next step.

音樂，由清晰的下一步開始。

Interface

Inter · Noto Sans TC/SC

Verified teacher matching and detailed recording review, presented with practical next actions.

已驗證的教師配對及詳細錄音評估，並提供清晰、實際的下一步。

Shared components

Real Astro primitives, not exported React markup.

Action hierarchy

Ink leads. Coral converts.

Indigo is reserved for navigation, focus, selection, and information.

Example informational link

Form language

Visible labels and indigo focus.

Filled semantic badges

FeaturedIn reviewVerifiedUpload requiredRe-recordDraft

Coral never substitutes for workflow meaning. The same status keeps the same semantic color everywhere.

Contextual expressions

Shared meaning, different visual tempo.

Marketing expression

Find the guidance your music needs next.

Larger display type, more breathing room, photography, and memorable brand moments.

Product expression

Recording reviews

Compact, calm, and action-oriented.

Submitted

28

In review

14

Ready

09

Violin · Grade 7

Chan Ho-yin

In review

Piano · Grade 5

Lee Mei-yi

Completed

Review gate

Foundation checklist.

Check this page at phone and desktop widths before migrating the remaining page-specific hard-coded styles.

  • ✓Canonical mark geometry and wordmark spacing
  • ✓White is the primary education and product canvas
  • ✓Rice supports editorial rhythm without becoming the default
  • ✓Ink is reserved for deliberate high-impact moments
  • ✓Coral for brand and conversion; indigo for interaction
  • ✓Fraunces display type with Noto Serif CJK fallbacks
  • ✓Inter interface type with Noto Sans CJK fallbacks
  • ✓Filled semantic badges rather than border-only labels
  • ✓Square editorial website cards with restrained control rounding