CURATED · OPEN · FREE

Ayakaito

A refined editorial portfolio showcasing high-end branding and typography through rich, photographic still lifes.

EditorialPortfolioTypographyPhotographicCuration

Ayakaito screenshot

↓ Download design system (39 MB)Open in OpenDesign

Visit: https://ayakaito.com

📦 Browse pack contents →

01

Identity DNA

editorialrefinedcuratedJapanesetypography

A high-end design studio gallery showcasing a refined mix of photography, print, and type.

02

Color

#35472CInk

#FEFDF8BG

#35477CMuted

rgba(53, 71, 44, 1)Line

Earth-toned, organic palette dominated by deep olive greens and warm neutrals.

03

Typography

transitional-serif · humanist-sans · monospaced

display62px · 400
body18px · 400

Navigation links use a humanist sans-serif at 18px. · Project descriptions use a refined transitional serif. · Captions and metadata often use an uppercase sans-serif.

04

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

generous, with large typographic scale and intentional negative space

05

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

thin 1px solid dark olive (#35472C) for interactive elements

06

Layout

1440container

12columns

24pxgutter

768 / 1024breakpoints

Immersive full-bleed photography with split-screen editorial layouts.

07

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

Smooth transitions for all interactive elements (all 0.3s). · Subtle opacity fades on hover states.

Subtle color change and opacity transition on navigation links and buttons. · Standard pointer interaction for links and projects.

08

Components

button Minimal text link with a thin border and rounded pill shape.
card Split panel layout pairing large typography blocks with full-bleed project photography.
chip Small uppercase labels for project categories.
input None visible.
hero Immersive full-screen photographic still life with an overlay of primary navigation.

09

Voice & Don'ts

Tone Refined, sophisticated, and quiet.
Headlines Large, tightly tracked serif typography for maximum editorial impact.
CTAs Understated, pill-shaped outlined buttons with minimal uppercase text.

Don't use bright, neon accent colors — screenshot shows a muted, earth-toned palette.
Don't use heavy drop shadows on elements — screenshot shows flat, photographic depth instead.
Don't use tight, cluttered grids — screenshot shows expansive, breathing layouts.
Don't use playful, rounded UI components — screenshot shows refined, pill-shaped buttons.
Don't use bold, heavy sans-serif display fonts — screenshot shows elegant, high-contrast serifs.
Don't use rigid, card-based layouts — screenshot shows immersive, full-bleed editorial spreads.
Avoid: Bright, saturated accent colors
Avoid: Heavy drop shadows
Avoid: Dense, cluttered grids
Avoid: Playful or casual language
Avoid: Rigid, geometric UI components
Avoid: Loud, decorative backgrounds

10

Inside the pack — real screenshots

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ayakaito — 移动首屏 — 移动首屏

Captured from the live site · real computed styles

11

System prompt

This is a refined editorial portfolio for a high-end design studio, focusing on branding, typography, and illustrations. The core palette relies heavily on deep olive green (#35472C) and warm off-white (#FEFDF8), occasionally using soft pinks for section backgrounds. Typography mixes elegant transitional serifs for large headlines with humanist sans-serifs for navigation and metadata. It prioritizes immersive, full-bleed photography and generous whitespace over dense UI. Critical donts: avoid neon accent colors, avoid heavy drop shadows, and avoid rigid card-based layouts. The system must maintain a sophisticated, quiet, and gallery-like visual hierarchy.

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