CURATED · OPEN · FREE

Fluidtouch Biz

A modern software studio creating premium paperless productivity apps.

SaaSProductivityApp UICleanProduct

↓ Download design system (16 MB)Open in OpenDesign

Visit: https://www.fluidtouch.biz

📦 Browse pack contents →

Identity DNA

productivitynote-takingpaperlessjournalingmodern

A sleek, modern app studio focused on digital transformation.

Color

#f31765Accent

#ffffffInk

#a9afc3Ink soft

#121318BG

#191c26BG soft

#212529BG quiet

rgba(33, 37, 41, 1.0)Line

Dark mode with a vibrant pink accent for primary actions and highlights.

Typography

geometric-sans

display64px · 700
heading48px · 700
subhead22px · 400
body16px · 400

Use geometric sans for all primary and secondary text. · Headlines are bold (700) with tight tracking.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Standard 4px grid based spacing.

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid rgba(255,255,255,0.1)

0px 4px 16px rgba(0,0,0,0.1)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Full-width hero sections followed by a 3-column product grid.

Motion & Interaction

150msmicro

400mssmall

800msmedium

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

Smooth transitions on hover for interactive elements. · Fade-in animations for content sections.

Color shifts and underline reveals on text links. · Subtle scale or color change feedback.

Components

button Pill-shaped buttons with vibrant background colors.
card Simple cards with minimal borders and subtle hover transitions.
chip Text links with a bottom border underline on hover.
input Standard form inputs with rounded corners.
hero Full-viewport height section with centered large typography.

Voice & Don'ts

Tone Modern, professional, and encouraging.
Headlines Direct, action-oriented, and bold.
CTAs Clear and inviting calls to action like 'Discover More'.

Don't use a light background — screenshot shows a dark theme.
Don't use serif fonts — screenshot shows geometric sans-serif fonts.
Don't use rounded rectangular buttons — screenshot shows pill-shaped buttons.
Don't use bright neon colors as the primary background — screenshot uses dark grays.
Don't use complex patterns or textures — screenshot uses a clean, solid background with subtle gradients.
Don't use heavy shadows — screenshot uses minimal or no visible shadows.
Avoid: Jargon
Avoid: Excessive exclamation marks
Avoid: Passive voice

Inside the pack — real screenshots

Fluidtouch Biz — 桌面首屏（hero） — 桌面首屏（hero）

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

Captured from the live site · real computed styles

System prompt

This is a dark-themed website for a software studio creating productivity apps. The design uses a deep gray and black color palette (#121318, #191c26) with a vibrant pink accent (#f31765). Typography is a clean, geometric sans-serif (Poppins) with bold, large headlines. Critical don'ts include avoiding light backgrounds, serif fonts, and complex textures. The layout features full-height hero sections and a clean 3-column product grid. Use pill-shaped buttons for a modern feel.

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