CURATED · OPEN · FREE

Balsa

A documentation and project tracking tool for building software.

ProductivityCollaborationCleanProductSaaS

↓ Download design system (4 MB)Open in OpenDesign

Visit: https://www.balsa.com

📦 Browse pack contents →

Identity DNA

docsworkflowroadmapteamsoftware

A clean, focused workspace for aligning product teams on goals and tasks.

Color

#FFB700Accent

#000000Ink

#FFFFFFBG

#F7F7F7BG quiet

#939393Muted

rgba(0,0,0,0.09)Line

High-contrast black and white with a single, high-chroma yellow accent for highlighting key UI cards and callouts.

Typography

grotesque-sans · humanist-sans · monospace

display48px · 700
heading24px · 700
body16px · 400
caption12px · 400

Use uppercase for UI labels and status indicators. · Main headlines use heavy weights and tight letter-spacing.

Spacing

4px

8px

12px

16px

24px

32px

48px

60px

96px

Consistent 4px grid base with generous whitespace in the hero section.

Surfaces

sm · 6px

md · 8px

lg · 12px

pill · 999px

Thin, low-opacity black borders (rgba(0,0,0,0.09)) for subtle separation.

rgba(0,0,0,0.05) 0px 1px 0px 0px · rgba(0,0,0,0.15) 0px 0.7px 0.7px -0.625px, rgba(0,0,0,0.145) 0px 1.8px 1.8px -1.25px, rgba(0,0,0,0.05) 0px 30px 30px -3.75px

Layout

1200container

12columns

24pxgutter

768 / 1024breakpoints

Single-column centered layout for the marketing site, with a complex multi-column grid for the product UI screenshots.

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth transitions on hover and focus states.

Subtle color changes or shadow shifts on interactive elements. · Immediate visual feedback via state changes.

Components

button Solid black pill-shaped buttons for primary actions, and bordered pill-shaped buttons for secondary actions.
card White cards with soft shadows (e.g., the main product UI screenshot) and yellow accent cards for highlighting features.
chip Status indicators with rounded corners and background colors.
input Clean, bordered input fields with subtle shadows.
hero Centered text-heavy hero with a large headline, subtext, and a prominent product UI screenshot below.

Voice & Don'ts

Tone Direct, professional, and focused on team efficiency.
Headlines All-caps, bold, and high-contrast.
CTAs Clear, action-oriented, and often contained in pill-shaped buttons.

Don't use a busy background — screenshot shows a clean, solid white (#FFFFFF) background.
Don't use a low-contrast accent color — screenshot shows a high-chroma yellow (#FFB700) for emphasis.
Don't use a light or grey primary text color — screenshot shows pure black (#000000) for main headlines.
Don't use sharp, square corners — screenshot shows rounded corners (12px) on primary cards and containers.
Don't use a dark mode interface — screenshot shows a predominantly white/light theme.
Don't use decorative, script, or overly stylized fonts — screenshot shows clean, functional sans-serif and monospace categories.
Avoid: Casual language
Avoid: Complex jargon
Avoid: Overly dense text blocks

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

This is a clean, professional SaaS landing page for a project documentation tool. It features a stark black-and-white palette with a single, high-chroma yellow (#FFB700) accent used for highlighting feature cards. The typography uses bold, grotesque-sans categories for headlines and humanist-sans for body text. Critical constraints: maintain high contrast, avoid dark mode, use solid white backgrounds, and keep UI elements rounded. The layout is centered and spacious, focusing on product screenshots.

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