ACRYLICS / DESIGN SYSTEM 0.6

Acrylics design system: COLOR
WITH A
HISTORY.

Billboard type. Loaded brushstrokes. Tactile controls.
A visual language built one coat at a time.

Understand the system Use the system ↗

MATERIAL / 01

ONE
MORE
COAT.

Paint carries the expression.
Structure carries the meaning.BRUSH + BLOT + GROUND

IMPERFECT MARKS.PRECISE
INTENT.ACRYLICS / 0.6

PAINT HAS A MEMORYPRESSURE HAS A SHAPEREADING HAS A GROUND

01 / CORE CONCEPTS

THE MARK
REMEMBERS.

Acrylics treats an interface as a sequence of material decisions. Pressure gives a mark its silhouette. Coverage lets the ground show through. A new coat changes what came before.

I1 / A GESTURE, HELD STILL

Imperfection has a cause.

A broad middle suggests a press. Fine tracks suggest separated bristles. Broken ends suggest a lift. Use a stable seed so those marks belong to the object and survive every redraw.

I2 / COLOR HAS A HISTORY

A coat meets a coat.

Wet pigments can mute one another; a dry ground remains beneath a new layer. Pigment mixing and transparent overlays are distinct operations with different results.

I3 / EXPRESSION HAS A BOUNDARY

Keep a place to read.

Billboard type establishes the idea. Paint establishes emphasis. Opaque surfaces, aligned labels, and predictable controls carry the information.

THE IDENTITY TEST

Change the palette and it should still feel like Acrylics: directional strokes, overlapping coats, a quiet reading surface, and tactile controls. Color alone cannot carry the system.

02 / OBJECTS & MATHEMATICS

A STROKE.
A BLOT. A LAYER.

Start with a finite vocabulary, then define the variables within each object. These are reproducible visual models; the examples below expose the choices that shape them.

Four objects. Different responsibilities.

Material vocabulary / what each object is allowed to do
Object	Definition	Constraint
Stroke	A centerline plus a width profile, pigment, and bristle coverage.	Directional emphasis. Pressure changes its silhouette; coverage changes its transparency.
Blot	A compact, irregular deposit with a pooled edge.	A small signal. Pair it with a label or symbol.
Ground	An opaque surface paired with an ink token.	Supports reading and controls. Its contrast cannot depend on the paint behind it.
Layer	An ordered composition of marks around a ground.	Groups related content. Ordering and blend operation are explicit decisions.

PaintMark = { shape, pressure, color } · shape ∈ { stroke, blot } · pressure ∈ { swell, drag, loaded }. The pressure preset applies to strokes. The component always remains decorative.

Selection

01 / THE STROKE

A direction, with an edge.

Underlines, selected navigation, and section emphasis. Let the ends break up; keep the label on a legible ground.

<PaintMark shape="stroke" />

02 / THE BLOT

A mark, with a little weight.

Small signals and selected controls. Pair the mark with a word or icon so color never has to explain the state alone.

<PaintMark shape="blot" />

Dry ground

03 / THE LAYER

An overlap, with a purpose.

Group related content. Let coats meet around the perimeter while the content sits on an opaque surface.

<SurfaceCard layered />

BRUSH GEOMETRY / PRESSURE → WIDTH

PRESS. DRAG. LIFT.

A brush spreads as the hand presses, then narrows as it lifts. Shape that gesture first. Add broken coverage and bristle tracks afterward.

01 / Fixed widthTexture alone

02 / Pressure-shaped widthTouch → press → lift

Same pigment and texture seed. Only the width profile changes.

w(t) = w₀ + (w₁ − w₀) · e^{−(t − μ)² / (2σ²)}

t: distance along the stroke · μ: where pressure peaks · σ: how broadly it spreads.

Peak width 132 units

Peak position 44%

Pressure spread 0.20

Width uses the 640 × 160 SVG coordinate space; w₀ = 8. A Gaussian is a useful gesture approximation. A live pen supplies its own pressure.

<PaintMark pressure="swell" />

Swell presses through the middle. Drag presses early and trails off. Use a broad loaded coat over an opaque ground when a label needs a steady reading area.

COLOR BEHAVIOR / PIGMENT MIXING

Let the color get complicated.

Vermilion and forest green mute toward brown. Ultramarine and ochre move toward green. A pigment-inspired mix behaves differently from a digital overlay.

Pigment B in the mix 50%

The slider compares the current scheme’s two pigments. It changes these examples; semantic UI colors stay legible.

Pigment mix#4B3E34

Digital multiply#752019

Spectral approximation versus a translucent multiply coat in sRGB. Neither predicts a particular brand of physical paint.

Width is one variable.

