# melius.com

Source: https://www.melius.com/
Captured: 2026-09-25
Tags: saas, landing, mixed, both, editorial, dark-techno, minimal, confident, premium, technical, energetic
Colors: #e2e2e2, #202321, #b4b6ba, #56533d, #8e8e8c, #305a7c, #137f9c, #521559
Type (h1): recklessStandard · 56px/56px · 400 · tracking -1.12px — "Create anything you imagine"
Type (h2): recklessStandard · 56px/56px · 400 · tracking -1.12px — "Our Pricing"
Type (h3): recklessStandard · 36px/36px · 400 — "Agencies"
Type (body): ui-sans-serif · 16px/24px · 400 — "AI agents for creative work. Bring your creative vision and collaborate with AI "
Type (small): easeStandard · 12.8px/15.36px · 400 · tracking -0.384px — "Trusted by creatives from"
Type (button): easeStandard · 12.8px/15.36px · 400 · tracking -0.384px — "Start for Free"
Button: "Start for Free" — fill #f04e23, text #fafafa, radius 6px, border 0px, padding 14px 14px, height 40px, type 12.8px/400
Radii: 8px (27), 4px (24), 2px (22), 6px (11)

## Images

- Hero (desktop): https://media.lvly.design/library/melius-com/hero.webp?v=4cb42e73
- Page crop (mid-1): https://media.lvly.design/library/melius-com/mid-1.webp?v=7dccc396
- Page crop (mid-2): https://media.lvly.design/library/melius-com/mid-2.webp?v=0b92e4a0
- Hero (mobile): https://media.lvly.design/library/melius-com/mobile-hero.webp?v=7d09d633
- Full page (desktop): https://media.lvly.design/library/melius-com/full.jpg?v=aa3f126b
- Full page (mobile): https://media.lvly.design/library/melius-com/mobile-full.jpg?v=8d112483
- Clip preview (mp4): https://media.lvly.design/library/melius-com/video-70ndg8.preview.mp4?v=b9d077d4

An AI creative-tool landing page that plays gallery against workshop. It opens on a pale gray (#e2e2e2) field with a faint dot grid. A single light serif headline (Reckless, 56px, weight 400, -1.12px tracking) sits above a curved, perspective-warped filmstrip of generated images that bows toward the viewer like a panoramic screen. Then the page drops into a near-black (#121010–#202321) node canvas: image and video cards wired together by thin vermilion bezier cables, each carrying a small filled orange type tag. The page alternates light and dark bands down to the pricing section and the footer. Everything functional is set in a compact grotesk at about 12.8px with slight negative tracking. The serif is saved for display lines, and one hot orange (#f04e23) marks every action and connection.

## Steal-worthy details

- Curved perspective filmstrip: image panels grow and tilt outward from a small center stack, bending into a concave screen around the headline. This turns a gallery of outputs into a spatial hero instead of a grid.
- A floating dark nav slab (#202321) that is inset about 16px from the viewport edges with a hairline outline and 8px bottom corners. It reads as a tool palette resting on the canvas, not a site header.
- Paired CTAs in two saturated fills: a butter-yellow (#fef08a-ish) "Sign In" beside a vermilion "Start for Free". Both are 40px tall, radius 6px, with small 12.8px labels. The secondary action gets its own color instead of a ghost outline.
- Product demo as a live node graph: dark cards with a label and model name across the top edge (for example "Character Study · Nano Banana 2"), a filled orange type chip ("image", "Video"), and 1px orange bezier wires that end in ringed port dots.
- Use-case cards float as tilted polaroids (a white frame with an 8px inner image and 1px gray border), each with a yellow sticky-label tab overlapping the corner ("Treatment Decks", "Spec Ads"). The cards orbit a central serif-titled card above a segmented tab bar with an orange active pill.
- A billing toggle styled as a physical switch: a white capsule track with an orange-ringed knob, set between muted "Monthly" and bright "Annual" labels on the dark pricing band.
- An oversized, ghosted brand wordmark and logo sit behind the dark footer, cropped by the footer card, which works as a watermark signature.

## Style recipe

Build a two-register system: a light "gallery" register and a dark "workshop" register, alternated in full-bleed bands. Light bands use a #e2e2e2 ground (page background #fafafa) with a very faint 1px dot grid at about 24px pitch. Dark bands use #121010–#202321 with the same dot grid at low opacity. Set display type in a light editorial serif (Reckless or similar) at weight 400. Use 56/56px with -0.02em tracking for H1/H2 and 36/36px for H3, and never go bold. Set all UI and body text in a neutral grotesk: 16/24px body, with buttons, tabs, chips and captions at 12.8px and -0.03em tracking, so the interface feels like compact tool chrome. Reserve one hot vermilion, #f04e23 with #fafafa text, for primary buttons, active tab pills, type chips and every connecting line or port. Add a butter yellow (about #fdf28a) as the secondary fill for secondary buttons and sticky-note labels. There are no other hues; color comes from the imagery. Radii stay small: 2px for chips, 4px for image insets, 6px for buttons and 8px for cards and the nav. Borders are 1px hairlines (#b4b6ba on light, rgba(255,255,255,0.12) on dark), with nearly no shadows. Make the nav a floating dark slab inset from the viewport edges. Show the product as spatial objects rather than screenshots: perspective-warped image strips, tilted framed cards with overlapping yellow labels, and node cards wired with 1px orange bezier curves ending in ringed dots. Keep copy blocks narrow and centered under the serif headlines.