Pika

Overview

Pika is a modern SaaS platform designed for developers and designers who need to create polished screenshots and mockups at scale. The design system embodies "Accessible Minimalism"—a philosophy that prioritizes clarity and usability without sacrificing visual delight. The brand personality is confident yet approachable: it speaks to professionals with precision and warmth, avoiding jargon while celebrating technical capability. The UI uses a clean white canvas (rgb(255, 255, 255)) as the foundation, with a vibrant hot pink primary accent (#ec4899) that draws attention to calls-to-action and key interactions. Supporting colors—emerald green for success states (#12b981) and sky blue for secondary actions (#3b82f6)—create a balanced, contemporary palette that feels both trustworthy and energetic. Voice example: "Capture your website in seconds, customize with precision, share with confidence."

Colors

The color system is built on a neutral-first foundation with strategic accent placement. The surface stack ranges from pure white (#ffffff) at the brightest level through carefully calibrated grays (#f5f5f5, #e5e5e5, #d4d4d4) to near-black (#111111) for inverse contexts. On-surface text is set to #171717 (not pure black) for reduced eye strain; on-surface-variant (#525252) is used for secondary information and disabled states. Primary (#ec4899) is the signature hot pink used exclusively on primary CTAs, focus states, and brand-critical interactive elements—never on backgrounds or body text. Secondary (#12b981) supports success confirmations, checkmarks, and positive feedback; tertiary (#3b82f6) handles informational elements and secondary actions. Error (#dc2626) is reserved for destructiv

Typography

The type system uses two primary typefaces: Inter for headlines and display text (weights 600–700 for hierarchy), and Public Sans for body copy and UI labels (weights 400–600 for legibility and warmth). Display text (60px, 700 weight, -0.04em letter-spacing) commands attention in hero sections; headline-lg (48px, 700 weight) anchors major sections; headline-md (32px, 600 weight) introduces subsections. Body-lg (18px, 400 weight, 28px line-height) is used for hero copy and prominent descriptions; body-md (16px, 400 weight, 24px line-height) serves as the default paragraph text. Labels use Public Sans at 14px (label-md, 600 weight, 0.01em letter-spacing) for buttons and form fields; label-sm (12px, 500 weight) for badges and metadata. All headline text uses -0.02em to -0.04em letter-spacing

Layout

The layout system uses a 12-column grid with a max-width of 1280px, centered on the viewport with 24px horizontal gutters on desktop. The spacing scale is semantic: unit (8px) is the base increment; xs (4px) for micro-spacing; sm (12px) for compact grouping; md (24px) for standard section padding; lg (40px) for major section separation; xl (64px) for hero-to-content transitions. Container padding uses md (24px) on desktop, reducing to sm (12px) on tablets and xs (4px) on mobile. White-space is generous but purposeful: hero sections use lg spacing above and below; card grids use md spacing between items; form fields use sm spacing for label-to-input separation. The header uses a sticky position with backdrop-filter: blur(12px) and rgba(255, 255, 255, 0.8) background to maintain visual hiera

Elevation & Depth

Depth in Pika's design is achieved through subtle layering and soft shadows rather than dramatic contrast. Level 1 (Base) is the white surface (#ffffff) with no shadow. Level 2 (Standard Card) uses a 1px border in outline-variant (#d4d4d4) and box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) to create gentle separation from the background. Level 3 (Elevated/Hover) applies box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) and transitions the background to surface-container-low (#f5f5f5), signaling interactivity. Level 4 (Modal/Overlay) uses box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) with a semi-transparent

Shapes

The shape system follows "Soft Modernism"—rounded corners that feel contemporary without being playful or overly organic. Buttons use lg (1rem / 16px) border-radius to create approachable, clickable targets; cards and modals use xl (1.5rem / 24px) for a more refined, spacious feel. Input fields use DEFAULT (0.5rem / 8px) for subtle definition without distraction. Badges and pills use full (9999px) for a compact, label-like appearance. The rationale: larger radii (lg, xl) on primary interactive elements signal importance and encourage engagement; smaller radii (DEFAULT, sm) on secondary element

Components

Action Elements Buttons are the primary interaction mechanism. The primary button (button-primary) uses #ec4899 background with white text, 44px height, 8px 24px padding, and lg (16px) border-radius. On hover, the background transitions to #db2777 (darker pink) over 200ms using cubic-bezier(0.2, 0, 0, 1) timing; on active, it shifts to #be185d. Secondary buttons (button-secondary) use a transparent background with a 1px outline-variant border, full (9999px) radius, and 8px 16px padding; on hover, they fill with surface-container-high (#e5e5e5). Ghost buttons (button-ghost) have no border or background by default, using primary text color (#ec4899); on hover, they fill with primary-container (#fce7f3). All buttons use label-md typography (14px, 600 weight) and support a disabled state w

Do's and Don'ts

**Do**

• Do use primary (#ec4899) exclusively for primary CTAs, focus states, and brand-critical interactions—never on backgrounds or body text.
• Do maintain 24px (md) gutters on desktop and reduce to 12px (sm) on tablets to preserve readability and touch targets.
• Do apply 200ms cubic-bezier(0.2, 0, 0, 1) transitions to all interactive state changes (hover, focus, active) for responsive, polished feedback.
• Do use Inter (600–700 weight) for headlines and Public Sans (400–600 weight) for body to create clear typographic hierarchy.
• Do layer shadows progressively: sm (0 1px 2px) for cards, md (0 4px 12px) for elevated states, lg (0 16px 40px) for modals.
• Do use on-surface (#171717) for primary text and on-surface-variant (#525252) for secondary information to reduce eye strain.

**Don't**

• Don't use primary (#ec4899) for backgrounds, disabled states, or secondary UI elements—reserve it for high-priority interactions only.
• Don't apply border-radius smaller than DEFAULT (8px) to buttons or cards; use lg (16px) minimum for primary buttons to maintain approachability.
• Don't use pure black (#000000) or pure white (#ffffff) for text; use #171717 for dark text and #ffffff only for surfaces to improve accessibility.
• Don't mix typefaces within a single component; use Inter for headlines and Public Sans for body—never reverse or combine arbitrarily.
• Don't apply shadows without corresponding background color changes; elevation must be accompanied by surface-layer transitions to signal depth.
• Don't use letter-spacing tighter than -0.04em on headlines or looser than 0.1em on labels; stay within the -0.04em to 0.05em range for legibility.