Mono vs Split Layout Technical

Awesome Design Skills · 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 Engineer way: monospace, grids and labels. If it isn’t aligned, it isn’t done. Both are best for: visual direction.

Mono3/5
After: Tally landing page, made with Mono (Awesome Design Skills)
Split Layout Technical3/5
After: Tally landing page, made with Split Layout Technical (Meng To)

Scroll either page; the other follows.

Mono (Awesome Design Skills)

3/5

Mono turns Tally into a terminal: near-black pages, Space Mono and JetBrains Mono everywhere, and a bright #37f712 green accent. The landing hero is a CLI-style dashboard; the dashboard uses green only for the active nav, the $640 tile and money coming in. It is consistent and distinct, but the mobile dashboard scrolls sideways. Pick it for developer tools.

Split Layout Technical (Meng To)

3/5

Split Layout Technical pairs light paper columns with dark canvas panels side by side, set in Instrument Serif italics, Inter and mono metadata. The dashboard is a sharp two-panel layout with an amber accent and a dark chart panel. Both mobile pages run a few pixels too wide. Pick it for technical products with an editorial streak.

Side by side

FieldMono (Awesome Design Skills)Split Layout Technical (Meng To)
Fonts
  • Space Mono
  • JetBrains Mono
  • Instrument Serif
  • Inter
  • JetBrains Mono
Colors
  • #0b0a09 near-black
  • #141211 panel
  • #37f712 terminal green
  • #e7e5e4 light stone
  • #a8a29e grey
  • #00a6f4 blue
  • #f2f0ea paper
  • #121514 dark canvas
  • #17191a ink
  • #3f8a63 green (landing)
  • #c8792a amber (dashboard)
  • #85878a grey
Pick it for
  • developer tools
  • CLI and infra products
  • hacker-style side projects
  • dark dashboards
  • developer and data tools
  • SaaS landing pages
  • analytics dashboards
  • technical documentation sites
Skip it for
  • consumer finance brands
  • accessibility-first products
  • long reading pages
  • playful consumer brands
  • image-led marketing
  • mobile-first apps
Observations
  • all-monospace text is tiring in longer paragraphs
  • dashboard mobile: 628 px wide on a 390 px screen, so it scrolls sideways
  • landing mobile: 393 px wide on a 390 px screen, so it scrolls sideways a little
  • dashboard mobile: 394 px wide on a 390 px screen, so it scrolls sideways a little
  • the green serif italics on the landing echo the default

How the brief works

Install Mono (Awesome Design Skills)

1 Run in your terminal

npx degit bergside/awesome-design-skills/skills/mono#main .claude/skills/mono

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 Split Layout Technical (Meng To)

1 Run in your terminal

npx degit MengTo/Skills/agent-skills/web-design/split-layout-technical#main .claude/skills/split-layout-technical

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.