Codecuy

Overview

Codecuy is an Indonesian-first design system built for AI-powered design tools and digital product builders. It serves designers and developers who demand clarity, speed, and directness—no unnecessary ornamentation. The aesthetic is "Decisive Minimalism": a high-contrast, black-and-white foundation punctuated by bold accent colors (deep red #bf1826, vibrant orange #ff5a1f) that signal action and urgency. The UI evokes confidence and efficiency, transforming complex design workflows into intuitive, scannable interfaces. Every pixel serves a function; every color choice is intentional.

The brand voice is conversational yet authoritative, speaking directly to Indonesian creators in their language. Tone: practical, encouraging, never condescending. Example: "Prompt dan hasil kurasi Stitch siap pakai, tinggal pilih paket yang cocok buat kamu di bawah" (Prompts and curated Stitch results ready to use—just pick the package that fits you). The vocabulary favors action verbs (bikin, pakai, pilih) and avoids jargon; the copy assumes the reader is busy and wants results now.

Colors

The color system is built on a stark, high-contrast foundation: pure white (#ffffff) surfaces against near-black text (#18191c, oklch(0.145 0 0)). This 18:1 contrast ratio ensures accessibility and readability at any size, critical for a design tool where precision matters. Primary (#18191c) is the dominant text and interactive element color—it appears on buttons, links, and form controls. Secondary (#ff5a1f, a warm orange) and Tertiary (#bf1826, a deep red) are accent colors reserved for CTAs, alerts, and status indicators. Secondary is used for positive actions and highlights ("Join", "Lihat Pilihan Paket"), while Tertiary signals urgency or errors. The surface stack (white → #f5f5f5 → #e9ecef → #d0d0d0) provides subtle depth without sacrificing legibility. Outline colors (#505050, #8f8f

Typography

The type system is anchored in Geist Variable, a modern sans-serif that balances geometric precision with warmth—ideal for both UI labels and body copy. Display (64px, 700 weight, -0.025em tracking) is reserved for hero headlines and major section breaks, commanding attention through scale and weight rather than color. Headline-lg (40px, 700 weight) and headline-md (28px, 600 weight) establish visual hierarchy for subsections and card titles. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) handle descriptive copy and product descriptions, with generous line-height (1.75) to aid scanning. Label-md (14px, 600 weight) and label-sm (12px, 500 weight) are used for buttons, badges, and form labels. On small labels over busy backgrounds or dark surfac

Layout

The layout uses a 12-column grid with a max-width of 1600px, allowing flexible content scaling from mobile (320px) to ultra-wide displays. The gutter is 20px on mobile, expanding to 24px on tablet and desktop, maintaining consistent breathing room. Sections are separated by lg spacing (40px) vertically, creating a rhythm that guides the eye through the page. The hero section uses centered, text-aligned content with a max-width constraint (52ch for body copy) to prevent line lengths from exceeding 80 characters—critical for readability. Cards and containers use md spacing (24px) for internal padding, with sm spacing (12px) between form elements. The container-max-width of 1600px prevents the layout from becoming unwieldy on ultra-wide screens; content remains scannable and focused. Whitespa

Elevation & Depth

Depth is achieved through a restrained shadow system that respects the high-contrast aesthetic. Level 1 (Base): no shadow; elements sit flat on the white background. Level 2 (Standard Cards/Dropdowns): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)—a subtle, tight shadow that lifts elements 4-8px off the surface. Level 3 (Modals/Elevated Containers): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12)—a softer, more diffuse shadow suggesting greater depth. Hover states on cards transition from Level 2 to Level 3 over 200ms, providing tactile feedback. Buttons use a consistent 0 3px 8px rgba(0, 0, 0, 0.15) s

Shapes

The shape philosophy is "Soft-Technical": rounded corners are used strategically to soften the stark geometry of the high-contrast design without sacrificing precision. Buttons use xl radius (1.5rem / 24px), creating a pill-like, approachable form that invites interaction. Cards and containers use lg radius (1rem / 16px), balancing friendliness with formality. Form inputs use DEFAULT radius (0.5rem / 8px), maintaining a more utilitarian appearance appropriate for data entry. Badges and small UI elements use full radius (9999px), creating perfect circles or pills. The rationale: larger, more pr

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (bg: #18191c, text: white, 48px height, 12px 28px padding, 1.5rem radius) use a bold, high-contrast style with a 0 3px 8px rgba(0, 0, 0, 0.15) shadow. On hover, the background shifts to #2d2e31 (primary-container) over 150ms, providing clear feedback. Secondary buttons (transparent bg, #18191c text, 1px outline, 40px height) are used for less prominent actions; on hover, the background becomes #e0e0e0 (surface-container-high). Tertiary buttons (#ff5a1f bg, white text) are reserved for accent actions like "Join" or promotional CTAs; they use the same 48px height and 1.5rem radius as primary buttons. All buttons use label-md typography (14px, 600 weight) and transition all properties over 150ms with cubic-bezi

Do's and Don'ts

**Do**

• Do use primary (#18191c) for all body text, labels, and interactive elements—it's the workhorse color and ensures maximum contrast and readability.
• Do reserve secondary (#ff5a1f) and tertiary (#bf1826) for high-priority CTAs and status indicators; overuse dilutes their impact.
• Do apply negative letter-spacing (-0.025em) to display and headline sizes to tighten the visual weight and reinforce the decisive aesthetic.
• Do use the full rounded scale (xl for buttons, lg for cards, DEFAULT for inputs) to create a graduated, intentional shape language.
• Do transition all interactive state changes over 150ms with cubic-bezier(0.4, 0, 0.2, 1) easing to provide smooth, predictable feedback.
• Do maintain the 18:1 contrast ratio between text and background; never use low-contrast color combinations, even for secondary information.

**Don't**

• Don't use colors outside the defined palette—no custom hex values, no gradients, no transparency overlays that muddy the high-contrast aesthetic.
• Don't apply shadows to buttons on hover; use background color shifts instead to keep the interaction model consistent and predictable.
• Don't use rounded corners smaller than 0.5rem (DEFAULT) on interactive elements; the minimum radius should always feel intentional and approachable.
• Don't exceed 80 characters per line in body copy; use max-width constraints (52ch for paragraphs, 17ch for headlines) to maintain scannability.
• Don't use Geist Variable at weights below 400 (normal) for body text; lighter weights reduce legibility and contradict the decisive brand voice.
• Don't mix rounded and sharp corners on related components (e.g., a sharp input next to a rounded button); maintain consistency within component families.