Share yourworld

Capture, edit, and share photos and videos with the people who matter most. Join a growing community of creators and storytellers.

Download on the

App Store

Get it on

Google Play

Express yourself

From stories to clips, Momento gives you all the creative tools to share your world.

Stories

Share moments that disappear after 24 hours. Add stickers, music, and polls.

Reels

Create and discover short entertaining videos. Add effects, audio, and AR filters.

Messages

Send photos, videos, and disappearing messages to friends and groups.

Explore

Discover new creators, trends, and content tailored to your interests.

10M+

Monthly active users

5M+

Photos shared daily

20M+

Stories viewed daily

Theme Config

Edit the CSS custom properties below and click Apply to see changes live. Copy the config to use in your own project.

:root {
  /* Colors — sunset orange */
  --background: 0 0% 100%;
  --foreground: 0 0% 10%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 10%;
  --primary: 24 90% 55%;
  --primary-foreground: 0 0% 100%;
  --secondary: 24 10% 96%;
  --secondary-foreground: 0 0% 40%;
  --accent: 24 50% 95%;
  --accent-foreground: 24 90% 40%;
  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 45%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --success: 142 71% 40%;
  --success-foreground: 0 0% 100%;
  --warning: 38 92% 50%;
  --warning-foreground: 0 0% 10%;
  --border: 0 0% 90%;
  --input: 0 0% 90%;
  --ring: 340 82% 52%;
  --chart-1: 340 82% 52%;
  --chart-2: 25 95% 55%;
  --chart-3: 280 60% 55%;
  --chart-4: 200 70% 50%;
  --chart-5: 160 60% 45%;

/* Sidebar */
  --sidebar-background: 0 0% 100%;
  --sidebar-foreground: 0 0% 10%;
  --sidebar-primary: 340 82% 52%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 340 50% 95%;
  --sidebar-accent-foreground: 340 82% 42%;
  --sidebar-border: 0 0% 90%;
  --sidebar-ring: 340 82% 52%;

/* Typography */
  --font-sans: system-ui, -apple-system, sans-serif;
  --font-heading: system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

/* Shadows */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-md: 0 2px 6px -1px rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.03);
  --shadow-lg: 0 8px 16px -3px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.03);
  --shadow-xl: 0 16px 28px -6px rgb(0 0 0 / 0.08), 0 4px 8px -4px rgb(0 0 0 / 0.04);

/* Glass & overlay */
  --overlay-opacity: 0.5;
  --backdrop-blur: 10px;
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.2);

/* Spacing & density — playful */
  --spacing-scale: 1;
  --container-max-width: 1280px;
  --container-padding: 2rem;
  --card-padding: 1rem;
  --input-height: 2.5rem;
  --button-height: 2.25rem;
  --section-gap: 4rem;

/* Typography tokens */
  --letter-spacing-tighter: -0.03em;
  --letter-spacing-tight: -0.015em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;
  --letter-spacing-wider: 0.05em;
  --line-height-tight: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  --heading-weight: 700;
  --heading-letter-spacing: -0.015em;
  --heading-line-height: 1.2;

/* Shape — rounded, playful */
  --radius: 0.5rem;
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-full: 9999px;
  --avatar-radius: 9999px;
  --badge-radius: 9999px;
  --button-radius: 0.5rem;
  --input-radius: 0.5rem;
  --card-radius: 0.5rem;
  --tooltip-radius: 0.375rem;

/* Component shadows */
  --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.04);
  --dropdown-shadow: 0 8px 16px -3px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.03);
  --dialog-shadow: 0 16px 28px -6px rgb(0 0 0 / 0.08), 0 4px 8px -4px rgb(0 0 0 / 0.04);
  --button-shadow: none;

/* Borders & dividers */
  --border-width: 1px;
  --border-style: solid;
  --divider-style: solid;
  --divider-opacity: 0.1;

/* Inputs */
  --input-style: bordered;
  --input-border-on-focus: 0;
  --placeholder-opacity: 0.45;

/* Buttons */
  --button-style: filled;
  --button-weight: 600;
  --hover-effect: darken;
  --active-effect: scale-down;
  --disabled-opacity: 0.5;

/* Links */
  --link-style: color-only;
  --link-weight: 600;

/* Focus */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-style: ring;

/* Icons */
  --icon-style: outlined;
  --icon-stroke-width: 1.5;
  --icon-size: 1.25rem;

/* Scrollbar */
  --scrollbar-style: thin;
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(0, 0, 0, 0.1);

/* Selection */
  --selection-background: 340 82% 52%;
  --selection-foreground: 0 0% 100%;

/* Tooltips */
  --tooltip-style: dark;

/* Tables */
  --table-style: clean;
  --table-header-weight: 600;

/* Loading */
  --spinner-style: circle;

/* Motion */
  --transition-duration: 200ms;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --animation-speed: fast;
  --hover-transition: 200ms ease;
  --enter-transition: 250ms ease-out;
  --exit-transition: 200ms ease-in;
}

RBuilt with Refraction UI