Mobile version is in progress.

For the best experience, please view on a laptop.

Atom Suite Landing Page


Atom Suite is Floww’s ecosystem of business tools — designed to work independently, but stronger when connected. What began as a redesign became an exploration of how separate tools can work as one cohesive system.

Floww / Atom Suite

UX · Product · Interaction · Systems

SaaS Ecosystem · Multi-product Experience · Workflow Design










n | Branding

The Starting Point and the Shift

(Design Context):

What existed  ✦  Why it no longer worked  ✦  What needed rethinking

  • How did the website come to be ?


    The Floww website was built for a single-product experience.

    The product lived within the main website.

  • The Website's job today.


    As Floww evolved into Atom Suite, the website had to move beyond a single-product experience — so should Floww and Atom exist as one, or should Atom lead?

Before Moving Forward


Shared assumptions ✦ Open questions

gofloww.com → gofloww.com/atomsuite?


Touchpoint. It helped bring the PM, Marketing, and CEO onto the same page before moving forward.

From Product to Platform: Finding Our Place


What exists ✦ Where we fit

  • Exploring how SaaS products introduce themselves and structure their experience.

    Human, approachable

  • Choosing What gofloww/atomsuite should feel like?

    Zoho


    • Ecosystem-first thinking

    • Helped frame how a suite can feel connected without feeling overwhelming

    Lattice


    • Warm, modern, and distinctly human

    • Showed how friendliness and trust can be a design strength in HR products

    uKnowva HRMS


    • Straightforward, functional, and very feature-focused

    • Reinforced how important clarity is in HR-focused tools

    Google Workspace


    • Minimal, familiar, and globally readable

    • A reminder that simplicity still works

Atom - Energy, depth, motion.


✦ Final Direction

Atom Suite — a product built like a universe. Expanding, connected, alive.

Atom Visual Language

The Atom visual language is designed to feel modern and cohesive, using a dark, high-contrast base with expressive gradients and subtle textures that reinforce depth and brand identity across screens.

Typography

Font

Regular/Medium/Semi Bold

Urbanist/Instrument Serif

Scalable

Highly legible

Versatile

Web / Mobile

Sub Heading:

44 - 48px / 20 - 24px

Sub Heading:

44 - 48px / 20 - 24px

Sub Heading:

44 - 48px / 20 - 24px

Urbanist handles structure. Instrument Serif adds character. Together they create a hierarchy that scans fast and reads clean.

Color

Role: Identity, mood, and visual depth


Hero gradients

Background textures and depth layers

Brand expression tied to the atomic / cosmic theme

Role: Structure, focus, and longevity


Primary page background

Section canvases

Overall visual foundation

Helps maintain consistency

Role: Interaction, and clarity


CTA

Icons, indicators

White text and neutral UI elements

Dark neutrals hold the foundation. Purple–blue tones do the expressive work — gradients, depth layers, brand moments — without taking over.

Accessibility

Contrast ratio: 18.42:1


Text color: #FFFFFF, #DAC8FE

Background color: #141414

Introducing Tess AI:

the intelligence behind

every Atom tool.

Contrast ratio: 18.42:1. Meets WCAG AA and AAA. High visibility on dark surfaces without breaking the visual balance.


Written for small businesses — approachable tone, clear product details, no jargon. Structure lets users orient fast: who we are, what we offer, why it matters. Information-heavy sections are intentional, not accidental.

Surface & Depth

Siddharth Rao, HR Manager

CloudPeak Solutions

(4.9)

Attendance, leaves, and payroll used to overwhelm us. Atom HR gave us complete clarity and reduced manual effort across every department.

Read the success story →

Siddharth Rao, HR Manager

CloudPeak Solutions

(4.9)

Attendance, leaves, and payroll used to overwhelm us. Atom HR gave us complete clarity and reduced manual effort across every department.

Read the success story →

Reviews

Explore the Atom Library ; learn, build, and grow smarter.

Ashmita Dey

5 min Read

The Atom Community: Builders, Thinkers, and Teams Redefining Everyday Work.

Read the blog

News/Blog

Noise, linear gradients, and background blur keep the UI grounded on dark surfaces. Thin strokes create separation without breaking continuity. Gradients fill space and guide attention — used sparingly so they don't compete with content.

Motion and Spacing

Slow star-like drifts, gentle fades, controlled transitions — motion reinforces the Atom identity without pulling focus. Generous vertical spacing gives each section room to breathe while keeping the page connected.

Where Atom Landed

imagery

What felt like progress / Reflectiosn




  • Clarity improved

    Users could quickly understand what Atom Suite is and where to go next.


  • Engagement followed naturally

    People scrolled, explored, and stayed longer — without being pushed.


  • Structure held up

    Navigation felt intuitive, and the system scaled without breaking.


  • Headers did the heavy lifting

    Clear, scannable messaging reduced the need for long explanations.


  • Motion supported focus

    Interactions guided attention without becoming distracting.