Ink to Parchment

Ahoy. Before I tell you a single thing about buttons or borders, let me let you in on the joke hiding in the title.

Ink to Parchment isn't a metaphor. Those are the literal names of two colors in our palette. Parchment is the page you're reading on right now. Ink is the words. These colors are core to the soft literary touch that Noveletta brings to the internet.

How do you design a digital brand that smells and feels like a paperback? I could never replicate the smell of a library on a computer but here are the choices I made to get close! Why nothing here is truly white or truly black. Why the accent is antique gold and not bright orange. And why, when you're helping your mom keep track of a thousand characters, the last thing you want the screen to feel like is a screen.

Here's a thing you already know but never think about: a real book is not white. Hold a paperback under a lamp and the page is warm; it's a faint cream, a little yellow, the color of something that has been sitting in the world and the older the better. Text isn't black either. Ink soaks into fiber and dries to a soft, warm near-black.

Pure #FFFFFF white and pure #000000 black are a screen's factory settings, not a reader's. They're high-contrast, a little clinical, hurt your eyes, and they make long reading feel like work. So we nudged both toward the colors of a real book.

Drag the slider and watch the warmth drain out:

Once you commit to paper, you can't have a single cool grey sneak in; one blue-grey hairline next to warm parchment feels icky, buggy, and doesn't belong. So the entire neutral ramp, from the faintest border to the darkest text, is tuned to the same warm family.

Tap a swatch to see where it lives in the product and what it does:

On a warm paper surface, a non-neutral color has enormous power precisely even if there's so little of it. So we gave exactly one hue permission to mean "you can do something here": a soft heather purple, #6B5B95. Links, the primary button, active navigation, the dots on a timeline, the focus ring — all heather. 

Why Purple: heather purple felt calm, intelligent, approachable, human, purposeful. Blending a true royal purple with my favorite color, lavender. This feeling felt aligned for the intentional, artisanal, literary feel of Noveletta.

With this color playing a primary role but tastefully applied sparingly, it doesn't overpower the screen of experience while delicately drawing attention and interaction. To me, it's perfect!

There's a second color, antique gold #D4A853. Gold is the illuminated capital in a manuscript, the gilt edge of a page. It brings refinement to devilish details.  It lives on curated borders, on that thin gradient divider above the byline, and on exactly one interactive element in the whole product: the favor lightning icon bringing the regality of Olympus to your choices.

When you love a line, you strike it with favor and the bolt fills with gold — a little spark of delight, reserved for the moment a sentence earns it.

Why Gold: Antique gold carries timeless heritage of ornate libraries, priceless adorned manuscripts, and untouched craftsmanship of a bygone gilded era. This feeling brings the enduring spirit of literature to Noveletta.

Try showing your favor by clicking below:

Now besides the core colors the richness of the works Noveletta honors need a connected color system that makes navigating, skimming and understanding the worlds we immerse ourselves in easier to follow.

Noveletta breaks out characters, locations, groups, magic, creatures, and more. Each type for each book wears its own color, but they all had to belong to the same warm world. So every entity color follows one recipe: a 15% tint as the fill, a 30% tint as the border, and the full-strength hue for the label. Same badge, ten meanings.

Pick a type and watch the color cue shift to fit that category:

A font choice and hierarchy carries more weight than we realize and choose them drives connection to everything we read. Noveletta's fonts needed to be gentle to read, honor the literature it represents, and hold true to the book-coded brand.

Using Google's Noto fonts we can carry a typographic hierarchy that does just this with a dance between its serif and sans fonts! This split personality creates clarity in the content: Anything that should feel like a book is set in Noto Serif — headings, the wordmark, quotes, the reading prose. Everything functional — block text, nav, labels, buttons, entity names, metadata — is Noto Sans, and it deliberately steps back so the story stays center stage.

Flip the sample switch to feel the difference:

Most dark modes are an inversion: flip white to black and call it done. Ours can't be, because our light mode was never white to begin with. Flip the toggle up top (go on) and the background becomes a warm charcoal, #1E1D1A — never true black, still paper, just paper read by candlelight.

The trickier part is the colored ink. A hue that looks rich on parchment goes dull and muddy on charcoal, so the colors don't get darker — they get lighter and a touch more saturated to hold the same presence relative to the darker surroundings.

Heather is the clearest case, flick the switch below to see:

I built Noveletta for my mom. She's 64, she's obsessed with The Wandering Inn, and she was drowning in a beautiful ocean of characters, places and skills she couldn't quite hold onto. She needs this. A tool for her that shouldn't feel like a spreadsheet or a dashboard. It should feel like the margins of a well-loved book — somewhere calm you want to spend a rainy Sunday afternoon.

That's the whole reason. All of it is on purpose. From Ink to Parchment, it's just two people who love a story, trying to build a quiet place to cherish it. It's a thank you to my mom and to the authors who bring us closer together with the stories we share.