soft

Marketing heroes and sections

Navigation, heroes, showcase sections and conversion blocks for a marketing page, using the placeholder brand "Acme".

Marketing navbar

.sf-mnav (+--overlay) with data-sf-navbar-shrink. Transparent over the hero, shrinks into a floating pill after scrolling, collapses to a menu under 880px. Scroll the preview.

Acme
Log in Get started
Scroll down

The nav follows you

It starts invisible, then settles into a small pill so it never covers your content.

Filler block one for scrolling.

Filler block two for scrolling.

Filler block three for scrolling.

End of the preview.

Mega menu

.sf-mega with data-sf-megamenu. Opens on hover, click, Enter/Space or ArrowDown; arrows move between links, Escape closes. Becomes an accordion on mobile.

Acme
Get started

Hover or focus "Product".

Announcement bar

.sf-announce with data-sf-announce (optional data-sf-interval, data-sf-announce-key to remember dismissal). Rotates, pauses on hover/focus, has previous/next and a dismiss button.

Acme 2.0 is here.See what is new

Join our live walkthrough on [date].Save your seat

Free for small teams, no card needed.Start now

Hero variants

.sf-mhero with --centered, --split, --bigtype, --blob (extends core .sf-hero and .sf-blob), --product, --video, --capture. Parts: __copy, __title, __lede, __actions, __note, __visual.

Centred

New in 2.0

Everything your team needs, in one calm place

Acme brings plans, files and conversations together so work feels lighter from the first day.

Start freeBook a demo

No credit card required.

Split with visual

For growing teams

Plan it, ship it, move on

A simple home for the work that matters, with room to grow as your team does.

Get startedSee how it works

Big type

Make work
feel soft.

Acme is a quiet workspace for teams who would rather make things than manage tools.

Try Acme

Blob (move your pointer)

Hello, Acme

A friendly blob follows your cursor around the page.

Get started

Product frame

Meet the dashboard

See the whole picture at a glance

One clear view of progress, on desktop and on the go.

Start free
app.acme.example
[00]
[00]
[00]

Video frame

Watch it in two minutes

A short tour of how teams use Acme day to day.

With email capture

Early access

Be first in line

Leave your email and we will send an invite as soon as a spot opens.

[000] people are already on the list.

Browser and phone frames

.sf-device--browser and .sf-device--phone with an __screen content slot. Add --tilt for a perspective lean; set --sf-ratio on the browser to change the screen shape.

acme.example/projects
[00]
[00]
[00]

Logo cloud

.sf-logos grid of .sf-logos__item wordmarks (CSS marks), and an infinite .sf-marquee with data-sf-logomarquee="px per second". Pauses on hover and has an optional pause toggle. All names are made up.

Halcyon Brightloop quillwork Tandem Foxglove Kiln
Halcyon Brightloop quillwork Tandem Foxglove Kiln Marrow Pebble & Co Lumen

Feature grid

.sf-features of .sf-feature cards (a or div) with __icon, __title, __text, optional __more. Hover to lift.

Fast by default

Everything responds instantly so you stay in flow.

Learn more

Organised views

Boards, lists and timelines for the same work.

Learn more

Private and safe

Sensible permissions without a manual.

Learn more

Built for teams

Share, comment and hand off without friction.

Learn more

Clear insight

Simple charts that answer real questions.

Learn more

Works anywhere

Desktop, tablet and phone, always in sync.

Learn more

Feature alternating rows

.sf-zig of .sf-zig__row (text and visual swap sides on every second row). Children use data-sf-hreveal="left|right|up|scale" and optional data-sf-hreveal-delay for scroll reveal.

Plan

Turn loose ideas into a clear plan

Drop everything in one place, then shape it into steps your team can follow.

  • Drag to reorder
  • Share with one link
  • Keep a history
[00]
[00]
[00]
Collaborate

Talk where the work happens

Comments live next to the thing they are about, so nothing gets lost.

  • Mentions and replies
  • Quiet notifications
Launch

Ship with confidence

A checklist that follows your work all the way to done.

[00]
[00]
[00]

Bento grid

.sf-bento of .sf-bento__tile with --wide, --tall, --big and --ink. Hover each tile for a small motion.

Insights that explain themselves

Charts built from your work, not from a spreadsheet.

Dark mode

Easy on the eyes.

Response time

[00]ms

Plays well with your tools

Connect the apps you already use.

Conversations in context

Automate with one line

Describe the rule, we handle the rest.

Always in orbit

Everything stays in sync.

Made for small teams

No training, no consultants.

How it works steps

.sf-steps with data-sf-steps (+ --vertical). The connector line fills as you scroll the steps into view; horizontal from 880px.

  1. Create a space

    Name it and invite your team.

  2. Add your work

    Import files or start from a template.

  3. Share progress

    Send a link anyone can follow.

  4. Celebrate

    Mark it done and move on.

Vertical

  1. Sign up

    It takes less than a minute.

  2. Connect your tools

    Bring in what you already use.

  3. Get going

    Your first project is ready.

