Saweria

Overview

Saweria is a playful, community-centric creator support platform that transforms direct fan patronage into a joyful, accessible experience. The brand serves content creators and their communities across Indonesia and the Philippines, enabling seamless financial support through multiple local payment methods. The aesthetic is "Whimsical Brutalism"—a collision of soft, rounded character illustrations with bold, chunky UI elements and stark geometric shadows (0.4rem 0.4rem offset, solid #222222 drop). The emotional response is one of approachability and celebration: the platform feels like a friend group pooling resources, not a sterile fintech interface.

Saweria's voice is warm, conversational, and playfully irreverent. The brand speaks in Indonesian idiom and uses casual, supportive language—"Sobat Sawer" (Sawer buddy), "bantu mereka terus berkarya" (help them keep creating). Vocabulary leans into community and action: support, creator, direct, easy, fast. Example sentence in brand voice: "Ada 140+ pilihan! Aktifkan toko mu di Saweria, gampang dan cepat!" (140+ options! Activate your shop on Saweria, easy and fast!)

Colors

The color system balances three distinct accent families—a cool primary blue (#4299e1), a warm secondary yellow (#faae2b), and a playful tertiary pink (#fe98a3)—against a neutral white surface (#ffffff) and dark text (#1a202c). Primary blue (#4299e1) is reserved for CTAs, links, and interactive focus states; it appears on the 'Login' button and form highlights. Secondary yellow (#faae2b) energizes the 'Daftar' (Register) button and warning/attention elements, creating visual rhythm. Tertiary pink (#fe98a3) accents success states and celebratory moments. The surface stack uses Chakra's gray palette: surface-container-low (#edf2f7) for card backgrounds, surface-container (#e2e8f0) for hover states, and outline (#718096) for borders at 1px. All interactive elements cast a bold, offset shadow:

Typography

The type system pairs Comfortaa (a rounded, friendly geometric sans) for all headings and display text with IBM Plex Mono (a technical, monospaced typeface) for body copy and UI labels. This pairing creates intentional cognitive dissonance: the warm, approachable headlines contrast with the precise, code-like body text, reinforcing the brand's dual nature (playful yet functional). Display text uses Comfortaa at 56px, fontWeight 600, lineHeight 64px with -0.02em letter-spacing for tight, confident headlines. Body copy in IBM Plex Mono at 16px, fontWeight 400, lineHeight 24px maintains readability at small sizes. Labels use 14px, fontWeight 600, lineHeight 20px with 0.01em letter-spacing for crisp button and badge text. When body text appears over busy backgrounds (e.g., near character illus

Layout

The layout uses a 12-column grid with a max-width of 1280px, maintaining a fluid center-aligned composition on desktop and stacking vertically on mobile. Spacing follows an 8px unit system: lg (40px) separates major sections (hero from feature cards), md (24px) creates breathing room between components, and sm (12px) tightens internal padding within cards and buttons. The gutter is consistently 24px on left/right edges. The hero section (logo, headline, CTA buttons) centers vertically and horizontally with 64px (xl spacing) above and below. Feature cards and payment method lists use md (24px) padding internally and are separated by lg (40px) vertical spacing. This rhythm creates a calm, scannable page that guides the eye from hero → headline → buttons → supporting content without visual cl

Elevation & Depth

Depth is conveyed through two distinct mechanisms: subtle shadows for cards and a bold, offset drop-shadow for interactive elements. Standard cards use box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) (elevation.sm) at rest, escalating to 0 4px 6px rgba(0, 0, 0, 0.1) (elevation.md) on hover. This creates a gentle lift. Buttons and interactive surfaces, however, use the signature Whimsical Brutalism shadow: box-shadow: 0.4rem 0.4rem 0 #222222 (solid, offset, no blur). On hover or press, this reduces to 0.2rem 0.2rem 0 #222222, simulating a tactile press-down effect. This shadow is applied to all prima

Shapes

The shape philosophy is "Soft-Technical Pragmatism": buttons and cards use modest border-radius values (0.5rem / 8px for buttons, 0.375rem / 6px for cards) that soften hard edges without becoming overly rounded. This sits between minimalist sharpness and organic softness. Input fields use 0.25rem (4px) for a more technical, monospaced feel. The full (9999px) radius is reserved for badges and pill-shaped elements. This restraint in rounding reinforces the brand's dual personality—approachable but not saccharine, functional but not cold. The modest radii also ensure that the bold offset shadows

Components

Action Elements Buttons are the primary interactive surface and use the signature offset shadow treatment. All buttons (primary, secondary, tertiary) have a height of 44px, padding of 12px 24px, and rounded corners at 0.5rem. The primary button uses {colors.primary} (#4299e1) with white text, the secondary uses {colors.secondary} (#faae2b) with dark text, and the tertiary uses {colors.tertiary} (#fe98a3) with white text. All buttons cast box-shadow: 0.4rem 0.4rem 0 #222222 at rest. On hover, the shadow reduces to 0.2rem 0.2rem 0 #222222 and the background shifts to the -fixed-dim variant (e.g., primary-fixed-dim: #90cdf4), creating a tactile press effect. Transition timing is 150ms (fast) using cubic-bezier(0, 0, 0.2, 1) for snappy feedback.

Containers & Surfaces Cards use a light

Do's and Don'ts

**Do**

• Do use the offset shadow (0.4rem 0.4rem 0 #222222) on all interactive buttons and CTAs—it is the signature of the brand and must never be omitted or softened.
• Do pair Comfortaa headlines with IBM Plex Mono body text to maintain the intentional contrast between playful and precise.
• Do maintain the 8px spacing unit rigorously: use lg (40px) for section breaks, md (24px) for component padding, sm (12px) for internal spacing.
• Do apply the primary blue (#4299e1) exclusively to CTAs, links, and focus states—never use it for backgrounds or non-interactive surfaces.
• Do reduce the button shadow to 0.2rem 0.2rem 0 #222222 on hover/press to simulate tactile feedback and maintain the Whimsical Brutalism aesthetic.

**Don't**

• Don't soften or blur the offset shadow on buttons—the crisp, geometric shadow is non-negotiable and defines the brand's visual identity.
• Don't use system-ui or generic sans-serif fonts; always specify Comfortaa for headings and IBM Plex Mono for body copy.
• Don't exceed a border-radius of 0.75rem (12px) on cards or buttons—excessive rounding dilutes the Soft-Technical aesthetic.
• Don't apply the primary blue (#4299e1) to non-interactive elements like backgrounds or decorative surfaces; reserve it for CTAs and focus states only.
• Don't mix elevation techniques—use subtle shadows (0 1px 2px) for passive cards and bold offset shadows (0.4rem 0.4rem) for interactive elements, never both on the same component.