Arounda

Overview

Arounda is a digital product design and development agency that transforms complex enterprise challenges into cohesive, visually striking digital experiences. The brand serves Fortune 500 companies, SMEs, and innovative startups seeking to unify brand identity, website design, and UI/UX into a single holistic product. The aesthetic is "Dark Minimalism with Neon Accents"—a deliberate contrast between a near-black canvas (rgb(11, 11, 11)) and high-saturation accent colors (toxic green #d0f601, electric purple #7b12ff, cyan #77fffc) that punctuate the interface like neon signs in a dark city. The emotional response is one of sophisticated energy: professional yet playful, technical yet human, commanding attention without shouting.

Arounda's voice is direct, confident, and slightly irreverent. The brand speaks in active verbs and concrete outcomes: "We deliver results that inspire" rather than "We provide solutions." Vocabulary leans toward action-oriented language (unite, deliver, achieve, transform) and avoids corporate jargon. The tone is conversational but authoritative—a senior designer speaking to peers, not a salesperson. Example sentence in brand voice: "We've helped 350+ platform initiatives succeed because we treat your product like it's ours."

Colors

The color system is built on a high-contrast dark-light polarity designed to maximize visual hierarchy and accessibility. The primary surface is near-black (#0b0b0b, rgb(11, 11, 11)), which serves as the canvas for all interactive elements. On-surface text is pure white (#ffffff, rgb(255, 255, 255)) for maximum contrast and legibility at 65px display sizes. Primary accent is white (#ffffff) used on call-to-action buttons and interactive elements—a counterintuitive choice that makes CTAs pop against the dark background through sheer luminance contrast. Secondary accent is toxic green (#d0f601), a high-saturation accent reserved for "Book a Call" buttons, highlight tags, and brand-distinctive interactive states. This green appears at 100% opacity on hover states and transitions with 0.3s eas

Typography

The type system uses Gordita (a geometric sans-serif) as the primary typeface for all body, headline, and label text, paired with Librebaskerville (a serif) for italic accents and decorative text in hero sections. Display text (65px, 500 weight, -0.02em letter-spacing) is used for H1 headlines and hero statements; the tight letter-spacing (-0.02em) creates visual density and sophistication. Headline-lg (48px, 500 weight) is used for section titles and major content blocks. Body text (16px, 400 weight, 24px line-height) is set with generous line-height to ensure readability on dark backgrounds; the 1.5 line-height ratio (24px / 16px) prevents text from feeling cramped. Labels and buttons use 16px weight 500 with 0.01em letter-spacing to add subtle emphasis. When displaying text over busy or

Layout

The layout uses a 12-column grid with a max-width of 1440px (container-max-width: 1440px) and a 24px gutter between columns. The design favors asymmetrical layouts with generous white space (or in this case, black space) to let content breathe. Section separation uses lg spacing (40px) for major content blocks and md spacing (24px) for subsections. Hero sections use full-width backgrounds with 64px (xl spacing) padding on desktop and 40px (lg spacing) on tablet to create breathing room around the headline. Card components use md spacing (24px) for internal padding and are separated by lg spacing (40px) vertically. The grid is fluid on mobile (single column, 12px gutter) and expands to full 12-column on desktop. Container max-widths scale: 960px on tablet (breakpoint 768px), 1279px on deskt

Elevation & Depth

Depth in this system is achieved through three distinct layers: Base (the dark background), Standard (glass cards with subtle blur), and Elevated (interactive overlays with stronger blur). Base layer is the near-black surface (#0b0b0b) with no shadow or elevation. Standard layer (Level 2) uses backdrop-filter: blur(24.51px) with background: rgba(255, 255, 255, 0.08) and a 1px border at rgba(255, 255, 255, 0.15), paired with a soft shadow: 9.06px 3.02px 27.08px 0px rgba(10, 19, 94, 0.1) and an inset highlight at 1.01px 1.01px 0.81px 0px rgba(255, 255, 255, 0.23) inset. This creates a frosted-gl

Shapes

The shape philosophy is "Soft-Technical Minimalism"—rounded corners are used strategically to soften the hard edges of a dark, technical interface without introducing organic or playful curves. Buttons and primary CTAs use full border-radius (9999px / border-radius: 100px) to create pill-shaped buttons that feel friendly and clickable. Cards and glass surfaces use lg radius (1rem / 16px) for a subtle roundness that suggests depth without distraction. Input fields use DEFAULT radius (0.5rem / 8px) for a more technical, form-like appearance. Decorative elements and badges use full radius (9999px

Components

Action Elements Buttons are the primary interactive element and come in three variants: primary (white background, black text, 100px border-radius, 14px 32px padding, 48px height), secondary (transparent with rgba(217, 217, 217, 0.11) background and 1px border, same padding and height), and accent (toxic green #d0f601 background, black text). All buttons use Gordita 16px weight 500. On hover, primary buttons transition background-color to #e8e8e8 over 0.35s cubic-bezier(.72, -.22, .13, 1.18); the arrow icon rotates -135deg and the border-radius morphs from 0 50% 50% 50% to 50% 50% 50% 0 over 0.25s cubic-bezier(.4, 0, .2, 1). Accent buttons transition to #b8d601 on hover. All button transitions use cubic-bezier easing for a bouncy, premium feel.

Containers & Surfaces Cards use a ba

Do's and Don'ts

**Do**

• Do use white (#ffffff) on dark backgrounds for maximum contrast and legibility; aim for WCAG AAA compliance (7:1 contrast ratio minimum).
• Do apply glass-morphism effects (backdrop-filter: blur(24.51px) + rgba(255, 255, 255, 0.08)) to create visual separation without harsh shadows.
• Do reserve toxic green (#d0f601) and electric purple (#7b12ff) for high-priority interactive elements and hover states; use sparingly to maintain impact.
• Do use cubic-bezier easing (e.g., cubic-bezier(.72, -.22, .13, 1.18)) on button transitions to create a premium, bouncy feel.
• Do maintain 24px gutter spacing and 40px section separation (lg spacing) to create breathing room in dark layouts.

**Don't**

• Don't use pure black (#000000) for text on dark backgrounds; use white (#ffffff) or near-white (#d9d9d9) instead for sufficient contrast.
• Don't apply harsh drop shadows (box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5)) on dark surfaces; use soft, inset highlights and subtle outer glows instead.
• Don't mix more than three accent colors in a single section; toxic green, purple, and cyan should be used in separate contexts to avoid visual chaos.
• Don't use border-radius values smaller than 0.5rem (8px) on interactive elements; small radius makes buttons feel technical and less clickable.
• Don't animate opacity or transform properties for longer than 0.45s; keep transitions snappy (0.2s–0.35s) to feel responsive and premium.