Konten.com

Overview

Konten.com is an Indonesian creator marketplace platform that democratizes content monetization through a vibrant, motion-forward aesthetic rooted in **High-Energy Maximalism**—a design philosophy that channels the kinetic urgency of creator culture through bold color contrasts, dynamic gradients, and purposeful visual noise. The brand serves content clippers seeking to transform short-form video creation into sustainable income, and brands seeking authentic, distributed content amplification. The UI evokes a sense of immediate opportunity and financial momentum: every interaction feels like a transaction in progress, every color choice signals energy and action. The emotional response is one of excitement tempered by clarity—users should feel empowered, not overwhelmed.

The brand voice is conversational, direct, and financially optimistic. Vocabulary patterns favor action verbs ("bangun," "cuan," "ngalir") and colloquial Indonesian phrasing that signals accessibility and peer-to-peer trust. The tone rejects corporate formality in favor of creator-speak: "4 Langkah Kecil, CuanOtomatis Ngalir" (Four small steps, earnings flow automatically). Example sentence in brand voice: "Pilih campaign, upload clip, views naik—cuan otomatis masuk saldo kamu."

Colors

The color system is built on a **deep-black canvas with vivid accent punctuation**, creating maximum contrast and visual hierarchy. Primary (#FC5810, a warm orange-red) is the signature action color—deployed on all CTAs, interactive states, and brand moments. It appears 185 times in the codebase, establishing it as the dominant accent. Secondary (#FF8400, a brighter orange) and Tertiary (#10FC1C, neon green) provide supporting energy for status indicators and success states. The surface stack descends from #090909 (surface) through #0A0A0A (surface-container-lowest) to #262626 (surface-container-highest), maintaining legibility while preserving the dark, immersive aesthetic. On-surface text is pure white (#FFFFFF) for maximum contrast against the near-black backgrounds; on-surface-variant

Typography

The type system pairs Neue Montreal (neueMontreal) as the primary typeface—a geometric sans-serif with tight, modern proportions that conveys precision and forward momentum. Display (64px, 700 weight, -0.04em tracking) anchors hero sections with commanding presence; Headline-LG (48px, 700 weight) and Headline-MD (32px, 700 weight) establish section hierarchy with aggressive letter-spacing compression to create visual density. Body text (16–18px, 400 weight, 24–28px line-height) maintains readability over the dark background through generous line-height (1.5–1.75) and pure-white color. Labels (12–14px, 500–600 weight) are used on buttons and badges with 0.01–0.05em tracking to add micro-hierarchy and visual rhythm. On small labels over busy gradient backgrounds (e.g., badge text over hero g

Layout

The page rhythm follows a **fluid, mobile-first grid with a 1440px container max-width**, adapting from single-column on mobile to 12-column on desktop. White-space is deployed strategically: lg spacing (40px) separates major sections (Hero, Campaign Showcase, Earnings Proof, CTA), md spacing (24px) divides subsections, and sm spacing (12px) provides breathing room within component groups. The gutter is set to 20px on mobile, scaling to 24px on tablet and desktop. Sections use full-width backgrounds (often with gradient overlays or glass surfaces) to create visual momentum, while content remains constrained to the container max-width to prevent line-length bloat. The hero section spans the full viewport height on desktop, using a radial-gradient overlay (rgba(252, 88, 16, 0.48) at 50% opac

Elevation & Depth

Depth is conveyed through a **layered glass-morphism approach combined with strategic shadow placement**, rather than traditional material shadows. Level 1 (Base): The background is pure black (#090909) with a subtle radial-gradient overlay (rgba(252, 88, 16, 0.48) to transparent) to create atmospheric depth. Level 2 (Standard Card/Surface): backdrop-filter: blur(12px), background: rgba(20, 20, 20, 0.4), border: 1px solid rgba(255, 255, 255, 0.08). This creates a frosted-glass effect that feels elevated without breaking the dark immersion. Level 3 (Elevated/Modals): backdrop-filter: blur(24px)

Shapes

The shape philosophy is **Geometric Precision with Warmth**—sharp enough to signal technology and efficiency, rounded enough to feel approachable and human. Border-radius follows a deliberate scale: sm (0.25rem / 4px) for micro-interactions (focus rings, small badges), DEFAULT (0.5rem / 8px) for input fields and small components, md (0.75rem / 12px) for list items and secondary surfaces, lg (1rem / 16px) for primary buttons and cards, xl (1.5rem / 24px) for elevated surfaces and modals, and full (9999px) for pills and badges. Buttons use lg (16px) to create a sense of solidity and clickability

Components

Action Elements

Buttons are the primary interaction mechanism and must command attention. **button-primary** uses background: {colors.primary} (#FC5810), text: white, height: 48px, padding: 12px 32px, rounded: lg (16px), with font-weight: 600 and label-md typography. On hover, shift to background: {colors.primary-container} (#F54900) with a 200ms cubic-bezier(0.4, 0, 0.2, 1) transition. On active/pressed, use background: {colors.primary-fixed-dim} (#E99876) to signal state change. The Sign Up CTA in the header uses a linear-gradient(to bottom right, #FFFFFF -10%, #FF8400 25%, #FF0004 100%) to create motion and urgency—this gradient should animate on hover with a subtle 300ms ease-out transition. **button-secondary** uses transparent background with a 1px border at {colors.primary}, sa

Do's and Don'ts

**Do**

• Do use primary (#FC5810) on all primary CTAs and interactive moments—it's the signature brand color and must be visible and dominant.
• Do maintain the dark background (#090909–#262626) as the canvas; it creates immersion and makes the orange accent sing.
• Do apply generous line-height (1.5–1.75) on body text over dark backgrounds to ensure readability and reduce eye strain.
• Do use glass-morphism (backdrop-filter: blur, semi-transparent backgrounds) for elevated surfaces to create depth without breaking the dark aesthetic.
• Do pair Neue Montreal at 700 weight for headlines to convey precision and forward momentum—it's the brand's typographic signature.
• Do use lg (16px) and xl (24px) border-radius on buttons and cards to signal approachability and modernity.
• Do transition all interactive states (hover, focus, active) over 200ms with cubic-bezier(0.4, 0, 0.2, 1) for a snappy, responsive feel.

**Don't**

• Don't use secondary colors (orange, green) as primary CTAs—they dilute the brand signature and confuse hierarchy.
• Don't apply heavy shadows (lg elevation) on glass surfaces; the blur and border are sufficient for depth.
• Don't reduce line-height below 1.5 on body text; the dark background demands generous spacing for legibility.
• Don't use system fonts or generic sans-serifs; Neue Montreal is the brand typeface and must be loaded and prioritized.
• Don't apply border-radius below md (12px) on buttons and cards; it reads as cold and corporate, not creator-friendly.
• Don't mix glass-morphism with solid backgrounds in the same section; it creates visual confusion and breaks the immersion.
• Don't use white text at less than 100% opacity on dark backgrounds; use {colors.on-surface-variant} (#B8B8B8) for secondary text instead.