Barbiana Liu

Overview

Barbiana Liu's design system embodies **Stark Digital Minimalism**—a contemporary aesthetic that strips away ornament to expose raw creative intent. The brand serves independent designers, content creators, and forward-thinking brands seeking visual identity work, social campaigns, and digital experiences. The UI evokes a sense of controlled chaos: a pure white canvas punctuated by electric blue (#0080ff) accents, bold black typography, and experimental neon yellow highlights (#ffff81) that feel like digital graffiti. The emotional response is one of creative confidence—unafraid, direct, and unapologetically modern.

The voice is conversational yet authoritative: Barbiana speaks as a peer, not a vendor. Vocabulary leans into design vernacular ("brand identity," "visual systems," "digital marketing know-how") without jargon gatekeeping. Tone is warm but efficient—every word earns its place. Example sentence in brand voice: "I bring together real taste and design that holds up—campaigns, identity systems, print, web, the whole ecosystem."

Colors

The color palette operates on a principle of **maximum contrast with surgical precision**. Primary (#0080ff) is the electric blue accent—used exclusively for interactive elements (links, hover states, focus rings), CTAs, and brand moments that demand attention. It appears sparingly but decisively, creating visual punctuation against the monochromatic field. Secondary (#222222) is the dominant text and structural color, providing 99% of the visual weight; it pairs with white surfaces to create the stark, high-contrast reading experience. Tertiary (#ffff81) is a neon yellow reserved for experimental highlights, badges, and moments of visual rebellion—never used for body text or large surfaces, only as accent pops (4-8% of a composition). Error red (#ff4444) is used for validation states and

Typography

The type system is built on a **hierarchical contrast model** where display and headline scales use custom_96369 (a geometric, condensed sans-serif) at weights 400–700 with aggressive negative letter-spacing (-0.021em to -0.062em), creating a compressed, almost architectural feel. Body copy defaults to custom_57376 (a warm, humanist sans-serif) at 18–24px with 0em letter-spacing for readability. Labels and CTAs use custom_105852 (a narrow, italic serif-influenced face) at 14px, 600 weight, uppercase, and italic—a deliberate clash that signals action and personality. The display scale (150px, 120px line-height) is reserved for hero statements and major section breaks; headline-lg (85px) anchors project titles; headline-md (50px) introduces subsections. Body-lg (24px) is used for introductor

Layout

The layout operates on a **fixed 1024px container max-width** centered on the viewport, with 24px gutters on desktop (reducing to 16px on tablet, 12px on mobile). The grid is 12 columns, but the design favors asymmetric, full-width sections that break the grid intentionally—this reflects the brand's experimental nature. Spacing follows a semantic scale: lg (40px) separates major sections (hero to portfolio, portfolio to footer); md (24px) separates subsections and card groups; sm (12px) separates inline elements. The page rhythm is deliberately uneven: hero sections may span 100vh with generous padding, while portfolio grids compress to 16px gaps between cards. White space is weaponized—large empty areas (60–80px top/bottom padding on sections) create visual breathing room and emphasize th

Elevation & Depth

Depth is achieved through **strategic use of subtle shadows and layering**, not through color gradation. The base layer (Level 1) is the white surface (#ffffff) with no shadow. Level 2 (standard cards, input fields) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)—a soft, 8px blur radius that creates gentle separation without drama. Level 3 (modals, dropdowns, elevated overlays) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12)—a larger spread and blur for pronounced depth. Focus states on interactive elements apply a 3px inset box-shadow: 0 0 0 3px rgba(0, 128, 255, 0.2) to create a glowing ring

Shapes

The shape philosophy is **Geometric Precision with Playful Breaks**—a balance between technical sharpness and creative rebellion. Buttons use full border-radius (9999px) to create pill-shaped forms that feel friendly and clickable; this is the only fully rounded element in the system, making it instantly recognizable as interactive. Cards and containers use minimal rounding: 4px (DEFAULT) for most surfaces, 8px (md) for input fields and slightly elevated containers, 12px (lg) for modals and overlays. This creates a subtle hierarchy: tighter radius = more utilitarian; slightly larger radius = m

Components

Action Elements Buttons are the primary interactive component. **button-primary** uses {colors.primary} (#0080ff) background, white text, custom_105852 label-md typography (14px, 600 weight, uppercase, italic), 12px 18px padding, and full border-radius (9999px). A 1px solid border in the same primary color reinforces the shape. On hover, the background darkens to #0066cc with a 200ms cubic-bezier(0.4, 0, 0.2, 1) transition. On active/click, it darkens further to #004d99. Focus state adds a 3px rgba(0, 128, 255, 0.1) box-shadow. **button-secondary** is transparent background with {colors.secondary} (#222222) text and a 1px solid secondary border; on hover, the background fills with secondary and text inverts to white. Links use {colors.primary} with text-decoration: underline; on hover,

Do's and Don'ts

**Do**

• Do use {colors.primary} (#0080ff) exclusively for interactive elements—links, buttons, focus states, and hover indicators. It is the visual call-to-action and must never be diluted or overused.
• Do maintain stark contrast: black text on white, white text on black, blue on white. Avoid mid-tone combinations; the brand thrives on clarity and punch.
• Do apply label-md (14px, uppercase, italic, custom_105852) to all buttons and CTAs—the italic style is the brand's signature and signals interactivity instantly.
• Do use lg spacing (40px) between major sections and md spacing (24px) between subsections. White space is a design tool, not wasted real estate.
• Do apply the 200ms cubic-bezier(0.4, 0, 0.2, 1) transition to all interactive state changes (hover, focus, active). This easing curve feels snappy and confident.

**Don't**

• Don't use {colors.tertiary} (#ffff81) for large surfaces or body text—it is a 4–8% accent only. Overuse dilutes its impact and reduces readability.
• Don't apply rounded corners (border-radius > 4px) to cards, containers, or text elements. Reserve full rounding (9999px) for buttons exclusively.
• Don't use shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12). The design is flat and direct; excessive depth undermines the minimalist aesthetic.
• Don't mix typefaces within a single text block. Stick to one font per component: custom_96369 for headlines, custom_57376 for body, custom_105852 for labels.
• Don't apply text-shadow or text-stroke effects on body copy. The high contrast (black on white, white on black) provides sufficient legibility without embellishment.