Skip to content
Oluwashola

Case study · Live · 2025

Styleon

Text styling for LinkedIn that survives the paste

Role

  • Product Scoping
  • UX Design
  • Frontend Engineering

Built with

  • Next.js 16
  • React 19
  • TypeScript 5
  • Tailwind CSS 4
  • NextUI 2
  • Framer Motion 12
  • Gemini (@google/genai)
  • Unicode engineering

Links

Styleon text styling interface
Styleon · styling that survives the paste

In a crowded feed, formatting is survival. But LinkedIn's composer gives you none, so a long post lands as a wall of plain text. Styleon fixes that by moving the styling into the characters themselves.

0
dependencies in the styling engine
Live
shipped and online
Unicode
mapped by hand, no webfonts

01

Context

Creators use bold, italic, and script to give a long post structure, because a wall of plain text loses the reader by the second line. LinkedIn simply doesn't offer it, and the tools that fill the gap are clunky, ad-heavy, and prone to breaking your text mid-workflow.

02

How It Works

Styleon converts your text into Unicode characters that already look bold, italic, or script. Nothing is applied on top of the text; the styling is the characters.

That single decision is why it works everywhere. Because there is no rich-text formatting to strip, the styling survives a copy and paste into any post, comment, headline, or About section.

03

Engineering

The core styling engine has no dependencies at all. A single module maps ASCII to Unicode blocks by hand: Mathematical Sans-Serif, Mathematical Bold, Script, Fraktur, Monospace, and others.

No webfonts are loaded and no network call is made to style text. Styling happens locally, character by character, which is what keeps it instant and what stops the encoding bugs that break the other tools.

04

Scoping: Knowing What Not to Build

Styleon does not write your posts. It formats the post you already wrote. That line is the whole product boundary, and I hold it.

There is an optional AI Enhance, running server-side on Gemini, that helps polish text you have already written. It assists your words; it never replaces them. Every other request got weighed against the one job: style text instantly, without breaking anything.

05

Design & Frontend

The loop is paste, style, copy, post. You see the styles laid out visually and pick what looks right instead of reading a dropdown, because friction anywhere in that loop kills the reason the product exists.

Built on Next.js with the App Router and React 19, styled with a CSS-first Tailwind setup where the design tokens live in the stylesheet. Motion is handled with Framer Motion and honours reduced-motion throughout, and the component library is used sparingly rather than leaned on.

06

Where It Stands

Live and focused. The roadmap is guarded by the same discipline that shaped version one: speed and reliability before new surface area.

07

Lessons

A product that does one thing exceptionally well beats a product that does five things adequately. Moving the styling into the characters was the choice that made everything else simple, and a tight scope is what keeps it fast.