
Ruul
ruul.io/
Ruul lets freelancers and independent contractors invoice clients internationally, get paid in any of 140 currencies, and handle tax documentation without having to register their own company. The hero line "Start in minutes. Get paid tomorrow" is followed by a three-step visual flow — Invoice, Get Paid, Stay Organized & Tax Ready — rather than a features grid. Trust signals lean on precise usage numbers ("Over $1 billion processed," "240,000 contractors worldwide," a "96.4% satisfaction rate") alongside a logo row naming the UN, McKinsey, Toyota, and MIT as client organizations, and the phrase "No company? No problem" repeats to directly address the site's core objection.
- Category
- Finance & Commerce
- Style
- LightMinimal
- Stack
- Tailwind CSS
- Fonts
- Hedvig Letters SerifHedvig Letters Sans
- Palette
- Meta title
- Ruul | Contract Work, Simplified
- Sections
- 9
- Updated
Ruul's landing page, section by section
Each section below is cropped straight from Ruul's live page — useful references for finance & commerce landing page design.
Heroes
More heroesFAQs
More faqsLogo clouds
More logo cloudsAbout Us
More about usContact Us
More contact usPricing & Plans
More pricing & plansAffiliate pages
More affiliate pagesBlog pages
More blog pagesRuul design review: how the homepage is built
The homepage for Ruul, which switches between "For Freelancers" and "For Businesses", is about 11,077 pixels tall on desktop and sits on an off-white field. The palette is restrained: #182a23 for the dark hero panel and footer, #d3f969 for the lime "Celebrating the $1 billion milestone" pill and the "Real human support" card, and #fbfcf9 as the page ground. Headlines use the Hedvig Letters Serif display face. The brand name matches the catalogue entry. Its distinctive device is a two-tone headline: a dark serif first line over a grey second line.
Above the fold
The first screen is a light field with the wordmark "Ruul" and a top bar holding "Platform", "Pricing" and "Resources", then "Sign in" at the right. A pill toggles "For Freelancers" and "For Businesses". Below the headline, "Get Started" in solid dark and "Sign in with Google" in white. Beneath, a large dark-green panel shows a photo card reading "Payment method" beside an invoice card with "Total amount due" and "$5,720".
Invoicing steps and country panel
A numbered section opens under the heading "Invoice, get paid, and stay tax ready, anywhere you work in the world." Three rows follow, each with a sub-heading and a grid-paper mockup: "Invoice your client", "Get paid & withdraw" and "Stay organized & tax ready". Each row pairs "Learn more" with "Sign in with Google". Below, a bordered panel reads "Supported in 190 countries" above a row of flags.
Feature grid and payouts
Lower, "Works with the wallets and bank accounts you already use." precedes a logo strip, then a feature grid: "Supported in 190 countries" on dark green, "Real human support" on lime, "No company? No problem." as an outlined card, and "Fast payouts in one business day". Section 03 opens with "Get faster payouts, more control, and less chasing with exclusive features." Two panels, "Subscriptions" and "Early Pay", sit above a full-width "Crypto Payout" card on lime.
Closing section and footer
The testimonial and metrics sit on a white card: a quote from "Luciano Landaeta", an architect, followed by three stat rows, "Over $1billion processed in total transactions.", "Trusted by 240,000 contractors worldwide." and "96.4% of users report being satisfied with Ruul.". A "Frequently asked questions" block with three questions comes next, then a dark closing band reading "Start in minutes. Get paid tomorrow." over "No setup cost. No monthly fees." and a footer.
On mobile
At 390px the 11,448-pixel page keeps the same order but stacks each row. The headline breaks across four lines, and the "Get Started" and "Sign in with Google" buttons sit side by side below it, with a menu icon replacing the top links. The three numbered rows become single columns with mockups beneath. The feature cards stack vertically, and the footer groups run down one dark column.
Worth borrowing
- A dark serif line over a grey line splits the claim from the list of services it supports.
- A numbered three-row sequence gives each step its own grid-paper mockup.
- Three stat rows, each a short sentence paired with a large number, give the proof points without a photo.





