Elephant Design

Overview

Elephant Design is a design-led innovation organization that transforms complex business challenges into elegant, human-centered solutions. The visual system embodies a "Premium Dark Minimalism" aesthetic—a sophisticated approach that pairs a near-black canvas (rgb(0, 12, 22)) with vivid cyan accents (rgb(0, 240, 215)) to create visual clarity and directional focus. The brand personality is authoritative yet approachable: precise, strategic, and forward-thinking. Every interface element is intentional, with no decorative flourishes—only purposeful contrast and hierarchy. The emotional response is one of confidence and innovation: users feel they're engaging with a cutting-edge, design-conscious organization.

The voice is direct and professional, avoiding hyperbole while celebrating craft and impact. Vocabulary leans into design terminology ("design-led," "innovation," "strategy") and speaks to outcomes rather than features. Example sentence in brand voice: "We solve complex challenges by putting people first and design at the center."

Colors

The color system is built on a deep, near-black foundation (surface: #000c16, surface-dim: #000000) that provides visual rest and premium positioning. This dark canvas is punctuated by two primary accent colors: cyan (primary: #00f0d7, rgb(0, 240, 215)) and coral-red (secondary: #f0523d, rgb(240, 82, 61)). Cyan is the dominant accent, used for all primary CTAs, focus states, and brand-distinctive interactive elements—it commands attention without aggression. Coral-red serves as a secondary accent for status indicators, warnings, and supporting actions. A tertiary teal (tertiary: #34bcae, rgb(52, 188, 174)) bridges the two, used in ticker buttons and secondary UI surfaces. The surface stack progresses from pure black (surface-container-lowest: #000000) through deep navy tones (surface-conta

Typography

The type system pairs Syne (a geometric, bold sans-serif from Google Fonts) for all display, headline, and label elements with Open Sans for body copy and longer-form text. Syne's tight, angular letterforms (fontWeight: 700, letterSpacing: -0.04em on display) reinforce the brand's precision and modernity, while Open Sans provides warm, readable body text at 16–18px with 24–28px line-height. The hierarchy is steep: display text reaches 60px at fontWeight: 700 with -0.04em tracking, creating visual drama; headlines drop to 28–40px; body text sits at 16px with 400 weight and neutral tracking. Labels use Syne at 13–14px with fontWeight: 600 and 0.01–0.05em letter-spacing to maintain crispness at small sizes. On dark backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to small labels

Layout

The layout system uses a 12-column grid with a max-width of 1440px, enabling flexible content arrangement across desktop (1025px+), tablet (769–1024px), and mobile (390–768px) breakpoints. The design employs a fluid, full-bleed approach: hero sections occupy 100vh with overflow-y: hidden, creating immersive, full-screen experiences. Spacing follows a semantic scale: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for section gutters, lg (40px) for major section separation, and xl (64px) for container margins. The gutter is consistently 24px, maintaining rhythm across all breakpoints. Container max-width is 1440px, allowing breathing room on ultra-wide displays. White-space is generous—sections are separated by lg spacing (40px) or full viewport heights, reinforc

Elevation & Depth

Depth in this system is achieved through layered transparency and subtle shadows rather than dramatic drop-shadows. The base elevation uses no shadow (Level 1: surface at #000c16). Standard cards and containers sit at Level 2 with a 1px border at rgba(255, 255, 255, 0.1) and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating gentle separation from the background. Elevated modals and glass surfaces (Level 3) use backdrop-filter: blur(3.6px), background: rgba(0, 0, 0, 0.64), and a 1px border at rgba(255, 255, 255, 0.4), with box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28) for pronounced lift. Inter

Shapes

The shape philosophy is "Architectural Precision"—sharp, geometric forms that reflect the brand's technical sophistication and design rigor. Border-radius is minimal and purposeful: buttons and small interactive elements use rounded.DEFAULT (0.5rem / 8px) for a subtle, modern edge; cards and larger containers use rounded.lg (1rem / 16px) to soften mass without compromising geometry; modals and glass surfaces use rounded.xl (1.5rem / 24px) for a premium, refined appearance. The sticky navbar uses rounded.lg (8px) to maintain visual lightness. Circular elements (badges, avatars, focus indicators

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use background: {colors.primary} (#00f0d7), text-color: {colors.on-primary} (#000000), padding: 10px 20px, height: 40px, rounded: {rounded.md} (12px), fontFamily: Syne, fontWeight: 600, fontSize: 14px. On hover, background shifts to {colors.primary-fixed-dim} (#00b2a8) with a 0.3s ease transition. Secondary buttons use background: rgba(255, 255, 255, 0.12), border: 1px solid rgba(255, 255, 255, 0.2), same padding and height, with hover state at rgba(255, 255, 255, 0.2) and text-color: {colors.primary}. Ghost buttons are transparent with a 1px border at rgba(255, 255, 255, 0.3), text-color: {colors.on-surface}, and hover state at background: rgba(0, 240, 215, 0.1) with border-color: {colors.primary}. All butt

Do's and Don'ts

**Do**

• Do use cyan (#00f0d7) as the primary accent for all CTAs, focus states, and brand-distinctive interactions—it's the visual signature of Elephant Design.
• Do maintain the dark canvas (surface: #000c16) as the dominant background; it's essential to the premium positioning and reduces cognitive load.
• Do pair Syne (bold, geometric) with Open Sans (warm, readable) to balance precision with approachability—never use a single typeface for both display and body.
• Do apply generous spacing (lg: 40px for section separation, xl: 64px for container margins) to reinforce the uncluttered, premium aesthetic.
• Do use glass surfaces (backdrop-filter: blur(3.6px), rgba(0, 0, 0, 0.64), 1px border at rgba(255, 255, 255, 0.4)) for modals and overlays to create layered depth without breaking the dark theme.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to small labels over busy backgrounds to ensure legibility without increasing font size.

**Don't**

• Don't use pure white (#ffffff) as a primary text color; use cool white (#eefffc) to maintain visual warmth and reduce harshness on dark backgrounds.
• Don't apply heavy drop-shadows (box-shadow: 0 20px 60px) that feel dated; use subtle shadows (0 3px 8px rgba(0, 0, 0, 0.15)) or glass surfaces for depth.
• Don't mix Syne and Open Sans weights arbitrarily; reserve Syne fontWeight: 700 for headlines and labels, and Open Sans fontWeight: 400 for body text.
• Don't use rounded-corners greater than {rounded.xl} (24px) on primary UI elements; it dilutes the architectural precision of the brand.
• Don't apply cyan (#00f0d7) to non-interactive elements or backgrounds; reserve it exclusively for CTAs, focus states, and brand-distinctive accents.
• Don't reduce spacing below {spacing.md} (24px) for section separation; the premium aesthetic relies on breathing room and visual rest.