Bulin 47 AI

Overview

Bulin 47 AI is a viral-first video generation platform that transforms static photos into trending short-form video templates, with the Bulin 47 freestyle as the flagship experience. The design system embraces a "High-Energy Minimalism" aesthetic: a dark, immersive canvas (oklch(0.175 0.018 266) / #0b0b0c) serves as the stage, while a vibrant orange accent (oklch(0.72 0.18 48) / #ff9500) commands attention on every call-to-action, creating a sense of urgency and cultural momentum. The UI evokes the kinetic energy of social media trends—bold, fast, and impossible to ignore.

The brand voice is direct, conversational, and trend-aware. Vocabulary leans into cultural moments ("viral," "freestyle," "trending") and action-oriented language ("Make," "Put yourself," "See how it works"). The tone is confident without being condescending, celebratory without being saccharine. Example sentence: "Upload one photo and the AI video generator puts you into a trending video template, starting with the viral Bulin 47 freestyle."

Colors

The color system is built on a dark-first philosophy with strategic accent deployment. Primary (#ff9500, oklch(0.72 0.18 48)) is the brand's signature orange—used exclusively on CTAs, badges, and interactive focus states. It appears infrequently but dominates visual hierarchy through high saturation and contrast against the dark surface. Secondary (#1a73e8, Google Blue) supports informational and secondary actions, while tertiary (#07c160, Google Green) is reserved for success states and positive feedback. The surface stack anchors the interface: surface (#0b0b0c) is the base canvas, surface-container (#151517) lifts modals and cards, and surface-container-highest (#2a2a2e) creates the deepest interactive layers. On-surface (#f0f0f2) provides text contrast at 15.8:1 against the dark backgr

Typography

The type system pairs Anton (display/headline) with Space Grotesk (body/label), creating a distinctive contrast between expressive headlines and functional body copy. Anton at 66px (display) and 48px (headline-lg) commands attention with its geometric, high-impact letterforms—ideal for hero messaging and trend-forward positioning. Space Grotesk at 16–18px (body) provides clarity and modern sophistication for instructional and descriptive content. Letter-spacing is tightly controlled: display uses -0.02em to compress Anton's already-bold presence, while body uses +0.005em to improve readability on dark backgrounds. Line-height scales with size: display uses 76px (1.15x), body uses 24px (1.5x). For small labels over busy video backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) to e

Layout

The layout uses a 12-column grid with a max-width of 1280px, centered on viewport. The hero section spans full-width with a dark gradient background (oklch(0.175 0.018 266) transitioning to darker tones at edges), creating an immersive entry point. Content sections use lg spacing (40px) for vertical separation between major blocks, md spacing (24px) for internal card/section padding, and sm spacing (12px) for component-level gaps. The gutter is consistently 24px on desktop, collapsing to 12px on mobile. Container padding uses md (24px) on desktop, sm (12px) on tablet, and xs (4px) on mobile to maintain breathing room. The page rhythm alternates between full-width hero/video showcase sections and constrained content cards, preventing visual monotony. White-space is generous around CTAs—butt

Elevation & Depth

Depth is conveyed through layered surfaces and subtle shadows rather than dramatic drop-shadows. Level 1 (Base): the dark surface (#0b0b0c) with no shadow, establishing the foundation. Level 2 (Standard Cards): surface-container (#151517) with a 1px border at rgba(255, 255, 255, 0.08) and box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), creating a soft lift. Level 3 (Modals/Elevated): surface-container-high (#1f1f23) with a 1px border at rgba(255, 255, 255, 0.12) and box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15), signaling prominence. Interactive elements (buttons, inputs) use a 2px border at rgba(0,

Shapes

The shape system follows a "Geometric Precision" philosophy: rounded corners are used strategically to soften hard edges while maintaining a technical, modern feel. Buttons use lg (14px) for a friendly but professional appearance—not too rounded (which reads playful) and not too sharp (which reads cold). Cards and containers use md (10px) for a balanced, approachable feel. Input fields use DEFAULT (6px) for subtle rounding that doesn't distract from content. Full (9999px) is reserved for badges and pill-shaped elements (e.g., language selector, secondary buttons with borders). The reasoning: l

Components

Action Elements Buttons are the primary interaction mechanism. **button-primary** uses #ff9500 background with 10px vertical / 24px horizontal padding and 44px height, ensuring comfortable touch targets. On hover, background shifts to #ff8c00 over 200ms ease, maintaining the orange family while signaling state change. **button-secondary** is transparent with a 2px border at {colors.outline} and {colors.on-surface} text; on hover, it gains {colors.surface-container-high} background and the border becomes {colors.primary}, creating a filled-in effect. **button-ghost** has no background or border, only {colors.primary} text; hover adds rgba(255, 149, 0, 0.08) background. All buttons use label-md typography (14px, 700 weight, 0.01em letter-spacing) for consistency.

Containers & Surfac

Do's and Don'ts

**Do**

• Do use primary orange (#ff9500) exclusively on CTAs, focus states, and interactive elements—never on passive text or backgrounds.
• Do maintain 44px minimum height on all buttons and interactive targets to ensure comfortable touch interaction on mobile.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) on small labels (label-sm) overlaid on video content to ensure legibility.
• Do use Anton for headlines (display/headline-lg) and Space Grotesk for body and labels—never mix typefaces within a single hierarchy level.
• Do transition all interactive state changes (hover, focus, active) over 200ms ease to provide smooth, predictable feedback.
• Do use the full surface stack (surface → surface-container → surface-container-high) to create clear visual hierarchy and depth.

**Don't**

• Don't use primary orange on backgrounds, body text, or passive elements—it must remain a signal of interactivity and urgency.
• Don't apply shadows larger than 0 16px 40px rgba(0, 0, 0, 0.15)—excessive shadow depth flattens the dark-first aesthetic.
• Don't mix rounded corner sizes arbitrarily; enforce the scale (sm: 4px, DEFAULT: 6px, md: 10px, lg: 14px, full: 9999px) across all components.
• Don't use system fonts or fallback sans-serif; always load Anton and Space Grotesk from Google Fonts to maintain brand distinctiveness.
• Don't reduce letter-spacing below -0.02em on display text or increase it above 0.05em on body text—both harm readability.
• Don't apply opacity below 0.8 to on-surface text on dark backgrounds; maintain minimum 15:1 contrast ratio for accessibility.