ifold

Overview

ifold is a live marketplace for iPhone Fold real estate, embodying a **transaction-driven minimalism** aesthetic. The brand serves ambitious product teams and marketers who want premium visibility on a coveted device feature. The UI evokes clarity and urgency through a stark, monochromatic palette punctuated by functional accent colors (green for success, blue for secondary actions, red for error states). The emotional response is one of competitive energy and straightforward commerce—no flourish, no distraction, just the mechanics of supply and demand made visible.

The brand voice is direct, precise, and slightly irreverent. Vocabulary favors active verbs and concrete numbers: "Pay to rank," "take #5 for $16," "RouterGrowth took #5 from Ortouch for $11." Tone is conversational but never casual; it respects the user's time and intelligence. Example sentence in brand voice: "Your brand sits on 3,064 people's home screens right now—claim a better spot before someone else does."

Colors

The color system is anchored in **Apple-inspired neutrality** with surgical accent deployment. Primary (#1d1d1f, the brand's signature ink black) dominates text, buttons, and interactive elements, creating a sense of authority and precision. Surface colors range from pure white (#ffffff) to a soft mist (#f5f5f7), with intermediate containers (#e9ecef, #efefef) providing subtle visual hierarchy without introducing visual noise. The outline token (#d2d2d7) is a hairline gray used for borders and dividers, maintaining the system's austere elegance.

Accent colors are deployed strategically: Secondary green (#1f8a4c) signals success, progress, and live status (e.g., the progress bar, the live indicator dot); tertiary blue (#3b6cff) supports secondary CTAs and information hierarchy; error red (

Typography

The type system uses Inter exclusively, a geometric sans-serif that reinforces the brand's technical, no-nonsense character. Display (64px, 500 weight, -0.06em tracking) is reserved for the hero headline and commands attention through scale and negative letter-spacing, creating a sense of compression and urgency. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) establish section hierarchy with tighter line-heights (1.2–1.3) to reinforce density and forward momentum. Body text (16px, 400 weight, 24px line-height) is set at a comfortable reading size with generous line-height for accessibility. Label-md (14px, 500 weight) and label-sm (12px, 500 weight) are used for UI labels, badges, and micro-copy, with increased letter-spacing (0.01–0.02em) to prevent visual clutter at sm

Layout

The layout follows a **fixed-width, center-aligned container model** with a max-width of 1280px (var(--container-5xl) in Tailwind terms). The grid is 12 columns, but most sections use a simpler 2–4 column layout for clarity. Horizontal padding is 24px (gutter) on desktop, reducing to 20px on tablet and 16px on mobile, ensuring content never touches the viewport edge. Vertical rhythm is established through a spacing scale: 4px (xs), 12px (sm), 24px (md), 40px (lg), 64px (xl). Section separation uses lg spacing (40px) to create breathing room; internal component spacing uses md (24px) or sm (12px). The hero section uses clamp() for responsive typography (e.g., h1: clamp(2rem, 5vw, 4rem)), allowing fluid scaling between breakpoints without media queries. The iPhone Fold visualization uses abs

Elevation & Depth

Depth is achieved through **subtle shadows and layering**, not through color or blur. The elevation scale defines three levels: sm (0 1px 2px rgba(0, 0, 0, 0.05)) for cards and subtle containers, md (0 3px 8px rgba(0, 0, 0, 0.15)) for interactive elements on hover, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals or high-priority overlays. The header uses a frosted glass layer (backdrop-filter: blur(12px), background: rgba(255, 255, 255, 0.7)) combined with a 1px bottom border (border-color: var(--hairline)) to create a floating effect without heavy shadows. Buttons and interactive elements

Shapes

The shape system follows **Apple's design language: minimal, functional, and context-aware**. Buttons use full border-radius (9999px) to create pill-shaped affordances that feel modern and approachable, with padding of 8px 20px and a minimum height of 40px. Cards and containers use 16px (lg) radius for a subtle, refined appearance that avoids the harshness of sharp corners without the softness of excessive rounding. Input fields use 8px (DEFAULT) radius for a clean, utilitarian look. The progress bar uses full radius (9999px) to match button styling and create visual cohesion. The iPhone Fold

Components

Action Elements Buttons are the primary interactive element and come in three variants: primary (solid ink background, white text, full radius, 40px height, 8px 20px padding, 13px label-sm weight), secondary (surface-container-high background, ink text, same dimensions), and ghost (transparent with 1px outline, ink text). All buttons transition to a hover state over 150ms using cubic-bezier(0.4, 0, 0.2, 1); primary buttons reduce opacity to 0.8, secondary buttons shift to surface-container, and ghost buttons fill with surface-container-low. The "Get on the board" header button uses primary styling with a rounded-full shape. The "claim" pills overlaid on the Fold visualization use a smaller variant (10px font, 4.16px 10.4px padding, 9999px radius) to maintain visual hierarchy within the

Do's and Don'ts

**Do**

• Do use ink (#1d1d1f) for all primary text and interactive elements; it's the brand's signature color and creates visual authority.
• Do apply green (#1f8a4c) exclusively for success states, live indicators, and progress visualization—it signals momentum and positive action.
• Do maintain 24px gutter spacing on desktop and reduce proportionally on mobile; never let content touch the viewport edge.
• Do use full border-radius (9999px) on all buttons and pills to create a modern, approachable affordance that contrasts with the austere typography.
• Do apply the frosted glass header effect (backdrop-filter: blur(12px), rgba(255, 255, 255, 0.7)) to create depth without abandoning minimalism.
• Do transition all interactive elements over 150ms using cubic-bezier(0.4, 0, 0.2, 1) for consistent, snappy feedback.
• Do use Inter exclusively at 500–600 weight for headlines and 400 weight for body; avoid mixing typefaces or using system fonts.
• Do reserve red (#e40014) for error states and high-stakes interactions only; overuse dilutes its urgency.

**Don't**

• Don't use colors outside the defined palette (no custom gradients, no off-brand accent colors); the system's power lies in its constraint.
• Don't apply shadows heavier than lg (0 8px 24px rgba(0, 0, 0, 0.12)); excessive depth contradicts the minimal aesthetic.
• Don't round corners beyond 24px except for pills and full-radius elements; over-rounding softens the technical character.
• Don't use opacity or transparency for primary interactive elements; always use solid colors from the surface or accent palette.
• Don't add animations longer than 500ms or use easing functions other than cubic-bezier(0.4, 0, 0.2, 1); the brand moves with precision, not flourish.
• Don't mix font weights within a single line of text; use 400 for body, 500 for labels, 600 for headlines—no in-between.
• Don't exceed a max-width of 1280px or reduce gutter spacing below 16px on mobile; layout discipline maintains the brand's clarity.
• Don't use blue (#3b6cff) for primary CTAs; it's a secondary accent. Primary buttons are always ink (#1d1d1f) on white.