apara.design website design: fonts, colors and UI patterns

Design character

Apara is a quiet design-studio portfolio: light neutral grounds, strong typographic case-study structure, and project imagery that supplies color while the chrome stays almost invisible. It should feel considered and slow—more monograph than agency template with bouncing badges.

What should survive adaptation: - Light neutral canvas and near-black type - Large project titles with disciplined hierarchy - Imagery-led case studies - Minimal navigation and generous whitespace

Foundations

Color

No stable measured palette roles were retained across these pages; rely on the visual description. Shell stays monochrome/neutral; project photography and art direction may introduce selective color. Avoid a permanent loud primary that fights case-study art.

Typography

Observed text styles: - text: unknown, weight 400, 12px - text: unknown, weight 400, 14px, lh 18px - text: unknown, weight 400, 14px, lh 16px - text: unknown, weight 400, 16px, lh 20px - text: unknown, weight 500, 25px, lh 31px - text: unknown, weight 600, 25px, lh 31px - text: unknown, weight 400, 13px, lh 15.6px - text: unknown, weight 400, 12px - text: unknown, weight 500, 38px, lh 40px - text: unknown, weight 500, 25px, lh 31px - text: unknown, weight 400, 14px, lh 20px - text: unknown, weight 400, 14px, lh 26px

Display-scale titles for studio/project names; smaller labels for meta; readable body for case narrative. Tracking on large titles should feel intentional and studio-sharp.

Spacing and layout

Recurring spacing measurements include 7px, 8px, 10px, 12px, 14px, 16px, 232px. Vertical case-study rhythm, wide margins, occasional full-bleed frames. Observed corner radii include 14px, 15px, 18px, 22px, 24px, 120px, 150px, 999px. Prefer optical composition over dense card marketplaces.

Visual language

Flat or softly separated sections, thin rules, minimal shadows. The portfolio is the product—UI decoration loses.

Components and states

• Minimal header with wordmark/contact
• Project list or featured heroes
• Case-study modules: title, role/meta, large media, short narrative
• Footer with sparse contact links

Responsive behavior

Multiple home widths (~1080–1712px) show the same quiet system scaling. Stack media above type on narrow screens; keep margins honest.

Practical guidance

Preserve monochrome shell, typographic confidence, case-study air. Avoid template-y colorful agency kits, stock illustration mashups, noisy motion.

Scope note

Studied 8 page captures on paths /. Some structural families were incomplete on these pages. Home portfolio captures at several widths; individual deep case URLs may share the same system.