Web Design

Web Design

Default visual language for every web page or frontend you generate, distilled from the Penguin Harness landing page and web app. The idea is GitHub-style simplicity: solid backgrounds, 1px borders instead of shadows, system fonts, one blue accent used sparingly. Depth comes from hairline borders, not shadows or gradients; dark mode is pure black, not navy. Apply these defaults unless the user explicitly asks for another style. One packaged alternative exists — the paper editorial theme below, for requests that call for a warm, print-like feel; pick one language per product and never mix them. The typography discipline, language, motion, IME, citation and responsiveness rules apply under both. Treat the user's one-line request as the whole spec: this skill fills every unstated gap, so the result is a finished page — never a wireframe that waits for styling feedback.

Before you start

If the user's message only invokes this skill (e.g. "use web-design skill") without a concrete page or interface to build, ask what they want to build. When a concrete build is already requested (an app UI, a landing page, a RAG chat interface), do not ask about styling — colors, fonts, spacing, radii and layout are all decided by the defaults below; the only question ever worth asking is what to build, never how it should look. Route by request shape: conversational or docs-QA → the chat/RAG layout; product or marketing → the page layout; tool-like apps → a sticky nav + panels composed from the components.

Build order and stack are decided the same way. For a full-stack request, build the frontend first against mocked data so the user sees the result early, then the backend behind it. When no stack is named, pick one and state it instead of asking: persistence in a single SQLite file or localStorage, caching in process memory — never Redis, MySQL or other infrastructure a one-line request did not ask for.

Non-negotiable for ANY text input that sends on Enter: never send while an IME composition is in progress (check event.isComposing, falling back to event.keyCode === 229, on keydown). For Chinese/Japanese/Korean input methods, that Enter only confirms the composed text — auto-sending on it fires half-typed messages. Details in the composer recipe below.

Ship complete

Every delivery, even from a one-line request, includes all of this unasked:

• <html lang> matching the UI language; <meta name="viewport" content="width=device-width, initial-scale=1">; a real <title>.
• Dark mode wired and persisted when using the default language (the paper theme is light-only). Mobile-first: base styles are the single-column phone layout and min-width queries add columns from 640px; no horizontal scroll.
• Every async surface has designed loading, empty, error and success states — never a blank region or a silent failure.
• A working keyboard path: visible :focus-visible, Esc closes overlays (focus returning to the trigger), Enter submits (IME-safe as above).
• Semantic landmarks (header, nav, main, section, article, footer) instead of div soup; alt text on images, aria-label on icon-only buttons, an .sr-only utility for text meant only for screen readers; tap targets ≥ 40px.
• Zero external requests: system fonts, inline or local CSS/JS, inline SVG icons — no CDN, no icon font, no analytics.
• Checked before it is shown: after each coding pass, read the tail of the dev server log (never the whole file) and the browser console, and fix every error before presenting the page.

Design tokens

:root {
  color-scheme: light;
  /* Brand blue — the only accent family. Use sparingly: links, eyebrows, tiny dots, tints. */
  --brand-50: #e8f0fe; --brand-100: #d2e3fc; --brand-300: #8ab4f8; --brand-500: #4285f4;
  --brand-600: #1a73e8; /* accent text/icons in light mode */ --brand-700: #0b57d0; /* links on white */
  /* Neutrals (Tailwind gray) */
  --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db;
  --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-900: #111827;
  --bg: #ffffff; --surface: #ffffff; --border: var(--gray-200); --control-border: var(--gray-300);
  --fg: var(--gray-900); --fg-muted: var(--gray-600); --fg-faint: var(--gray-500);
  --accent-bg: #111827; --accent-fg: #ffffff; /* primary buttons are near-black, not blue */
  --radius-control: 6px; /* buttons, inputs, chips */ --radius-card: 12px; /* cards, panels */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}
.dark {
  color-scheme: dark; /* pure black, no blue tint */
  --bg: #000000; --surface: #0d0d0d; --border: #1f1f1f; --control-border: #303030;
  --fg: #f3f4f6; --fg-muted: #9ca3af; --fg-faint: #6b7280;
  --accent-bg: #f3f4f6; --accent-fg: #111827; /* primary button inverts to light */
  --brand-600: #8ab4f8; --brand-700: #8ab4f8; /* brand text flips to the 300 tone */
}

• Toggle dark mode with a dark class on <html> (persist the choice; default to prefers-color-scheme).
• Primary buttons are neutral black/white, never blue fills. Brand blue is reserved for accents: links, section eyebrows, small status dots, --brand-50 tinted chips.
• Pills, badges and dots use border-radius: 9999px; everything else uses the two radii above. No gradients or elevation shadows on content (modals excepted; flat focus rings drawn with box-shadow are fine).

Typography

System fonts only — no CDN fonts, no @font-face. The CJK entries matter (bilingual product):

body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
       "PingFang SC", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
code, pre, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

