# Fluidtouch Biz · Design system migration spec

> Source: https://www.fluidtouch.biz  ·  Curated by OpenDesign  ·  en

> This site is a great example of a clean, modern dark-themed UI for a software product portfolio, balancing bold typography with a restrained color palette.

## 1. Identity DNA

The design system for Fluidtouch Biz is conceived as a sleek, modern app studio focused on digital transformation. Like a meticulously engineered instrument, every component serves a clear purpose within the dark, focused environment of a productivity tool. The result is an interface that feels both contemporary and timeless, built for clarity and efficiency.

**One-liner:** A modern software studio creating premium paperless productivity apps.
**Keywords:** productivity · note-taking · paperless · journaling · modern
**Analogy:** A sleek, modern app studio focused on digital transformation.

## 2. Color

The color system is rooted in a dark mode palette, using deep grays and blacks to create a focused canvas. A single vibrant magenta accent is reserved for primary actions, creating a clear and immediate visual hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#121318` | main background |
| `--bg-soft` | `#191c26` | card background |
| `--bg-quiet` | `#212529` | quiet area |
| `--ink` | `#ffffff` | body text |
| `--ink-soft` | `#a9afc3` | secondary text |
| `--muted` | `#a9afc3` | placeholder |
| `--muted-soft` | `#a9afc3` | weak hint |
| `--accent` | `#f31765` | single accent |
| `--line` | `rgba(33, 37, 41, 1.0)` | divider |

**Color principle:** Dark mode with a vibrant pink accent for primary actions and highlights.

This restrained approach ensures the interface remains functional and professional, with color serving as a tool for guidance rather than decoration.

## 3. Typography

Typography employs a clean geometric sans-serif to establish a modern, approachable voice for the product. Bold headlines with tight tracking convey confidence, while the consistent scale ensures clear content hierarchy.

- **Display:** geometric-sans
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.1 | 700 | -1px | Hero headline |
| heading | 48px | 1.2 | 700 | 0 | Section headers |
| subhead | 22px | 1.2 | 400 | 0 | Hero subtitle |
| body | 16px | 1.6 | 400 | 0 | Default body text |

**Type rules:**
- Use geometric sans for all primary and secondary text.
- Headlines are bold (700) with tight tracking.

## 4. Spacing

A standard 4px grid provides the underlying rhythm, ensuring consistent and predictable spacing throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px grid based spacing.

## 5. Surfaces

Surfaces are defined by minimal borders and subtle, consistent shadows that create a soft sense of depth. This restrained treatment keeps the visual focus on content rather than container.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 4px 16px rgba(0,0,0,0.1)
- **Borders:** 1px solid rgba(255,255,255,0.1)

## 6. Layout

The layout skeleton is anchored by full-width hero sections, designed for centered, large-scale typography. This transitions into a balanced, three-column product grid, establishing a clean and spacious information architecture.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is applied with purpose, primarily to smooth transitions and fade-in animations. All properties transition smoothly over 0.4 seconds, creating a fluid and cohesive experience without distracting from the core tasks.

- **Durations:** micro 150ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth transitions on hover for interactive elements.
  - Fade-in animations for content sections.

- **Hover:** Color shifts and underline reveals on text links.
- **Click:** Subtle scale or color change feedback.
- **Transition:** All properties transition smoothly over 0.4s.
- **Keyboard:** Standard focus outlines for accessibility.

## 8. Voice & Don'ts

The voice is modern, professional, and encouraging, with direct, action-oriented headlines. It avoids jargon, excessive punctuation, and passive constructions to maintain a clear and inviting tone.

- **Tone:** Modern, professional, and encouraging.
- **Headline style:** Direct, action-oriented, and bold.
- **CTA style:** Clear and inviting calls to action like 'Discover More'.
- **Avoid:** Jargon / Excessive exclamation marks / Passive voice

### Don'ts
- ❌ 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.

The system deliberately avoids light backgrounds, serif fonts, and complex textures, adhering to a strict dark-theme philosophy for focus and consistency.

## System Prompt (paste into AI tool)

```
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.
```