Digitallybg

Overview

Digitallybg embodies a 'Professional Collaborative' aesthetic—a design language that merges corporate trustworthiness with approachable warmth. The brand serves enterprise and public-sector organizations seeking unified IT expertise, and the visual system reflects this duality: clean, minimal surfaces paired with a vibrant golden-amber accent that signals energy, partnership, and forward momentum. The UI evokes confidence without coldness, professionalism without rigidity. Voice: direct, solution-oriented, and human-centered. The brand speaks in clear, declarative sentences that prioritize outcomes over jargon. Example: 'We scale your team when you need it, pause when you don't—no contracts, no surprises.'

Colors

The color palette is anchored by a warm, energetic primary (#ffb13f) that dominates CTAs, navigation highlights, and key interactive states. This golden-amber tone conveys approachability and forward momentum, appearing on the 'Get In Touch' button and 'Request a Consultation' CTA. The secondary accent (#ff6900) provides a deeper, more saturated energy for supporting elements and hover states, while the tertiary error red (#d9534f) is reserved for alerts and destructive actions. The surface stack is deliberately neutral—pure white (#ffffff) for primary surfaces, with subtle grays (#f5f5f5 to #e9ecef) for container hierarchy and depth. Text defaults to a professional charcoal (#333333) for body copy and headlines, with secondary text in mid-gray (#666666) for reduced emphasis. The outline c

Typography

The type system uses Roboto throughout, a geometric sans-serif that balances corporate credibility with modern accessibility. Display (60px, 700 weight) anchors hero sections and major announcements with -0.04em letter-spacing for visual tightness. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) establish clear information hierarchy, with -0.02em and -0.01em letter-spacing respectively to maintain sophistication. Body-lg (18px, 400 weight) and body-md (16px, 400 weight) are set at 28px and 24px line-heights to ensure readability in dense content blocks. Label-md (14px, 600 weight) and label-sm (12px, 500 weight) are used for UI labels, buttons, and metadata, with 0.02em to 0.03em letter-spacing to add visual distinction. All body text receives -webkit-font-smoothing: anti

Layout

The layout follows a 12-column grid system with a maximum container width of 1140px, providing ample breathing room on desktop while remaining responsive on tablet and mobile. The spacing scale uses an 8px base unit: xs (4px) for micro-adjustments, sm (12px) for tight grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero and full-width spacing. The gutter is consistently 24px, applied to all horizontal padding within containers. Hero sections use full-viewport height with a semi-transparent dark overlay (rgba(0, 0, 0, 0.35)) to ensure text legibility over photographic backgrounds. Content sections are separated by lg spacing (40px) vertically, creating a rhythm that feels neither cramped nor excessive. Margins between block-level el

Elevation & Depth

Depth is conveyed through a three-tier shadow system that avoids harsh contrast while maintaining clear visual hierarchy. Level 1 (sm elevation: 0 1px 2px rgba(0, 0, 0, 0.06)) is applied to subtle interactive elements like input fields and small cards, providing just enough separation to signal interactivity. Level 2 (md elevation: 0 3px 8px rgba(0, 0, 0, 0.15)) is the standard for cards, modals, and dropdown panels, creating a noticeable but not aggressive lift from the surface. Level 3 (lg elevation: 0 8px 24px rgba(0, 0, 0, 0.12)) is reserved for prominent modals, floating action buttons, a

Shapes

The design employs a 'Soft-Professional' radius philosophy: sharp enough to feel contemporary and trustworthy, yet rounded enough to avoid coldness. Buttons use a full-rounded radius (42px) to create a pill-shaped, approachable form that signals friendliness and action. Cards and containers use lg radius (0.5rem / 8px) for a subtle, refined corner treatment that suggests sophistication without rigidity. Input fields and smaller UI elements use sm radius (3px) for a more restrained, technical appearance that reinforces their functional role. Modals and dropdown panels use lg radius (8px) to mat

Components

Action Elements Buttons are the primary mechanism for user intent. The button-primary component uses {colors.primary} (#ffb13f) with white text, 42px border-radius, 12px 24px padding, and 44px height. All buttons use {typography.label-md} (14px, 600 weight) for clear, scannable labels. Hover state (button-primary-hover) shifts the background to #ff9500 with a 200ms ease-in-out transition, providing immediate visual feedback. Secondary buttons (button-secondary) are transparent with a 2px solid border in {colors.primary}, allowing them to sit alongside primary CTAs without competing for attention. Links within body text use {colors.primary} with text-decoration: underline, and shift to {colors.secondary} (#ff6900) on hover with a 150ms transition.

Containers & Surfaces Cards (card

Do's and Don'ts

**Do**

• Do use {colors.primary} (#ffb13f) exclusively for primary CTAs and key interactive states—it's the visual anchor that guides user attention.
• Do maintain 24px (md spacing) as the default vertical rhythm between sections; it creates a professional, breathing layout that feels neither cramped nor sparse.
• Do apply {typography.label-md} (14px, 600 weight) to all button text and UI labels for consistency and scannability across the interface.
• Do use {rounded.full} (42px) for all primary buttons to make them instantly recognizable as clickable; reserve smaller radii for secondary UI elements.
• Do include a 200–250ms transition on all hover and focus states to signal responsiveness and reduce the perception of lag.
• Do layer elevation shadows (sm, md, lg) to create clear visual hierarchy—never skip shadow on interactive elements, as it signals affordance.

**Don't**

• Don't use secondary (#ff6900) or tertiary (#d9534f) colors as primary CTAs; they dilute the visual hierarchy and confuse user intent.
• Don't apply rounded-full (42px) to input fields or cards—reserve it exclusively for buttons to maintain visual distinction and clarity.
• Don't exceed lg spacing (40px) for standard section separation; anything larger creates a disjointed, scattered layout.
• Don't omit focus states on interactive elements; keyboard navigation and accessibility require clear, visible focus indicators (minimum 3px outline or shadow).
• Don't use body text smaller than 16px (body-md) in dense content blocks; it reduces readability and accessibility, especially on mobile.
• Don't apply multiple shadows or conflicting elevations to a single element; stick to one elevation level per component to maintain visual clarity.