Deep navy filled pill on a cool slate canvas — the default primary for finance dashboards and B2B SaaS. Subtle elevation, crisp white type, and a hover that brightens without losing authority.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build a Sky Navy Pill primary button for light B2B UIs.
1. Full pill radius (9999px). Fill #1E3A8A deep navy, label #FFFFFF.
2. Height ~40–44px, horizontal padding 20–24px, 14px semibold.
3. Hover: shift toward brighter navy (#2563EB family) and expand shadow 0 8px 20px #1E3A8A40.
4. Focus-visible: 3px ring #1E3A8A4D.
5. Never use warm reds or gradients — cool authority only.Deep navy filled pill on a cool slate canvas — the default primary for finance dashboards and B2B SaaS. Subtle elevation, crisp white type, and a hover that brightens without losing authority.