Once

Overview

Once is a private, event-scoped photo sharing product built around the feeling of a disposable camera passed around a room. Its aesthetic movement is best described as Editorial Dark Minimalism: a near-black canvas (#0d0d0d) carries large serif display type (Rosemartin at 46px and Instrument Serif at 60px) against a restrained, sans-serif UI layer (Pretendard). The emotional response is intimate and unhurried, as if the page were a printed invitation that happens to be interactive. Floating glass-like chrome, such as the bottom navigation bar with a 25px backdrop blur over a 6% white fill, lets phone mockups and warm photography read through without competing with them.

The voice is calm, confident and gently premium. Copy uses short declarative sentences, sentence-case body text, and uppercase tracked labels (for example 'TRY ONCE' and 'HOW IT WORKS' at 0.18em to 0.24em letter-spacing) for navigation and metadata. Playful details such as the asterisk glyph and the phrase 'Your camera is already waiting!' keep the tone warm. Example sentence: "Your camera is already waiting. No download needed."

Colors

The palette is dominated by neutral near-blacks and warm off-whites, with a single cool accent. Primary (#87c7f2) is the signature sky-blue used on the primary call-to-action surfaces and link emphasis such as the 'proof' link; it is the only saturated hue in the chrome and should be reserved for interactive affordances. The primary-fixed-dim value is the same blue, and hover states step to the lighter primary-fixed (#cfe9fa) rather than darkening. Secondary (#e6e1d7) is a warm bone tone used for the secondary CTA fill and inverse surfaces (#eae7e2 on header-cta hover), giving the product a paper-like warmth against the cool accent. Tertiary (#aaaaaa) is a muted grey for supporting metadata and small labels.

Surfaces stack from background #0d0d0d through surface-container-low #171717 (foo

Typography

The type system pairs three families with distinct roles. Rosemartin, a high-contrast display serif, carries the hero headline at 46px with a 1.1 line-height and the blog and article titles at 40px to 46px. Instrument Serif, used for section headings such as the proof, how-it-works and FAQ titles at 60px with line-height 1, provides a more condensed editorial counterpoint. Pretendard handles all UI and body text: 16px regular at 1.6 line-height for hero copy, 18px light at 1.6 for long-form prose, 15px medium at 18px line-height for button labels, and 10px to 14px uppercase labels with letter-spacing between 0.18em and 0.24em for eyebrows and navigation. Apply letter-spacing: -0.04em to large serif article titles so that they tighten into a magazine-like block, and keep eyebrow labels at 0

Layout

The layout is a fluid, centered container: --content is min(90%, 1296px), and section wrappers take the full width minus 5% gutters on each side. Content is arranged on a 3-column grid for review and step cards with a 56px gap (reviews) or 12px gap (steps), and on a 2-column split for blog and article indices with a 60px gap. Vertical rhythm is generous: section padding runs from 80px to 170px top and up to 165px bottom, so the spacing scale leans on the xl (24px) for internal card padding, lg (20px) for stacked label-to-content relationships, and the 80px / 2xl step for section separation. The hero is a fixed 1078px min-height composition with copy occupying the left 810px and a phone mockup absolutely positioned at 62% width on the right. Whitespace is treated as a material, not as lefto

Elevation & Depth

Hierarchy is conveyed mainly through tonal surface steps and hairline strokes rather than heavy shadows. The floating bottom navigation uses a three-part glass recipe: background rgba(255, 255, 255, 0.06), backdrop-filter: blur(25px), and a 1px border of rgba(255, 255, 255, 0.04), with an inset highlight of inset 0 -1px #ffffff14. Dropdown menus use the layered shadow stack '0 24px 100.8px -1px #0006' combined with 'inset 0 0 0 1px #ffffff14' so that the panel lifts gently off the #1c1c1c surface. Cards rely on the inset 0 0 0 1px #ffffff0a hairline rather than drop shadows. Level 1 is the #0d

Shapes

The shape philosophy is Soft-Organic Geometry: generous, consistently rounded corners that feel tactile like a physical photo print rather than a sharp UI frame. Primary CTAs use an 18px radius, pill-shaped buttons (999px) are reserved for the global .button utility, store badges use 8px for a tighter, badge-like silhouette, and cards and step panels use 34px to 38px (rounded to the xl tier of 32px). Use the 18px radius for all interactive affordances so that buttons and inputs share a single corner language, and reserve the largest radii for containers that hold imagery, so that photographs a

Components

Action Elements Primary CTAs are filled with the sky-blue primary (#87c7f2) and dark on-primary text, set at 48px height with 14px by 16px padding and an 18px radius. On hover, the fill shifts to primary-fixed (#cfe9fa) with a 150ms to 200ms ease transition. The inverse header CTA uses a solid white fill with #eae7e2 on hover. Secondary and ghost actions sit on rgba(255, 255, 255, 0.04) to 0.1 fills with no border, and transition over 200ms.

Containers & Surfaces Cards use surface-container (#1c1c19) with a 1px #262626 border and a 34px radius on step cards, or the 24px to 28px radii used for QR and feature panels. Padding is 24px to 26px horizontal and 24px to 30px vertical. Floating navigation uses a 25px backdrop blur and a 24px top radius. Hover states lift a card to surface-c

Do's and Don'ts

**Do**

• Do reserve the sky-blue primary (#87c7f2) for CTAs, active states and key links only.
• Do pair Rosemartin or Instrument Serif display headings with Pretendard UI text for every page.
• Do use uppercase labels with 0.18em to 0.24em letter-spacing for navigation and eyebrows.
• Do keep section padding at 80px or more on desktop to preserve the editorial whitespace.

**Don't**

• Don't introduce additional saturated hues into the chrome beyond the blue accent and warm bone secondary.
• Don't use heavy drop shadows on cards; rely on tonal surface steps and 1px hairline borders instead.
• Don't set body or UI text bolder than 650 weight.
• Don't use pure white as a surface fill for large areas except for the single inverse CTA and the scroll-hero secondary button.