CURATED · OPEN · FREE

Informed

An AI content pilot that automates content production for editorial, PR, and marketing teams.

AISaaSProductivityEditorialClean

↓ Download design system (2 MB)Open in OpenDesign

Visit: https://www.informed.so

📦 Browse pack contents →

Identity DNA

content automationeditorialPRmarketingAI

A friendly yet efficient AI content intern that handles the heavy lifting.

Color

#08C474Accent

#000000Ink

#31343BInk soft

#FFFFFFBG

#F8F8F7BG soft

#7E838FMuted

rgba(0, 0, 0, 0.08)Line

A clean, white-based palette driven by a vibrant, high-chroma green accent for emphasis and action.

Typography

humanist-sans

display69px · 400
display-sm28px · 400
body17px · 400
body-sm20px · 400

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous vertical padding separates distinct content blocks, centered on a single column.

Surfaces

sm · 8px

md · 12px

lg · 43px

pill · 100px

1px solid rgb(0, 0, 0)

0px 8.67px 26px 0px rgba(0, 0, 0, 0.08) · 0px 26px 52px 0px rgba(0, 0, 0, 0.08)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Single-column centered layout with generous whitespace and distinct full-width background sections.

Motion & Interaction

250msmicro

250mssmall

500msmedium

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

Smooth 0.25s transitions for color, background-color, and border-color on interactive elements. · Subtle 0.5s transform transitions for layout shifts.

Subtle background-color or opacity changes with a smooth 0.25s transition. · Immediate visual feedback through standard active states.

Components

button Pill-shaped solid buttons with white text on a vibrant green background, featuring soft drop shadows.
card Rounded containers with subtle shadows, sometimes featuring a prominent 4px solid green border to indicate selection.
chip Pill-shaped tags with solid green backgrounds and white text, used for categorization.
input Simple bordered text fields (implied by standard UI conventions).
hero Large, tightly tracked headline centered over a subheadline and a prominent call-to-action button.

Voice & Don'ts

Tone Professional, encouraging, and straightforward.
Headlines Bold, tightly tracked, lowercase or sentence-case statements focused on value proposition.
CTAs Direct, action-oriented phrases like 'Try it out yourself' or 'Choose a plan'.

Don't use serif typography — the screenshot exclusively employs clean humanist-sans-serif fonts for all text elements.
Don't use a dark mode or dark backgrounds — the screenshot features a predominantly white and light gray background.
Don't use a wide array of colors — the palette is strictly limited to white, black, gray, and a single vibrant green accent.
Don't use sharp, 90-degree corners — the screenshot consistently applies large border-radius values (up to 43px) for a softer look.
Don't use dense, multi-column layouts — the screenshot shows a strictly single-column, vertically stacked, centered layout.
Don't use heavy drop shadows — the screenshot relies on very subtle, light drop-shadows for depth.
Avoid: Overly complex jargon
Avoid: Aggressive sales language
Avoid: Dense paragraphs

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

Design a clean, centered SaaS landing page for an AI content automation tool. The layout should be a single column with generous vertical whitespace. Use a predominantly white background (#FFFFFF) with a secondary light gray (#F8F8F7) for subtle surface differentiation. The primary accent color is a vibrant, high-chroma green (#08C474), used for call-to-action buttons, interactive tags, and selected card borders. Typography should be humanist-sans-serif for both display and body text, with display headlines being very large (69px) and tightly letter-spaced (-4.33px). Body text should be a dark gray (#31343B) or black (#000000), with muted text in a medium gray (#7E838F). Buttons must be pill-shaped with white text on the green background, accompanied by subtle drop-shadows (e.g., 0px 8.67px 26px 0px rgba(0,0,0,0.08)). Avoid dark mode, avoid serif fonts, avoid sharp corners, and avoid using more than one or two primary colors.

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