Headings are always font-weight: 600 with letter-spacing: -0.025em — nothing heavier, no thin weights. Scale: page/hero title 30–36px; section title 24–30px; card title 16–18px; body 14px / line-height 1.5; captions 12px in --fg-faint; code 13px / line-height 1.85. Hierarchy comes from weight, size, spacing and hairlines — never from colored blocks.

Language

Write the page's UI copy in the language the user's request was made in — a Chinese request gets a Chinese interface, an English request an English one — and set <html lang> to match. Code identifiers, CSS class names and code comments stay English.

Components

• Primary button — background: var(--accent-bg); color: var(--accent-fg); border-radius: 6px; padding: 6px 12px; font-size: 14px; font-weight: 500; hover: opacity: .9. Large CTA variant: height 44px, radius 8px, padding 0 20px.
• Secondary button — white/--surface bg, 1px solid var(--control-border), same paddings; hover swaps bg to --gray-100/dark #1f1f1f.
• Card — border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 24px; hover changes only the border color (one step darker) — no lift, shadow or scale. Cards in one grid share the same padding and stretch to equal height.
• Input / textarea — border: 1px solid var(--control-border); border-radius: 6px; padding: 8px 12px; focus: border one step darker + box-shadow: 0 0 0 2px rgb(156 163 175 / .3); no default outline stacking.
• Pill chip — border-radius: 9999px; border: 1px solid var(--border); padding: 4px 10px; font-size: 12px; color: var(--fg-muted); hover: bg --gray-50. Brand-tinted variant: --brand-50 bg, --brand-700 text.
• Sticky nav — height: 56px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(8px); logo 28px + product name 15px semibold.
• Code block — --gray-50/dark --surface bg card with a bordered header row (mono 12px label + copy button), body mono 13px.
• Long list — any list, log or table that can grow lives in a bounded box: max-height: 24rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--control-border) transparent; — the page never scrolls because of it.
• Skeleton — a content region that is loading shows gray blocks in the shape of the content (--gray-100/dark #1f1f1f, radius 6px, soft opacity pulse); dots and spinners are for actions, skeletons for regions.
• Toast — confirmation of a user action (saved, copied, deleted): fixed bottom-right (bottom-center on mobile), --surface bg, 1px solid var(--border), radius 8px, padding 10px 14px, 13px, role="status" aria-live="polite"; rises in, auto-dismisses after 3–4 s, newest at the bottom. Never a browser alert().
• Focus — :focus-visible { outline: 3px solid rgb(107 114 128 / .4); outline-offset: 2px; }.

Motion

One easing everywhere: var(--ease), durations 120–280ms. Entrances rise in (translateY(10px) + fade, 280ms, stagger siblings by 40ms); overlays fade (120ms); every clickable element has a hover state and cursor: pointer; hover feedback is color-only (transition: color, background-color, border-color 150ms) — never transform on hover. Always include:

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

Opt-in theme: paper editorial

A second complete language — warm paper tones, serif display headings, mono micro-labels — for when the user asks for a warm, editorial, print- or magazine-like feel. Light-only: if the product needs dark mode, use the default language instead.

:root {
  color-scheme: light;
  --paper: #f7f4ee; /* page bg */ --panel: #eeebe4; /* side panels */ --card: #fffdf9;
  --ink: #262421; --muted: #716d67; --line: #ded9d0; /* warm hairlines */
  --accent: #d6663f; --accent-deep: #9e462b; /* the only accent; deep tone for text/links */
  --live: #547567; /* status green — live dots and retrieval notes only */
}

• Serif display over sans body — hero and panel titles use system serifs (Georgia, "Times New Roman", "Songti SC", "Noto Serif SC", serif; still no CDN fonts), weight 400–500, letter-spacing: -.04em, hero clamp(38px, 5vw, 62px), with exactly one word wrapped in an accent-colored <em>. Body text stays on the default sans stack, 13–14px / line-height 1.7.
• Mono micro-labels — eyebrows/kickers, example numbering (01), status values and citation numbers: 9–11px uppercase monospace, letter-spacing: .1–.18em, in --accent-deep or --muted. The serif-vs-mono contrast is this theme's hierarchy tool, replacing the default theme's weight-and-size ladder.
• Tighter radii, warm shadows — cards, buttons and source rows use 4–5px radii (pills stay 9999px). Unlike the default language, soft warm-tinted shadows belong here: composer box-shadow: 0 14px 40px rgb(65 50 39 / .09); example-card hover may lift translateY(-2px) and gain 0 10px 28px rgb(62 49 40 / .07).
• Signature shapes — brand mark: an --accent square with one tight corner (border-radius: 11px 11px 11px 4px) holding a white serif initial; user chat bubbles echo it with border-radius: 3px 14px 14px 14px. Empty-state flourish: that mark in a circular medallion ringed by 1–2 offset half-circle hairlines (clip-path: inset(0 50% 0 0)) — this theme's counterpart of the default dot grid.
• Buttons — primary is an --accent fill (hover --accent-deep; icon-only send buttons go circular); secondary stays a hairline border on --card/white. Links use --accent-deep.