Refto
Mosey

Mosey

Mosey provides simplified corporate and business compliance services—everything you need to be legally compliant in all 50 states with one easy-to-use platform.

InteractiveHrScrolling AnimationSaasIllustrativeParallaxAnimationBig Background VideoLightCleanFinance
5.0
9
Visits
Visit

Categories

HrSaasFinance

Available Pages

Home

Version History

Design Analysis

Mosey Home design analysis

Build for a service platform that needs to feel competent, calm, and structured. Let the page balance human reassurance with operational clarity. Use diagrams and routed lines as the connective tissue between otherwise s...

Key Takeaways

  • Build for a service platform that needs to feel competent, calm, and structured.
  • Let the page balance human reassurance with operational clarity.
  • Use diagrams and routed lines as the connective tissue between otherwise simple surfaces.
  • Favor line-drawn service maps, cropped product cards, and small portrait or status tiles.
  • Keep imagery diagrammatic and instructional rather than aspirational.
  • Let one visual path connect scattered nodes and text instead of filling the page with large illustrations.

Overview

  • Build for a service platform that needs to feel competent, calm, and structured.
  • Let the page balance human reassurance with operational clarity.
  • Use diagrams and routed lines as the connective tissue between otherwise simple surfaces.

Image Direction

  • Favor line-drawn service maps, cropped product cards, and small portrait or status tiles.
  • Keep imagery diagrammatic and instructional rather than aspirational.
  • Let one visual path connect scattered nodes and text instead of filling the page with large illustrations.

Colors

  • Use a warm cream page field instead of cold white.
  • Keep primary text and strong accents in deep teal.
  • Use muted sage for quieter navigation and support text.

Typography

  • Use a rounded, friendly grotesk with enough weight to hold large service headlines.
  • Keep the body direct and readable.
  • Let labels run slightly smaller and tighter, especially in nav and nodes.

Design.md

System Overview

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

Calm Compliance Service System

A warm compliance platform system with dark teal typography, cream fields, line-routed diagrams, and structured but friendly service surfaces.

Warm, orderly, diagrammatic, and reassuring.

Primary mode: lightbusiness compliance platformui-rich

Theme

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

Visual atmosphere
Summary
Warm, orderly, diagrammatic, and reassuring.
Density
4
Variance
4
Motion
3
Signals
cream paper field · dark teal service typography · line-routed process diagrams

Colors

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

Palette colors
Cream Canvas
#F3F1EC
Deep Teal
#203435
Muted Sage
#9FA5A3
Roadmap Teal
#285D60
Card White
#FCFBFA
Usage rules
Use teal as structure and signal, not as a blanket fill everywhere.
Allow olive and sand accents to categorize service tiers without changing the whole palette.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
5rem
card_padding
1.5rem

Token Radii

Corner radii tokens with a live surface sample.

control
999px
component
8px

Typography Families

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

Display
Circular Std
rounded professional grotesk
Body
Circular Std
calm service voice

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
3.5rem/—
Display
H2
2.25rem/—
H2
Body
1rem/—
Body
Label
0.8125rem/—
Label

Typography Rules

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

Rules
Use friendly width and weight, not corporate sharpness. · Let the hierarchy stay readable even when diagrams and lines add detail.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
200ms-400ms
Easing
cubic-bezier(.2, .8, .2, 1)

Motion

Resolved motion token values.

PropertyValue
duration200ms-400ms
easingcubic-bezier(.2, .8, .2, 1)

Layout Principles

Start from a contained hero and let line-based diagrams connect the surrounding surfaces.
Alternate calm cream bands with one deeper teal storytelling band when process explanation matters.
Use structured comparison cards and FAQ rows to ground the more illustrative sections.

Component Preview

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

Buttons primary
Base Attributes
Background
#203435
Text
#FCFBFA
Border
1px solid #203435
Radius
{tokens.radii.control}->999px
Padding
0.7rem 1.1rem
Min height
40px
Shadow
none
Typography
label
Buttons secondary
Base Attributes
Background
transparent
Text
#203435
Border
1px solid transparent
Radius
7px
Padding
0.4rem 0.9rem
Min height
32px
Shadow
none
Typography
label
Cards pricing
Feature Card
Component preview content
Base Attributes
Background
#FCFBFA
Text
#203435
Border
2px solid #D9D4C9
Radius
{tokens.radii.component}->8px
Padding
1.75rem
Shadow
none
Cards node
Feature Card
Component preview content
Base Attributes
Background
#FCFBFA
Text
#203435
Border
1px solid transparent
Radius
{tokens.radii.control}->999px
Padding
0.65rem 0.95rem
Shadow
none
Inputs default
Base Attributes
Background
#FCFBFA
Text
#203435
Border
1px solid #D9D4C9
Radius
{tokens.radii.component}->8px
Padding
0.8rem 1rem
Min height
44px
Placeholder
#9FA5A3
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
#F3F1EC
Text
#9FA5A3
Height
64px
Active text
#203435
Item padding
0.3rem 0.4rem
Item radius
6px
Accordion row
Base Attributes
Background
transparent
Text
#203435
Border
1px solid #D9D4C9
Radius
0px
Padding
0 0 1rem
Min height
43px

Scroll motion

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

Role
supportive
Scroll driver
hijacked/pinned
Cadence
measured
Patterns
  • -
    pinned roadmap band
  • -
    sticky paired explanatory visuals
Page logic
  • -
    A long process section can hold its visual frame while steps advance in sequence.
  • -
    Pinned behavior should clarify operational flow, not merely decorate it.
Constraints
  • -
    Use one or two major pinned chapters, not a fully trapped page.
  • -
    Keep the static frame understandable if pinning is removed.
Reduced motion
  • -
    Convert pinned chapters into stacked steps with the same content order.

Image direction

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

Role
supportive
Media types
  • -
    line illustration
  • -
    product card screenshot
  • -
    portrait crop
Subject patterns
  • -
    one schematic path or route per story block
  • -
    small floating service cards over cream or teal fields
Composition logic
  • -
    Let lines connect isolated nodes, copy, and screenshots.
  • -
    Keep the visual field open so diagrams do not become clutter.
Treatment rules
  • -
    Use dark teal line work with warm backgrounds.
  • -
    Add olive or sand only as local categorization accents.
Generation cues
  • -
    Describe the scene as a service diagram rather than a literal map.
  • -
    Combine one cropped UI or portrait tile with fine line routing.
Avoid
  • -
    No glossy enterprise renderings.
  • -
    No unrelated stock photography.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No hard corporate navy palettes.
  • -
    No loud card stacks fighting the process diagrams.
  • -
    No futuristic compliance visuals disconnected from the service narrative.