clousor®
UI / UX MOODBOARD · 01
Internal design direction · September 2026

Systems that feel
human.

A visual direction for Clousor’s new internal pages: calm enough for healthcare, sharp enough for software, and distinctive enough to make the studio memorable.

Recommended postureEditorial precision + operational clarity. Use generous typography, restrained colour, real product evidence, and motion only where it explains the system.

01 / The visual language

Not a clone of Awwwards. A synthesis of the patterns worth borrowing: strong editorial hierarchy, purposeful motion, and interfaces that show how work actually functions.

Primary#143B36
Support#B9C9BD
Canvas#F3F1EB
Surface#FFFDF8
Signal#E66C4E
Ink#18201F

02 / Three directions

Choose a direction before we move into page-level production. The recommendation is the strongest fit for Clousor’s healthcare + systems positioning.

Editorial Systems

RECOMMENDED
CLOUSOR / 2026
Carefully
built.
Best fit: founder-led trust, healthcare credibility, and complex services made easy to understand. Cream canvas, deep green, coral signal, serif moments, subtle grid lines.

Quiet Product Lab

OPTION B
BUILD / CONNECT / IMPROVE
Make the
complex clear.
Best fit: software, CRM, automation, and case studies. Lighter interface surfaces, blue-green accents, dense diagrams, clean product screenshots.

Dark Signal

OPTION C
CLOUSOR / ENGINEERING
Ideas into
systems.
Best fit: a more technical, premium studio impression. Dark surfaces, oversized type, thin borders, and selective motion. Use carefully on healthcare pages.

03 / Reference shelf

Study the principle, not the pixels. Each reference is linked for the design team to inspect live and capture approved patterns from.

01

Awwwards / Agencies

Story-led agency positioning, art direction, and page transitions.

OPEN REFERENCE ↗
02

Awwwards / Minimal

Balance, alignment, contrast, and removal of unnecessary interface noise.

OPEN REFERENCE ↗
03

SiteInspire

Editorial grids, restrained palettes, and typographic composition.

OPEN REFERENCE ↗
04

Godly

Modern SaaS landing patterns and interaction ideas worth selectively adapting.

OPEN REFERENCE ↗
05

Stripe

How technical complexity can be explained with confident visual hierarchy.

OPEN REFERENCE ↗
06

Linear

Precision, spacing discipline, product evidence, and restrained dark UI.

OPEN REFERENCE ↗
07

Vercel

Direct navigation, high contrast, and a strong engineering point of view.

OPEN REFERENCE ↗
08

Clousor / current

Keep the founder story, healthcare focus, case evidence, and clear enquiry paths.

OPEN REFERENCE ↗

04 / Page application

Every page gets a job. The system should feel like one company, not six unrelated landing pages.

01 · HOME

One clear promise.

Lead with Clousor as the team that connects design, development, marketing, AI, and automation around a real business outcome.

editorial heroproof stripsingle CTA
02 · SERVICES

Explore by problem.

Organise around outcomes and journeys—not a wall of technologies. Separate healthcare, product, growth, and systems pathways.

filterable indexservice detailrelated work
03 · WORK

Show the system.

Case studies should explain context, decision, build, and result. Use real approved screenshots and diagrams; no invented metrics.

case indexprocess storyvisual proof
04 · ABOUT

Make trust visible.

Founder story, working principles, and the way Clousor collaborates. Human photography or real team material beats stock imagery.

timelineprinciplesteam
05 · INSIGHTS

Teach, don’t fill.

Use a calm editorial reading experience for healthcare growth, automation, UX, and engineering notes.

topic indexreading rhythmrelated services
06 · CONTACT

Reduce the first step.

A short route to a useful conversation: what are you building, what is blocked, and when should we talk?

short formcalendar optionWhatsApp path

05 / Rules for production

These guardrails keep the moodboard useful once it becomes a working website.

Keep

  • Deep green as the recognisable Clousor anchor.
  • Large type used to create hierarchy, not decoration.
  • Real product, dashboard, and team imagery as it becomes available.
  • Small coral moments for action, status, and emphasis.

Avoid

  • Generic blue/purple gradients and glass cards.
  • Three equal feature cards on every page.
  • Stock photos of doctors, laptops, or smiling teams.
  • Animation that delays reading or hides the CTA.

06 / Exact reference breakdown

These are not random links. Each reference answers a specific Clousor design problem and is translated into an original pattern for our pages.

AWWWARDS · HONOURABLE MENTIONLIVE ↗

415 Agency / Digital Healthcare UX

Healthcare UX reference for making digital health feel clear and capable without looking cold or clinical.

BorrowCalm blue-green palette, plain-language hierarchy, patient journey storytelling.Clousor useHealthcare service pages and the “patient journey gap” section.
AWWWARDS · NOMINEELIVE ↗

Digital Health Journeys / gematik

Strong model for turning a complicated service ecosystem into a guided sequence of human decisions.

BorrowJourney-based navigation, progressive disclosure, contextual next steps.Clousor useServices index, CRM/automation explanation, and healthcare case studies.
AWWWARDS · SOTDLIVE ↗

New Genre Studio

A sharper studio reference: limited colours, typographic confidence, and case studies treated as the product.

BorrowTwo-colour discipline, oversized type, work-first homepage, controlled transitions.Clousor useHome hero and Work index, while keeping healthcare warmth.
AWWWARDS · SOTDLIVE ↗

Studio X / Jordan Gilroy

Reference for a compact studio identity that feels premium through contrast and unusual navigation—not decoration.

BorrowDark ink + warm paper, orange action signal, footer as a strong closing moment.Clousor useAbout and Contact pages; use orange only for action and emphasis.
HEALTHCARE · BRANDLIVE ↗

Maven Clinic

Useful healthcare benchmark for a warm, editorial, human brand that does not overexplain its technology.

BorrowHuman photography, generous whitespace, editorial type, emotionally legible copy.Clousor useAbout, testimonials, and healthcare vertical landing pages.
PRODUCT · SYSTEMSLIVE ↗

Linear

Benchmark for making a technical product feel precise, fast, and calm through spacing and state clarity.

BorrowKeyboard-like labels, tight grids, purposeful motion, clear active states.Clousor useCRM/software case studies and the systems/automation service family.

07 / Clousor UI translation

The visual direction becomes useful only when it turns into repeatable components. These are the first components to prototype.

CLOUSOR / SERVICES03 — 06

Build the path
before the page.

  • 01 / Healthcare growth systems
  • 02 / Product & software delivery
  • 03 / CRM, AI & automation
    • VIEW SERVICES →
    CASE STUDY / 01OPEN ↗

    Show the
    system.

    Context → decision → build → outcome. Real screenshots and diagrams, not decorative mockups.

    HEALTHCARE · CRM · AUTOMATION
    Final recommendation

    Editorial Systems
    with proof.

    Use the calm healthcare references for trust, the studio references for distinction, and the product references for clarity. This combination is more ownable for Clousor than copying an award-winning visual style.

    • Deep green + warm paper as the brand base.
    • Coral only for actions, status, and small signals.
    • Serif italic used as a human counterpoint to technical sans type.
    • Real Clousor projects, dashboards, team photos, and testimonials become the visual proof.
    • Motion stays subtle: route continuity, hover previews, and scroll reveals only.