Design & Media

Outline play

A line-art aesthetic where almost everything is stroked, not filled — outlined text, hollow buttons, line-drawn cards and icons. It feels light, technical, and architectural, and fills in with color only on hover. Built with borders and text-stroke.

Start here

Lines, not fills

Outline play uses thin, confident strokes instead of solid shapes — like a technical drawing or a coloring book before the color. The result is airy and modern, and it makes hover/active states feel meaningful: the line fills in.

Stroked everything

Buttons, cards, chips, and icons are just borders — transparent inside.

Outline type

-webkit-text-stroke draws hollow letters for big, graphic headlines.

Fill on interaction

Hover or focus fills the outline with color — a clear, satisfying state change.

Light & airy

No heavy blocks of color; the page breathes and feels refined.

Component 1

Outline text

Hollow letters drawn with -webkit-text-stroke and a transparent fill. Mix outlined and solid words for contrast.

Draw
It
CSS
.outline-text {
  color: transparent;
  -webkit-text-stroke: 2px #4338ca;   /* the outline */
  font-weight: 900;
}
.filled-text { color: #4338ca; -webkit-text-stroke: 2px #4338ca; }  /* solid for contrast */
Component 2

Outline buttons

Transparent with a 2px border, they fill with color on hover — the signature line-art interaction. Hover them:

CSS
.btn {
  background: transparent;
  border: 2px solid #4338ca;
  color: #4338ca;
  transition: all .2s;
}
.btn:hover { background: #4338ca; color: #fff; }   /* fill on hover */
Component 3

Outline card, chips & divider

A line-drawn card with an outlined icon box, hollow chips, and a labelled rule — all strokes, no fills.

Drawn, not filled

Everything here is a border. Color shows up only where you interact.

Learn more
DesignLine artMinimal
Section
CSS
.card { background: transparent; border: 2px solid #4338ca; border-radius: 16px; }
.icon-box { border: 2px solid #4338ca; border-radius: 12px; }   /* hollow icon frame */
.chip { border: 1.5px solid #4338ca; border-radius: 999px; }    /* outline chip */

/* a labelled rule */
.divider { display: flex; align-items: center; gap: 14px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 2px; background: #4338ca; }
Note: -webkit-text-stroke works in all modern browsers but isn't fully standard — keep outline text at large sizes (small outlined text is hard to read) and make sure the fill state has enough contrast.
In practice

Do & don't

Do

  • Keep stroke widths consistent
  • Fill outlines on hover/focus
  • Use outline text only at large sizes
  • Pair with lots of whitespace
  • Use outline (line-weight) icons to match

Don't

  • Set body paragraphs in outline text
  • Mix five different border widths
  • Forget a clear focus state for keyboards
  • Use low-contrast outline colors
  • Mix filled and outline icons randomly
Keep going: pair with Minimalism, Icons, and CSS Recipes.
Recap

The takeaway

Outline play = strokes instead of fills — border for shapes, -webkit-text-stroke for hollow type, line-weight icons, and a satisfying fill-on-hover. Keep strokes consistent, type large, and give it room to breathe.