Refto
Jamm

Jamm

A design-on-demand service that provides top-level digital services for a fraction of the cost of a traditional agency. Specializing in Branding, Web, UI/UX, Illustration, Webflow Development and more!

SaasLarge TypeIllustrativeFunDesignAgencyAnimationSingle Page
4.0
4
Visits
Visit

Sections

Single Page

Available Pages

Home

Version History

Design Analysis

Jamm Home design analysis

Open with one big promise, one obvious pink CTA, and one playful proof cue. Alternate warm light sections with rich plum anchor bands. Keep the page personable without losing commercial clarity. Use sticker-style mascot...

Key Takeaways

  • Open with one big promise, one obvious pink CTA, and one playful proof cue.
  • Alternate warm light sections with rich plum anchor bands.
  • Keep the page personable without losing commercial clarity.
  • Use sticker-style mascot illustrations, colorful case-study tiles, and clean brand boards.
  • Let the imagery feel handmade enough to stay distinct from generic SaaS art.
  • Keep oatmeal as the dominant page field.

Overview

  • Open with one big promise, one obvious pink CTA, and one playful proof cue.
  • Alternate warm light sections with rich plum anchor bands.
  • Keep the page personable without losing commercial clarity.

Image Direction

  • Use sticker-style mascot illustrations, colorful case-study tiles, and clean brand boards.
  • Let the imagery feel handmade enough to stay distinct from generic SaaS art.

Colors

  • Keep oatmeal as the dominant page field.
  • Use plum for anchor bands and dark proof moments.
  • Reserve bubblegum pink for primary actions and tiny labels.

Typography

  • Use one chunky grotesk throughout the hierarchy.
  • Keep display copy oversized and close-packed enough to feel conversational.

Design.md

System Overview

Core identity and authoring metadata from the refto.one design model.

Candy Studio Subscription

A cheerful subscription-sales language built from oatmeal paper, plum inversion fields, bubblegum pink pills, chunky grotesk type, and sticker-like character art.

Playful, warm, and sales-ready.

Primary mode: lightcreative service marketingui-rich

Theme

Fields outside the primary renderer remain visible here as structured fallback content.

Visual atmosphere
Summary
Playful, warm, and sales-ready.
Density
6
Variance
7
Motion
4
Signals
pink pills · plum bands · sticker mascots

Colors

Primitive palettes and resolved token colors for the active preview mode.

Palette colors
Oat Paper
#F0ECE0
Plum Night
#353148
Bubblegum Pink
#EE4D87
Soft Cream
#F5F5F5
Butter Pop
#F6D36A
Usage rules
Keep the shell warm and edible rather than stark white.
Use plum only in clear structural bands or major anchor cards.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

xs
0.5rem
sm
0.875rem
md
1.25rem
lg
2rem
xl
3rem
section_gap
clamp(4rem, 8vw, 6rem)
panel_padding
1.5rem

Token Radii

Corner radii tokens with a live surface sample.

sm
12px
md
20px
lg
30px
xl
40px
full
999px

Typography Families

Font families from the current design YAML, including fallback stacks and usage character.

Display
Instrument Sans
big cheerful grotesk
Body
Instrument Sans
clear and friendly service copy
Accent
Instrument Sans
pills and labels
Mono
IBM Plex Mono
rare utility support voice

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3.4rem, 7vw, 5.8rem)/—
Display
H2
clamp(2rem, 4vw, 3rem)/—
H2
H3
1.25rem/—
H3
Body
1rem/—
Body
Label
0.9rem/—
Label

Typography Rules

Fields outside the primary renderer remain visible here as structured fallback content.

Rules
Keep headlines chunky but not heavy enough to lose softness. · Use the same grotesk family throughout for a unified, friendly tone.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
220ms-320ms
Easing
cubic-bezier(.22, 1, .36, 1)

Motion

Resolved motion token values.

PropertyValue
duration220ms-320ms
easingcubic-bezier(.22, 1, .36, 1)

Layout Principles

Open with a direct service promise and a character cue.
Alternate warm light sections with dark plum anchors.
Use rounded project mosaics as proof, not as dashboard chrome.

Component Preview

Low-complexity component tokens rendered as design-system specimens.

Actions primary pill
Base Attributes
Background
#EE4D87
Text
#F0ECE0
Border
none
Radius
999px
Padding
0.85rem 1.25rem
Actions outline pill
Base Attributes
Background
transparent
Text
#EE4D87
Border
3px solid #EE4D87
Radius
999px
Padding
0.8rem 1.25rem
Cards process card
Feature Card
Component preview content
Base Attributes
Background
#F5F5F5
Text
#353148
Border
none
Radius
30px
Padding
1.5rem
Shadow
none
Cards plum stage
Feature Card
Component preview content
Base Attributes
Background
#353148
Text
#F0ECE0
Border
none
Radius
30px
Padding
1.75rem
Shadow
none

Image direction

Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.

Role
supportive
Media types
  • -
    sticker illustration
  • -
    portfolio tile
  • -
    brand board
Subject patterns
  • -
    cute outlined characters
  • -
    rounded colorful work crops
  • -
    logo exploration boards
Composition logic
  • -
    Let one mascot or portfolio tile punctuate each major section.
  • -
    Keep the work examples arranged in friendly rounded mosaics.
Treatment rules
  • -
    Favor flat color and clean outlines over 3D gloss.
  • -
    Keep dark plum as the main inversion field.
Generation cues
  • -
    Ask for an oatmeal creative-service site with pink pills, plum bands, and sticker-style mascots.
  • -
    Mention rounded portfolio mosaics and chunky grotesk type.
Avoid
  • -
    No sleek enterprise dashboards.
  • -
    No metallic gradients.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    Do not strip the mascot and illustration layer away.
  • -
    Do not replace the warm oat shell with cold white SaaS defaults.
  • -
    Do not use too many accent colors beyond pink, plum, and a small amount of butter or teal.