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.