CURATED · OPEN · FREE

Akaru

A bold, minimalist design agency portfolio featuring a custom grotesque typeface and expansive whitespace.

agencywebgl

Akaru screenshot

↓ Download design system (32 MB)Open in OpenDesign

Visit: https://akaru.fr

📦 Browse pack contents →

01

Identity DNA

boldgeometriceditorialprecision

A high-end architectural firm's monograph.

02

Color

#E49366Accent

#0E0E0EInk

#F1EFEBBG

#BFCCD8BG quiet

#B692A1Muted

rgba(14, 14, 14, 1)Line

High contrast typography over muted architectural tones.

03

Typography

geometric-sans · humanist-sans

display96px · 700
heading32px · 400
body16px · 400

Use 'Alliance Platt' (serif) for stylized accents if needed, though primarily sans is used. · Use 'Alliance Neue' (humanist sans) for body and smaller UI text. · Maintain tight letter-spacing on large display text.

04

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

130px

Asymmetrical with generous whitespace.

05

Surfaces

sm · 4px

md · 8px

lg · 30px

pill · 999px

1px solid #0E0E0E

inset 0 0 0 1px #0E0E0E · inset 0 0 0 1px rgba(255, 255, 255, 0.2)

06

Layout

1440container

12columns

24pxgutter

768 / 1024breakpoints

Asymmetric split-screen layout with large left-aligned typography.

07

Motion & Interaction

300msmicro

400mssmall

800msmedium

cubic-bezier(0.165, 0.84, 0.44, 1)easing

Smooth color and opacity transitions on hover. · Cubic-bezier easing for natural feel.

Smooth color transition over 0.3s. · Subtle opacity or color shift.

08

Components

button Pill-shaped menu button with solid dark background and white text.
card Edge-to-edge image blocks without visible borders.
hero Massive custom display typography filling the left half of the viewport.

09

Voice & Don'ts

Tone Professional, confident, and meticulous.
Headlines Minimalist, large-scale, and visually dominant.
CTAs Pill-shaped buttons with high contrast.

Don't use thin font weights — screenshot shows heavy, bold typography for display.
Don't clutter the layout with small elements — screenshot shows expansive, clean whitespace.
Don't use standard system fonts — screenshot features a highly customized geometric display font.
Don't use bright, saturated backgrounds — screenshot shows a muted, off-white (#F1EFEB) base.
Don't use square buttons — screenshot shows pill-shaped (999px) buttons and elements.
Don't center all content — screenshot shows a strong left-aligned, asymmetrical layout.
Avoid: Overly decorative elements
Avoid: Vibrant neon colors
Avoid: Dense text blocks
Avoid: Generic sans-serif fonts

10

Inside the pack — real screenshots

Akaru — 桌面首屏（hero） — 桌面首屏（hero）

Akaru — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Akaru — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Akaru — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Akaru — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Akaru — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Akaru — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Akaru — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Akaru — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Akaru — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Akaru — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Akaru — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Akaru — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Akaru — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Akaru — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Akaru — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Akaru — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Akaru — 移动首屏 — 移动首屏

Captured from the live site · real computed styles

11

System prompt

This is a high-end design agency website characterized by a minimalist, bold aesthetic. The layout is asymmetrical, using a massive custom geometric display typeface ('Alliance Platt') for the hero and 'Alliance Neue' for body text. The color palette is dominated by a warm off-white background (#F1EFEB) and deep charcoal ink (#0E0E0E), accented with muted architectural tones like dusty rose (#B692A1), pale blue (#BFCCD8), and a single pop of terracotta (#E49366). Critical donts: never use thin typography; always maintain generous whitespace; never use standard UI button shapes—use pill-shaped ones instead. The design is premium, editorial, and architectural in feel.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko