Typography does the work.
Large, tightly set headlines. Clear hierarchy. Short, direct copy. Let the words carry the personality.
Different paths. Shared direction.
decisionos / Visual foundation · v0.1
Clear thinking.
Distinct presence.
A simple system for a Fractional Product Building. Strong typography, five core tones, generous space, and three flowing paths that begin loosely and converge into one aligned current.
01 / Principles
Quiet confidence. Deliberate detail.
One accent. Used with intent.
Cobalt highlights a key idea or an action. Neutral tones give it room. Avoid competing color treatments.
Depth, without distraction.
Use layers to connect ideas. Keep motion subtle, brief, and responsive to the person on the other side.
02 / Color
Five tones. A complete vocabulary.
01 — Ink
#17191F · Primary text02 — Cobalt
#204DFF · Action & emphasis03 — Slate
#5F6572 · Secondary text04 — Mist
#F7F8FA · Page background05 — White
#FFFFFF · Raised surfacesUse neutrals for most of the page. Reserve cobalt for the primary action and a single emphasis per composition. Borders and hover states are supporting shades, not additional brand colors.
03 / Typography
Contemporary. Direct. Unmistakable.
DISPLAY / 56–110 px
Medium · tight tracking
Medium · tight tracking
Think it through.
Make it happen.
Make it happen.
HEADING / 32–50 px
Medium · −0.05 em
Medium · −0.05 em
Fractional Product Building.
BODY / 16–18 px
Regular · 1.6–1.75 line height
Regular · 1.6–1.75 line height
15 years across design, development, and product management. We help you turn business transformation goals into a focused MVP.
LABEL / 12 px
Uppercase · +0.13 em
Uppercase · +0.13 em
Product · Design · Engineering
Helvetica Neue with Helvetica and Arial fallbacks. System monospace for indices. No remote font dependency. Display sizes scale down with the viewport; body copy stays readable.
04 / Rhythm
Space is part of the design.
8162432486496128A 1,440 px maximum canvas. Broad desktop gutters, 20 px mobile gutters. Two columns become one at 760 px. Use fine rules to separate ideas, with 8 px control corners and 14 px cards.
05 / Elements
Only what earns its place.
One primary action per section. Controls have clear hover and keyboard focus states. Use arrow glyphs for direction; keep ornamental elements sparse.
06 / Illustration
A human touch. In three tones.
Loose lines. Clear ideas.
Thick, imperfect crayon strokes. Simple people and objects. A little grain, plenty of breathing room, and the warmth of something drawn by hand.
Ink, cobalt, and white only. Use color selectively. Keep drawings flat and expressive, with no gradients, polished vector edges, or embedded text.
Illustrations explain the work. The swarm brings the quiet movement.
07 / Motion
A little movement. A lot of restraint.
Enter once.
A 650 ms fade and 14 px rise introduces the page. Three flowing paths bring product, design, and engineering into a shared direction.
Follow, gently.
Marks travel along the paths without needing a mouse. The loose beginnings gradually converge; desktop pointer movement gently bends the flow.
Stay accessible.
Fewer particles on mobile. Pause the motion at any time. Reduced-motion preferences show a still composition, and hidden animations stop running.
Always moving. Never in a hurry.
Movement with a purpose
Different paths.
Shared direction.
Product, design, and engineering begin as loose, separate paths. Their movement gradually settles into one calm current: complexity becoming alignment. The mouse influences the flow without disrupting its destination.
See it in the landing page ↗