A useful little tool
A short explanation of the problem this solves and who it helps.
Sample project · content placeholderThe workshop / design system / 01
A few good
ingredients.
A considered home for things made with curiosity.
These are the
colors, type, and small details that make it feel like srcery.
Clear enough to get out of the way.
Curious enough to feel like me.
01 / Identity
A personal software factory.
Thoughtful tools, ongoing experiments, and musings from the process. A little technical. A little magical. Always human.
srcery.computer
Craft over spectacle
Let the work carry the page. Use space, precise type, and fine rules to give it structure.
A little strangeness
Save the playful flourishes for a headline, an illustration, or a well-placed spark.
A person is here
Write in the first person. Be direct, specific, and comfortable with work in progress.
Keep the mark at least 20px tall, with half its width clear on every side. Keep the wordmark in Inter; let Fraunces bring personality to the surrounding page.
02 / Color
Soft color. Plum foundations.
Lilac leads; rose adds warmth. The neutrals shift from lavender paper to deep plum at night. Accent colors always come with a matching text color.
AaCanvas
AaSurface
AaInk
AaMuted
AaLilac
AaRose
AaAction
AaFocus
Canvas / most of the pageLilacRoseInk
Use the canvas generously. Pastels belong in contained moments; use the accent for actions. Status colors communicate state and always include a text label.
03 / Typography
Clear thinking. A curious voice.
Inter is the everyday voice: navigation, controls, project details, and long-form reading. Fraunces brings a little warmth and eccentricity to headlines and short accents.
Inter / the foundation
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & @ → ↗
Fraunces / the personality
Aa
Ideas into things.
A little srcery.
Try the voice
A little craft. A little srcery.
A specimen for exploration. The site uses the default 450 / 30 pairing.
Display · fluid 44–84 · --text-display
My software workshop.
Heading · fluid 28–40 · --text-heading
More from the workshop.
Lead · 18 · --text-lead
A personal software factory.
Body · 16 · --text-body
Small, considered software that earns its place.
Small · 14 · --text-small
Mac · In progress
Five text roles carry the homepage. The wordmark and the large footer signature are deliberate identity exceptions. Primary reading text uses full-strength ink; muted text is for secondary context.
Compare the headline treatments
The homepage uses whole-headline Fraunces at weight 450 and softness 30. It gives the workshop a distinct voice while Inter handles reading. The same copy is shown below in Inter and the earlier mixed treatment for comparison.
Selected · Fraunces
My software
workshop.
Alternative · Inter
My software
workshop.
Earlier approach · Mixed
My software
workshop.
04 / Space & shape
Room to breathe. Enough structure.
A 4px base rhythm keeps small details related. Larger gaps separate ideas. Layouts stretch comfortably and collapse into a single column on small screens.
4px
space-1
8px
space-2
12px
space-3
16px
space-4
24px
space-6
32px
space-8
48px
space-12
64px
space-16
80px
space-20
96px
space-24
6px
Fields & small details
12px
Buttons & grouped surfaces
24px
Occasional feature panels
Full round
Status & theme controls
Page87rem max · fluid side gutters
Reading65 characters · 1.85 line height
Sections48–80px · scale with the viewport
05 / Actions
A clear next step.
One primary action per area. Secondary actions have an outline; quiet actions sit back. Links navigate. Buttons change something on the page.
Hover, press, or use Tab to explore the states. Disabled controls stay visibly inactive.
Hover · color deepensPressed · 1px insetFocus · 3px rose ringTouch · 44px minimum
06 / Forms & feedback
Helpful, even at the edges.
Labels stay visible. Hints explain what helps. Errors say how to fix the problem. Use text alongside color, and keep feedback near the action that caused it.
Field states
Enter a full URL, like https://example.com.
Disabled fields explain why they’re unavailable.
07 / Projects & status
Let the work do the talking.
A clear name, a useful description, and an honest status. Use the same structure for tools, experiments, and small things that don’t fit a category yet.
An idea taking shape
A small experiment, with room to become something else.
Sample project · content placeholderFeatured project pattern
An editorial feature uses real product imagery, current platforms, maturity, and an honest destination.
Cauldron
A little order in the kitchen.
Save a recipe, plan the week, and gather what you need. Cauldron keeps the small steps of feeding yourself in one place.
Explore CauldronIn alpha. Tester applications are not open yet.
Platform finder and compact directory
This is the real directory pattern. Submitting it opens the homepage results; platform links also work without JavaScript.
More from the workshop.
The other corners of the factory. Browse these 6 projects by platform.
6 of 6 projects. Featured apps above are always shown.
Scroll
iPhone
A terminal for iPhone, with SSH, mosh, and a native picker for herdr sessions.
In progress
Still in the workshop
Spells
Web
A self-hosted issue tracker with quick capture, project boards, and agent collaboration.
In progress
Still in the workshop
Transmute
iPhone · Apple Watch · Mac
A workout planner and training log, with plans built using Apple Intelligence.
In progress
Visit site for Transmute
Kyo
iPhone · iPad · Apple Watch
Events, tasks, habits, and memos. A daily planner that shows one day at a time.
Beta
Visit site for Kyo
Tidy
Mac
A native file organizer for Mac. Describe the order you want, and a local AI model makes the plan.
Beta
Visit site for Tidy
Portly
Mac
A menu bar app that shows your local dev servers and kills them in one click.
Released
Visit site for Portly
LiveIn progressExploringArchivedNeeds attentionUnavailable
08 / Writing
A place for the process.
Fraunces opens the door. Inter carries the reading. Give an idea a comfortable measure, a steady rhythm, and a little room around the parts worth sitting with.
Reading specimen
On making small,
On making small,
useful things.
Sample writing · 2 minute specimen
Some ideas start with a grand plan. The ones I keep coming back to usually start with a small irritation: something I do every day that could be a little easier.
That feels like a good place to begin. Make one thing better. Live with it for a while. See what it teaches you.
Leave room for discovery.
A workshop needs a place for unfinished things. A rough edge can be a reminder to pay attention, to follow the question a little further before deciding what the answer should look like.
The interesting part is often the thing you notice while making something else.
- Start with something small enough to finish.
- Choose tools that make the next step clear.
- Write down what surprised you.
Even a simple hello, world is a beginning.
const idea = "something useful";
const nextStep = "make a small version";This is a type and layout specimen, not a published musing.
09 / Motion
A little response. No fuss.
120ms for a small state change, 180ms for a larger one. Motion acknowledges an action. It never delays a task. Reduced-motion preferences remove the transition.
At rest. Ready when you are.
The system is here to make room for the work.
We’ll keep shaping it as the factory grows.