w(t) = w₀ + (w₁ − w₀) · exp(−(t − μ)² / 2σ²)

The default swell spans 8–132 SVG units, with μ = 0.44 and σ = 0.20. The live comparison above keeps the pigment and seed fixed so the silhouette is the variable you see.

Coverage is another.

α(m) = 1 − exp(−2.8m)

In the workshop, m is accumulated paint deposit. More deposit hides more ground. Brush load falls with distance; bristle tracks and canvas grain decide where paint lands.

coverage(x, y) = load × bristle mask × grain

Coverage varies across a mark. Use a stable seed and keep its texture still; change the coat in response to a deliberate action.

Explore the brush & geometry workshop ↗

03 / STYLE GUIDE

GIVE THE
MATERIAL RULES.

The material model describes what paint can do. The style guide chooses where to use it: paired colors, a type hierarchy, measured spacing, and limits on ornament.

03.1 / COLOR & SEMANTIC ROLES

LAY THE GROUND.
MIX THE REST.

A scheme changes the whole vocabulary: ground, ink, action, focus, and supporting pigments. Components keep their structure.

Warm paper, vermilion, and forest. The original street-poster palette.

Choose a scheme to see it applied to this entire page.

#D63228Raw pigment A

#174C3CRaw pigment B

Ground

--ac-field#F3EEDF

The page canvas. Leave room between marks.

Surface

--ac-surface#FFFAF0

An opaque, readable ground for content.

Ink

--ac-ink#202820

Headings, body copy, labels, and boundaries.

Action

--ac-accent#B92820

A dense coat for the primary action.

Counterpoint

--ac-secondary#174C3C

Secondary emphasis and supporting color.

Highlight

--ac-highlight#E2B72D

An underline, small signal, or annotation.

Raw pigment ≠ action color.

The action coat is adjusted for its label contrast. Its paired --ac-on-accent token changes with the scheme. Keep decorative mixtures out of text and focus roles.

03.2 / TYPOGRAPHY, GEOMETRY & MOTION

LOUD HEADLINES.
ROOM TO READ.

Tall market billboards for display. A human body face for reading. Monospaced captions for the system’s measurements.

DISPLAY / ANTON

Aa
LEAVE A MARK.

Short statements. Tight leading. Let the headline take up space, then give the next element a pause.

--ac-display · 0.99–1.08 line-height

BODY / HIND MADURAI

The paint can be messy.
The reading should feel easy.

Use a 16–18px reading size and a generous line height. Avoid putting body copy across changing pigments.

--ac-body · 1.5–1.65 line-height

METADATA / IBM PLEX MONO

COAT 02
LOAD: 80%
SEED: 17

Use for token values and small labels. Essential instructions stay in the body face, at a readable size.

--ac-mono · labels & values

A spacing rhythm, not random placement.

4

8

12

16

24

32

48

64

Use the 4px base unit. Let 24–32px separate component groups; 48–64px give sections breathing room.

Precise boxes. Irregular paint.

4pxsurface

8pxcontrol

22pxcorner

Keep hit areas rectangular and controls at least 44px high. Roughness belongs to the painted mask, not the target.

Motion follows the hand.

Use a 120ms press and a 180ms settle. A control lifts 2px on hover and sinks 3px on press. Keep texture still. Reduced-motion preferences remove these transitions.

03.3 / USAGE RULES

MAKE A MESS.
KEEP THE MEANING.

Acrylics is a system of material roles. Consistency comes from what a mark means and how a component behaves.

Paint has a job.

Use a stroke for selection, a blot for a discrete mark, and a dry surface for reading. Decoration follows hierarchy.

Let colors meet.

Overlaps can produce a third color. Keep critical text on an opaque ground or a tested action color.

Keep the accident stable.

A mark may look irregular. It must hold its position and texture between renders; interaction must not cause visual noise.

Give every state a name.

Color supports a label, icon, or pressed state. A red blot alone is not an error message.

04 / COMPONENTS & INTERACTION STATES

SAME PAINT.
DIFFERENT JOBS.

Try the controls. These are working components with labels, focus, pressed states, and feedback—not images of an interface.

Actions

Button

One primary action. A quieter secondary. A clear disabled state.

RestHover: lift 2pxPress: sink 3pxFocus: ring

Apply color previews a local confirmation.

Selection

ChoiceChip + blot

A stroke marks the active choice. A blot gives a toggle a clear, named state.

Stroke: directional emphasis and selection.

The toggle is unselected.

Input & validation

Field

Inset controls sit on a dry surface. Errors explain how to recover.

Feedback

Status + disclosure

State is a color, a symbol, and a sentence. It remains understandable in grayscale.

