Subscrr

Overview

Subscrr is a financial clarity tool for iOS and Apple Watch that transforms subscription chaos into honest, actionable insight. The brand embodies **Warm Minimalism with Vivid Accent**—a design philosophy that pairs a paper-like, neutral canvas (warm beige #f4f2ec, off-white #ffffff) with a single, uncompromising accent color (vivid orange-red #ff2500) to guide attention and signal action. The aesthetic is deliberately restrained: thin borders (1–1.5px), generous whitespace, and typography that prioritizes legibility over decoration. The emotional response is calm clarity—users feel in control, never overwhelmed. The brand voice is direct, honest, and slightly irreverent: "See what you really pay per day, month and year, and get a nudge the day before the money leaves." Subscrr speaks to the user's pain point without sugar-coating, using short, punchy sentences and active verbs. Example sentence in brand voice: "Never get surprise-charged again."

Colors

The color system is built on a warm, paper-like foundation (surface #f4f2ec, surface-dim #eae6dc) that evokes trust and clarity, paired with a single, dominant accent—vivid orange-red (#ff2500)—that commands attention on CTAs, links, and interactive states. Primary (#ff2500) is used exclusively for call-to-action buttons, hover states, focus rings (0 0 0 3px rgba(255, 37, 0, 0.12)), and brand-critical interactive elements; it is never used for body text or passive surfaces. Secondary (#aec4f7, a soft periwinkle) and Tertiary (#4c63c7, a deeper blue-violet) provide supporting accent roles for data visualization, badges, and secondary UI layers without competing with primary. The surface stack is semantic: surface-container-lowest (#ffffff, pure white for cards), surface-container (#f4f2ec,

Typography

The type system uses two families: Inter Tight (fontFamily: 'Inter Tight', weights 500–900) for display and headline layers, and Inter (weights 400–900) for body and label layers. Inter Tight's tighter metrics and higher x-height make it ideal for bold, attention-grabbing headlines (display: 69px, 800 weight, -0.035em letter-spacing; headline-lg: 48px, 800 weight); Inter's openness and neutrality ground body copy and UI labels. The hierarchy is strict: display (69px) for hero titles, headline-lg (48px) for section headers, headline-md (36px) for subsections, title-lg (20px) for card titles, body-lg (18px) for long-form copy, body-md (16px) for standard UI text, label-md (15px, 600 weight) for buttons and interactive labels, and label-sm (14px, 500 weight) for captions and metadata. All hea

Layout

The page uses a fluid, centered layout with a max-width of 1320px (--wrap: 1320px) and a 12-column grid model. Padding is semantic and responsive: --pad: clamp(20px, 5vw, 84px), scaling from 20px on mobile to 84px on desktop. Section separation uses lg spacing (40px) for major rhythm breaks and md spacing (24px) for component-level breathing room. The gutter between grid columns is 24px (--gutter: 24px). Container elements (hero, feature sections, cards) use surface-container (#f4f2ec) as the default background, with surface-container-lowest (#ffffff) reserved for elevated cards and modals. Whitespace is treated as a design material: generous margins around headlines (margin-top: 0, margin-bottom: 0 on h1–h3 to allow parent containers to manage spacing), and consistent padding inside cards

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle layering, never through darkness or blur. The elevation model uses three levels: Level 1 (Base, no shadow) for the page background and surface-container; Level 2 (Standard Card, sm shadow: 0 4px 16px -6px rgba(30, 28, 24, 0.16)) for cards, input fields, and standard UI containers—this shadow is soft, warm, and close to the surface, suggesting a 4px lift; Level 3 (Elevated/Modal, md shadow: 0 26px 60px -28px rgba(38, 34, 28, 0.34)) for modals, popovers, and hero-level CTAs—this shadow is larger, more diffuse, suggesting a 26px lift

Shapes

The shape philosophy is **Soft-Technical Minimalism**: rounded corners are used strategically to soften the grid without sacrificing clarity or precision. The rounded scale is: sm (4px) for small UI elements (dropdown options, minor borders), DEFAULT (8px) for input fields and subtle containers, md (12px) for list items and secondary cards, lg (26px) for primary cards and component containers, xl (40px) for hero sections and large modals, and full (100px) for buttons and pills. Buttons always use full (100px border-radius) to signal their interactive nature and create a pill-shaped affordance;

Components

Action Elements Buttons are the primary interactive affordance. **button-primary** (backgroundColor: {colors.primary}, textColor: {colors.on-primary}, rounded: {rounded.full}, padding: 18px 34px, height: 52px, boxShadow: 0 6px 20px -10px rgba(255, 37, 0, 0.45)) is used for all primary CTAs ("Download on the App Store", "Get the app"). On hover, opacity transitions to 0.88 over 0.3s var(--ease), and the shadow deepens. On active, transform: scale(0.96) creates tactile feedback. **button-secondary** (backgroundColor: transparent, borderColor: {colors.outline-variant}, borderWidth: 1.5px, rounded: {rounded.full}, padding: 15px 26px) is used for secondary actions ("See it in motion"); on hover, backgroundColor transitions to {colors.surface-container-high} over 0.3s. **button-ghost** (back

Do's and Don'ts

**Do**

• Do use the orange accent (#ff2500) exclusively for interactive elements (buttons, links, focus states) and brand-critical moments—never for passive surfaces or body text.
• Do maintain the warm, paper-like background (#f4f2ec) as the default surface; it creates visual calm and makes the orange accent pop.
• Do apply generous whitespace (lg spacing: 40px for section breaks, md spacing: 24px for component breathing room) to reinforce clarity and reduce cognitive load.
• Do use Inter Tight (800 weight, -0.035em letter-spacing) for headlines to create visual hierarchy and energy; reserve Inter for body and UI labels.
• Do transition all interactive states (hover, focus, active) over 0.3s var(--ease) or 0.4s var(--ease) to create smooth, predictable feedback.
• Do use the full rounded scale (100px for buttons, 26px for cards, 8px for inputs) to create clear affordance hierarchy without sacrificing minimalism.

**Don't**

• Don't use the orange accent (#ff2500) for backgrounds, borders, or passive UI—it must remain reserved for interactive elements to maintain signal strength.
• Don't mix rounded scales arbitrarily; buttons are always full (100px), cards are always lg (26px), inputs are always DEFAULT (8px).
• Don't apply shadows heavier than {elevation.lg} (0 50px 110px -40px rgba(38, 34, 28, 0.42)); the system is built on restraint, not depth.
• Don't use pure black (#000000) or pure white (#ffffff) for text or large surfaces—use on-surface (#1a1712) and surface-container (#f4f2ec) to maintain warmth.
• Don't animate transitions faster than 0.3s or slower than 0.5s; the brand uses cubic-bezier(0.16, 1, 0.3, 1) (--ease) for standard interactions and cubic-bezier(0.34, 1.56, 0.64, 1) (--spring) for spring effects.
• Don't override the typography hierarchy (display > headline-lg > headline-md > body-lg > body-md > label-md > label-sm); each level serves a specific cognitive purpose.