Melius

Overview

Melius is a node-based creative operating system that transforms AI from a black-box tool into a transparent, rewirable workflow engine. The design language embraces **Architectural Minimalism with Kinetic Energy**—a visual philosophy that combines clean geometric forms (sharp 6px corners on buttons, 12px gutters, 1600px container max) with dynamic, layered imagery and vibrant accent colors that signal creative possibility. The brand serves creative professionals (designers, video editors, content creators) who demand both precision and flexibility. The UI evokes a sense of infinite creative potential through its infinite zoomable canvas metaphor, while maintaining a calm, professional demeanor through restrained color use: a near-black surface (#1a1616), warm orange accent (#f04e23), and strategic pops of yellow (#fff78b) and cyan (#b0e3e8). Voice: direct, technical without jargon, empowering. Example: "Describe what you want; Mel routes the right model, runs the workflow, and shows you every prompt—so you can steer until it lands."

Colors

The Melius color system is built on a **high-contrast, accent-driven palette** optimized for clarity and creative expression. Primary (#f04e23, a warm burnt-orange) is the signature accent used exclusively on primary CTAs ("Start for Free" button, 14px padding, 6px radius), focus states, and brand-critical interactive elements. It commands attention without overwhelming—appearing sparingly on a predominantly neutral canvas. Secondary (#fff78b, a warm butter-yellow) serves as a supporting accent for secondary CTAs ("Sign In" button) and highlights, creating visual rhythm without competing with primary. Tertiary (#b0e3e8, a soft cyan) appears in data visualization, accent borders, and tertiary UI elements, adding a cool counterpoint to the warm orange-yellow axis. The surface stack anchors t

Typography

The type system pairs two custom fonts—**recklessStandard** for display and headline hierarchy, **easeStandard** for body and interface text—creating a distinctive, proprietary voice. recklessStandard (400 weight, 56px display, 40px headline-lg, 28px headline-md) is geometric and confident, with tight line-height (64px, 48px, 36px respectively) and negative letter-spacing (-0.02em on display, -0.015em on headline-lg) that creates visual compression and forward momentum. easeStandard (400 weight, 18px body-lg, 16px body-md, 14px label-md) is humanist and readable, with generous line-height (28px, 24px, 20px) and 0.01em letter-spacing that prevents cramping on small sizes. All text smaller than 14px receives text-shadow: 0 1px 2px rgba(0,0,0,0.08) when rendered over images or complex backgro

Layout

Melius employs a **fluid 12-column grid with a 1600px container maximum**, enabling responsive scaling from mobile (single column, 16px horizontal padding) to desktop (full 12 columns, 24px gutter). The page rhythm is driven by a semantic spacing scale: xs (4px, micro-adjustments), sm (12px, component internal spacing), md (24px, section separation and card padding), lg (40px, major section breaks), xl (64px, hero-to-content transitions). The hero section spans full viewport height with a 56px h1 in recklessStandard, centered vertically and horizontally, anchored by a 48px primary button (14px padding, 6px radius) positioned 40px below the headline. Section containers use md (24px) padding on mobile, lg (40px) on tablet, and maintain the 1600px max-width on desktop. Cards and input fields

Elevation & Depth

Depth in Melius is achieved through a **subtle shadow hierarchy and strategic layering**, avoiding heavy drop-shadows in favor of refined, directional lighting. Level 1 (Base/Surface): no shadow; surface (#fafafa) is the neutral canvas. Level 2 (Cards, Input Fields): box-shadow: 0 3px 8px rgba(0,0,0,0.15), a soft, spread shadow that lifts elements 4-6px above the base. Level 3 (Modals, Dropdowns, Overlays): box-shadow: 0 8px 24px rgba(0,0,0,0.12), a larger blur radius (24px) and vertical offset (8px) that creates clear separation. Hover states on interactive elements transition to Level 3 shad

Shapes

The Melius shape language is **Geometric Precision with Organic Softness**—sharp enough to feel technical and intentional, soft enough to feel approachable. Buttons use 6px border-radius (0.375rem), a subtle rounding that avoids the pill-button cliché while maintaining clarity. Cards and containers use 12px border-radius (0.75rem) for a slightly softer appearance, signaling content hierarchy. Input fields use 4px border-radius (0.25rem), the tightest radius, to emphasize their functional, utilitarian role. Badges and tags use full border-radius (9999px) to create visual distinction and a sense

Components

Action Elements Buttons are the primary interaction mechanism. **button-primary** (backgroundColor: #f04e23, textColor: #fafafa, padding: 14px 24px, height: 48px, borderRadius: 6px, boxShadow: 0 3px 8px rgba(0,0,0,0.15)) is used for primary CTAs ("Start for Free", "Design a product launch"). On hover, it transitions to **button-primary-hover** (backgroundColor: #ff7a52, all 150ms cubic-bezier(0.4, 0, 0.2, 1)) without shadow change. **button-secondary** (backgroundColor: #fff78b, textColor: #1a1616, padding: 14px 24px, height: 48px, borderRadius: 6px) is used for secondary CTAs ("Sign In"). **button-ghost** (backgroundColor: transparent, textColor: #1a1616, border: 1px solid #d9d9d9, padding: 12px 20px, height: 44px, borderRadius: 9999px) is used for tertiary actions and navigation link

Do's and Don'ts

**Do**

• Do use primary (#f04e23) exclusively on primary CTAs and focus states—never on body text, backgrounds, or secondary UI.
• Do maintain 24px (md) padding on cards and section containers; never compress below 12px (sm) except for micro-interactions.
• Do apply recklessStandard to all headings (h1–h4) and easeStandard to all body copy and labels—never mix fonts within a hierarchy level.
• Do use the three-tier shadow system (sm/md/lg) consistently; never create custom shadows outside the defined elevation scale.
• Do apply 150ms cubic-bezier(0.4, 0, 0.2, 1) easing to all interactive transitions (hover, focus, active); never use linear or instant state changes.

**Don't**

• Don't use secondary (#fff78b) or tertiary (#b0e3e8) as primary accent colors—they are supporting accents only.
• Don't apply border-radius smaller than 4px or larger than 12px to buttons, cards, or inputs; stick to the defined scale (4px, 6px, 12px, 9999px).
• Don't render text smaller than 14px without text-shadow: 0 1px 2px rgba(0,0,0,0.08) over complex backgrounds.
• Don't use font-weight heavier than 400 (no bold, no 600/700)—the brand uses weight consistency for refinement.
• Don't create custom color tokens outside the defined M3 surface stack and role colors; always reference {colors.x} tokens in component definitions.