Stats band

.sf-stats (+--ink) of .sf-stats__item; numbers use data-sf-count with optional data-sf-prefix, data-sf-suffix, data-sf-decimals, data-sf-duration and count up when scrolled into view.

1,200+Teams (sample)
48MTasks completed (sample)
99.9%Uptime target (sample)
<4.5sSetup time (sample)

Sample figures for layout only.

100%Placeholder A
$250Placeholder B
24/7Placeholder C

Roadmap / timeline

.sf-roadmap (vertical) and .sf-roadmap--horizontal. Items carry data-status="done|now|next".

  1. Q1 Shipped

    Foundations

    Workspaces, tasks and sharing.

  2. Q2 In progress

    Automations

    Rules that handle the busywork.

  3. Q3 Planned

    Mobile apps

    Take your work anywhere.

Horizontal (--fit)

Jan

Private beta

First teams invited.

Now

Public launch

Open to everyone.

Next

Integrations

Connect your stack.

Later

Reporting

Answers, not dashboards.

Comparison table

.sf-compare with __scroll wrapper; header and first column are sticky. Mark your column with .is-us. Icons: __icon--yes, --no, --part. Set --sf-marketing-heroes-compare-h to cap the height.

Acme compared with other options
FeatureAcmeRecommendedOthersTypicalDIYSpreadsheets
Basics
Unlimited projectsYesPartialYes
Real-time collaborationYesYesNo
Setup in minutesYesNoPartial
Advanced
AutomationsYesPartialNo
Granular permissionsYesYesNo
Priority supportYesNoNo
Data exportYesPartialYes

Integrations grid

.sf-integrations of .sf-integration tiles with a __logo and a role="tooltip" __tip shown on hover and keyboard focus (Escape hides it). Tile colours come from --_c.

Changelog list

.sf-changelog of .sf-changelog__entry with __version, __date, __title, __tags (__tag--new|improved|fixed|breaking) and a __list.

  1. v2.1.0

    Faster boards

    Boards open quicker and handle large projects with ease.

    • New
    • Improved
    • Added keyboard shortcuts for moving cards.
    • Reduced load time on large boards.
  2. v2.0.3

    Polish and fixes

    • Fixed
    • Fixed a flicker when switching themes.
    • Comments now keep their scroll position.
  3. v2.0.0

    Acme 2.0

    A redesigned interface and a new data model.

    • New
    • Breaking
    • New home screen and navigation.
    • Legacy exports are replaced by the new format.

Footer variants

.sf-mfooter --simple, default multi-column with newsletter, and --wordmark with a big hoppable wordmark.

CTA sections

.sf-cta --banner, --boxed, --soft (boxed on a light surface), --split. A button with data-sf-cta-confetti inside .sf-btn--wrap throws confetti.

Give your team some breathing room

Try Acme free for 14 days. No card, no pressure.

Talk to us

Make Monday easier

Join the teams already working a little softer.

Get product news first

One short email when something worth reading ships.

Newsletter / waitlist signup

.sf-signup (--inline or --card) with data-sf-signup. Validates the email, shows a busy state and then an animated success state. Listen for the cancelable "soft:signup" event to use your own backend, then call Soft.signupDone(root).

Social proof strip

.sf-proof with __avatars, __rating and __quote; --card and --stacked variants. Ratings and counts are placeholders.

[0.0] from [000] teams
"Short, specific praise from a real customer goes here."Name Surname, Role at Company
Loved by [000] teams
"A second quote, shorter this time."Name Surname, Role
"One big line from a customer that sums everything up."Name Surname, Role at Company

Section scaffolding

.sf-container (--narrow, --wide), .sf-section (--tight, --surface, --ink), .sf-eyebrow, .sf-section__head with __title and __lede, .sf-anchor offsets, .sf-grid-2/3/4 and .sf-prose.

Eyebrow label

A heading that sets the scene

A short lede paragraph explains what this section is about in a sentence or two.

One

.sf-grid-4

Two

1, 2 then 4 columns

Three

Responsive

Four

No page scroll

Ink section

Left aligned head on ink

Use --ink for a high contrast band.

Prose styles

Long-form content gets sensible rhythm for free.

Body copy with a link and some inline code. Lists and quotes are styled too.

  • First point
  • Second point
A pull quote reads clearly.Name Surname
npm install acme

Sticky scroll storytelling

.sf-story with data-sf-story. Steps scroll on the left while the sticky visual swaps panels on the right. Scroll the preview.

Capture everything

Drop ideas in as they come. Nothing is too small.

Talk it through

Comment next to the work, and keep decisions together.

Switch it on

Turn plans into action with a single toggle.

[00]

Gallery / showcase strip

.sf-showcase with data-sf-showcase: drag with a mouse, swipe on touch, use the arrow buttons, or focus the strip and use the arrow keys.

Project oneCase study Project twoCase study Project threeCase study Project fourCase study Project fiveCase study Project sixCase study
← DataConversion →