All parts of a web app

  • Variation 01

    HandHold

    Screenshot of forms handholdhandhold.io

    When to use

    Anatomy

      How the industry does it

      1 examples · credited

      Prompt

      Polish & tuning

      2 of 4 unlocked

      Motion

      Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.

      Spacing

      Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.

      Pro

      Unlock the rest of the tuning notes.

      Buy Pro
    • Variation 02

      Mission Control

      Screenshot of forms mission controlmissioncontrol.co

      When to use

      Anatomy

        How the industry does it

        1 examples · credited

        Prompt

        Polish & tuning

        2 of 4 unlocked

        Motion

        Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.

        Spacing

        Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.

        Pro

        Unlock the rest of the tuning notes.

        Buy Pro
      • Variation 03

        Atopile

        Screenshot of forms atopileatopile.io

        When to use

        Anatomy

          How the industry does it

          1 examples · credited

          Prompt

          Polish & tuning

          2 of 4 unlocked

          Motion

          Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.

          Spacing

          Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.

          Pro

          Unlock the rest of the tuning notes.

          Buy Pro
        • Variation 04

          Diffuse Bio

          Screenshot of forms diffuse biodiffuse.bio

          When to use

          Anatomy

            How the industry does it

            1 examples · credited

            Prompt

            Polish & tuning

            2 of 4 unlocked

            Motion

            Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.

            Spacing

            Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.

            Pro

            Unlock the rest of the tuning notes.

            Buy Pro
          • Variation 05

            Nowadays

            Screenshot of forms nowadaysnowadays.ai

            When to use

            Anatomy

              How the industry does it

              1 examples · credited

              Prompt

              Polish & tuning

              2 of 4 unlocked

              Motion

              Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.

              Spacing

              Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.

              Pro

              Unlock the rest of the tuning notes.

              Buy Pro
            • Variation 06

              Antimetal

              Screenshot of forms antimetalantimetal.com

              When to use

              Anatomy

                How the industry does it

                1 examples · credited

                Prompt

                Polish & tuning

                2 of 4 unlocked

                Motion

                Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.

                Spacing

                Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.

                Pro

                Unlock the rest of the tuning notes.

                Buy Pro
              • Variation 07

                Measured

                Screenshot of forms measuredmeasured.site

                When to use

                Anatomy

                  How the industry does it

                  1 examples · credited

                  Prompt

                  Polish & tuning

                  2 of 4 unlocked

                  Motion

                  Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.

                  Spacing

                  Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.

                  Pro

                  Unlock the rest of the tuning notes.

                  Buy Pro
                • Variation 08

                  Ponder

                  Screenshot of forms ponderponder.ai

                  When to use

                  Anatomy

                    How the industry does it

                    1 examples · credited

                    Prompt

                    Polish & tuning

                    2 of 4 unlocked

                    Motion

                    Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.

                    Spacing

                    Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.

                    Pro

                    Unlock the rest of the tuning notes.

                    Buy Pro
                  • Variation 09

                    Haven Constructions

                    Screenshot of forms haven constructionshavenconstructions.com.au

                    When to use

                    Anatomy

                      How the industry does it

                      1 examples · credited

                      Prompt

                      Polish & tuning

                      2 of 4 unlocked

                      Motion

                      Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.

                      Spacing

                      Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.

                      Pro

                      Unlock the rest of the tuning notes.

                      Buy Pro
                    • Variation 10

                      WorkBuddy

                      Screenshot of forms workbuddyworkbuddy.ai

                      When to use

                      Anatomy

                        How the industry does it

                        1 examples · credited

                        Prompt

                        Polish & tuning

                        2 of 4 unlocked

                        Motion

                        Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.

                        Spacing

                        Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.

                        Pro

                        Unlock the rest of the tuning notes.

                        Buy Pro
                      • Variation 11

                        Unsiloed

                        Screenshot of forms unsiloedunsiloed.ai

                        When to use

                        Anatomy

                          How the industry does it

                          1 examples · credited

                          Prompt

                          Polish & tuning

                          2 of 4 unlocked

                          Motion

                          Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.

                          Spacing

                          Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.

                          Pro

                          Unlock the rest of the tuning notes.

                          Buy Pro
                        • Variation 12

                          Vanta OS

                          Screenshot of forms vanta osvanta-os.com

                          When to use

                          Anatomy

                            How the industry does it

                            1 examples · credited

                            Prompt

                            Polish & tuning

                            2 of 4 unlocked

                            Motion

                            Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.

                            Spacing

                            Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.

                            Pro

                            Unlock the rest of the tuning notes.

                            Buy Pro
                          • Variation 13

                            Eatnaked

                            Screenshot of forms eatnakedeatnaked.co

                            When to use

                            Anatomy

                              How the industry does it

                              1 examples · credited

                              Prompt

                              Polish & tuning

                              2 of 4 unlocked

                              Motion

                              Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.

                              Spacing

                              Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.

                              Pro

                              Unlock the rest of the tuning notes.

                              Buy Pro