Refto
Design Gal Studio

Design Gal Studio

Home of independent designer Christine Maggi. Offering web design and UX design services for mission-driven startups.

Scrolling AnimationDesignAgencyPortfolioColorfulSingle Page
3.0
2
Visits
Visit

Sections

Single Page

Available Pages

Home

Version History

Design Analysis

Design Gal Studio Home design analysis

Pastel Service Quilt is a friendly boutique-marketing system built from cream paper, dark ink type, and a handful of broad candy accents. The page should feel personal and optimistic, with modular rounded panels doing mo...

Key Takeaways

  • Primary ( 10183A): the single anchor color for major type and primary actions.
  • Secondary ( FADC4B): butter-yellow utility chips and friendly support accents.
  • Tertiary ( FF5E79): coral-pink emphasis block for one hero panel or loud punctuation.
  • Display: rounded, friendly, and tightly tracked.
  • Body: concise and direct, without startup-corporate stiffness.
  • Labels: slightly stronger weight, but keep them in the same family to preserve warmth.

Overview

Pastel Service Quilt is a friendly boutique-marketing system built from cream paper, dark ink type, and a handful of broad candy accents. The page should feel personal and optimistic, with modular rounded panels doing most of the compositional work.

Image Direction

Use photography as one panel inside a larger collage rather than as a full-bleed dominant field. Real interiors, shelves, desks, and tactile artifacts work best when framed by flat color blocks that keep the system feeling designed rather than documentary.

Colors

The palette is warm and edited.

  • Primary ( 10183A): the single anchor color for major type and primary actions.
  • Secondary ( FADC4B): butter-yellow utility chips and friendly support accents.
  • Tertiary ( FF5E79): coral-pink emphasis block for one hero panel or loud punctuation.

Typography

Use a soft grotesk with large display sizing and practical body copy.

  • Display: rounded, friendly, and tightly tracked.
  • Body: concise and direct, without startup-corporate stiffness.
  • Labels: slightly stronger weight, but keep them in the same family to preserve warmth.

Design.md

System Overview

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

Pastel Service Quilt

A warm service-marketing system built from cream paper, navy type, candy accents, and broad rounded modules.

Friendly, personal, tactile, and upbeat without becoming childish.

Primary mode: lightboutique service marketingmarketing-rich

Theme

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

Visual atmosphere
Summary
Friendly, personal, tactile, and upbeat without becoming childish.
Density
4
Variance
5
Motion
1
Signals
cream paper field · navy anchor typography · candy accent blocks · rounded modular composition

Colors

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

Palette colors
Paper Cream
#FDF9EC
Ink Navy
#10183A
Sun Butter
#FADC4B
Bubblegum Coral
#FF5E79
Soft Peach
#F6D8C9
Whisper Gray
rgba(16,24,58,0.10)
Usage rules
Keep cream as the dominant field.
Use navy as the single stabilizing anchor.
Let yellow and coral arrive as broad blocks, not tiny UI sprinkles.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
clamp(4rem, 8vw, 7rem)
group_gap
0.875rem
card_padding
1.25rem

Token Radii

Corner radii tokens with a live surface sample.

control
999px
component
1.25rem
container
1.5rem

Typography Families

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

Display
Figtree
soft grotesk with rounded energy
Body
Figtree
clean, approachable, and direct
Mono
Figtree
use the same family for labels to preserve softness

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3.5rem, 8vw, 5.5rem)/—
Display
H2
clamp(2rem, 5vw, 3rem)/—
H2
Body
1rem/—
Body
Caption
0.875rem/—
Caption

Typography Rules

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

Rules
Favor large friendly display text over heavy weight jumps. · Keep body copy compact and practical. · Avoid formal editorial contrast.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
120ms-180ms
Easing
cubic-bezier(.2, .8, .2, 1)
Spring
stiffness 110, damping 20

Motion

Resolved motion token values.

PropertyValue
duration120ms-180ms
easingcubic-bezier(.2, .8, .2, 1)
springstiffness 110, damping 20

Layout Principles

Compose the page as a loose quilt of rounded rectangles.
Let one panel carry the main statement and a neighboring panel carry photography.
Prefer asymmetry with soft edges over rigid enterprise grids.
Keep whitespace generous below the opening collage.

Component Preview

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

Buttons primary
Base Attributes
Background
#10183A
Text
#FDF9EC
Border
1px solid #10183A
Radius
{tokens.radii.control}->999px
Padding
0.875rem 1rem
Min height
48px
Typography
body
Buttons secondary
Base Attributes
Background
#FADC4B
Text
#10183A
Border
1px solid rgba(16,24,58,0.06)
Radius
{tokens.radii.control}->999px
Padding
0.625rem 0.875rem
Min height
36px
Typography
caption
Cards feature
Feature Card
Component preview content
Base Attributes
Background
#FDF9EC
Text
#10183A
Border
1px solid rgba(16,24,58,0.06)
Radius
{tokens.radii.container}->1.5rem
Padding
{tokens.spacing.card_padding}->1.25rem
Shadow
none
Cards accent
Feature Card
Component preview content
Base Attributes
Background
#FF5E79
Text
#10183A
Border
none
Radius
{tokens.radii.container}->1.5rem
Padding
1.5rem
Shadow
none
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
rgba(16,24,58,0.72)
Active text
#10183A
Item background
#F7EBC5
Item padding
0.375rem 0.625rem
Item radius
{tokens.radii.control}->999px

Image direction

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

Summary
Use real-space photography as one panel inside a modular collage.

Iconography

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

Summary
Minimal icon use; favor abstract floral blobs and simple badges over dense symbol sets.

Responsive guidance

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

  • -
    Stack the hero collage vertically on mobile without losing the two-panel conversation between copy and image.
  • -
    Keep utility chips scrollable or wrap them cleanly instead of shrinking them into illegibility.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No cold SaaS blue-gray palette.
  • -
    No razor-sharp corners.
  • -
    No glassmorphism or glossy gradients.
  • -
    No overpacked feature grids that kill the handmade warmth.
  • -
    No tiny monochrome chips that replace the big color-block posture.