SearchSubmit
MUUDS

Curated catalog of analyzed web design.

humblefactory-ai

Pragmatic industrial clarity colliding with expressive graphic novel storytelling. Clean, airy off-white canvases let sharp typography, tactile dark UI cards, and vivid character illustrations turn industrial operations into an engaging human narrative.

clinicalquietplayfulrawwarm
Visit site

Colour

Background#fafafa
Text#000000
Accent#ff4000
Surface#ffffff
Muted#848484

Typefaces

Display
Geist
Body
Inter
Mono
Kode Mono
Source
google
Scale
12 · 13 · 14 · 15 · 16 · 17

Layout

Grid
—
Container
—
Spacing base
4px
Radius
8px · 16px · 9999px

Capture

Category
other
Sections
13
Captured
2026-08-30
Rhythm
light x3 → mixed → light x3 → mixed → dark → light x4

Type rules

  • display headlines set in sentence case with tight negative letter-spacing
  • body text kept concise at around 55 characters per line for fast scanning
  • numbered step indicators and technical tags set in uppercase monospaced type

Colour rules

  • vivid flame orange (#ff4000) reserved exclusively for key action items, highlighted phrases, and winning comparison columns
  • off-white background (#fafafa) dominates the canvas to keep dense operational data feeling light

Voice rules

  • short grounded sentences speaking directly to factory floor reality
  • lead with immediate speed and concrete time-to-value

Holds it together

  • use electric flame orange (#ff4000) on at most one CTA or emphasized insight per viewport
  • anchor technical operational claims with expressive hand-drawn illustrations
  • encapsulate software workflows inside rounded floating modules and high-contrast dark terminal cards

Contrast

text on background20.1:1 AAA
muted text on background3.6:1 AA Large
text on surface21.0:1 AAA
accent on background3.4:1 AA Large
background on accent3.4:1 AA Large

Type, measured

Body
13px / 1.4
Measure
55 characters
Display
58px / 1.1
Tracking
-0.05em display
Scale ratio
1.45

Voice

Tone
direct, pragmatic, confident
Sentences
short
Person
second
Vocabulary
plain
Calls to action
start, book, see

Built with

Builder
framer
Framework
—
Motion
—
WebGL
—
Nav
sticky_top_bar, 6 items, sticky
Length
13.8 screens

Sections in page order

13

Rhythm — each block is a section, as wide as it is tall, in the colour it is on

  1. 00

    hero

    Bright, precise industrial tech hero pairing sharp typography with a centered hand-drawn portrait and bold orange accents.

    Mood
    clinical + bold
    Layout
    1 col · split · balanced
    Open section →
    Bright, precise industrial tech hero pairing sharp typography with a centered hand-drawn portrait and bold orange accents.
  2. 01

    showcase

    Glossy floating product dashboard mockup presenting an AI-assisted operational interface with crisp rounded modules and an overhead CTA pill.

    Mood
    clinical + playful
    Layout
    1 col · centered · balanced
    Open section →
    Glossy floating product dashboard mockup presenting an AI-assisted operational interface with crisp rounded modules and an overhead CTA pill.
  3. 02

    showcase

    Airy off-white statement section featuring a compact founder video card paired with a dark terminal quote block.

    Mood
    clinical + quiet
    Layout
    1 col · centered · airy
    Open section →
    Airy off-white statement section featuring a compact founder video card paired with a dark terminal quote block.
  4. 03

    feature

    A split feature section pairing structured white cards and orange mono subtext with a floating UI card over a glowing crimson landscape.

    Mood
    clinical + dreamy
    Layout
    2 col · split · balanced
    Open section →
    A split feature section pairing structured white cards and orange mono subtext with a floating UI card over a glowing crimson landscape.
  5. 04

    statement

    Spacious and quiet typographic statement framed by ample negative space and an accented closing phrase.

    Mood
    quiet + clinical
    Layout
    1 col · centered · airy
    Open section →
    Spacious and quiet typographic statement framed by ample negative space and an accented closing phrase.
  6. 05

    showcase

    An intense graphic novel illustration anchors an interactive narrative terminal prompt with arcade-style navigation controls.

    Mood
    playful + bold
    Layout
    1 col · stacked · airy
    Open section →
    An intense graphic novel illustration anchors an interactive narrative terminal prompt with arcade-style navigation controls.
  7. 06

    statement

    An extremely airy, quiet transitional statement with faint ghosted display typography anchored at the bottom of an expansive pale canvas.

    Mood
    quiet
    Layout
    1 col · stacked · airy
    Open section →
    An extremely airy, quiet transitional statement with faint ghosted display typography anchored at the bottom of an expansive pale canvas.
  8. 07

    feature

    Vast airy white space framing an atmospheric landscape illustration and a floating red icon above a dark feature card.

    Mood
    playful + dreamy
    Layout
    3 col · stacked · airy
    Open section →
    Vast airy white space framing an atmospheric landscape illustration and a floating red icon above a dark feature card.
  9. 08

    feature

    Sleek dark card framing conversational assistant UI against a dramatic sunset landscape backdrop.

    Mood
    clinical + dreamy
    Layout
    1 col · asymmetric · balanced
    Open section →
    Sleek dark card framing conversational assistant UI against a dramatic sunset landscape backdrop.
  10. 09

    feature

    An airy, near-empty composition featuring a faint soft blur bleeding into the upper left frame.

    Mood
    quiet + clinical
    Layout
    12 col · centered · airy
    Open section →
    An airy, near-empty composition featuring a faint soft blur bleeding into the upper left frame.
  11. 10

    feature

    Stark high-contrast layout grounded by a raw 1-bit pixelated baseline transition.

    Mood
    raw + clinical
    Layout
    1 col · stacked · airy
    Open section →
    Stark high-contrast layout grounded by a raw 1-bit pixelated baseline transition.
  12. 11

    comparison

    Clean comparison matrix contrasting options with an eye-catching orange column elevated above neutral competitors.

    Mood
    clinical + bold
    Layout
    1 col · stacked · balanced
    Open section →
    Clean comparison matrix contrasting options with an eye-catching orange column elevated above neutral competitors.
  13. 12

    cta

    A calm, illustrated closing section pairing an inviting mountain landscape with clean, centered call-to-action copy.

    Mood
    warm + dreamy
    Layout
    1 col · stacked · airy
    Open section →
    A calm, illustrated closing section pairing an inviting mountain landscape with clean, centered call-to-action copy.

More like this

by shared mood