Dark Blue Contrasting Clean vs Dark Glass Clean Layout

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, dashboards.

Dark Blue Contrasting Clean3/5
After: Tally landing page, made with Dark Blue Contrasting Clean (Meng To)
Dark Glass Clean Layout3/5
After: Tally landing page, made with Dark Glass Clean Layout (Meng To)

Scroll either page; the other follows.

Dark Blue Contrasting Clean (Meng To)

3/5

Dark Blue Contrasting Clean gives Tally a deep navy page with bright cobalt gradient blocks, crisp frames, Inter and lots of JetBrains Mono labels. The dashboard leads with a cobalt summary card and stays clear and readable. Pick it for confident, technical-feeling products.

Dark Glass Clean Layout (Meng To)

3/5

Dark Glass Clean Layout is the neutral version of dark mode: near-black zinc surfaces, frosted cards, Inter with mono labels and almost no color beyond a pale green. It looks expensive and quiet, but both pages scroll sideways on a phone. Pick it for premium, understated products.

Side by side

FieldDark Blue Contrasting Clean (Meng To)Dark Glass Clean Layout (Meng To)
Fonts
  • Inter
  • JetBrains Mono
  • Inter
  • JetBrains Mono
Colors
  • #04060d near-black
  • #0a1022 navy panel
  • #2f5bff cobalt
  • #5d8bff signal blue
  • #b9c8ee pale blue
  • #ffffff white
  • #060607 black
  • #18181b glass
  • #f4f4f5 text
  • #a1a1aa grey
  • #86efac pale green
  • #fcd34d yellow
Pick it for
  • fintech and banking
  • developer and AI tools
  • dark-mode dashboards
  • SaaS landing pages
  • premium SaaS
  • developer tools
  • dark-mode dashboards
  • product launch pages
Skip it for
  • warm consumer brands
  • light-mode products
  • editorial sites
  • warm or friendly brands
  • light-mode products
  • mobile-first apps
Observations
  • landing mobile: 393 px wide on a 390 px screen, so it scrolls sideways a little
  • the cobalt-on-navy look is close to other dark-blue skills in this set
  • landing mobile: 555 px wide on a 390 px screen, so it scrolls sideways
  • dashboard mobile: 580 px wide on a 390 px screen, so it scrolls sideways
  • with so little color, the page relies on small grey text

How the brief works

Install Dark Blue Contrasting Clean (Meng To)

1 Run in your terminal

npx degit MengTo/Skills/agent-skills/web-design/dark-blue-contrasting-clean#main .claude/skills/dark-blue-contrasting-clean

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 Dark Glass Clean Layout (Meng To)

1 Run in your terminal

npx degit MengTo/Skills/agent-skills/web-design/dark-glass-clean-layout#main .claude/skills/dark-glass-clean-layout

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.