Simplify
Start a Conversation

Reference · not a public page

Visual direction & mini design system

Industrial intelligence: enterprise credibility, product-design quality, operational precision, human simplicity. Warm stone paper, deep ink type, one signal-orange accent, and a strict grid with hairline dividers.

Brand palette

Stone#F4F1ECPage background — the paper the site is printed on
Stone deep#EDE9E2Alternating section bands, quiet panels
Paper#FFFFFFCards and content surfaces
Ink#16202BHeadings, body text, inverted sections, footer
Ink soft#4A5A66Body copy on stone and white
Ink meta#5E6B75Eyebrows, labels and metadata — measured 5.2:1 on white
Signal orange#C93C14Primary accent — CTAs, rules, markers
Signal deep#A8320FAccent on light backgrounds where AA contrast is required
Hairline#DCD6CBEvery divider. Structure comes from rules, not shadows

Product accents — sourced from each product’s own codebase

StockZip

design-system/colors_and_type.css — sz-primary, sz-secondary, sz-accent

InControl

QMS-v3.0 components — blue-600 / blue-700 / blue-50

Stockzip Works

StockZip family — sz-accent led, sz-secondary support

Beratur (side project)

DESIGN.json — Service Blue, Cool Canvas, Healthy Green

Foodies Passport (side project)

src/app/globals.css — fp-primary, fp-stamp, fp-paper-aged

Typography

Display
Newsreader 400 · clamp(46–86px) · -0.028emComplex operations. Made simpler.
Display italic
Newsreader 400 italic · pull-quotes“Your entire inventory, right in your pocket.”
Section heading
Newsreader 400 · clamp(28–46px)Four products. One way of thinking.
Card heading
IBM Plex Sans 600 · 19–30px · -0.02emCustom mobile application development
Body
IBM Plex Sans 400 · 16–19px · 1.62We study the decisions, handovers, exceptions and everyday frustrations around a process — then design a system people can actually use.
Eyebrow
IBM Plex Mono 500 · 11.5px · .16em · upperProduct ecosystem
Data / meta
IBM Plex Mono 400 · 11–13px · tnum201701036149 (1250320-H) · WO-2041 · Rev 4

Components

Buttons · 44px+ targets

PrimaryInkOutlineText link →

Eyebrow · label · flag

Product ecosystemPre-launch[To confirm] content flag

Grid & rhythm

  • Container 1240px, gutters clamp(20px, 4vw, 40px)
  • Hairlines #DCD6CB on stone, #E4DFD6 on white
  • Radii 4px controls · 6px cards · 8px feature panels
  • Sections separated by 1px rules, never shadows
  • Fluid layout: auto-fit grids, no fixed breakpoints below 900px

Accessibility notes

  • Contrast

    Every text colour was measured against its resolved background, not chosen by eye. Ink #16202B on stone reaches ~14:1; metadata grey #5E6B75 reaches 5.2:1 on white; accent #C93C14 carries white text at ~5.0:1 and links use the deeper #A8320F. StockZip buttons use #0077C2 rather than #009AF0, which fails at 3.05:1 with white; Foodies Passport buttons use #C93A2B rather than #E8503F, which fails at 3.51:1. The aria-hidden product mock-ups reproduce each product’s own in-app palette and are excluded from this claim.

  • Focus states

    A single global :focus-visible rule paints a 2px signal-orange ring with 3px offset on every interactive element. Focus is never removed.

  • Touch targets

    Every button, form control, nav item and standalone link has a hit area of at least 44px, including footer links, breadcrumbs and the mobile menu trigger. Links inside a sentence keep their line height and rely on the WCAG inline-text exception, since padding them to 44px would break the paragraph.

  • Reduced motion

    prefers-reduced-motion collapses all animation and disables smooth scrolling. The settle-in and connector animations are decorative only.

  • No animation-dependent meaning

    The hero diagram carries a full text alternative; nothing is communicated by movement alone, and product previews are marked aria-hidden with the same facts stated in prose beside them.

  • Semantic headings

    One h1 per page, sections led by h2, cards by h3. Legal pages are numbered h2 sections so a screen-reader user can navigate by heading.

  • Keyboard navigation

    Header, in-page support topic nav and footer are real <nav> landmarks with aria-labels. Nothing depends on hover.

  • Readable legal pages

    Privacy, Terms and Deletion use a 900px measure, 16.5px body copy and generous line height so they remain readable on a phone.

  • Fluid, not fragile

    Layouts use auto-fit grids and clamp() rather than fixed breakpoints, so text stays legible at 200% zoom and at narrow widths.