A native drawing app, dressed in slate.
Five greys, one steel-blue accent, and a single tactile gesture: every control is either a raised pad or a recessed groove. The canvas is the brand — chrome stays quiet so color decisions read true.
Brand
An angled pen nib in white with a steel-blue inset, set on a deep blue-grey gradient, with a small cluster of dots — the ink trail. The tool the app is built around, painted on the app's own palette.
The pen, the slate, the ink.
The icon background uses the same dark slate the app
chrome lives on. The nib is the brightest white the
system permits — the same white reserved for the knob
tick mark. The steel-blue band on the nib is exactly
accent (#4874B0). Six ink
drops to the right echo the dotted-ring knob pattern.
Source: Resources/InkForge.iconset/.
App icon · iconset sizes
Ten sizes ship
The InkForge.iconset bundle ships every Apple-required
size pair: 16, 16@2x,
32, 32@2x,
128, 128@2x,
256, 256@2x,
512, 512@2x — built once at 1024px
and downsampled by the build-dmg.sh script.
Color
Studio Slate. A five-stop grey hierarchy, each ~4 ppt lighter
than the last. Steel blue #4874B0 is the only hue
in chrome — reserved for active state, focus, and selection.
Surfaces
Text
Accent
Border
Typography
System font throughout (-apple-system / SF Pro).
Numeric readouts use the monospaced-digit variant so values don't
jitter as they tick.
Spacing
Stack spacing is intentionally tight — drawing apps fight for canvas pixels.
Radius
Four steps. Smaller elements take smaller radii.
Neumorphism
The load-bearing design idea. Three recipes, applied everywhere. Raised pads are pressable. Recessed grooves contain values. Glowing accent is the single visual reward — applied only to the currently-active tool.
shadow-drop @ 35%
on
#1A1A1Caccent-glow @ 35%
Toolbar buttons
36×36, radius 8, raised by default. The active tool fills with steel blue and a 6px glow. Mutually exclusive across the tool group — selecting one demotes the previous.
States
Icon catalogue
Color swatch
Pill-radius raised pad with an inner accent ring. Used in the color-history strip and the active-color indicator.
Vertical neumorphic slider
The signature control of the left sidebar — brush size and opacity. Recessed track, raised round handle, steel-blue fill below the handle.
Knob
Circular drag control with a steel-blue arc showing position and a mono-digit value at the center. Used in the brush settings popover.
Anatomy
20 perimeter dots span a 240° arc from the bottom-left. Dots
below the current value light up in steel blue with a 2.5px
outer glow; dots above stay dim graphite. The white tick is
a single 2.2px round-capped line from center to rim — it's
the only piece of pure white in the entire control. The body
is a raised radial gradient (light from upper-left), ringed
by a faint accent-soft hairline.
Layer panel
Sits on panel-alt — one step lighter than the
toolbar so nested context reads. Selected row gets a steel-blue
15% tint plus a 2px accent inset on the left edge.
Popover
Floating panel-alt rectangle, radius 8, drop shadow
(0, -4) blur 12 black @ 40%. Anchors to the originating toolbar
button.
HSB color wheel
The color picker in the right sidebar. A full hue ring wraps an inner saturation × brightness square. Two markers — one on the ring (hue), one on the square (S/B). Below: three sliders for precise H/S/B entry, a hex field, and the harmony palette.
Status bar
A thin panel strip at the bottom of the window —
tiny 10px caption text, items separated by 24px gaps, never
more than three columns wide.
Doing it wrong
Things that will look out of place in InkForge.
Use saturated UI color other than steel blue. No green "save", no red "delete". Use grey + a text label.
Flatten buttons. Removing the shadow breaks the neumorphic contract — the user can no longer tell what's pressable.
Use pure white text or surfaces. The canvas often is white. Chrome must stay dimmer so artwork wins the contrast fight.
Add hover-only affordances. This is a stylus-first app. Hover is unreliable on tablets.
Let the canvas be the only place color lives. The whole point of the slate palette is to keep the user's color decisions true.
Reach for the steel-blue glow when — and only when — something is active. It's the single visual reward in the app.