Idyllic / Design system

A shared visual language.

The August Idyllic identity, refined for the new platform. These are the components and materials used by the landing page and app.

Identity

IdyllicIdyllic

The original wordmark and square mark are preserved. Dithered orbs give agents an identity without competing with their names.

Surfaces and light

Shell--idy-shell
Canvas--idy-canvas
Surface--idy-surface
Raised--idy-raised
Hairline--idy-line
Primary text--idy-fg
Secondary text--idy-fg-secondary
Muted text--idy-fg-muted
Selection / focus--idy-cyan
Active state--idy-mint

Neutral charcoal establishes depth. White carries primary actions. Cyan and mint distinguish agent identities and highlight selection, focus, and state.

Type

Plus Jakarta Sans · Display
Create agent systems.
Geist · Interface and prose
Give an agent instructions, then keep working in its DM.
Berkeley Mono · Codeagent.instructions = "Watch for changes"

Actions

Hover or tab through the controls to inspect their states. Primary actions use a quiet white fill; secondary actions retain the surface beneath them.

Input and status

ConnectedIdle

Example error: Give your agent a name to continue.

Composed surfaces

Research desk / Weekly briefIllustrative system
Explore the example
Keep up with what’s changing.A research system, from source to brief.
Source watchlist
Select an agent to inspect its instructions.
Agents, apps, and workflowsYou direct the system

Select an agent or switch views to inspect the same components used on the landing page.