Refto
Meetup

Meetup

Find Meetup events, join groups, or start your own. Make new friends and connect with like-minded people. Meet people near you who share your interests.

InteractiveCommunityFunHorizontal ScrollingEventLightClean
3.0
16
Visits
Visit

Categories

CommunityEvent

Available Pages

Home

Version History

Design Analysis

Meetup Home design analysis

Community Card Carnival is a social discovery system that prioritizes momentum and friendliness. Search, categories, and event rails should feel effortless, broad, and welcoming, with bright white breathing room keeping...

Key Takeaways

  • Primary ( FF5A5F): the warm social signal.
  • Secondary ( 2F3136): main text and dark CTA color.
  • Tertiary ( B79CFF): soft lavender support accent.
  • Display: compact, strong, and highly legible.
  • Body: short and practical, supporting dense metadata.
  • Labels: small but clear, especially inside discovery cards and filters.

Overview

Community Card Carnival is a social discovery system that prioritizes momentum and friendliness. Search, categories, and event rails should feel effortless, broad, and welcoming, with bright white breathing room keeping the high content density from becoming stressful.

Image Direction

Use rounded event and people photography as discovery proof. Images should feel real, social, and active, but they must remain card-contained and easy to scan. Decorative pastel shapes may support the imagery, not replace it.

Colors

The palette is light, social, and direct.

  • Primary ( FF5A5F): the warm social signal.
  • Secondary ( 2F3136): main text and dark CTA color.
  • Tertiary ( B79CFF): soft lavender support accent.

Typography

Use a friendly, bold consumer grotesk.

  • Display: compact, strong, and highly legible.
  • Body: short and practical, supporting dense metadata.
  • Labels: small but clear, especially inside discovery cards and filters.

Design.md

System Overview

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

Community Card Carnival

A light community-marketplace system built from rounded search controls, social event cards, and soft pastel punctuation.

Social, approachable, and busy in a controlled consumer way.

Primary mode: lightconsumer discovery marketplacecontent-rich

Theme

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

Visual atmosphere
Summary
Social, approachable, and busy in a controlled consumer way.
Density
6
Variance
5
Motion
1
Signals
white canvas · rounded consumer controls · event-card rails · pastel social punctuation

Colors

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

Palette colors
Cloud White
#FCFCFD
Charcoal Text
#2F3136
Warm Coral
#FF5A5F
Lavender Pop
#B79CFF
Mint Pop
#9DE7C3
Soft Card
#FFFFFF
Quiet Border
rgba(47,49,54,0.10)
Usage rules
Let white stay dominant.
Use coral as the main action and brand signal.
Treat lavender and mint as decorative social support, not primary CTA colors.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
clamp(3.5rem, 7vw, 6rem)
group_gap
1rem
card_padding
1rem

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
NeuSans
friendly heavy grotesk
Body
NeuSans
consumer-friendly and compact
Mono
NeuSans
single-family system

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(2.5rem, 6vw, 4rem)/—
Display
H2
clamp(1.75rem, 4vw, 2.5rem)/—
H2
Body
1rem/—
Body
Caption
0.8125rem/—
Caption

Typography Rules

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

Rules
Use compact line lengths and bold display weight. · Support large content density with small but readable metadata. · Avoid premium-editorial restraint; the tone should remain social.

Motion

Motion tokens rendered as resolved values for timing and personality.

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

Motion

Resolved motion token values.

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

Layout Principles

Put search and location selection at the top.
Use dense horizontal rails for discovery.
Separate busy content areas with large quiet white sections.
Let category tiles and community proof modules feel friendly and broad.

Component Preview

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

Buttons primary
Base Attributes
Background
#2F3136
Text
#FFFFFF
Border
1px solid #2F3136
Radius
{tokens.radii.control}->999px
Padding
0.875rem 1rem
Min height
44px
Typography
body
Buttons secondary
Base Attributes
Background
#FFFFFF
Text
#2F3136
Border
1px solid rgba(47,49,54,0.12)
Radius
{tokens.radii.control}->999px
Padding
0.75rem 0.875rem
Min height
44px
Typography
caption
Cards event
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#2F3136
Border
1px solid rgba(47,49,54,0.08)
Radius
{tokens.radii.component}->1.25rem
Padding
0
Shadow
0 8px 22px rgba(0,0,0,0.04)
Cards category
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#2F3136
Border
1px solid rgba(47,49,54,0.08)
Radius
{tokens.radii.component}->1.25rem
Padding
1rem
Shadow
none
Inputs default
Base Attributes
Background
#FFFFFF
Text
#2F3136
Border
1px solid rgba(47,49,54,0.10)
Radius
{tokens.radii.control}->999px
Padding
0.875rem 1rem
Min height
44px
Placeholder
rgba(47,49,54,0.45)

Image direction

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

Summary
Use rounded people-and-event photography as discovery proof inside dense rails.

Responsive guidance

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

  • -
    Preserve search as the first task on mobile.
  • -
    Allow card rails to stack or scroll horizontally without shrinking text beyond readability.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No hard-edged enterprise tables.
  • -
    No black-heavy dark mode as the primary shell.
  • -
    No luxury editorial typography.
  • -
    No sterile minimalism that removes the social energy.
  • -
    No overuse of gradients or glassy surfaces.