# LineArt - **Category:** Media (`media`) - **Slug:** `media/line-art` - **Status:** stable - **Platforms:** web - **Import:** `import { LineArt } from "@protocore/pds";` - **Docs:** https://pds.protocore.io/components/media/line-art > The house generative imagery — hundreds of thin currentColor strokes. ## The house imagery **LineArt** is Protocore's illustration language: no fills, no photography, no gradients — light and volume implied purely by **line density**. Every field is hundreds of sub-pixel strokes drawn at low alpha with `stroke="currentColor"`, so the whole field inverts automatically with the theme (the `

{variant}

); } export default function Demo() { return (

{BANDS.map((v) => ( ))}

); } ``` ### Centered fields Square, volumetric fields rendered `cover` so they fill their frame from the center — wireframe spheres, stacked discs, orbits, lattices. Use these where the composition has a clear focal point (a card, a feature tile, a spot illustration). ```tsx import { LineArt, Text, type LineArtVariant } from "@protocore/pds"; const CENTERED: LineArtVariant[] = [ "sphere", "globe", "cylinder", "dome", "torus", "cube", "gyro", "shell", "orbit", "atom", "spiral", "helix", "moire", "ripple", "star4", "flare", "swaps", "quincunx", "corners4", "nexus", "burst", "rosette", "lattice", "nodes", ]; function Field({ variant }: { variant: LineArtVariant }) { return (

{variant}

); } export default function Demo() { return (

{CENTERED.map((v) => ( ))}

); } ``` ## Do & don't **Do** - Set an explicit height on the wrapper and let the field fill it edge to edge. - Control tint by setting `color` on the `` element — `--pds-color-muted` for backdrops, `--pds-accent` for a hero. - Reserve `bold` for large hero backdrops that need presence. - Give text over a field a surface or scrim so it stays legible. **Don't** - Don't stack multiple LineArt fields in one viewport — one field, one moment. - Don't raise the opacity past the designed cap; density, not alpha, carries the image. - Don't lay unscrimmed body copy directly over a dense centered field. - Don't treat it as a data visual — for real data use Sparkline or the charts family. ## Accessibility **Notes** - The root `