root/moteva
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d5f9cb366aa2d3c8011bc6485fc110a2b8df900c
moteva/refer/design/home/DESIGN.md
T
root 44406b72db Initial commit: img-infinite-canvas AI design workbench MVP 
Moteva-style AI design workbench replica. Home prompt creates a project;
the project page provides an infinite canvas with node drag, zoom/pan,
a design chat panel, history replay, image asset upload, and project
save/regenerate.

- Backend: go-zero, DDD layering, sqlc/pgx, optional PostgreSQL; memory
  or Redis cache; asynq job queue; MinIO/S3/R2/OSS object storage;
  sky-valley/pi agent runtime adapter.
- Frontend: Next.js App Router + Vite artifact build, TypeScript, i18n,
  shadcn/ui components, auth (OTP/Turnstile/Google/WeChat).
- Deploy: Docker Compose and k3s manifests.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-07 23:15:37 +08:00

6.9 KiB
Raw Blame History

name, colors, typography, rounded, spacing
name colors typography rounded spacing
Moteva
surface surface-dim surface-bright surface-container-lowest surface-container-low surface-container surface-container-high surface-container-highest on-surface on-surface-variant inverse-surface inverse-on-surface outline outline-variant surface-tint primary on-primary primary-container on-primary-container inverse-primary secondary on-secondary secondary-container on-secondary-container tertiary on-tertiary tertiary-container on-tertiary-container error on-error error-container on-error-container primary-fixed primary-fixed-dim on-primary-fixed on-primary-fixed-variant secondary-fixed secondary-fixed-dim on-secondary-fixed on-secondary-fixed-variant tertiary-fixed tertiary-fixed-dim on-tertiary-fixed on-tertiary-fixed-variant background on-background surface-variant
#fcf8fa #dcd9db #fcf8fa #ffffff #f6f3f5 #f0edef #eae7e9 #e4e2e4 #1b1b1d #45464d #303032 #f3f0f2 #76777d #c6c6cd #565e74 #000000 #ffffff #131b2e #7c839b #bec6e0 #0058be #ffffff #2170e4 #fefcff #000000 #ffffff #271901 #98805d #ba1a1a #ffffff #ffdad6 #93000a #dae2fd #bec6e0 #131b2e #3f465c #d8e2ff #adc6ff #001a42 #004395 #fcdeb5 #dec29a #271901 #574425 #fcf8fa #1b1b1d #e4e2e4
display-lg headline-md title-sm body-md body-sm label-caps label-xs display-lg-mobile
fontFamily fontSize fontWeight lineHeight letterSpacing
Inter 32px 700 40px -0.02em
fontFamily fontSize fontWeight lineHeight letterSpacing
Inter 24px 600 32px -0.01em
fontFamily fontSize fontWeight lineHeight
Inter 18px 600 24px
fontFamily fontSize fontWeight lineHeight
Inter 16px 400 24px
fontFamily fontSize fontWeight lineHeight
Inter 14px 400 20px
fontFamily fontSize fontWeight lineHeight letterSpacing
Inter 12px 600 16px 0.05em
fontFamily fontSize fontWeight lineHeight
Inter 11px 500 14px
fontFamily fontSize fontWeight lineHeight
Inter 28px 700 36px
sm DEFAULT md lg xl full
0.25rem 0.5rem 0.75rem 1rem 1.5rem 9999px
unit xs sm md lg xl sidebar_width toolbar_height
4px 4px 8px 16px 24px 40px 280px 56px

Brand & Style

The design system is engineered for high-velocity creative workflows, targeting E-commerce and UI designers who require a tool that recedes into the background while maintaining a premium, authoritative presence.

The aesthetic is Corporate / Modern with a focus on Minimalism. It prioritizes extreme clarity, reducing visual noise to ensure the user’s content remains the focal point. The interface utilizes a "Canvas and Chrome" philosophy: the workspace is expansive and neutral, while the surrounding "Chrome" (panels, toolbars, and inspectors) is structured with surgical precision. The emotional response is one of calm control, reliability, and professional-grade efficiency.

Colors

The palette is anchored by Deep Navy (#0F172A) for primary branding and high-level structural elements, providing a grounded, professional foundation. Electric Blue (#3B82F6) serves as the functional action color, reserved for primary buttons, active states, and selection highlights to drive focus.

The background strategy employs Off-white (#F8FAFC) for the main application canvas to reduce eye strain, while Pure White (#FFFFFF) is used for floating panels, cards, and inspector menus to create a clear layered hierarchy. Borders and dividers utilize Soft Grays (#E2E8F0) to define space without creating harsh visual breaks.

Typography

This design system utilizes Inter exclusively to leverage its exceptional legibility and systematic optical sizing. The hierarchy is highly structured to facilitate rapid scanning of dense information.

  • Headlines: Use tighter letter spacing and heavier weights to establish clear section anchors.
  • Labels: Small-scale labels (11px-12px) are essential for tool property inspectors; use uppercase for category headers to create distinction without increasing size.
  • Body: Standardized at 14px for utility-heavy areas to maximize information density while maintaining readability.

Layout & Spacing

The layout follows a Fixed-Fluid Hybrid model. Sidebars (Layers and Properties) are fixed at 280px to provide a consistent control surface, while the central viewport (the Canvas) is fluid.

A 4px baseline grid governs all spatial relationships. High-productivity areas (like property inspectors) should use compact spacing (sm / 8px), while marketing or dashboard views should use more generous breathing room (lg / 24px). Breakpoints are set at 768px (Tablet) and 1280px (Desktop), with mobile views collapsing sidebars into bottom sheets or hidden drawers.

Elevation & Depth

Hierarchy is established through Tonal Layering and Ambient Shadows.

  1. Level 0 (Canvas): The base layer using the Off-white background.
  2. Level 1 (Sidebars/Panels): Pure white surfaces with a 1px subtle border (#E2E8F0) to separate them from the canvas.
  3. Level 2 (Popovers/Menus): Elements that float above the UI use a soft, diffused shadow (0px 4px 12px rgba(15, 23, 42, 0.08)) to indicate interactivity and temporary state.
  4. Active State: Selection boxes and focused inputs use a 2px Electric Blue stroke, omitting shadows to maintain a "flat" technical feel.

Shapes

The shape language balances modern approachability with professional precision. A Rounded (0.5rem / 8px) corner radius is the standard for cards, buttons, and input fields.

  • Use Sharp (0px) for main structural dividers or the edge of the screen panels.
  • Use Large (1rem / 16px) for main dashboard cards or onboarding modals.
  • Interactive icons and status chips may use Pill-shaped geometry to differentiate them from functional input fields.

Components

  • Buttons: Primary buttons use Electric Blue with white text. Secondary buttons use a white fill with a 1px border (#E2E8F0) and Deep Navy text.
  • Input Fields: Use 14px typography. The default state has a subtle border; the active/focus state uses an Electric Blue ring.
  • Cards: White background, 8px corner radius, and a very light 1px border. Shadows are only applied if the card is "draggable" or "floating."
  • Chips: Used for tags or status indicators. Use low-saturation backgrounds (e.g., light blue or light gray) with high-contrast text.
  • Layers List: High-density list items (32px height) with subtle hover states (#F1F5F9). Active layers use a light blue tint.
  • Segmented Controls: Used for switching between tools; use a light gray container with a white "slider" for the active selection.
Reference in New Issue View Git Blame Copy Permalink