CURATED · OPEN · FREE

It's Nice That

A leading online publication and community championing global creativity through visual journalism and curated projects.

01

Identity DNA

A vibrant creative director's mood board brought to life as a daily digital publication.

02

Color

High-contrast black-and-white base with a vibrant purple accent and warm pastel sections for content curation.

03

Typography

transitional-serif · humanist-sans

• display48px · 500
• h232px · 400
• body17px · 400
• caption11px · 400

Use transitional-serif for large, authoritative headlines and display text. · Use humanist-sans for all body copy and functional UI elements to maintain high readability. · Maintain tight tracking (-1px) on large display type for a modern editorial feel. · Use generous line-height (~1.5) for body text to ensure comfortable reading.

04

Spacing

8px baseline grid used for consistent vertical rhythm and component spacing.

05

Surfaces

Minimal solid 1px borders in dark ink color (#2B2B2B) for structural separation.

0px 24px 38px 0px rgba(0, 0, 0, 0.08) · 0px 9px 46px 0px rgba(0, 0, 0, 0.08) · 0px 11px 15px 0px rgba(0, 0, 0, 0.08)

06

Layout

Classic editorial magazine layout with a clean top navigation, horizontal feed, and varied grid-based content sections.

07

Motion & Interaction

Subtle opacity transitions for background elements and UI states. · Fast background-color and color changes on interactive elements.

Subtle background-color and color transitions over 0.1s ease-in for links and buttons. · Immediate visual feedback with fast background-color updates.

08

Components

• button Pill-shaped buttons with solid accent color (purple) or outlined styles, often featuring a right-pointing arrow icon.
• card Clean rectangular cards featuring a mix of full-bleed images or graphics paired with serif headlines and sans-serif metadata.
• chip Small, pill-shaped tags with a solid purple background and white text for categorizing content.
• input Rounded search input integrated into the floating bottom navigation bar.
• hero A prominent header area featuring a bold, centered serif logo with a subtagline, positioned above a horizontal scrolling feed.

09

Voice & Don'ts

• Tone Inspiring, supportive, and deeply knowledgeable about creative processes.
• Headlines Engaging, often conversational or thought-provoking questions and statements in a bold transitional serif.
• CTAs Direct and action-oriented, frequently using a simple arrow icon to indicate forward movement.

• Don't use a dark mode interface — the screenshot shows a predominantly white and light-warm background palette.
• Don't use purely geometric sans-serif fonts for headlines — the screenshot shows a distinct transitional serif for display text.
• Don't hide behind complex, multi-layered drop shadows — the screenshot shows very subtle, soft box-shadows.
• Don't use a grid of identical square cards — the screenshot shows a varied layout with mixed aspect ratios and horizontal feeds.
• Don't use a single monolithic background color — the screenshot shows a multi-tonal approach with white, light gray, and warm peach sections.
• Don't use neon or overly saturated accent colors everywhere — the screenshot restricts high-chroma color to a specific purple accent.
• Avoid: Corporate jargon
• Avoid: Overly formal academic language
• Avoid: Aggressive sales-driven copy

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

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