The mark uses a 148 × 104 viewBox and a 16-unit rounded stroke. Preserve its aspect ratio. The navigation bar pairs a 44px mark with a 22px wordmark; under 420px the wordmark text drops and the mark stands alone.
The light-surface version adds a thin blue outline so the mist section stays visible. Avoid placing the unoutlined pastel mark on a pale background.
Voice
Make room for better work.
Describe the problem and the work involved in solving it. Use first-person language for Mark’s work and neutral language for diagrams. Describe concrete problems and actions. Avoid inflated promises, filler, and em dashes.
These are the shared foundations. Components use their own documented sizes and timings where needed. The source is assets/tokens.css.
Cloud--n4-paper#f7f8fc
White--n4-white#ffffff
Slate--n4-ink#354158
Action blue--n4-accent#52658f
Peach--n4-peach#f6d4c8
Lilac--n4-lilac#ded8f1
Periwinkle--n4-sky#c8d8ef
Mist--n4-mist#e8edf6
Muted text--n4-muted#5b6476
Border--n4-rule#d0d6e2
Spacing
A 4px base with larger steps for grouping and section separation.
4px
8px
16px
24px
32px
48px
Shape and depth
12px Control24px Card
Inset highlights and a light shadow give selected surfaces depth. Service content stays on the page background. Use the jelly treatment for brand blocks and small accents, not large containers around every paragraph.
Token reference
All values are visible below. Long values wrap within their cell.
Links use descriptive text without decorative arrows. Use a native button for a change in state. Tab through the examples to inspect focus.
Index / decorative indicator
01
Numbers support the service label. They do not carry meaning on their own.
Practice numbers and color are decorative. The heading identifies each section.
04 / Layout
One grid, one way around.
Every page on the site and on the demo shares the same navigation and the same columns, so nothing has to be relearned between them.
Navigation
One 64px bar fixed to the top at every width: wordmark on the left, section links that mark the section in view, and the primary call to action on the right, which never leaves the bar. Below 900px the links fold behind a menu button; the menu opens as a full-width panel under the bar, closes on any link or Escape, and the button animates to a close icon. Tablets, folding phones, and narrow laptops all get the same bar, so there is no width at which the navigation changes shape. The demo at demo.n4mation.digital uses the same bar; its guide keeps a table of contents beside the text from 1100px up, which is page structure rather than navigation.
Grid
Content sits on twelve columns with 24px gutters inside a 1200px maximum. Section headings occupy columns 1 to 5 and copy occupies 6 to 12, so the left edges of headings and copy line up down the whole page. Hero copy runs 1 to 7 with the artwork in 8 to 12. Below 900px every grid becomes one column and every child of it, without exception, spans the full width; the stylesheet does this with one catch-all rule rather than a list of elements, so a placed element added later collapses on its own. Any layout change is checked at phone width before it ships. Rows of cards (the three focus areas, the demo screens) use subgrid so a heading that wraps in one card never pushes that card’s body below its neighbours.
05 / Molecules
Parts with a purpose.
Service detail follows the normal reading order, without accordions. A numbered heading, problem statement, approach, and outputs form each section. Headings stay beside the copy on desktop and move above it on mobile.
Open service section / production component
03
Systems
The tools should support the way people work.
I walk through common tasks with your team and map how information moves between platforms. That exposes manual copying, awkward configuration, and missing connections.
I help configure platforms, define integrations, and automate repeatable steps. For design systems, I work through components, content rules, keyboard behavior, and accessibility with the people building and maintaining them.
What I can put in place
Platform configuration, integration requirements, workflow automation, and documented components.
This opens the visitor’s email app. It does not submit a form or collect information on this page.
06 / Motion
Motion in context.
Reading content and numbered labels stay still. Motion stays inside the hero artwork and wheel, in space reserved before either animation starts. The hero blocks scale into place in sequence without crossing into neighboring blocks. The feedback artwork uses four rounded pastel arcs around a stationary center. The main ring turns in 40 seconds; fine outer and inner traces run over 20 and 30 seconds, with the inner trace reversing direction. A smooth fade and zoom entrance begins when the wheel is 35% visible, and the ring starts turning at the same moment rather than after the entrance, so there is no hand-off between the two. Click the artwork or use Enter or Space while it is focused to pause or resume. It also pauses offscreen.
Continuous improvementLearn. Apply. Repeat.
140–180ms
Hover and press feedback.
900–1100ms
Hero assembly. Blocks start 150ms apart.
1400ms
Wheel fade and zoom, without a bounce. The center fades in after 450ms.
20 / 30 / 40s
Outer trace, inner trace, and pastel ring. The inner trace reverses direction.
Hero assembly
The homepage mark and blocks assemble on their first appearance. Reload the page to replay the entrance.
N4MATION DIGITAL
CatalogContentPlatformsWorkflows
The operating system or browser’s reduced-motion preference removes movement and smooth scrolling. Content remains available. No custom preference is stored.
07 / Accessibility
Built into the components.
These are implementation rules, not a claim of completed accessibility certification.
Read and navigate
Main reading text starts at 16px. Reference labels and supporting notes may be smaller.
Text and headings reflow on narrow screens.
Color supports labels rather than replacing them.
A skip link goes directly to the main content.
Operate and understand
Controls have visible keyboard focus.
Interactive targets are at least 44px high.
Content stays visible without opening a control.
The wheel pauses with a click, Enter, or Space. Its button has an accessible name and state.
Motion respects the system preference.
Selected text contrast pairs
Pair
Contrast
Slate on Cloud
9.66:1
White on Action blue
5.81:1
Slate on Peach
7.41:1
Slate on Lilac
7.42:1
Slate on Periwinkle
7.09:1
Screen-reader, forced-color, and text-scaling checks remain part of release review. These specimens are not a substitute for testing the finished page.
