Free Stencil Maker

Free Stencil Maker

Design System

Living documentation of our visual components. Every element on this page uses the same CSS that powers the app.

Colors

Brand palette defined in tailwind.config.js. Use these tokens — never raw hex values.

dark

100

#0f0f0f

200

#0a0a0a

300

#171717

400

#1a1a1a

500

#262626

beige

100

#fafafa

200

#e5e5e5

300

#a3a3a3

400

#737373

500

#525252

yellow

100

#FFF3CC

200

#FFE799

300

#FFDB66

400

#FFD700

500

#F5B041

600

#CC9900

700

#997300

800

#664D00

900

#332600

blue

100

#D1D0E6

200

#A3A1CD

300

#7472B4

400

#3626A6

500

#2C2E83

mint

100

#E8F7F1

200

#D1F0E3

300

#89CBA0

400

#5DD39E

500

#008080

red

100

#F5D1D6

200

#EBA3AD

300

#E17584

400

#A41D30

500

#821625

grey

100

#F0F0F0

200

#D3D3D3

300

#B0B0B0

500

#808080

700

#505050

900

#202020

Typography

Quicksand font with responsive clamp-based heading sizes. Use text-h1 through text-h6 utility classes.

text-h1

Heading One

text-h2

Heading Two

text-h3

Heading Three

text-h4

Heading Four

text-h5
Heading Five
text-h6
Heading Six

Body text

Free Stencil Maker transforms any image into multi-layer stencils ready for spray paint, screen printing, or laser cutting. Upload, adjust, and export.

Secondary text

Smaller body copy for descriptions, captions, and supporting information. Uses beige-300 for visual hierarchy against beige-200 body text.

Buttons

Three semantic variants (primary, secondary, tertiary) plus a brand CTA. Each comes in sm, md, and lg sizes.

Primary

class="btn btn-primary btn-md"

Secondary

class="btn btn-secondary btn-md"

Tertiary

class="btn btn-tertiary btn-md"

Brand CTA

class="btn-brand"

Range Sliders

Three variants standardised across the app. All share the same yellow-400 thumb with CSS variable overrides for tool-specific colors.

CSS Variable API

Override these on any slider via :style for per-instance customisation.

--track-colorTrack background (default: white/10%)
--track-hover-colorTrack hover bg
--thumb-colorThumb fill (default: #FFD700)

Default

128

14px track, 22px thumb. Primary controls like thresholds, contrast, brightness.

Compact

50

6px track, 16px thumb. Flyouts, floating panels, toolbar controls.

Labeled

Thickness

28px pill track with overlaid label. Used in BridgePatternPicker.

Tool Colors

Custom Track (CSS Var)

Track turns white (valid) — drag past 200 to see.

Hint Pulse Animation

Pulses 3x then stops. Used for new-project onboarding to draw attention to threshold slider.

Where Each Variant Is Used

Default

  • StencilLayers — threshold, contrast, brightness, smoothing
  • TextOverlayControls — font size, rotation
  • ExportPanel — zoom, overlap

Compact

  • ImageToolbar — pen size, eraser size
  • MiniMapOverlay — zoom, overlap

Labeled

  • BridgePatternPicker — thickness, spacing, rotation

Form Inputs

Standard input styling for dark theme. Use bg-white/[0.04] with border-white/[0.08] as the canonical pattern.

Cards

Standard card containers. Use bg-white/[0.02] with border-white/[0.06] and rounded-xl as the base pattern.

Base Card

Standard card with image area and content padding.

Highlighted Card

Yellow glow treatment for featured or premium items.

Interactive Card

With hover overlay and group transitions.

Spacing & Layout

Consistent spacing tokens and container patterns used across pages.

Container Widths

max-w-7xl
Main content
max-w-6xl
Secondary content
max-w-5xl
Detail pages
max-w-3xl
Narrow content
max-w-2xl
Forms

Page Padding

px-4 sm:px-6 lg:px-8

Section Gaps

gap-5Card grids
space-y-16Between sections
mb-8Section header
p-5Card padding
gap-2.5Tight groups

Loading States

Spinner and skeleton shimmer for async operations.

AppSpinner size="lg"

class="skeleton-shimmer"