RIVANT

Link shortener (open source)

Profyl

A rounded P redrawn, and every page of a free link shortener

Services
Logo refinement · Wordmark · Identity system · Icons and illustration · Website design · Product UI design
Year
2023–26

The brief

Take a rounded P and a first design, and finish them: the brand, the website and the whole product.

Profyl makes short links on prf.ink, counts the clicks on each one and is open source, with an API. We redrew its rounded P as two strokes from one round pen, drew a lowercase wordmark with the same pen, and built the system around it: colour, type, icons, illustration and the pieces an open-source product needs. Then we designed the whole product for desktop and phone, from the home page and the docs to sign-in, the dashboard, each link's clicks and settings.

  • Short links on prf.ink

    Paste a long address and get a short one, with or without an account.

  • Clicks for every link

    Each link counts its clicks: when, from which site, from where and on what.

  • Open source, with an API

    The code is public, and all you need is an API key to make links from your own app.

Where it started

A first design, on phones and a landing page

Profyl’s own Figma file had the P, a navy and a blue, Noto Sans, a sign-in card and one landing page. We kept the P, the colours and the line Shorten your URLs with ease, and drew everything else again.

The first landing page: a navy header with the old logo, Shorten your URLs with ease, a link box and a couch illustration of someone on a laptop
The first phone design: the navy header and the couch illustration with prf.ink/github and Clicks: 32
The first sign-in screen: a navy card with an email field marked invalid, and passkey, Google and Discord buttons

The first design, rendered from the Figma file.

The mark

Two links, drawn with one pen

The P is two strokes of the same round pen. The upper one runs out along the top and round the bowl; the lower one comes up the stem and ends inside the bowl, one link hooked through another.

Construction

Redrawn on a grid, with the same idea

Uprights 200 units wide, bars 186, every corner on a 160-unit radius, and the lower stroke ending inside the bowl with the same gaps around it as everywhere else: 110 to the side, 121 above and below.

The P on a grid with its construction: both strokes' centre lines dashed, the 200-unit uprights, 186-unit bars, gaps of 110 and 121, 110 again beside the lower stroke's end, and corner radii of 160 and 330
123
The first P, outlinedThe redraw

  1. 1The corner

    Its outer and inner curves turned on different centres, so the bend ran 20% heavy. Now they share one.

  2. 2Between the bars

    The gap was half a stroke, 100 units. Now it is 121, and the bars are 186 instead of 200.

  3. 3Beside the stem

    The gap was 100 units. Now it is 110, the same as inside the bowl.

  • An even corner

    The lower stroke’s corner was two unrelated curves and ran 20% heavy. It now turns on one centre.

  • Lighter bars

    Horizontal strokes are 7% thinner than the uprights, which is what makes them look the same.

  • Open gaps

    Half a stroke became 110 units between uprights and 121 between bars, so the links stay apart when small.

  • A small cut

    Below 32 px a version with wider gaps takes over, for favicons and tabs.

Wordmark and lockups

The P leads a lowercase name in the same pen

The first logo set rofyl in Noto Sans Black beside a P twice its weight. Now every letter is drawn with the mark’s pen, at the mark’s weight, with its corners, and the P reads as the first letter of profyl.

The Profyl wordmark: the P in Link blue leading the lowercase letters rofyl in navy, all drawn with the same round pen
The horizontal wordmark, the stacked lockup and the mark alone, each inside a hatched clear-space border twice the stroke of its P, with their smallest sizes below
Six colour versions of the wordmark: primary blue and navy, navy alone, 100% black, reversed on navy, white on Link blue and white on night

Lockups with their clear space, 2X on every side where X is the stroke of the lockup’s P, and their smallest sizes. The stacked lockup sets the mark over the whole name, the way an icon sits over its label, so the P shows twice, in one colour. Then the colour versions: primary, one colour, black, reversed, on blue and on the dark theme.

The system

Navy, one blue and paper, and the pen everywhere

  • Navy#1C315EHeadings, buttons, the footer
  • Link blue#4084C5The mark, charts, focus
  • Paper#F6F8FCThe page, with its dot grid
  • Sky#8CBCEBThe mark on navy
  • Ink#16233FBody text
  • Slate#56657FSecondary text
  • Link text#2B68A8Links in text
  • Night#0E1830The dark theme

Link blue is kept for the mark and for things that aren’t text. Links in running text use the deeper Link text blue, 5.4 to 1 on paper.

Outfit

Headings, text, buttons

prf.ink/github

JetBrains Mono, for short links, keys and code

  • Display68 / 42Shorten your URLs
  • Heading38 / 29Analytics made easy
  • Body16 / 16Each link has its own page with a chart of its clicks.

Icons from the same pen

Forty-three of them, on a 24-unit grid with a 1.8 round stroke: the product’s own things, links, clicks, keys, passkeys and branches, drawn the way the mark is.

  • link
  • copy
  • check
  • chart
  • click
  • key
  • code
  • globe
  • user
  • sliders
  • trash
  • edit
  • external
  • plus
  • search
  • passkey
  • logout
  • menu
  • close
  • branch
  • sun
  • moon
  • clock
  • arrow
  • phone
  • laptop
  • mail
  • eye
  • alert
  • info
  • home
  • profile
  • dots
  • book
  • shield
  • lock
  • refresh
  • heart
  • download
  • chevron
  • chevdown
  • filter
  • calendar

Spot drawings

