melius.com

Melius | The AI-native operating system for creativessaved 14d ago · captured 14d ago

Seven details, seven pinned.

View as Markdown ↗

Colors8 colors · ground #E2E2E2

ground#e2e2e2·64.16%#202321·7.84%#b4b6ba·3.27%#56533d·2.57%#8e8e8c·2.03%#305a7c·1.77%#137f9c·1.59%#521559·1.36%

Sized by coverage · click to copy.

Typography3 families · 5 styles · recklessStandard, ui-sans-serif, easeStandard

Create anything you imagine

recklessStandard · 56/56 · 400 · -1.12px

Our Pricing

recklessStandard · 56/56 · 400 · -1.12px

Agencies

recklessStandard · 36/36 · 400 · normal

Body

AI agents for creative work. Bring your creative vision and collaborate with AI

ui-sans-serif · 16/24 · 400 · normal

Small

Trusted by creatives from

easeStandard · 13/15 · 400 · -0.384px

Specimens are the page's own words at their measured metrics; shown in Inter when the family is not loaded.

ButtonsStart for Free1 style

Start for Free

primary · fill #f04e23 · label #fafafa · radius 6px · border 0px · padding 14px 14px · height 40px · type 12.8px / 400

Shape4 radii · 84 uses

8px27 uses · 32%

4px24 uses · 29%

2px22 uses · 26%

6px11 uses · 13%

AnalysisAn AI creative-tool landing page that plays gallery against workshop.

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.

Style recipeBuild a two-register system: a light "gallery" register and a dark "workshop" register, alternated in full-bleed bands.

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.

Details7 worth noting

melius.com — the captured page — Landing, 1440 × 900 · captured Sep 25, 2026

1Concave perspective filmstrip hero
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.
2Inset dark toolbar nav
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.
3Yellow and vermilion CTA pair
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.
4Node-graph canvas with orange wires
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.
5Polaroid cards with sticky-note labels
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.
6Orange-ringed billing switch
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.
7Ghosted giant footer wordmark
An oversized, ghosted brand wordmark and logo sit behind the dark footer, cropped by the footer card, which works as a watermark signature.