taste-skill / Components / Polar Cards
Polar Card Component Styles
3 Polar card containers extracted from polar.sh: backgrounds, 7.6px/16px radii, borders and shadows, rendered live with CSS and Tailwind code.
Source: computed styles extracted from
https://polar.sh on 2026-10-26 by the taste-skill extractor. Brand fonts may be proprietary; previews fall back to Inter / system fonts. Polar is a trademark of its owner; this page documents publicly visible styling for reference and is not affiliated with Polar.Rendered on the Polar canvas
Card 1
radius 7.6px · padding 48px 48px
Card 2
radius 16px · padding 4px 4px
Card 3
radius 7.6px · padding 48px 48px
Card specs
| # | Background | Border | Radius | Padding | Shadow |
|---|---|---|---|---|---|
| 1 | transparent | 1px solid #181818 | 7.6px | 48px 48px | none |
| 2 | #090909 | 1px solid #181818 | 16px | 4px 4px | rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.75) 0px 16px 40px -12px |
| 3 | #111111 | 1px solid #181818 | 7.6px | 48px 48px | none |
Copy-paste code
Card 1
.card-polar-1 {
background:transparent;
border:1px solid #181818;
border-radius:7.6px;
padding:48px 48px;
}Card 2
.card-polar-2 {
background:#090909;
border:1px solid #181818;
border-radius:16px;
padding:4px 4px;
box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.75) 0px 16px 40px -12px;
}Card 3
.card-polar-3 {
background:#111111;
border:1px solid #181818;
border-radius:7.6px;
padding:48px 48px;
}More Polar
Same component, other brands
Get all 30 full SKILL.md specs (Cursor / Claude Code / Codex ready) plus the Pro growth skills.
See taste-skill Pro →