Alacer

Type

Website

Year

2024

Client

Alacer

Scope

Responsive website, React, Tailwind, Figma, Adobe Illustrator, Photoshop

My Role

Lead Designer & Developer, freelance

Team Context

A collaboration with Alacer's cofounders

Modern, minimal and warm. This is a work in progress rebranding project, for a small company making giganting investments in the building industry. Alacer is led by a married couple since early 2000s. They have a strong passion for design, acoustics and natural materials.

01

Problem

Business Challenge

Alacer needed to modernize their online presence to reflect their growth as a leading acoustic solutions provider. Their existing website didn't effectively communicate their technical expertise or showcase their product range.

User Need

Architects and facility managers needed a clear way to understand Alacer's acoustic solutions, request quotes, and access technical specifications, but the existing site was outdated and difficult to navigate.

02

Approach

Methodology

Client-centered design with technical expertise focus

Key Decisions

  • Prioritized technical credibility over flashy design
  • Created comprehensive product showcase sections
  • Implemented clear contact and quote request flows
03

Outcome

Key Learnings

  • Technical B2B clients value clarity over creativity
  • Product showcases need both visual and technical information

Alacer Design System

Style Guide & Components

v1.0

2025

Typography

HEADINGS

Hero Title

Section Title

Subsection

BODY TEXT

Regular paragraph text for main content

Light text for secondary information

LABELS

Navigation Label

Color Palette

PRIMARY

#4F382B
#917E6E

SECONDARY

#B48A6D
#A3B6C2

NEUTRAL

#FAF7F2
#E3C7A6
#34302D

Components

BUTTONS

CARDS

Portfolio

Card Title

Card description text

Grid System

12-COLUMN GRID • MAX-WIDTH: 1440px

BREAKPOINTS

Mobile: < 768px
Tablet: 768px - 1024px
Desktop: > 1024px

SPACING

Padding: 32px (2rem)
Gaps: 24px (1.5rem)
Margins: 96px (6rem)

Design Principles

Minimal & Clean

Focused on clarity and functionality with purposeful use of whitespace

Warm & Natural

Earth-toned palette reflecting craftsmanship and acoustic materials

Subtle Motion

Gentle transitions and hover effects enhance user experience

Glassmorphism

Backdrop blur and transparency create depth and modern appeal

Brand Voice

Professional yet approachable, emphasizing expertise in acoustic solutions and spatial design