taste-skill / Components / Linear Cards

Linear Card Component Styles

3 Linear card containers extracted from linear.app: backgrounds, 8px/9px/12px radii, borders and shadows, rendered live with CSS and Tailwind code.

Source: computed styles extracted from https://linear.app on 2026-10-26 by the taste-skill extractor. Brand fonts may be proprietary; previews fall back to Inter / system fonts. Linear is a trademark of its owner; this page documents publicly visible styling for reference and is not affiliated with Linear.

Rendered on the Linear canvas

Card 1

radius 8px · padding 0px 0px

Card 2

radius 9px · padding 12px 16px

Card 3

radius 12px · padding 0px 0px

Card specs

#	Background	Border	Radius	Padding	Shadow
1	`rgba(255, 255, 255, 0.01)`	`1px solid rgba(255, 255, 255, 0.05)`	`8px`	`0px 0px`	`rgba(0, 0, 0, 0.2) 0px 0px 0px 2px`
2	`#0F1011`	`1px solid rgba(255, 255, 255, 0.08)`	`9px`	`12px 16px`	`rgba(0, 0, 0, 0.2) 0px 0px 0px 1px`
3	`#161718`	`1px solid rgba(255, 255, 255, 0.12)`	`12px`	`0px 0px`	`rgba(0, 0, 0, 0.25) 0px 2px 32px 0px`

Copy-paste code

Card 1

.card-linear-1 {
  background:rgba(255, 255, 255, 0.01);
  border:1px solid rgba(255, 255, 255, 0.05);
  border-radius:8px;
  padding:20px;
  box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 0px 2px;
}

Card 2

.card-linear-2 {
  background:#0F1011;
  border:1px solid rgba(255, 255, 255, 0.08);
  border-radius:9px;
  padding:12px 16px;
  box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
}

Card 3

.card-linear-3 {
  background:#161718;
  border:1px solid rgba(255, 255, 255, 0.12);
  border-radius:12px;
  padding:20px;
  box-shadow:rgba(0, 0, 0, 0.25) 0px 2px 32px 0px;
}

Get all 30 full SKILL.md specs (Cursor / Claude Code / Codex ready) plus the Pro growth skills.

See taste-skill Pro →

Linear Card Component Styles

Rendered on the Linear canvas

Card specs

Copy-paste code

More Linear

Same component, other brands