Pastel App UI

Stylemodern

A mobile-first pastel interface for community and content apps, using warm cream, lilac, mint, butter yellow, and coral to create a friendly but legible experience.

pastel app mobile-first community soft UI high readability rounded cards quick feedback

#66508f

#fff8f0

#d9c7ff

#cbefdf

#ffe49a

#ffb5a7

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: Pastel App UI

A mobile-first pastel interface for community and content apps, using warm cream, lilac, mint, butter yellow, and coral to create a friendly but legible experience.




## Rules for the AI
STYLE: Pastel App UI

MUST USE:
- Warm cream backgrounds with pastel accents reserved for grouping and state
- Deep plum or charcoal text for readable headings and body copy
- rounded-2xl to rounded-3xl touch surfaces
- Mobile-first single-column flows and a stable bottom navigation
- Visible save, use, rating, and quick-feedback actions near the decision point
- Soft borders and tinted shadows instead of heavy glass panels

MUST AVOID:
- Low-contrast light text on pastel backgrounds
- Full-page neon gradients or excessive glassmorphism
- Tiny touch targets and dense desktop tables on mobile
- Hiding core actions at the bottom of a long detail page

INTERACTION:
- Use 200-300ms transitions, subtle lift on hover, and scale-[0.98] on press
- Respect prefers-reduced-motion
- Keep the primary action reachable by the thumb

COLOR ROLES:
- Background: #fff8f0
- Primary action: #66508f
- Soft surfaces: #d9c7ff and #cbefdf
- Emotional accents: #ffe49a and #ffb5a7
- Text: #332d3d

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