Colors
Surfaces
Background
#faf7f0
Surface
#f1e9d6
Raised
#faf7f0
Recessed
#e6d8b8
Screen
#e3e4dd
Screen Shade
#ced0c3
Text
Foreground
#331e0b
Muted
#94804d
Subtle
#b8a888
Accent
#d53a42
Link
#6a324f
Code
#64ff8b
Button variants
Yellow
#ecb94b
Pink
#ffcaba
Border
#c8bb9a
Border strong
#85896c
Typography
Asset Studio
Asset Studio v2.2
Create and export royalty-free assets
Choose a base shape, then customise with colors and filters.
Press the shuffle button to see the range of assets it can export.
Uppercase Label / Section Header
// CODE SAMPLE — Source Code Pro
const preset = generateAsset({
type: 'grid',
size: 64,
colors: ['#faf7f0', '#e6d8b8'],
});
Spacing
space-1
4px
space-2
8px
space-4
16px
space-6
24px
space-8
32px
Window Chrome
Pattern Preview
Export Options
Toggle Group
Single select
Multi select
With disabled
Slider
Size
64
Rotation
45
Opacity
80%
Number Input
A value
B value
C value
Label Box
Control groups with labels
Size
Rotation
Mode
Pattern Button
Click to select a template
Input
Badge
MIT
NEW
BETA
v2.2.1
Exported
Processing
Failed
Info
Card
NEW
TOOL
Asset Studio
Create and export royalty-free assets for any project.
Export ready
asset-grid.svg · 2.4 KB
Just now
Accordion
Choose a template from the asset grid, then use the style controls to customise it. All presets export at full resolution by default.
You can export as Inline SVG, JPEG or PNG, JPEG/PNG tile, standalone SVG file, or as a CSS background-image snippet ready to paste.
Yes. All assets exported by this tool are completely free to use in personal and commercial projects without attribution.