SearchSubmit
MUUDS

Curated catalog of analyzed web design.

saybriefly-com

Warm, quirky, and deeply empathetic to agency life. Sketchy hand-drawn doodles and highlighter strips soften bold forest-green typography over an organic cream background, turning a productivity tool into a friendly collaborator.

playfulwarm
Visit site

Rated

7.4/ 10

From 14 analysed sections. Two measured components and one judged by a model. Distinction is a rank within the library; the rest are scores in their own right.

AI scorejudged
8.8
Systemmeasured
5.3
Distinctionmeasured
8.8
on the grid
24%
vertical rhythm
79%
type on a scale
70%
contrast passing AA
40%
unlike the library
0.29
model craft
7.6/10
model deviation
5.4/10

Colour

Background#fcfaf5
Text#173300
Accent#ffeb5b
Surface#0a3400
Muted#525252

Typefaces

Display
Bricolage Grotesque
Body
Inter
Mono
Roboto Mono
Source
google
Scale
10 · 14 · 16 · 20 · 24 · 30

Layout

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

Capture

Category
tools
Sections
14
Captured
2026-08-30
Rhythm
cream → dark → cream x12

Type rules

  • display headings set in chunky sentence case with tight line-height
  • deep forest green (#173300) used for body and headings instead of harsh black
  • secondary handwritten annotations in Reenie Beanie and technical specs in Roboto Mono

Colour rules

  • deep forest green (#173300) defines the primary ink and high-contrast dark surfaces
  • warm yellow (#ffeb5b) serves strictly as a highlighter pen accent for badges and critical copy phrases

Voice rules

  • address the visceral pain points of client work directly
  • use conversational fragments and conversational UI prompts
  • keep CTA copy focused on instant client utility

Holds it together

  • pair structured software UI cards with hand-drawn pencil doodles and wavy margin flourishes
  • use deep forest green (#173300) for all primary type and dark containers instead of pure black
  • highlight key callouts and badges with yellow marker pill containers

Contrast

text on background13.3:1 AAA
muted text on background7.5:1 AAA
text on surface1.0:1 fail
accent on background1.2:1 fail
background on accent1.2:1 fail

Type, measured

Body
24px / 1.33
Measure
67 characters
Display
80px / 1.05
Tracking
0em display
Scale ratio
1.35

Voice

Tone
approachable, candid, empathetic, playful
Sentences
short
Person
second
Vocabulary
plain
Calls to action
download, learn

Built with

Builder
—
Framework
—
Motion
—
WebGL
—
Nav
top_bar, 26 items
Length
23.3 screens

Sections in page order

3 marked strong · 14

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

  1. 00

    hero

    Charming, hand-drawn editorial hero placing a playful multi-character illustration above bold punchy typography.

    Mood
    playful + warm
    Layout
    1 col · stacked · airy
    Open section →
    Charming, hand-drawn editorial hero placing a playful multi-character illustration above bold punchy typography.
  2. 01

    showcase

    A deep forest-green showcase framing an expansive light card accented with playful hand-drawn pencil doodles.

    Mood
    playful + warm
    Layout
    4 col · stacked · airy
    Open section →
    A deep forest-green showcase framing an expansive light card accented with playful hand-drawn pencil doodles.
  3. 02

    feature

    Approachable workflow feature section combining chunky deep green typography with sketchy hand-drawn product illustrations over a soft cream canvas.

    Mood
    playful + warm
    Layout
    1 col · stacked · airy
    Open section →
    Approachable workflow feature section combining chunky deep green typography with sketchy hand-drawn product illustrations over a soft cream canvas.
  4. 03

    feature

    Warm and approachable feature breakdown showing product UI mockups and client communications highlighted in terracotta tones.

    Mood
    warm + playful
    Layout
    12 col · stacked · balanced
    Open section →
    Warm and approachable feature breakdown showing product UI mockups and client communications highlighted in terracotta tones.
  5. 04

    statement

    Warm, lighthearted statement section featuring heavy display typography, an ROI claim, and hand-drawn doodle illustrations.

    Mood
    playful + warm
    Layout
    1 col · stacked · airy
    Open section →
    Warm, lighthearted statement section featuring heavy display typography, an ROI claim, and hand-drawn doodle illustrations.
  6. 05

    feature

    Strong

    An approachable, hand-crafted productivity showcase embedding conversational input pills directly into rounded typographic statements over warm cream tones.

    Mood
    playful + warm
    Layout
    16 col · centered · balanced
    Open section →
    An approachable, hand-crafted productivity showcase embedding conversational input pills directly into rounded typographic statements over warm cream tones.
  7. 06

    statement

    Warm, approachable layout featuring playful hand-drawn pencil rocket illustration and friendly highlighted typography.

    Mood
    warm + playful
    Layout
    12 col · stacked · airy
    Open section →
    Warm, approachable layout featuring playful hand-drawn pencil rocket illustration and friendly highlighted typography.
  8. 07

    feature

    Warm and breezy feature section pairing relaxed hand-drawn crayon sketches with clean sans-serif type over a soft cream canvas.

    Mood
    playful + warm
    Layout
    2 col · stacked · airy
    Open section →
    Warm and breezy feature section pairing relaxed hand-drawn crayon sketches with clean sans-serif type over a soft cream canvas.
  9. 08

    feature

    Warm and approachable product feature section featuring soft yellow UI mockups, dashed dividers, and conversational value propositions.

    Mood
    warm + playful
    Layout
    12 col · split · airy
    Open section →
    Warm and approachable product feature section featuring soft yellow UI mockups, dashed dividers, and conversational value propositions.
  10. 09

    statement

    Friendly, approachable product section combining clean metrics dashboards with bold typographic callouts and marker-style doodles.

    Mood
    playful + warm
    Layout
    1 col · stacked · balanced
    Open section →
    Friendly, approachable product section combining clean metrics dashboards with bold typographic callouts and marker-style doodles.
  11. 10

    cta

    Strong

    Whimsical and relaxed hand-drawn closing CTA section with organic pencil illustrations framing an easygoing Friday afternoon narrative.

    Mood
    playful + warm
    Layout
    1 col · stacked · airy
    Open section →
    Whimsical and relaxed hand-drawn closing CTA section with organic pencil illustrations framing an easygoing Friday afternoon narrative.
  12. 11

    feature

    Reassuring privacy breakdown featuring organic green highlighter accents, monospaced tags, and minimalist line-art icons on an off-white canvas.

    Mood
    warm + editorial
    Layout
    1 col · stacked · balanced
    Open section →
    Reassuring privacy breakdown featuring organic green highlighter accents, monospaced tags, and minimalist line-art icons on an off-white canvas.
  13. 12

    comparison

    A clean, warm feature comparison matrix using friendly app icons and dashed dividers to contrast competitor meeting tools.

    Mood
    warm + clinical
    Layout
    1 col · stacked · balanced
    Open section →
    A clean, warm feature comparison matrix using friendly app icons and dashed dividers to contrast competitor meeting tools.
  14. 13

    testimonial

    Strong

    Warm, human testimonial section centered around a prominent deep green pull quote accented with playful taped labels and textured flourishes.

    Mood
    warm + playful
    Layout
    1 col · centered · airy
    Open section →
    Warm, human testimonial section centered around a prominent deep green pull quote accented with playful taped labels and textured flourishes.

More like this

by shared mood