dark-blue-contrasting-clean — Claude Code skill: dark-blue UI system

---
name: dark-blue-contrasting-clean
description: "Create a dark-blue clean design system with strong contrast, cobalt gradient feature blocks, crisp framed structure, and restrained premium glow."
---

# Dark Blue Contrasting Clean Skill

## Use When
- Create a dark-blue clean design system with strong contrast, cobalt gradient feature blocks, crisp framed structure, and restrained premium glow.

## Workflow

## Scope
- Apply this as a full design-system direction across page background, framing rails, hero or CTA bands, cards, link groups, navigation, and motion.
- Use it when the interface should feel premium, dark, crisp, and blue-led, with strong contrast between deep navy surfaces and brighter cobalt focal regions.
- This is not an airy cloud-blue system and not loud neon sci-fi. It should stay clean, architectural, and high-contrast.

## Visual target
- Build the page on a near-black navy base, using dark blue-black backgrounds with subtle tonal variation rather than flat pure black.
- Introduce one or more prominent cobalt or royal-blue feature blocks as contrast moments, such as hero banners, CTA bands, spotlight cards, or product sections.
- Use white typography and pale-blue support text over the dark system so the contrast feels sharp, readable, and premium.
- Add thin outer rails, border-x container lines, small corner squares, and quiet framing detail so the layout feels disciplined and engineered.
- Let blue glow stay soft and localized, appearing in background blooms, button emphasis, or tiny live indicators instead of flooding the whole page.

## Implementation guidance
- Prefer a framed max-width shell or inner container with vertical boundary lines and subtle corner markers holding the composition together.
- Use border-gradient wrappers for premium blue feature blocks and dark cards, then place cleaner inner fills inside them so the edge treatment stays crisp.
- Organize the layout in clean stacked zones: a high-impact contrast block, then quieter index or navigation areas, followed by a restrained legal or footer zone.
- Buttons and CTA cards should feel firm and premium, using dark translucent fills, blue-tinted borders, pale-blue copy, and hover states that brighten slightly.
- Typography should remain light and elegant: thin to regular sans-serif weights, generous spacing, and small uppercase utility lines for section numbering or metadata.
- Use subtle abstract blue light fields, large blurred glows, circular traces, or soft overlay washes to add atmosphere without weakening the clean structure.
- Motion should stay calm and premium: masked word reveals, fade-up sections, quiet icon drift, and gentle hover translation are appropriate.

## Recommended patterns
- Large cobalt gradient banner or CTA block nested inside a dark framed container, with white headline and pale-blue support copy.
- Dark navy page shell with border-x rails and tiny corner squares marking the main content bounds.
- Clean multi-column link or info index using white headings, muted gray-blue links, and tiny numeric utility labels.
- Premium contact or action cards built from blue-to-transparent gradient wrappers and dark inner panels.
- Small live dots, section counters, or glow markers using bright blue as selective signal detail.
- Footer or lower-page legal area separated with thin white-alpha rules and minimal technical iconography.

## Tuning knobs
- Blue intensity: shift between richer royal blue and darker steel-blue depending on how bold the system should feel.
- Contrast strength: keep text, dividers, and key blocks crisp against the dark base, but avoid harsh overexposure.
- Glow amount: use blur and bloom sparingly so the page feels atmospheric without becoming soft or hazy.
- Frame density: add or reduce rails, corner squares, and divider lines depending on how structured the layout should feel.
- Banner dominance: let the blue feature block act as the hero centerpiece or a secondary conversion zone depending on page needs.

## Avoid
- Treating it like a light sky-blue or cloudy product page.
- Full-screen electric blue washes that destroy contrast and refinement.
- Flat dark layouts with blue text but no meaningful framed structure or contrast block.
- Overdecorating every card with glow, gradients, or glass effects.
- Heavy enterprise dashboard clutter that fights the clean architectural tone.