Contemporary screen interpretation
Filigree
A reference to delicate ornamental metalwork made from fine threads. In screen graphics, the useful feature is a coherent network of fine lines around a clear central subject.
What defines it
- Fine interlaced lines
- Delicate border
- Ornamental rhythm
What it asks of the project
- Reading & layout
- Open spacing for a slower reading pace
- Visual emphasis
- quiet · ornamental
- Implementation
- Custom artwork or lettering is central to the full expression.
- Images & assets
- Intricate vector ornament needs attention at multiple display sizes.
Color in use
A craft catalog with detailed object photographs and a fine ornamental heading frame.
Accent labelOpaque text/surface: 19.65:1 · Text/accent: 4.89:1.
These pairs meet the normal-text minimum; check other surfaces separately.
Context
Notice the fine ornamental lines framing the titles. These are graphic interpretations of ornamental craft; use the line rhythm without treating every flourish as literal metalwork.
View collected reference imagesBuild it
- Use vector artwork for clean scaling
- Keep detail away from small text
- Reduce border complexity on narrow screens
Typography
Pair ornate borders with a restrained serif. Do not add a second layer of flourishes to every letter.
Watch out for
Calling any flourish filigree or using hairline decoration as an essential control boundary.
A working interpretation
Original CSS composition with the same content and controls used in every direction. Image-led styles need additional artwork for their full expression.
Open the full example →Hand it to an agent
Point your agent at this guide, or save the files below.
Check the result
- Confirm: use vector artwork for clean scaling.
- Confirm: keep detail away from small text.
- Confirm: reduce border complexity on narrow screens.
- Review specifically for: Calling any flourish filigree or using hairline decoration as an essential control boundary.