Creem

Overview

Creem is a payment platform designed to demystify financial operations for SaaS companies and indie hackers. The brand embodies "Playful Brutalism"—a design philosophy that combines bold, geometric typography (Gasoek One for headlines) with a light, approachable color palette dominated by vibrant accents: peach (#ffbe98), violet (#b09cfb), and green (#4ecb71). The interface feels confident and energetic, never corporate or sterile. Every interaction—from button presses to form submissions—is designed to feel rewarding and human-scaled.

The brand voice is conversational, direct, and slightly irreverent. Creem speaks to makers and builders, using language that's clear without being condescending. Example: "Payments that don't make you want to scream." The tone avoids jargon where possible, and when technical terms are necessary, they're explained with a wink. Typography choices reinforce this: the massive, playful Gasoek One headlines (124px, -0.03em letter-spacing) command attention, while GeistSans body text (16px, 400 weight, 24px line-height) remains legible and warm.

Colors

Creem's color system is built on a light-first foundation (#fdfcfa background, #f5f5f0 surface) with three primary brand accents that each serve distinct roles. Primary peach (#ffbe98) is the dominant call-to-action color—used on all major CTAs, form submissions, and interactive highlights. It sits atop a 2px solid border in dark (#151617) and casts a shadow of 0 3px 8px rgba(0, 0, 0, 0.15) to create tactile depth. Secondary violet (#b09cfb) supports navigation, secondary actions, and accent highlights; it pairs with white text for maximum contrast. Tertiary green (#4ecb71) is reserved for success states, confirmations, and positive feedback. The error color (#ff6b6b) is a warm red used sparingly for destructive actions and validation errors. All surfaces follow a strict container stack: s

Typography

The type system uses two distinct families to create visual hierarchy and personality. Gasoek One (400 weight only, no heavier) is reserved for display and headline scales—it's geometric, bold, and immediately recognizable. Display text runs at 124px with -0.03em letter-spacing and 132px line-height, creating a compressed, energetic feel. Headline-lg uses 56px / 64px line-height, headline-md uses 40px / 48px. GeistSans (400 for body, 600 for labels/buttons) handles all body copy, navigation, and interactive text. Body-lg is 18px / 28px (used for hero subheadings), body-md is 16px / 24px (standard paragraph text), and label-md is 14px / 20px with 0.01em letter-spacing (buttons and form labels). All small labels (12px) receive 0.02em letter-spacing to improve readability at reduced size. Whe

Layout

Creem uses a fluid 12-column grid with a max-width of 1400px, centered on the viewport. The page rhythm is driven by consistent spacing: lg (40px) separates major sections (hero, features, pricing), md (24px) separates cards and content blocks within sections, and sm (12px) separates inline elements (buttons in a row, list items). The gutter (24px) is applied to all horizontal padding on the container. Hero sections use full-width backgrounds with a gradient or solid color (e.g., the vibrant purple-violet gradient visible in the screenshot), while content sections sit within the max-width container. White-space is generous—never cramped—to let the bold typography and vibrant colors breathe. The navigation bar is fixed at the top with a white background (rgba(255, 255, 255, 0.95) with backd

Elevation & Depth

Depth is achieved through a combination of shadows, borders, and subtle transforms. The shadow system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle elevation on hover states, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and buttons, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and overlays. All interactive elements (buttons, cards) have a 2px solid border in either dark (#151617) or a brand color, which creates a "printed" quality that reinforces the Playful Brutalism aesthetic. On hover, buttons and cards lift 2px (transform: translateY(-2px)) and their shado

Shapes

Creem employs "Geometric Softness"—a shape philosophy that balances sharp corners with approachable curves. Buttons and form inputs use rounded.lg (1rem / 16px) for a friendly, modern feel that's neither too sharp nor too rounded. Cards and containers use rounded.xl (1.5rem / 24px) to create visual distinction from buttons. The navigation bar and modals use rounded.xl as well. Input fields use rounded.DEFAULT (0.5rem / 8px) to feel more technical and form-like. Badges and pills use rounded.full (9999px) for maximum approachability. The rationale: larger radius values (xl, full) are used on pro

Components

Action Elements Buttons are the primary interactive element and come in three variants: primary (peach background, dark text, 2px dark border, md shadow), secondary (violet background, white text, 2px dark border, md shadow), and ghost (transparent background, dark text, 2px dark border, no shadow). All buttons are 44px tall with 12px vertical and 20px horizontal padding. On hover, buttons lift 2px (transform: translateY(-2px)), shadow increases to lg (0 8px 24px rgba(0, 0, 0, 0.12)), and background darkens by ~10%. On active/press, transform reverses and shadow drops to sm. Transition timing is 200ms ease. The "Get started" CTA in the hero uses primary styling with an arrow icon (lucide-arrow-right, 3.5px × 3.5px) that translates 0.5px on hover.

Containers & Surfaces Cards use su

Do's and Don'ts

**Do**

• Do use peach (#ffbe98) exclusively for primary CTAs and major interactive elements—it's the signature brand color and should never be diluted or overused on secondary actions.
• Do apply 2px solid borders in dark (#151617) to all buttons, cards, and prominent containers to reinforce the Playful Brutalism aesthetic and create visual clarity.
• Do maintain the lg spacing (40px) between major sections and md spacing (24px) between cards to create breathing room and prevent visual clutter.
• Do use Gasoek One (400 weight) only for display and headline scales—never use it for body text or labels, as it's designed for impact, not readability at small sizes.
• Do lift interactive elements 2px on hover and apply shadow-lg to create tactile, rewarding feedback that reinforces the playful brand personality.

**Don't**

• Don't use the brand colors (peach, violet, green) as text colors on light backgrounds—they lack sufficient contrast. Use on-surface (#151617) for all body text.
• Don't apply rounded.full (9999px) to buttons or cards; reserve it for badges and pills only. Buttons use rounded.lg (16px), cards use rounded.xl (24px).
• Don't mix Gasoek One and GeistSans at the same size or weight—they have very different visual weights. Use Gasoek One for headlines (40px+) and GeistSans for everything else.
• Don't remove or lighten the 2px borders on interactive elements; they're essential to the brand identity and improve accessibility by providing clear visual boundaries.
• Don't use shadows alone for elevation; always pair shadows with a 2px border and subtle color shifts to create a cohesive, intentional hierarchy.