# Morana Crystal · portable design kit 1.0

This is a visual design system for the 3322 preview. It is not a replacement for application logic.

## Use

1. Include `crystal-system.css` after your base styles.
2. Add `class="mn-theme"` to the containing element.
3. Use `.mn-surface`, `.mn-surface-raised`, `.mn-button`, `.mn-status` and semantic status modifiers.
4. For another project, override `--mn-*` variables on its own theme root; do not search-and-replace component colours.
5. Read `crystal-tokens.json` for the platform-neutral values. No CSS preprocessor, React or Next.js is required.

`specimen.html` is a standalone example. Open it locally. Manrope and JetBrains Mono are the intended fonts. This small kit uses system fallbacks unless your application supplies licensed local font files. Existing production font sources and licences must be retained.

## Background and material

Use #060a10 once at the document level. Add only one shared, fixed low-contrast cyan/violet atmosphere. Fade hero artwork into this base. Do not restart gradients per section. Dense forms, menus, dialogs and tables use the raised opaque surface; large feature cards can be more translucent. Blur is decorative: an opaque fallback must stay readable.

## Colour and content

Original brand anchors remain #33d5ff and #9d5cff. Use #99deef and #c1a2ef for readable emphasis. Positive/attention/critical colours describe explicit states with words or icons. Unavailable data uses a dash and an explanation, not zero or a simulated graph. Decorative interface studies do not claim live activity.

## Motion

Animate an object performing its function. Never animate monetary values or service health without real observations. Fans rotate around fixed hubs. Messages follow an ordered sequence. UI transitions: 240ms. Object loops: mostly 3–8s, mechanical fan loops 2.8–3.2s. The Next preview implements these in crystal-motion.css and IllustrationMotion.tsx, included under motion-reference/. React hooks pause offscreen/hidden-tab illustrations. Each group offers a pause button. Respect prefers-reduced-motion; no essential information depends on animation. Magnetic buttons are an optional fine-pointer enhancement; keyboard/touch use normal controls.

## Identity and artwork

SVG wordmark and symbol are unchanged copies of the original project assets. Preserve proportions and clear space. The Morana entity/character is secondary artwork, never a replacement logo. The separate art-direction gallery contains studies. Do not infer an external redistribution licence from inclusion in this kit; rights for fonts, original logos and generated artwork remain with their respective sources/project terms.

## Production migration

Keep the existing MnHeader / MegaNav information architecture, routing, authentication, accessibility, locale handling and mobile behaviour. Transfer only material and motion enhancements. Keep all API clients, release availability gates, verification logic, endpoint configuration and canonical economic values. Do not add RMOR. The English preview is not a reason to remove production translations. Wallet, messenger and pool actions remain in their applications.

The kit does not implement navigation, tables, data fetching or real financial operations. See the 3322 source and migration notes for those page compositions. No production site has been modified.

## 3322 profile compositions

The motion reference includes Profiles.tsx and profile-environments.css. They demonstrate independent glass environments with local message/key boundaries and a stronger reward-bar highlight. These React compositions require the shared application components; they are not standalone components in the portable CSS foundation. The previous atom composition remains in version 3321.

## Checked revision r2

Header action: Wallet on the right next to language selection, linking to /download in production. UI numbers now live in uiStudy in src/lib/config.ts; the reference kit includes ui-config.ts. Full source passed all 74 tests.