Ready to use Label contrast and focus are part of the component.

Needs attention Explain the issue and the next action.

When should paint stay quiet?

In long text, dense tables, and error recovery. Keep ornament at the edges and let spacing and labels do the work.

SURFACE / DEFAULT

Give content a dry ground.

An opaque fill makes a card readable across every scheme. The body copy gets space; the component boundary stays crisp.

Surface / 4px corner

SURFACE / LAYERED

Build depth around the edges.

Brushwork groups and emphasizes. Layers live behind the card, leaving its reading surface and interactive controls clear.

Five reusable Astro primitives:

Button · ChoiceChip · PaintMark · SurfaceCard · Dialog

Fields, status rows, badges, and disclosures use native HTML plus the same tokens.

05 / INFORMATION PATTERNS

COMPOSE
THE MEANING.

A component is a part. A pattern gives those parts a reading order. Use a bold statement to frame a decision; use aligned rows when people need to compare.

PATTERN / EDITORIAL SUMMARY

THREE SCHEMES.
ONE SYSTEM.

Market, Cobalt, and After hours share the same material vocabulary and component behavior. Choose a ground before adding a mark.

Compare the schemes ↗

Read in sequence: context → headline → explanation → one next action. One painted accent is enough to establish emphasis.

Pattern / the same information as a comparison
Scheme	Ground	Shared rules
Market	Warm paper	✓ Same components
Cobalt	Cool paper	✓ Same components
After hours	Dark green	✓ Same components

Why is the paint quieter here?

Rows need stable alignment and clear boundaries. Keep paint at the group level; do not give every cell a competing brushstroke.

Compare across columns: identity → relevant difference → common rule. Labels carry the meaning in every color scheme.

Density changes the treatment.

In a hero, let one mark take space. In a card, keep it at the perimeter. In a table, keep the reading surface still. Information density governs how much expression the layout can hold.

06 / BUILD WITH IT

PUT IT
TO WORK.

Use the role tokens first. Add a component. Place the paint where it helps establish emphasis or state.

Start with a scheme.

Wrap your interface in .ac-site, load the stylesheet and the three typefaces, then apply the selected scheme’s custom properties. The stylesheet supplies Market as its default.

.ac-site {
  --ac-field: #F3EEDF;
  --ac-surface: #FFFAF0;
  --ac-ink: #202820;
  --ac-accent: #B92820;
  --ac-on-accent: #FFFAF0;
}

Tokens JSON ↓Stylesheet ↓

Compose a surface.

The example uses the same components shown above. Keep paint decorative with aria-hidden; expose labels and state on the real control.

<SurfaceCard title="A dry ground" layered>
  <p>Let the paint frame the content.</p>
  <Button variant="paint">Apply color</Button>
</SurfaceCard>

Astro components live in src/components/acrylics/. The workshop is an optional material reference; the component page does not load its canvas engine.

Scheme and component examples reset when you reload. No account, collection, contact form, or visitor storage is involved.

Acrylics design system: COLORWITH AHISTORY.

THE MARKREMEMBERS.

Imperfection has a cause.

A coat meets a coat.

Keep a place to read.

A STROKE.A BLOT. A LAYER.

Four objects. Different responsibilities.

A direction, with an edge.

A mark, with a little weight.

An overlap, with a purpose.

PRESS. DRAG. LIFT.

Let the color get complicated.

Width is one variable.

Coverage is another.

GIVE THEMATERIAL RULES.

LAY THE GROUND.MIX THE REST.

Ground

Surface

Ink

Action

Counterpoint

Highlight

LOUD HEADLINES.ROOM TO READ.

A spacing rhythm, not random placement.

Precise boxes. Irregular paint.

MAKE A MESS.KEEP THE MEANING.

Paint has a job.

Let colors meet.

Keep the accident stable.

Give every state a name.

SAME PAINT.DIFFERENT JOBS.

Actions

Selection

Input & validation

Feedback

Give content a dry ground.

Build depth around the edges.

COMPOSETHE MEANING.

THREE SCHEMES.ONE SYSTEM.

PUT ITTO WORK.

Start with a scheme.

Compose a surface.

Acrylics design system: COLOR
WITH A
HISTORY.

THE MARK
REMEMBERS.

A STROKE.
A BLOT. A LAYER.

GIVE THE
MATERIAL RULES.

LAY THE GROUND.
MIX THE REST.

LOUD HEADLINES.
ROOM TO READ.

MAKE A MESS.
KEEP THE MEANING.

SAME PAINT.
DIFFERENT JOBS.

COMPOSE
THE MEANING.

THREE SCHEMES.
ONE SYSTEM.

PUT IT
TO WORK.