CURATED · OPEN · FREE

Akiflow

A unified task and calendar app that uses AI to help you save time.

01

Identity DNA

A smart, clean digital planner that combines your schedule and to-do list into one AI-powered view.

02

Color

A clean, white canvas with a high-contrast, high-chroma purple accent used sparingly for primary actions and highlights.

03

Typography

geometric-sans · humanist-sans

• display64px · 500
• display-sm48px · 500
• body18px · 400

Use Geometric Sans for impactful display headlines. · Use Humanist Sans for clear, readable body text. · Maintain tight letter-spacing for large headings.

04

Spacing

Generous whitespace around primary elements to create a focused, uncluttered feel.

05

Surfaces

Subtle 1px solid borders using a very low-opacity black.

0px 1px 20px rgba(0, 0, 0, 0.08) · 0px 1px 6px rgba(0, 0, 0, 0.16) · 0px 1px 16px rgba(144, 0, 255, 0.2)

06

Layout

A centered, single-column layout for the hero section, transitioning to a multi-column layout for feature grids.

07

Motion & Interaction

Subtle fade-in on scroll for content blocks. · Smooth hover transitions on buttons and links.

Buttons slightly increase in brightness or show a subtle purple glow shadow. · A subtle scale-down effect on primary buttons.

08

Components

• button A pill-shaped primary button with a solid purple background and white text, featuring a subtle glow effect on hover.
• card A clean white card with a very subtle drop shadow and a large border-radius, often used to showcase product UI.
• chip Small, rounded rectangular badges for labels or tags.
• input A clean, borderless or subtly bordered input field with a light gray background.
• hero A massive, centered headline followed by a sub-headline, a primary CTA button, and a large product screenshot.

09

Voice & Don'ts

• Tone Confident, direct, and efficiency-focused.
• Headlines Short, bold, and benefit-driven statements.
• CTAs Action-oriented and clear, such as 'Try for free'.

• Don't use dark mode — the screenshot shows a predominantly white background.
• Don't use serif fonts — the screenshot shows clean, geometric and humanist sans-serif typography.
• Don't use overly complex gradients — the screenshot shows solid colors and very subtle, almost imperceptible gradients in specific areas.
• Don't use small, cramped layouts — the screenshot shows generous spacing and large, impactful typography.
• Don't use clashing colors — the screenshot shows a disciplined palette of white, dark gray, and a single purple accent.
• Don't use harsh, square corners — the screenshot shows a consistent use of rounded corners on buttons, cards, and UI elements.
• Avoid: Overly technical jargon
• Avoid: Vague marketing fluff
• Avoid: Passive voice

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

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