TEB Solutions

Overview

TEB Solutions embodies a design philosophy called 'Neon Minimalism'—a fusion of deep-space abstraction and vibrant gradient energy. The brand serves digital transformation seekers (startups, enterprises, local businesses) who demand both technical credibility and forward-thinking vision. The UI aesthetic combines a near-black canvas (rgb(10, 1, 24)) with electric gradient accents (primary: #d084ff, secondary: #ff6b9d, tertiary: #00d084) to evoke clarity, precision, and innovation. Every interface element acts as a beacon against the void, guiding users through complex digital solutions with confidence.

The brand voice is direct, authoritative, and optimistic—never jargon-heavy, always outcome-focused. Tone patterns: 'Your Digital Future, Our Expertise' (possessive confidence), 'From startups to enterprises, we deliver' (inclusive scale), 'Future-ready solutions that drive growth' (results-oriented). Example sentence in brand voice: 'We transform your vision into measurable digital impact—starting today.'

Colors

The color system is anchored in a deep-space foundation (surface: #0a0118, on-surface: #9b9eb0) that provides visual rest and technical sophistication. Primary (#d084ff, a vivid purple-magenta) is the signature accent used exclusively on CTAs, focus states, and brand-critical interactions—it commands attention with 30% opacity glow (box-shadow: 0 4px 16px rgba(208, 132, 255, 0.3)) on hover. Secondary (#ff6b9d, a hot pink) supports secondary CTAs and highlights, creating visual rhythm without competing for dominance. Tertiary (#00d084, a vivid cyan-green) is reserved for success states, positive feedback, and accent highlights in data-rich contexts.

Frosted glass surfaces use rgba(255, 255, 255, 0.6) with backdrop-filter: blur(12px) and a 1px border at rgba(255, 255, 255, 0.12) to create d

Typography

The type system pairs Outfit (a geometric, modern sans-serif) for headlines and display text with Inter (a humanist sans-serif) for body and UI labels. This pairing communicates technical precision (Outfit's structured geometry) paired with approachable clarity (Inter's warm proportions). Display (60px, 700 weight, -0.04em tracking) anchors hero sections with commanding presence; headline-lg (48px, 600 weight) breaks content into digestible sections; body-md (16px, 400 weight, 24px line-height) ensures readability on dark backgrounds by maintaining 1.5x line-height ratio. Labels use 12–14px with 0.01–0.05em tracking to maintain legibility at small scales. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) on all small labels (label-sm) placed over gradient or busy backgrounds to prevent blur.

Layout

The layout uses a 12-column fluid grid with a max-width of 1200px, centered with auto margins. Section separation follows the lg spacing token (40px margin-block-end between major sections), while internal component spacing uses md (24px) for card padding and sm (12px) for input/button internal spacing. The gutter (24px) is applied consistently to left/right container padding on mobile and tablet, scaling to 40px on desktop. White-space philosophy: embrace negative space to let gradient accents breathe—avoid cramped layouts. Hero sections use 60–80px vertical padding (xl spacing) to create immersive entry points. Cards and containers maintain 24px padding internally, with 16px gaps between stacked elements. Container max-width of 1200px ensures readability without excessive line-length on

Elevation & Depth

Depth is achieved through a three-tier shadow system combined with frosted glass layering. Level 1 (Base): the dark background (rgb(10, 1, 24)) with subtle grain texture (optional 1–2% noise overlay). Level 2 (Standard Card): rgba(255, 255, 255, 0.6) with backdrop-filter: blur(12px), 1px border at rgba(255, 255, 255, 0.12), and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (Elevated/Modals): rgba(255, 255, 255, 0.75) with backdrop-filter: blur(20px), same border, and box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25). Interactive hover states elevate to Level 3 shadow (0 6px 24px rgba(208, 132, 2

Shapes

The shape philosophy is 'Soft-Technical'—combining sharp precision with approachable softness. Buttons use full border-radius (9999px) to convey friendliness and modern UI conventions, while cards use xl (16px) for a balanced, professional appearance. Input fields use DEFAULT (5px) for subtle definition without visual aggression. Small UI elements (badges, tags) use full (9999px) for maximum approachability. The rationale: full-radius buttons signal 'click me' with contemporary UX patterns; card radius (16px) sits between clinical (0px) and overly organic (24px+), landing in the 'trustworthy-b

Components

Action Elements Buttons are the primary interaction driver. Primary buttons (button-primary) use {colors.primary} (#d084ff) with full border-radius (9999px), 12px 32px padding, and 48px height for touch-friendly targets. On hover, the background shifts to #c56bff with an elevated shadow (0 6px 24px rgba(208, 132, 255, 0.5)) and a 200ms transition. Secondary buttons (button-secondary) mirror the primary structure but use {colors.secondary} (#ff6b9d). Both button variants include a subtle glow effect via box-shadow on hover, creating visual feedback without animation jank.

Containers & Surfaces Cards use frosted glass (card-frosted): rgba(255, 255, 255, 0.6) background, backdrop-filter: blur(12px), 16px border-radius, 24px padding, and a 1px border at rgba(255, 255, 255, 0.12). On h

Do's and Don'ts

**Do**

• Do use primary (#d084ff) exclusively for CTAs, focus states, and brand-critical interactions—never for decorative elements or backgrounds.
• Do maintain 1.5x line-height (24px for 16px body text) on dark backgrounds to ensure readability and reduce eye strain.
• Do apply box-shadow: 0 4px 16px rgba(208, 132, 255, 0.3) to primary buttons and 0 6px 24px rgba(208, 132, 255, 0.5) on hover for consistent depth feedback.
• Do use frosted glass (rgba(255, 255, 255, 0.6) + backdrop-filter: blur(12px)) for card surfaces to maintain dark-mode cohesion while providing visual separation.
• Do transition all interactive states (hover, focus, active) over 200ms using cubic-bezier(0.4, 0, 0.2, 1) for smooth, professional motion.

**Don't**

• Don't use primary color on non-interactive elements or as a background fill—reserve it for actions and focus indicators only.
• Don't reduce line-height below 1.4x on dark backgrounds; this causes readability collapse and increases cognitive load.
• Don't apply harsh shadows (0 16px 40px+) on frosted glass cards; the blur effect already provides depth—excessive shadows create visual noise.
• Don't mix border-radius values arbitrarily; stick to the defined scale (3px, 5px, 8px, 10px, 16px, 9999px) to maintain visual consistency.
• Don't animate opacity or transform on buttons without a 200ms+ duration; fast transitions feel janky and reduce perceived quality.