Thick navy lines, flat fills from the palette and three short sparks where something happens. They fill empty states, errors and feature cards, like the broken link on the missing-link page.

  • Two chain links, navy and blue, one through the other
  • A chart card with four blue bars and a cursor clicking beside it
  • A key with a round blue bow and two teeth, lying under a card of code brackets
  • Two branches of code joining, with a plus beside them
  • A phone showing a profile page: a round picture over three links
  • A broken chain link, its two halves apart with short sparks between them

Applications

Where an open-source tool shows up

A home-screen icon, a tab, an avatar on GitHub and Discord, the card a shared profile page unfolds into, and a sheet of stickers.

The Profyl app icon: the P on navy, its upper stroke white and its lower stroke sky blue

On navy, two tones

On navy the mark on its own splits into its strokes, white above and sky below, so the two links show even at the size of a fingertip: on the icon, the avatar and the round sticker. Inside the name and the lockups, on light grounds and in the small cut, it stays one colour. The favicon uses the small cut.

The app icon large and at four sizes, a one-colour light version, the favicon in a browser tab, and the icon on a light and a dark home screen
A link preview for profile pages, a repository preview, avatars and an announcement post for custom short links
Seven die-cut stickers: the P in a navy circle, the wordmark on a navy pill, the P cut to shape, prf.ink/you, two links, open source and 32 clicks
The stickers, laid out for printing.

The website

A shortener you can use before you sign up

The home page is the product: paste a link, get a short one, see its clicks. Then how it works, the analytics, the features, and the open-source story with the API beside it.

The home page on desktop: Shorten your URLs with ease with a link box and recent links, how it works in three steps, analytics on navy, six features, the open-source story beside a code sample, and a sign-up band
  • The home page on a phone, its sections stacked and the link box full width

    Home

  • The dashboard on a phone: stat cards two by two, the chart and the links as a list, with tabs at the foot

    Links

  • The page for one link on a phone, its cards stacked

    One link’s clicks

  • The profile page on a phone

    Profile page

Every page it needs

Designed at 1440 and 390 pixels wide from one set of parts: buttons, fields, cards, the link chip and the chart.

The website

  • Home, with the shortener on it
  • Features
  • Open source
  • Docs: getting started and the API
  • Sign in and sign up, each with its error
  • A page for short links that don’t exist
  • The phone menu

The app

  • Links: the dashboard
  • One link’s clicks
  • New link
  • Settings: profile, sign-in, keys, appearance
  • A public profile page
  • The dashboard in the dark theme
The features page: Short links you can count, change and share, over the first feature, shortening without signing up
Features: each one with the screen it lives on.
The open source page: Every part of Profyl is public, with buttons to read the code and the docs
Open source: what happens to a click, what’s in the repository, and how to help.
The docs: a sidebar of guides and endpoints, and Your first link from the API with its first step, making a key
Docs: from a new key to a first link in three steps, then every endpoint.
The missing-link page: a broken chain link over prf.ink/summer-sale and This short link doesn’t go anywhere
A short link that doesn’t exist gets the broken link, and a way on.

Sign in without a password

A passkey first, then Google and Discord, as the first design had it. Errors say what to do next, under the field they belong to.

Sign in with an error under the email field: Enter a full email address, like name@example.com
An email that isn’t one.
Create your account with a red notice: an account already uses this email, with a link to sign in instead
An email that already has an account.
The top of Profyl's home page

The app

Analytics made easy, one link at a time

The dashboard lists every link with its clicks and a week’s sparkline. Each link opens onto its own page: clicks by day, where they came from, and what they were opened on. The numbers here are samples.

The links dashboard: four stat cards, a bar chart of clicks per day and a table of eight short links with their clicks and a sparkline each
The page for prf.ink/github: clicks, the last 24 hours, countries and the busiest day, a chart of clicks per day, and referrers, countries, devices and browsers
The same dashboard in the dark theme, night navy with sky blue for the selected day

One link’s page, and the dashboard in the dark theme.

The New link dialog over the dashboard: destination, prf.ink/launch-notes marked free, a title and a switch to show it on the profile page
New link: the words after the slash are checked as you type.
Settings: profile, sign-in, API keys, appearance and delete account, with the profile form open
Settings: profile, passkeys and accounts, API keys, light or dark.
Profyl's own profile page at prf.ink/@profyl: the P, a line about the project and five links
A profile page, at prf.ink/@name. In beta.
  • New link on a phone, as a sheet rising from the foot of the screen

    New link, as a sheet

  • Sign in on a phone, with the email error

    Sign in, with an error

  • The phone menu: Features, Open source, Docs and GitHub in large type on navy, with sign up and sign in at the foot

    The menu

Profyl's profile page on a phone screen

Credits

Client
Profyl
Industry
Link shortener (open source)
Year
2023–26
Services
  • Logo refinement
  • Wordmark
  • Identity system
  • Icons and illustration
  • Website design
  • Product UI design
What we made
  • The P redrawn, with a small cut for favicons
  • A lowercase wordmark in the same pen, with horizontal and stacked lockups
  • Colour, type, 43 icons and six spot illustrations
  • App icon, favicon, avatar, link and repository previews, a post and stickers
  • Website: home, features, open source, docs, sign-in and sign-up with their errors, a missing-link page
  • App: links, each link’s clicks, new link, settings, a profile page and a dark theme, for desktop and phone
Notes
Profyl is free and open source, and the brief, the P and the first screens came from its own Figma file. The numbers in the screens are samples, not Profyl’s traffic. Custom short links and profile pages are in beta. Where the screens describe how Profyl works, from the API reference and the settings to what each click records, how the code is laid out and how to run your own copy, that is our design of how it could work, to check against the code before it ships.