BuildWithAngga

Overview

BuildWithAngga is an Indonesian ed-tech platform designed to democratize access to world-class design, coding, and tech skills training. The brand embodies a "Vibrant Minimalism" aesthetic—a clean, light-filled interface (background: #f6f8fd, surface: #ffffff) punctuated by a bold, energetic primary blue (#2447f9) that signals action, growth, and possibility. The design philosophy prioritizes clarity and accessibility: generous whitespace (lg spacing: 40px), a single-weight sans-serif typeface (Poppins), and high-contrast text (on-surface: #212529) ensure that learners of all backgrounds can navigate with confidence. The UI avoids visual clutter, allowing course content and mentor expertise to take center stage. Voice: encouraging, practical, and inclusive. The brand speaks to aspiring designers and developers with respect for their ambitions, never condescending. Example sentence: "Master UI design in 12 weeks with feedback from industry experts—then showcase your work to top companies."

Colors

The color system is built on a light, airy foundation with strategic accent deployment. The surface stack (surface: #f6f8fd, surface-container: #e5e9f2, surface-container-highest: #d5dae8) creates subtle depth without darkness, supporting a welcoming, open aesthetic. Primary (#2447f9) is the signature action color—used exclusively on CTAs (buttons, links, focus states), hero accents, and interactive feedback. It conveys trust and forward momentum, essential for an education platform. Secondary (#3d58ff) provides a deeper blue for supporting actions and secondary navigation. Tertiary (#f27474) is a warm accent reserved for alerts, success states, and emphasis on testimonials or achievements. On-surface (#212529) is the primary text color, delivering 16.5:1 contrast against surface (#f6f8fd)

Typography

The type system uses Poppins exclusively, a geometric sans-serif that balances friendliness with professionalism—ideal for a platform bridging education and industry. Display (60px, 700 weight, -0.04em letter-spacing) anchors hero sections with commanding presence. Headline-lg (46px, 700 weight) titles major sections; headline-md (32px, 600 weight) breaks content into digestible chunks. Title-lg (20px, 600 weight) labels cards and subsections. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) carry course descriptions and copy, with generous line-height (1.5–1.75) ensuring readability on mobile and desktop. Label-md (14px, 600 weight) and label-sm (12px, 500 weight) are reserved for buttons, badges, and UI labels. All headings use negative letter

Layout

The layout follows a 12-column grid with a max-width of 1280px, ensuring content remains readable on ultra-wide displays while maintaining focus. The page rhythm is driven by the spacing scale: unit (8px) for micro-adjustments, sm (12px) for input padding, md (24px) for section gutters and card padding, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The hero section uses full-width background (surface: #f6f8fd) with centered content (max-width: 1280px, margin: 0 auto) and lg spacing above and below. Cards are arranged in a responsive grid (3 columns on desktop, 2 on tablet, 1 on mobile) with md (24px) gaps. Container max-width is enforced at 1280px to prevent text lines from exceeding 75 characters, optimizing readability. Whitespace is generous: sec

Elevation & Depth

Depth is conveyed through subtle shadows and layering, never through darkness. The elevation system uses three tiers: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for resting cards and inputs, md (0 4px 12px rgba(0, 0, 0, 0.08)) for hovered cards and buttons, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for modals and floating elements. Cards at rest use sm elevation and a 1px border in surface-container-high (#dde2ed), creating a subtle frame. On hover, cards transition to md elevation with transform: translateY(-2px) over 200ms, signaling interactivity. Buttons use md elevation by default; on hover, they

Shapes

The shape philosophy is "Soft-Technical"—rounded corners that feel approachable without sacrificing clarity. Buttons use full (9999px) border-radius, creating pill-shaped CTAs that are instantly recognizable and tactile. Cards and containers use lg (1rem / 16px) border-radius, balancing softness with structure. Input fields use DEFAULT (0.5rem / 8px) border-radius, a subtle curve that distinguishes them from buttons. Chips and badges use full (9999px) to emphasize their compact, self-contained nature. Modals and overlays use xl (1.5rem / 24px) border-radius on the top corners, creating a moder

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses background: #2447f9, text: #ffffff, padding: 12px 24px, height: 48px, border-radius: 9999px, and box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08). On hover, the background darkens to #1a35d9 and shadow elevates to 0 16px 40px rgba(0, 0, 0, 0.12); the transition occurs over 200ms with ease-out timing. On active, the background becomes #0d1f7a. Button-secondary uses background: #e5e9f2 (primary-container), text: #1a2d8f (on-primary-container), with identical padding and radius. Button-ghost has a transparent background, 1px border in #cdcfdb, and text in #2447f9; on hover, it gains background: #e8ecf5 (surface-container-low). All buttons use typography.label-md (14px, 600 weight, Poppins) and are disabled with o

Do's and Don'ts

**Do**

• Do use primary (#2447f9) exclusively for CTAs, focus states, and key interactive elements—never for backgrounds or body text.
• Do maintain lg (40px) or xl (64px) spacing between major sections to create breathing room and guide the eye.
• Do apply button-primary-hover (darker blue + elevated shadow) on all interactive elements to signal state change within 200ms.
• Do use Poppins 600 weight for all labels and button text; reserve 700 for headlines and 400 for body copy.
• Do apply card-hover (lift + shadow elevation) to all clickable cards to provide tactile feedback.
• Do use full (9999px) border-radius on buttons and badges to make them instantly recognizable as interactive.

**Don't**

• Don't use primary (#2447f9) for body text, backgrounds, or non-interactive elements—it dilutes its signal strength.
• Don't apply shadows darker than lg (0 16px 40px rgba(0, 0, 0, 0.12)) or use drop-shadows; stick to the elevation scale.
• Don't mix border-radius values arbitrarily; use the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency.
• Don't use letter-spacing greater than 0.1em or less than -0.04em; it disrupts readability and feels amateurish.
• Don't apply color transitions longer than 200ms or use ease-in timing; it feels sluggish and reduces perceived responsiveness.
• Don't use tertiary (#f27474) for primary CTAs or navigation; reserve it for alerts, achievements, and warm accents only.