03 / 06

How it works

Anyone can generate a page. We ship the one that converts.

One board, six steps, real people on every card. Senior designers and developers lead. AI only speeds up the groundwork.

HirelyWebsite refresh / Call0 / 11 shipped

20 minutes on your product, buyer and blockers. You leave with a plan and a price, or an honest “not us.”

Requested0

Scoped0

In progress0

In review0

Shipped0

HIR-01Call

Kickoff call: who hires, one goal

SMDay 0

HIR-01Kickoff

HIR-02Plan

Sitemap: 6 pages

SMDay 0

HIR-02Sitemap

HIR-03Plan

Wireframes: home, 6 sections

LPDay 1

HIR-03Wireframes

HIR-04Design

Hero + nav

LPDay 2

HIR-04Hero + nav

HIR-05Design

Social proof logos

LPDay 3

HIR-05Logo wall

HIR-06Design

Features grid + quote

LPDay 4

HIR-06Features grid

HIR-07Build

Hiring workflow sections

DKDay 5

HIR-07Workflow

HIR-08Build

Customization + setup steps

DKDay 7

HIR-08Setup steps

HIR-09Build

CTA + footer

DKDay 8

HIR-09CTA + footer

HIR-10Launch

SEO + performance pass

DKDay 9

HIR-10SEO + speed

HIR-11Measure

Analytics events: demo_click

SMDay 10

HIR-11Events live

staging.hirely.framer.website

Live
Hero + nav
Social proof logos
Features grid
Hiring workflow
Customization + setup
CTA + footer

No Figma handoff

Designed and built by the same team.

The people who design your site also build it, so nothing gets lost between Figma and code. No separate dev handoff, no waiting, no second invoice. Websites get design and development. Products get front-end code your engineers merge.

tubecut.framer.website Open live ↗
Tubecut hero: Fast. Safe. Simple. you tubecut ter, Download Mac App
tubecut hero · each element and the code that ships it
hero.tsx + hero.cssbuild passed
01// hero.tsx · tubecut02export function Hero() {03  return (04    <Section tone="night" glow="violet">05      <Nav>06        <Logo mark="play" word="tubecut." />07      </Nav>08      <Display className="display">09        Fast. Safe. Simple.10        you <Chip glow>tubecut</Chip> ter11      </Display>12      <Lede className="lede">{cms.hero.lede}</Lede>13      <Button className="cta" icon={<Apple />}14        track="mac_download">Download Mac App</Button>15      <Keycaps keys={["⌘", "C"]} float />16      <FormatStack items={["MP4", "MP3", "WEBM"]} />17      <TrimTimes start="01:26.5" end="05:43.8" />18    </Section>19  );20}2122/* hero.css */23.logo { font: 500 34px/46px system-ui; letter-spacing: -1.28px; }24.display { font: 500 64px/72px system-ui; letter-spacing: -1.28px;25  background: linear-gradient(112deg, #fffc, #fff4d); }26.chip { border-radius: 14px; background: var(--violet-glow); }27.lede { font: 400 16px/24px system-ui; color: rgb(255 255 255 / .7); }28.cta { padding: 10px 26px; border-radius: 10px;29  background: linear-gradient(80deg, #a6a8ff, #8190fe,      #a28af8, #c4bbfb);30  box-shadow: 0 4px 4px #0004, inset 0 1px #fff5; }31.keycap { width: 64px; rotate: -12deg; animation: float 6s infinite; }32.format { width: 88px; rotate: var(--tilt); }33.trim { width: 176px; backdrop-filter: blur(12px); }

Nav

DesignThe mark and wordmark, centred. One Logo component used in the header and the footer.

CodeA Logo component with mark and word props. Type is 34/46, the same scale as the site.

Headline

DesignThree tonal words that get lighter, then the name set in a glowing chip.

CodeOne Display component; the fade is a CSS gradient on the text, not an image.

Name chip

DesignThe product name inside a violet glass chip, the brand moment of the page.

CodeA reusable Chip with a glow prop, used again on the download page.

Subcopy

DesignPlain and direct, 46 characters wide, 70% white so the headline leads.

CodeA Lede component reading its text from the CMS, so marketing edits it.

Primary button

DesignOne action, Apple icon, the violet gradient from the chip.

CodeThe Button component with a tracked event, exact gradient, 10px radius.

Keycaps

Design⌘ + C floating near the headline: copy a link, that is the whole product.

CodeA Keycaps part with a slow CSS float, paused for reduced motion.

Format stack

DesignThe three formats as physical tags, tilted, stacked.

CodeA FormatStack mapped from one array. Add a format, add one string.

Trim times

DesignStart and end cards show the trim feature without a word of copy.

CodeTrimTimes with real timestamps, frosted with backdrop blur.

  • One team, design to code.Design and build happen together. ClearGrid went brief to live in 18 days.
  • No extra cost.No second team rebuilding the design. What you approve is what ships.
  • Your team edits it.Components and CMS your marketers publish with, no developer needed.
  • Products: front-end code.Working components your engineers merge, with the Figma file if you want it.
Next · 04PricingStart with a sprint. Stay on when it works.

Book a call

You build the product. We design everything people see and use.

The site that brings them in, the product that keeps them and the deck that closes the deal, from one senior team.

  • 01

    20 minutes on Zoom or Google Meet, with Sam.

  • 02

    Bring your roadmap. We look at your site, product and next launch.

  • 03

    A straight answer. Which plan fits, or that we're not the right team.

Book a 20-min call Message on Contra
Sam M, BFS founder

Book a fit call

Sam M · Founder, BFS

20 min · Zoom or Google Meet

Demo slots

MonthPick a day

MoTuWeThFr

No time picked yet

Confirm

Calendar not loading? Open the booking page