Bling

Overview

Bling is a comprehensive business management platform that transforms operational complexity into visual clarity through a bold, energetic design language. The system embraces 'Technical Vitality'—a fusion of deep teal foundations with vibrant lime-green accents that convey both stability and forward momentum. The brand serves Brazilian SMEs and e-commerce operators who demand precision, speed, and integration at scale. The UI personality is confident yet approachable: the interface speaks in direct, action-oriented language that respects the user's time and intelligence. Voice example: 'Unify your operation and sell without errors this Black Friday—up to 45% off.'

Colors

The color system is anchored in a deep teal foundation (#002726 surface, #144728 surface-container) that evokes trust and operational stability, while the primary accent—a vibrant lime-green (#93f574)—serves as the signature call-to-action color applied to all primary buttons, badges, and interactive highlights. This high-contrast pairing (primary on surface: 147, 245, 116 on rgb(0, 39, 38)) ensures accessibility and visual dominance. Secondary purple (#612abf) supports tertiary actions and status indicators; tertiary light greens (#dcfae6, #edfdf3) provide soft container backgrounds for feature highlights and success states. The error red (#91241e) is reserved for destructive actions and validation warnings. All surfaces use the on-surface variant (#b9c9c9) for secondary text and the outl

Typography

The type system uses Satoshi-Variable exclusively, a geometric sans-serif that balances technical precision with human warmth. Display (60px, 700 weight) anchors hero sections and major announcements; headline-lg (42px, 400 weight) is reserved for primary page titles and hero copy, where the lighter weight conveys openness and confidence. Headline-md (32px, 600 weight) structures section breaks and card titles. Body-lg (18px, 400 weight) is used for primary CTA labels and prominent body copy; body-md (16px, 400 weight) serves as the default paragraph and UI text. Label-md (14px, 700 weight) is applied to button text, form labels, and navigation items; label-sm (12px, 600 weight) is reserved for badges, helper text, and metadata. Letter-spacing ranges from -0.04em on display (tightening lar

Layout

The layout uses a 12-column grid with a max-width of 1280px, maintaining a fluid layout on mobile and tablet while constraining content on desktop. The gutter is consistently 24px, applied as margin-left/right on grid items and as padding on container edges. Section separation uses lg spacing (40px) for major content blocks and md spacing (24px) for subsections, creating a clear visual rhythm that guides users through the platform's feature hierarchy. The hero section spans full-width with a deep teal background (#002726), while feature cards and content blocks use surface-container (#144728) or transparent overlays with rgba(0, 0, 0, 0.2) for depth. Whitespace is minimal but intentional—the design prioritizes density and information hierarchy over breathing room, reflecting the platform's

Elevation & Depth

Depth is conveyed through layered backgrounds and subtle shadows rather than dramatic drop-shadows. Level 1 (Base): the deep teal surface (#002726) with no shadow. Level 2 (Standard Card): surface-container (#144728) with a 1px border at rgba(147, 245, 116, 0.1) and box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06). Level 3 (Elevated/Modal): surface-container-high (#1d5a34) with box-shadow: 0 9px 22px rgba(0, 0, 0, 0.06). Level 4 (Floating/Overlay): surface-container-highest (#2d7a47) with box-shadow: 0 24px 41px rgba(0, 0, 0, 0.1). Interactive elements (buttons, inputs) use no shadow by default, rel

Shapes

The shape philosophy is 'Organic Technical'—combining sharp, geometric precision with generous rounding to humanize the interface. Buttons use full rounding (100px border-radius) to create pill-shaped affordances that feel friendly and clickable; this applies to all primary and secondary buttons (48px height, 12px vertical padding). Input fields use 30px border-radius, slightly less aggressive than buttons, to signal a contained interaction zone. Cards and containers use lg rounding (1rem / 16px) for standard content blocks and xl rounding (1.5rem / 24px) for elevated modals or featured sectio

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use {colors.primary} (#93f574) background with {colors.on-primary} text, 18px font-size, 700 font-weight, 100px border-radius, and 12px vertical padding. On hover, the background shifts to {colors.primary-fixed-dim} (#5ac782) with a 200ms ease-out transition. Secondary buttons are transparent with a 2px border in {colors.primary}, 16px font-size, 100px border-radius, and 6px vertical padding; on hover, they gain a rgba(147, 245, 116, 0.1) background. All buttons include a 30px horizontal padding for comfortable touch targets.

Containers & Surfaces Cards use a semi-transparent dark background (rgba(0, 0, 0, 0.2)) with a 1px border at rgba(147, 245, 116, 0.1), 1rem border-radius, and 24px padding. On hover,

Do's and Don'ts

**Do**

• Do use {colors.primary} (#93f574) exclusively for primary CTAs, badges, and focus states—it is the signature accent and must remain visually dominant.
• Do apply full rounding (100px) to all button elements to maximize click targets and convey approachability in a technical platform.
• Do layer shadows progressively: Level 2 (0 4px 12px) for standard cards, Level 3 (0 9px 22px) for elevated sections, Level 4 (0 24px 41px) for modals.
• Do use Satoshi-Variable at 700 weight for all button labels and navigation items to ensure visual hierarchy and readability at small sizes.
• Do maintain the deep teal surface (#002726) as the dominant background—it is the foundation of the brand's technical credibility.

**Don't**

• Don't use the secondary purple (#612abf) or tertiary greens (#dcfae6) as primary CTAs—they are supporting colors only and will dilute the brand's visual identity.
• Don't apply drop-shadows larger than Level 4 (0 24px 41px)—excessive shadow depth contradicts the platform's technical clarity and creates visual noise.
• Don't mix border-radius values inconsistently; buttons are always 100px, cards are lg (16px) or xl (24px), and inputs are 30px.
• Don't use system fonts or fallback sans-serifs—Satoshi-Variable must load; if unavailable, fall back to a geometric sans-serif like Poppins or Inter, never to system-ui or generic sans-serif.