We set only the cookie that remembers this choice. Analytics and marketing cookies stay off unless you allow them. Cookies policy

Start a brief

Room 10 · Cybersecurity consulting · Concept

Hushwire

Weak points, found early.

Hushwire, a fictional cybersecurity consultancy. A single drawn signal settles as the visitor works through a twelve-question self-assessment.

Concept project — fictional brand. This project was created by ARTLOGIC to demonstrate a possible brand and digital experience. The organization, name, people, prices, and data shown are fictional. This is not client work and does not represent measured business results.

Explore the concept site

Opening screen of the Hushwire site on a wide display: Weak points, found early.
Opening screen, desktop

01 The brief

The brand
Hushwire is a fictional cybersecurity consultancy for small and mid-size businesses. Its line is "Weak points, found early."
The problem
Security sites lean on fear and on padlock and shield imagery. This one had to offer a calm, non-invasive first step and a route to a consultation, without scanning anything or promising protection.

02 The idea

One wire that steadies

What you see
A thin cyan line crosses a dark grid, rough at first. As the visitor answers twelve questions about accounts, devices, data and people, it calms down. The result shows four traces, one per area, with scores and the first three things to look at.
How it works
The wire is a single SVG path redrawn each frame from a damped spring. It never settles to zero, so the page cannot suggest that anyone is fully secure. The assessment is illustrative and runs in the browser.

03 Design system

  • Bench Black#07090A groundNear-black page with a faint graticule.
  • Ink White#E8EEF0 inkHeadings and body text.
  • Signal Cyan#5CE1E6 accentThe wire, focus rings, the checked answer and the primary button.
  • Mute Grey#8A9A9E mutedCaptions, hints and resting navigation.
  • Grid Line #172023. Graticule and row dividers.
  • Rule Line #2A383C. Dashed baseline and link underlines.
  • Control Edge #5D6F74. Borders of buttons and inputs.
Type
  • Chivo
    Light weight at large sizes for headlines, regular for body text.
  • Chivo Mono
    Readouts only: scores, counts and question numbers.
Edges
Square corners, 1px lines, no cards, shadows or glow. Structure comes from rules and spacing.
Motion
Short colour transitions on controls, and the wire itself. Spring, drift and transitions stop under reduced motion.

04 Process

  1. Pre-production

    Pre-production set the thesis, the dark technical direction, six routes and the scoring model for the assessment. It also fixed what the site must never claim: certifications, scans, incidents or guarantees.

  2. Build

    The build followed a written plan, with the wire and the assessment as the main parts and the rest as static pages.

  3. Finish review

    Impeccable finish-review rounds compared the built pages with the direction contract and returned an ordered list of fixes.

  4. Fixes

    The fixes were applied and checked again, and the design system was documented from the finished build.

05 Technology and accessibility

Stack
Next.js 16, Tailwind CSS 4 and TypeScript, inside the studio's single application.
Particular to this site
  • Single SVG path animated by a damped spring
  • Client-side scoring across four areas
Access
  • The wire is hidden from assistive technology and has a text twin in a polite live region
  • Scores are written out as text, with a tick bar and a band name
  • Answers are real radio inputs inside labelled rows
  • Form errors use a dashed border and the words "Needs attention"
  • Skip link and a 2px focus outline on every control
  • Prefers-reduced-motion draws the wire once, with no drift
Tests
Covered by its own Playwright end-to-end spec and a unit test file for its logic.

06 Honest notes

Hushwire is a fictional brand and this site is a concept by Artlogic. The self-assessment is labelled illustrative and no real scanning takes place.

The consultation form is a demo. It stores nothing and says so on the page.

There are no photographs. The only imagery is the wire, drawn in the browser from the visitor's own answers, and the logo. Stock photos of hooded figures or padlocks are the cliche this concept avoids.

07 See it

Explore the concept site

Fictional prototype. A concept by ARTLOGIC for a fictional brand. English only.