A LIBRARY OF VISUAL STYLES, FOR AI
A visual stylelibrary for AI
01 — BASIC
Basic elements
- ColorThe colors themselves and how they are combined.
- ShapeThe form of individual motifs and elements.
- CompositionHow the whole frame is cut and where the eye is led.
- LayoutHow multiple elements are arranged relative to each other.
- MaterialWhat it is made of, and what it is drawn or made with.
- TextureHow surfaces look and how they take light.
02 — FIELDS
Fields
- ArtStyles that come from fine art: painting, printmaking and art movements.
- Graphic designStyles of posters, editorial and brand design, and how type is handled.
- UI/UXVisual styles for screen interfaces.
- 3DCGRendering and modeling styles in 3D computer graphics.
- MotionStyles of video and motion graphics, and elements specific to video. Motion is shown as a representative frame and described in words; some samples loop.
- Generative artStyles of works generated by algorithms and code.
Gallery 291 styles
- ▶style: bioluminescence001BioluminescenceArt · MotionJellyfish and plankton drifting in the dark deep sea, glowing from inside translucent bodies.
- ▶style: cellular-automata002Cellular automataArt · Design · MotionEach cell in a grid takes its next state from its neighbours, and repeating the rule builds the pattern.
- ▶style: chaos-maps003Chaos mapsArt · Design · MotionHow repeating a simple formula moves from order to chaos, drawn as bifurcation and cobweb diagrams.
- ▶style: chladni-figures004Chladni figuresArt · MotionFine particles gather on the still nodal lines of a vibrating plate, forming symmetric patterns.
- ▶style: circle-packing005Circle packingArt · Design · MotionCircles of many sizes touch one another and fill the gaps.
- ▶style: cloth-mesh006Cloth & meshArt · 3DCG · MotionA grid of points joined by springs that sags and billows like cloth under wind and weight.
- style: color-contrast-black-and-white007Black and whiteArt · Design · UI/UX · 3DCGOnly black and white, with no in-between tones.
- style: color-contrast-high008High contrastArt · Design · UI/UX · 3DCGDark colors on a light background create a large value difference.
- style: color-contrast-low009Low contrastArt · Design · UI/UX · 3DCGOnly colors of similar lightness are used, keeping light-dark differences small.
- style: color-gradient-bokashi010BokashiArt · Design · UI/UX · 3DCGA single soft band of color fades out from one edge.
- style: color-gradient-duotone011DuotoneArt · Design · UI/UX · 3DCGEvery tone is a mix of just two inks, one light and one dark.
- style: color-gradient-flat012Flat colorArt · Design · UI/UX · 3DCGNo color transitions; every area is one solid color.
- style: color-gradient-linear013Linear gradientArt · Design · UI/UX · 3DCGThe background shifts smoothly in one straight direction.
- style: color-gradient-mesh014Mesh gradientArt · Design · UI/UX · 3DCGSeveral colors blend softly in many directions at once.
- style: color-gradient-radial015Radial gradientArt · Design · UI/UX · 3DCGColor spreads outward in circles from a single point.
- ⇆ Huestyle: color-harmony-analogous016AnalogousArt · Design · UI/UX · 3DCGNeighboring teal, blue and blue-violet hues from one segment of the color wheel.
- ⇆ Huestyle: color-harmony-complementary017ComplementaryArt · Design · UI/UX · 3DCGBlue and orange, directly opposite on the color wheel, set warm against cool.
- ⇆ Huestyle: color-harmony-monochromatic018MonochromaticArt · Design · UI/UX · 3DCGOne blue hue, varied only in lightness and saturation.
- style: color-harmony-primary-colors019Primary colorsArt · Design · UI/UX · 3DCGThe traditional painting primaries—red, yellow and blue—on a pale warm neutral.
- ⇆ Huestyle: color-harmony-split-complementary020Split complementaryArt · Design · UI/UX · 3DCGBlue paired with red-orange and yellow-green, either side of its complement.
- ⇆ Huestyle: color-harmony-triadic021TriadicArt · Design · UI/UX · 3DCGBlue, green and pink spaced evenly around the color wheel.
- style: color-proportion-60-30-1002260/30/10Art · Design · UI/UXA 60% base, 30% main and 10% accent split.
- style: color-proportion-70-25-502370/25/5Art · Design · UI/UXThe classic split: 70% base, 25% main, 5% accent.
- style: color-proportion-dominant-background024Dominant backgroundArt · Design · UI/UXThe background color fills almost the whole frame; other colors are minimal.