Dither Background vs Liquid Metal Border

Meng To · Meng To

Tied at 3/5 on the same brief. Pick by fit: the rows below show where each one is stronger.

Both built the Tally landing page in the same Claude Code test, and both design the Night Shift way: dark screens, glowing accents, work that looks best at 2am. Both are best for: visual direction.

Dither Background3/5
After: Tally landing page, made with Dither Background (Meng To)
Liquid Metal Border3/5
After: Tally landing page, made with Liquid Metal Border (Meng To)

Scroll either page; the other follows.

Dither Background (Meng To)

3/5

Dither Background turns Tally black and white with a grainy, pixel-dithered glow behind the hero and the closing panel, Instrument Serif italics over Inter Tight, and Geist on the dashboard. The dashboard keeps it monochrome, with one orange warning. Pick it for products that want a moody, print-like dark look.

Liquid Metal Border (Meng To)

3/5

Liquid Metal Border gives Tally a dark, quiet look with shimmering metallic edges on key cards, Instrument Serif italics over Inter and soft pastel accents. The dashboard is clean dark mode in Inter Tight with mono labels. The skill is written for a React package, so in our single HTML file the metal is a CSS stand-in. Pick it for premium dark products.

Side by side

FieldDither Background (Meng To)Liquid Metal Border (Meng To)
Fonts
  • Instrument Serif (landing)
  • Inter Tight (landing)
  • JetBrains Mono (landing)
  • Geist (dashboard)
  • Geist Mono (dashboard)
  • Instrument Serif (landing)
  • Inter (landing)
  • Inter Tight (dashboard)
  • JetBrains Mono
Colors
  • #050505 black
  • #0c0c0d panel
  • #ecece8 off-white
  • #9a9a9c grey
  • #ff7a59 orange (dashboard)
  • #0b0c0f black
  • #15171d surface
  • #f2f1ee text
  • #8ff0c4 mint
  • #ffb38a peach
  • #b9a6ff lilac
  • #8cc8ff sky
Pick it for
  • creative tools
  • music and media brands
  • dark-mode SaaS
  • technical launch pages
  • premium SaaS
  • dark-mode dashboards
  • AI products
  • product launch pages
Skip it for
  • consumer finance that needs warmth
  • light-mode brands
  • data-dense tools with many categories
  • light-mode brands
  • warm consumer products
  • editorial sites
Observations
  • dashboard mobile: 540 px wide on a 390 px screen, so it scrolls sideways
  • with no color, the envelope bars are hard to tell apart
  • the skill is written for a React package; in plain HTML the effect is a CSS stand-in
  • dashboard: little of the metal effect carries over, so it reads as generic dark mode

How the brief works

Install Dither Background (Meng To)

1 Run in your terminal

npx degit MengTo/Skills/agent-skills/web-design/dither-background#main .claude/skills/dither-background

2 Or paste a prompt into Claude Code, Codex, Cursor or Gemini

It tells your tool to install this from its source repository.

This install is for Claude Code only; for other agents use Copy prompt or copy the skill folder.

Copies just this skill's folder into your project's .claude/skills.

Check the source for the latest instructions.

Install Liquid Metal Border (Meng To)

1 Run in your terminal

npx degit MengTo/Skills/agent-skills/web-design/liquid-metal-border#main .claude/skills/liquid-metal-border

2 Or paste a prompt into Claude Code, Codex, Cursor or Gemini

It tells your tool to install this from its source repository.

This install is for Claude Code only; for other agents use Copy prompt or copy the skill folder.

Copies just this skill's folder into your project's .claude/skills.

Check the source for the latest instructions.