---
title: "Morflax design system"
variant: extended
source: https://morflax.com/
captured_at: 2026-10-12
theme: light
industry: design
generator: Design DNA (https://four.wiralomi.com/style/morflax-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Morflax · Design System

> A quiet canvas for expressive 3D design tools

**Theme:** light · **Industry:** design · **Source:** https://morflax.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Morflax pairs a restrained black-and-white interface with expressive 3D artwork and browser-based creative tools. Spacious editorial sections lead from a photographic hero into product previews, template cards, motion experiments, and a compact dark footer.

## North star

Keep the interface quiet and spacious so colorful 3D product imagery—not decoration—sets the visual energy.

## Overview

The page uses a white canvas as the default frame, punctuated by a near-black promotional band and footer. Its palette stays deliberately restrained: charcoal text and muted gray navigation keep attention on the media, while a vivid blue appears as a selective link or embedded template call-to-action rather than a broad interface color. Inter carries the interface with compact, confident headings and readable body copy; the display scale is large, but the surrounding layout remains open and uncluttered. A photographic lavender-toned hero makes the strongest first impression, followed by rounded product panels, colorful 3D tool artwork, and video-led demos. Sections alternate between centered editorial messaging and horizontally browsable card rows, with generous white intervals separating them. Rounded pills and media corners soften the otherwise crisp, minimal structure. Subtle borders and layered imagery support clarity without making the page feel heavily boxed or shadow-driven.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, light cards, and high-contrast text on dark navigation and promotional bands. |
| Studio Black | `#000000` | `--color-studio-black` | surface | Inverse product-promotion band and footer; also appears in dark media and social marks. |
| Quiet Graphite | `#7c7e83` | `--color-quiet-graphite` | neutral | Muted navigation labels and secondary interface text on light backgrounds. |
| Soft Alloy | `#eff0f2` | `--color-soft-alloy` | surface | Light-gray template section band behind the layered template collage. |
| Carbon Ink | `#171718` | `--color-carbon-ink` | neutral | Primary heading and body text on white sections. |
| Slate Ink | `#25282b` | `--color-slate-ink` | neutral | Secondary dark text on pale pill-shaped links and buttons. |
| Lavender Haze | `#dfe1f0` | `--color-lavender-haze` | semantic | Pale lavender gradient tone in visual backdrops and product-media treatments, not a core UI fill. |
| Muted Iris | `#aeb1cc` | `--color-muted-iris` | semantic | Cool lavender gradient endpoint in media and visual treatments; keep it tied to artwork. |
| Smoked Steel | `#686970` | `--color-smoked-steel` | semantic | Dark gradient and badge-like media detail, rather than a dominant page surface. |
| Night Charcoal | `#1e1e1f` | `--color-night-charcoal` | semantic | Near-black gradient tone within dark product artwork and image treatments. |
| Render Gray | `#4c4c4c` | `--color-render-gray` | semantic | Mid-dark tone captured in media gradients; use as image detail, not a prominent UI color. |
| Cool Ash | `#a3a7ad` | `--color-cool-ash` | neutral | Occasional subdued navigation or footer copy where lower emphasis is needed. |
| Mist Periwinkle | `#c6c8d7` | `--color-mist-periwinkle` | semantic | Soft cool gradient shade used within visual media and mockup treatments. |
| Shadow Slate | `#767881` | `--color-shadow-slate` | semantic | Muted gradient shade inside dark or dimensional image treatments. |
| Hairline Frost | `#f5f5f7` | `--color-hairline-frost` | neutral | Very light border and section-detail color; use sparingly for subtle separation. |
| Badge Gray | `#666666` | `--color-badge-gray` | neutral | Small badge or media label treatment, not a primary brand surface. |
| Signal Blue | `#298ef5` | `--color-signal-blue` | accent | Selective link accent and prominent blue CTA embedded in the template artwork. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Studio Black) · `--color-surface-2` → `#eff0f2` (Soft Alloy) · `--color-text` → `#171718` (Carbon Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#7c7e83` (Quiet Graphite) · `--color-border` → `#f5f5f7` (Hairline Frost) · `--color-accent` → `#298ef5` (Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#171718` | `#ffffff` | 17.92:1 | AAA |
| `#171718` | `#000000` | 1.17:1 | fail |
| `#171718` | `#eff0f2` | 15.71:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#eff0f2` | 1.14:1 | fail |
| `#7c7e83` | `#ffffff` | 4.06:1 | AA-large |
| `#7c7e83` | `#000000` | 5.17:1 | AA |
| `#7c7e83` | `#eff0f2` | 3.56:1 | AA-large |
| `#298ef5` | `#ffffff` | 3.34:1 | AA-large |
| `#298ef5` | `#000000` | 6.28:1 | AA |

### Gradients

- `radial-gradient(64.38% 210.53% at 35.62% 50%, rgb(223, 225, 240) 0px, rgb(174, 177, 204) 100%)`
- `linear-gradient(to top, rgb(30, 30, 31), rgb(104, 105, 112))`
- `linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7))`
- `linear-gradient(to top, rgb(198, 200, 215), rgb(118, 120, 129))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 500, 400, 600 | Primary interface and editorial type across headings, body copy, navigation, links, and buttons. | Inter |
| rogan | `--font-rogan` | webfont | 500 | Small uppercase eyebrow labels that introduce or categorize content. | Inter |

- **Inter:** Use measured medium-to-semibold weights; headings are crisp and compact, body copy is comfortable, and case remains natural.
- **rogan:** Restrict to eyebrow use; measured medium weight, uppercase treatment, and noticeably expanded tracking.

### Type scale — Perfect Fourth (ratio ≈ 1.303, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 600 | 1 | -0.01em | — | Inter | Large hero wordmark-scale headline over the opening image. |
| h1 | 48px | 600 | 1 | 0 | — | Inter | Primary section or feature headline. |
| h2 | 36px | 600 | 1.11 | -0.01em | — | Inter | Major section titles such as tool and motion showcases. |
| h3 | 24px | 500 | 1.33 | -0.01em | — | Inter | Feature-card titles and secondary product messaging. |
| h4 | 20px | 500 | 1.4 | -0.01em | — | Inter | Compact subheadings and card-level labels. |
| body | 16px | 500 | 1.5 | -0.01em | — | Inter | Product descriptions and explanatory copy. |
| button | 18px | 400 | 1.56 | 0 | — | Inter | Text inside pill-shaped calls to action. |
| nav | 18px | 400 | 1.56 | 0 | — | Inter | Header navigation and studio-access link. |
| link | 16px | 500 | 1.5 | 0 | — | Inter | Catalog, product, and supporting action links. |
| eyebrow | 16px | 500 | 1.5 | 0.05em | uppercase | rogan | Uppercase category labels above content or media. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 80, 112 px.
- Section rhythm 80px · element gap 24px · card padding — · max content width 1360px.

A centered, responsive composition uses a measured page maximum width of 1360px, with a comfortable density and generous section spacing. The opening hero is full-bleed, while subsequent white sections alternate centered editorial copy with left-aligned headings and horizontal card rails. Product and tool areas use multi-column groupings, including a compact featured-tools strip and a wider motion gallery. The template and catalog promotion interrupt the white rhythm with gray and black bands. Keep the content edges aligned and allow media rows to feel browsable rather than tightly packed.

## Shape & elevation

- Radius: button `9999px` · card `24px` · media `24px` · badge `12px` · link `9999px` · xs `12px` · sm `16px` · md `24px` · pill `9999px`
- Shadow `xl` (card, link): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px`
- Shadow `md` (link, button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface favors flat white space and clean boundaries over heavy card chrome. Media panels use generous rounded corners, with selected artwork layered or overlapping to create depth. Measured shadows are available for elevated links and cards, but keep them subtle and limited; faint hairlines separate elements where needed rather than outlining every section.

## Imagery

Media is the main expressive layer: the hero uses a photographic subject against a pale lavender backdrop, while product panels show browser interfaces, mockups, and colorful dimensional 3D forms. Template previews overlap in a collage, and later demos use video frames. Keep imagery large, rounded, and cleanly framed; preserve the contrast between polished media and the restrained surrounding UI.

## Components

### Pill navigation actions

Use capsule-shaped actions for studio access and key links. The header pairs muted navigation text with a light Open Studio pill.

### Hero media

Full-width photographic opening with an oversized white wordmark, concise supporting copy, and two pale pill CTAs anchored over the image.

### Feature showcase cards

Rounded product panels pair short headings and actions with browser previews or atmospheric visual backgrounds.

### Featured tool rail

A horizontal row of tall, rounded cards uses distinct colorful 3D imagery and compact category labels.

### Template collage

Layered mockup thumbnails sit on the #eff0f2 band around a prominent blue Explore action.

### Dark promotional band

A black full-width section centers light headline copy and a small pale catalog CTA over subdued media.

### Dark link footer

Black footer groups small muted links into columns beneath a light two-line brand statement.

### Measured component styles

- **Primary button** (“Explore Ecosystem”): background #fbfbfe · text #25282b · border 1px solid #ffffff · radius 9999px · padding 12px 32px · 400 18px Inter
- **Secondary button** (“Explore catalog”): background #ffffff · text #25282b · radius 9999px · padding 12px 24px · 500 16px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Link** (“X (x.com)”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Inter
- **Card** (“Mockups, objects, shapes and icons. Expl”): background #000000 · text #000000 · radius 24px · padding 0px · 400 16px Inter
- **Badge** (“V1”): background #66686a · text #d1d5db · radius 12px · padding 10px · 400 12px Inter
- **Navigation item** (“Open Studio”): transparent background · text #7c7e83 · radius 0px · padding 0px · 400 18px Inter

## Do

- Keep the core interface monochrome and let media carry color.
- Use spacious transitions between major content sections.
- Frame product previews with generous rounded corners.
- Use pill shapes for prominent actions and studio access.
- Alternate centered messaging with left-aligned showcase headings.
- Reserve blue for selective links and standout media CTAs.

## Don't

- Do not turn every section into a bordered card grid.
- Do not spread the blue accent across the full interface.
- Do not crowd headings, copy, and media together.
- Do not flatten the distinctive layered template collage.
- Do not use bright colors as large UI backgrounds outside media.
- Do not make the dark sections compete with product imagery.

## Agent prompt

Build a new creative-tools page in the Morflax visual style. Use Gallery White (#ffffff) as the main canvas, Carbon Ink (#171718) for primary text, Quiet Graphite (#7c7e83) for secondary navigation, and Studio Black (#000000) for a focused promotional band or footer. Apply Signal Blue (#298ef5) sparingly, chiefly to a standout action. Use Inter throughout, with small uppercase, tracked eyebrow labels. Create spacious editorial sections, rounded media panels, and browsable horizontal product rows; give photography, browser previews, 3D artwork, and video the strongest visual presence. A pale gray band such as Soft Alloy (#eff0f2) can distinguish a template or resource area. Keep actions pill-shaped, typography clean and confident, and surrounding UI restrained. Avoid dense grids, decorative borders, or broad color fills that distract from product visuals.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed photographic hero beneath a dark navigation bar, with oversized wordmark and lower-left copy and actions. | Primary studio entry, Explore ecosystem | Dark top navigation, Oversized white wordmark, Pill CTAs, Photographic backdrop |
| 2 | other | Centered statement on a wide white field with extensive breathing room. | Editorial brand statement | Centered bold headline, Open white space |
| 3 | product-showcase | Left-aligned section title above a horizontally arranged set of large, rounded product panels. | Browse feature panels, Start creating, Learn more | Product carousel, Browser preview, Rounded media cards, Compact actions |
| 4 | product-grid | A horizontal row of tall feature cards, with section heading and browse controls above. | Browse tools, Explore catalog | Image-led cards, Compact category labels, Carousel controls |
| 5 | product-showcase | Full-width light-gray band containing a central cluster of overlapping template previews. | Explore templates, Remix assets | Overlapping media collage, Blue pill CTA, Soft gray backdrop |
| 6 | cta | Full-width black promotional section with centered messaging and a compact action over dark media. | Open catalog | Black band, Centered light headline, Subtle dark imagery, Small pill action |
| 7 | video | White editorial gallery with a left-aligned heading and multi-column video previews. | Browse demonstrations, Discover experiments | Video cards, Rounded thumbnails, Eyebrow labels, Sparse captions |
| 8 | contact | Open white section with a left-aligned heading and social links positioned to the right. | Visit social channels | Large section title, Social icons, Wide empty space |
| 9 | footer | Full-width black footer with a brand statement, four link columns, and a small legal and social row. | Browse site links, Access policies, Visit social channels | Black background, Multi-column link groups, Muted small text, Compact legal row |

## Source CSS custom properties (selected)

```css
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/morflax-com