Actions
Lime for the primary action. Quiet gray for secondary actions. Visible keyboard focus.
THE PORTFOLIO, IN PARTS
Small details.
One shared language.
The colors, type and little interactions behind this portfolio. A living UI kit, built from the same styles as the site.
Download tokens ↓01 / FOUNDATIONS
A little mint. A little lime.
Every foundation token, side by side. Day and Night share the same roles; small color samples keep the values easy to compare.
Product accents
signNowBlue · document workflows
ZutobiTeal · driving-school operations
BW Events TechPurple · event operations
Project artboards and tags retain their existing brand palettes.
02 / TYPOGRAPHY
Outfit, throughout.
Regular for reading. Medium for headings and controls. Semibold for a little emphasis.
DISPLAY
Feel simple.
Fluid display · medium · tight trackingSECTION TITLE
The path so far
46px desktop / 34px mobile · mediumCARD TITLE
A connected system.
30px desktop / 26px mobile · mediumBODY
Roles, information and interface states, considered as one product.
17px / 1.5 · regular · card and supporting copy use smaller sizesLABEL
THE WORK BETWEEN THE SCREENS
11px · medium · 1.4px letter spacing03 / COMPONENTS
Familiar little pieces.
Try the controls. Switch Day and Night in the header to see this whole page respond.
Segmented control
Pick a mood. Press play.
From turntables to your ears.
A quiet outline around the group, a lime fill for the selected option.
Underlined input
No surrounding box. The underline strengthens on focus. This sample does not unlock cases.
Context tags
A soft product-colored surface, compact type and no dashed outline.
Project card · shared structure
DOCUMENT WORKSPACE & DESIGN SYSTEM
BUILT TO WORK TOGETHER
A first design system.
A new document workspace.
From a legacy interface without source design files to a shared system and redesigned core screens.
My part Design system → core product screensOutcome Redesign implemented; key conversions maintained
04 / RHYTHM & MOTION
Room to breathe.
A four-pixel spacing vocabulary, generous sections and compact controls. Layout adapts at the site’s existing 700px and 1050px breakpoints.
Shape
4px
Artboard12px
PanelPill
Control
Artboard12px
PanelPill
Control
Motion
200ms for small control transitions. 500ms for project-cover movement. Drawn accents reveal as their sections enter the viewport.
Reduced-motion preferences stop decorative animation and remove transitions.
05 / IDENTITY
One face. Different scales.
The same line-work and shared ink color, with less detail as the image gets smaller.