# Morflax — Design System
> Browser-based 3D design and motion studio for creating mockups, abstract visuals, and animations.
- **Canonical:** https://uiuxskills.com/library/morflax
- **Source:** https://morflax.com
- **Category:** Design & Creative Tools
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:11:06.133Z

---

---
version: alpha
name: Morflax
description: Browser-based 3D design and motion studio for creating mockups, abstract visuals, and animations.
tone: >-
  Professional, efficient, and creative. The tone is direct and action-oriented, emphasizing speed
  and ease of use for designers.
color-scheme: light
colors:
  primary: "#1E1E1F"
  surface: "#FFFFFF"
  surface-container: "#F5F5F7"
  on-surface: "#111827"
  on-primary: "#FFFFFF"
  outline: "#C6C8D7"
  neutral-dim: "#686970"
  neutral-bright: "#767881"
  error: "#DC2626"
  focus-ring: "#1E1E1F"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 3rem
    fontWeight: 700
  display-md:
    fontFamily: sans-serif
    fontSize: 2.25rem
    fontWeight: 700
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.875rem
    fontWeight: 600
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.5rem
    fontWeight: 600
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
    fontWeight: 400
  body-sm:
    fontFamily: sans-serif
    fontSize: 0.875rem
    fontWeight: 400
  label-sm:
    fontFamily: sans-serif
    fontSize: 0.75rem
    fontWeight: 500
rounded:
  sm: 6px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "{colors.neutral-dim}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.xl}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.neutral-dim}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-neutral-bright:
    backgroundColor: "{colors.neutral-bright}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px -1px rgba(0,0,0,0.1)
  lg: 0 10px 15px -3px rgba(0,0,0,0.1)
---

## Overview

Morflax is a high-performance, browser-based creative suite that democratizes 3D design. Its visual identity is clean, modern, and professional, focusing on high-fidelity 3D rendering and a streamlined, tool-centric user experience that prioritizes efficiency for designers.

## Colors

The color palette is strictly neutral and high-contrast, designed to keep the focus on the 3D assets and interface tools.

*   Primary (#1E1E1F): The core brand color used for primary buttons, active states, and headings.
*   Surface (#FFFFFF): The primary background color for the application and site interface.
*   Surface-container (#F5F5F7): A light gray used for section backgrounds and card containers.
*   On-surface (#111827): High-contrast text color for primary content.
*   On-primary (#FFFFFF): Text color for elements placed on dark primary backgrounds.
*   Outline (#C6C8D7): Subtle border color for inputs and cards.
*   Neutral-dim (#686970): Secondary text color for descriptions and sub-headings.
*   Neutral-bright (#767881): Tertiary text color for metadata and helper text.
*   Error (inferred) (#DC2626): Semantic color for destructive actions and error states.
*   Focus-ring (inferred) (#1E1E1F): The stroke color for active input focus states.

## Typography

The typography strategy relies on a clean, sans-serif family to maintain a professional and accessible aesthetic across all screen sizes.

*   Display-lg (inferred): Used for hero headlines to establish immediate visual impact.
*   Display-md (inferred): Used for major section titles.
*   Headline-lg: Used for major sub-headings that introduce new content blocks.
*   Headline-md (inferred): Used for card titles and sub-sections.
*   Body-md: Standard paragraph text for readability.
*   Body-sm: Secondary text for captions and smaller descriptions.
*   Label-sm (inferred): Small UI labels, button text, and metadata.

## Layout

The layout follows a mobile-first, responsive grid system centered on the viewport. It utilizes a 4px base spacing unit to ensure consistent rhythm across all components.

*   Section Order: hero, features, catalog, community, footer.
*   Hero Pattern: A centered layout featuring a bold headline and subhead, a primary CTA, and a high-quality 3D product render.
*   Responsive Behaviour: The design stacks content vertically on mobile devices, with grid layouts collapsing gracefully as the viewport narrows.
*   Spacing: Uses a scale of {spacing.xs} (4px) to {spacing.2xl} (48px) to define margins and padding between elements.

## Elevation & Depth

Elevation is used sparingly to provide subtle visual hierarchy and distinguish interactive elements from the background.

*   Elevation.sm: Used for subtle separation of small UI elements.
*   Elevation.md: Applied to cards to provide a clean, modern lift from the surface.
*   Elevation.lg: Used for modal or drawer overlays to establish a high-level focus.

## Shapes

The brand utilizes a rounded corner philosophy to balance a professional toolset with a friendly, approachable aesthetic. The radius scale ranges from {rounded.sm} (6px) for small components to {rounded.full} (9999px) for pill-shaped buttons.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button Primary
The primary action button uses {colors.primary} with {typography.label-sm} text. It is designed for high-visibility actions like "Get Started" or "Open Studio" and transitions to {colors.neutral-dim} on hover.

### Card
Cards are the primary container for product features and catalog items. They use {colors.surface} with {rounded.lg} corners and a subtle {colors.outline} border to maintain a clean, organized interface.

### Input Field
Input fields feature a {colors.surface} background and {rounded.md} corners. When focused, the border color shifts to {colors.focus-ring} to provide clear user feedback.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for primary call-to-action buttons. | Use {colors.error} for non-destructive UI elements. |
| Apply {rounded.lg} to all card components for consistency. | Use {typography.display-lg} for standard body text. |
| Use {typography.body-md} for all standard paragraph text. | Mix {rounded.full} with sharp-cornered containers. |
| Maintain {spacing.md} between grid items in the catalog. | Use low-contrast {colors.neutral-bright} for primary headings. |
| Use {colors.outline} for subtle borders on input fields. | Remove the {colors.focus-ring} from input fields. |
| Apply {elevation.md} to elevated cards for hierarchy. | Use {elevation.lg} on flat, non-interactive UI elements. |
| Use {rounded.md} for input fields. | Use {rounded.sm} for primary call-to-action buttons. |
| Use {typography.label-sm} for badge components. | Use {typography.display-md} for small UI labels. |

## Content Style

CTA labels should be imperative, sentence-cased, and short (e.g., "Get Started", "Open Studio"). This keeps the interface action-oriented and efficient for power users.

Headings should be phrased as concrete benefit statements. Focus on the speed and ease of use provided by the Morflax toolset rather than abstract marketing claims.

Copy density should be kept low. Use short, scannable paragraphs and frequent bulleted lists to break up information, ensuring the user can quickly grasp the value of the 3D tools.

## Imagery & Icons

The imagery style is a mix of high-quality 3D renders, abstract shapes, and UI screenshots. The treatment focuses on realistic lighting and material textures to showcase the capabilities of the Morflax Studio. Icons should follow a minimal, clean language that aligns with the professional and modern tone of the brand.