Soft Utility

Stylemodern

A soft utility style for frequently used mobile tools, balancing efficiency and warmth with calm surfaces, clear state colors, and friendly hierarchy.

utility app mobile app productivity status colors soft hierarchy frequent use

#2d5b63

#f4f8f6

#a9d8cc

#f3c98b

#e6b7b0

#b8c9ed

Preview

A sample page drawn from this style’s tokens — a guide to the look, not the exact output.

New · weekly review

Plan the week in ten minutes

Pull in every task, see what matters, and share one clear plan with the team.

Get startedSee how it worksDocs

Tasks done1,284+12% this week

Emailyou@example.com

Remember meContinue

Today

Review roadmapDone

Ship onboardingIn progress

Team sync3 pm

Prompt

Paste into any AI assistant before describing what to build — or attach it to a project below.

# Visual style: Soft Utility

A soft utility style for frequently used mobile tools, balancing efficiency and warmth with calm surfaces, clear state colors, and friendly hierarchy.




## Rules for the AI
STYLE: Soft Utility

MUST USE:
- Deep teal primary actions with pale surfaces and distinct state colors
- Rounded-xl to rounded-2xl controls that preserve information density
- Mobile-first bottom action bars and thumb-reachable primary actions
- Explicit default, focus, success, error, disabled, and loading states
- Status colors paired with text or icons; never communicate meaning by color alone
- Fast, restrained motion that supports task completion

MUST AVOID:
- Low-contrast text for task-critical information
- Turning a tool screen into a decorative card gallery
- Removing boundaries or state feedback in the name of softness
- Bouncy animations that slow down repeated actions

INTERACTION:
- Use 160-240ms transitions and scale-[0.98] on press
- Keep primary controls in a consistent location across screens
- Provide undo or confirmation for destructive actions

COLOR ROLES:
- Surface: #f4f8f6
- Text: #203b40
- Primary: #2d5b63
- Success/support: #a9d8cc
- Notice: #f3c98b
- Secondary states: #e6b7b0 and #b8c9ed

Use it in an app

Create a free account to attach this style to a project: the hub adds it to the prompt your AI assistant gets, so it builds every page in this look.

Start building — free I already have an account

From StyleKit (MIT, commit 0156849).View source