EIDEN GROUP

Overview

EIDEN GROUP is a Moroccan digital architecture agency that transforms business challenges into integrated digital systems through strategy, creativity, and technology. The design system embodies 'Warm Minimalism'—a philosophy that combines the clarity and restraint of minimalist design with the approachability and human warmth of natural materials and earthy tones. The brand serves ambitious businesses seeking not just a website or campaign, but a complete structural foundation for growth. The visual identity evokes a sense of crafted precision: clean lines, generous whitespace, and a restrained color palette that lets content and strategy take center stage. Voice: direct, confident, and grounded. The tone avoids hype; instead, it speaks with the clarity of an architect explaining a blueprint. Example: 'We don't build websites. We build the systems that bring your customers to you.'

Colors

The color system is rooted in natural materials and architectural precision. Primary (#0e7a73, a sophisticated forest teal) is used exclusively for interactive elements—CTAs, links, focus states, and brand moments—creating a clear visual hierarchy without overwhelming the warm, neutral canvas. Secondary (#0c5752, a deeper forest) provides depth for secondary actions and container backgrounds, maintaining visual coherence across the interface. Tertiary (#daa520, a warm gold) is reserved for accents, highlights, and premium moments—it appears on the hero underline, badges, and key visual punctuation. The surface stack is anchored in #fefdfb (cream canvas), with beige (#f4ebd0) and deeper beige-dk (#e3d3a8) creating subtle container layers. On-surface text is always #122620 (forest ink), ensu

Typography

The type system pairs Outfit (a geometric sans-serif with 500 weight for headlines) with Inter (a humanist sans-serif at 400 weight for body text), creating a visual conversation between structure and readability. Display and headline levels use Outfit at weights 500–700, with tight negative letter-spacing (-0.02em to -0.01em) to convey architectural precision and confidence. Body text in Inter at 16–18px with 1.5 line-height (24–28px) ensures legibility across devices while maintaining the warm, approachable tone. Labels and UI text use Outfit at 12–14px with 0.05–0.08em letter-spacing, creating visual distinction and a sense of crafted detail. On small labels over busy backgrounds or images, apply text-shadow: 0 2px 4px rgba(18, 38, 32, 0.2) to ensure readability. Headlines should never

Layout

The layout system uses a 12-column grid with a 1280px container max-width, providing flexibility for both dense information architecture and generous whitespace. Page rhythm is governed by the lg spacing token (40px) for section separation, creating visual breathing room that reinforces the minimalist aesthetic. Gutters are 24px on desktop, 16px on tablet, and 12px on mobile, ensuring content never feels cramped. The hero section uses a 2:1 aspect ratio with a subtle gradient background (cream to beige), anchoring the page with visual weight. Cards and containers use md spacing (24px) for internal padding, with sm spacing (12px) between nested elements. Whitespace is intentional: never fill empty space with decoration. The grid is fluid on mobile (single column, full-width containers) and

Elevation & Depth

Depth is achieved through subtle layering and soft shadows rather than dramatic visual separation. Level 1 (Base): The cream canvas (#fefdfb) with no shadow, establishing the foundation. Level 2 (Standard Cards): background: #ffffff with box-shadow: 0 3px 8px rgba(18, 38, 32, 0.15), creating a gentle lift. Level 3 (Elevated/Modals): background: #ffffff with box-shadow: 0 16px 40px rgba(18, 38, 32, 0.12) and backdrop-filter: blur(20px), creating a frosted-glass effect. The glass-light component uses rgba(254, 253, 251, 0.88) with backdrop-filter: blur(20px) and backdrop-saturate: 150%, paired w

Shapes

The shape philosophy is 'Architectural Softness'—sharp enough to feel precise and modern, soft enough to feel approachable and human. Buttons use full radius (9999px) for primary actions, creating a distinctive pill shape that signals importance and invites interaction. Secondary buttons and inputs use DEFAULT radius (0.5rem / 8px), balancing geometric clarity with approachability. Cards and containers use xl radius (1.5rem / 24px), creating a sense of crafted refinement without feeling overly rounded. Navigation elements and small UI components use md radius (0.75rem / 12px). The rationale: f

Components

Action Elements Buttons are the primary drivers of user intent. Primary buttons use full radius (9999px), background: {colors.primary}, text: {colors.on-primary}, padding: 12px 24px, height: 48px, with no border. On hover, transition to background: {colors.primary-container} and text: {colors.on-primary-container} over 300ms ease-brand. Secondary buttons use transparent background with a 1px border at {colors.on-surface}, same radius and padding, transitioning to background: {colors.surface-container-high} on hover. Ghost buttons (text-only links) have no background or border, using only text color {colors.on-surface}, transitioning to {colors.primary} on hover. All buttons include a focus ring: box-shadow: 0 0 0 3px rgba(14, 122, 115, 0.1) when focused via keyboard.

Containers &

Do's and Don'ts

**Do**

• Do use primary teal (#0e7a73) exclusively for interactive elements—buttons, links, focus states—to create a clear visual hierarchy and guide user attention.
• Do maintain generous whitespace (lg spacing: 40px) between sections to reinforce the minimalist aesthetic and prevent visual fatigue.
• Do pair Outfit headlines with Inter body text to create a visual conversation between structure and warmth; never mix serif and sans-serif within the same hierarchy level.
• Do use the full-radius pill shape (9999px) for primary CTAs to make them instantly recognizable and inviting.
• Do apply 300ms ease-brand transitions to all interactive states (hover, focus, active) to create a sense of responsive precision and craft.
• Do use subtle shadows (0 3px 8px rgba(18, 38, 32, 0.15)) to create depth without visual drama; avoid harsh or dark shadows that feel heavy.

**Don't**

• Don't use primary teal on non-interactive elements like headings or body text; reserve it exclusively for actions and focus states.
• Don't exceed 60px font size for headlines on desktop; use responsive scaling to maintain visual hierarchy across breakpoints.
• Don't fill empty space with decoration or patterns; whitespace is a design element and should be respected.
• Don't use sharp corners (0px radius) on buttons or cards; the brand's warmth requires softness—minimum md radius (0.75rem).
• Don't apply multiple shadows or layered effects; the design system uses a single, consistent shadow model for clarity.
• Don't override the 300ms ease-brand transition timing; consistency in motion creates a sense of intentional, crafted interaction.