code: AND TONIC - a mini-bio, event, and nav code (fixed 4/2/25)

[10billionghosts]

Hi! I spent weeks staring at label and ticket designs for inspiration. Like you do. And the end result is this: And Tonic, a code inspired by rustic product labels (and mostly repurposed by expensive artisanal gin labels now, it seems lmao).

And Tonic comes in three flavors:

• the mini bio code; which I've pre-styled in both canon game and oc game styles. it is intended to provide a very digestible "at first glance"/first impressions profile for a character.


• the event code; which can be used for simple events, flash reactions, thread starters, whatever idk bro.


• the nav code; suitable for splashes, game ads, or basic nav entries.

You can pick up the pre-styled codes at the very bottom of this post. Be sure to read the HOW TO USE section, too!

UPDATE 4/2/25: fixed an error in the canon character version of the mini biosheet. thank you ramey!!

HOW TO USE:

❣️ This code is mobile compatible! I have not tested this code on InsaneJournal.

❣️ You've got one instance of IMG_URL to update here, depending on the code you use. Be sure to replace that with an appropriate picture URL!

❣️ The ridged/stamp edge effect is done in pure CSS and is achieved through a little bit of mad science (extremely guesstimated math). So, if you attempt to resize this code at all, either in making it wide or taller than it appears by default, it may look wonky. Please keep this in mind if you decide to edit this code.

❣️ That said, you CAN put a fair bit of text into each text area. It'll stretch the code vertically, though.

❣️ You can add as many links as you want in the nav code. They work best in multiples of four. Be sure to copy and paste the link code to maintain styling across links.

❣️ Hex codes are scattered throughout the code, so if you want to customize colors I recommend using the find-replace feature in a text editor to do it. Here are the relevant colors:

• hex code #4e4b44 is base font color and color of all borders.


• hex code #d1ccc8 is the grayish color of the code's background; it's declared multiple times so make sure you change all of them if editing.


• hex code #efedea is the border around the aesthetic image in the header.

❣️ This code comes with a credit by default. Appreciate it if you leave it in!

❣️ I love peeking at what people do with my codes, so feel free to comment if you use! If you're feeling generous, you can also donate to my ko-fi -- it's always greatly appreciated!

THE MINI BIO/FIRST GLANCE CODE

CHARACTER NAME

canon

Final Fantasy XIV

age

37

pronouns

he/they

canon point

post-7.1

about

Dragée oat cake chocolate bar jelly carrot cake chupa chups jelly-o chupa chups sugar plum. Tootsie roll jujubes apple pie gingerbread cake pie caramels soufflé. Powder jujubes tiramisu cotton candy gingerbread liquorice macaroon icing lemon drops.

visual

Donut lemon drops candy caramels cotton candy. Bear claw sweet roll jelly-o topping liquorice candy lollipop pie.

voice

Sweet biscuit bear claw pudding fruitcake cheesecake cupcake danish.

pers.

word . word . word . word . word

player

jay

age

35+

pronouns

they/them

timezone

EST

♥

CANON CHARACTER VERSION
<lj-raw><div style="box-sizing:border-box;width:100%;max-width:400px;min-height:400px;margin:25px auto;padding:12px;display:flex;justify-content:stretch;align-item:stretch;align-content:stretch;-webkit-filter:drop-shadow(1px 2px 2px rgba(0,0,0,0.25));background:radial-gradient(transparent 0px, transparent 4px, #d1ccc8 4px, #d1ccc8);background-size: 5% 5%;background-position: -2.5% -2.5%;line-height:1.2;font-family:'Times New Roman', serif;font-size:13px;color:#4e4b44"> <div style="width:100%;background:#d1ccc8;display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;align-content:start;gap:0;"> <!-- TEXT CONTENTS OF LABEL START --> <!-- header items --> <div style="width:100%;height:90px;margin-bottom:10px;display:grid;grid-template-columns:1fr 1.25fr;gap:10px;"> <div style="box-sizing:border-box;padding-top:10px;line-height:1;font-family:arial, sans serif;text-align:right;font-size: clamp(22px, 3vw, 25px);font-weight:bold;word-wrap:break-word;">CHARACTER NAME</div> <div style="box-sizing:border-box;width:100%;height:100%;border:3px solid #efedea;background:#ccc url('IMG_URL')center;background-size:cover;"></div> </div> <!-- header items end --> <!-- row one: basics --> <div style="width:100%;display:flex;justify-content:start;align-items:start;align-content:start;gap:0;"> <!-- item --> <fieldset style="flex-grow:1;margin:0;padding:3px;border:1px solid #4e4b44;border-left:0;border-right:0;"> <legend style="float:left;height:5px;margin:-5px 0 0 0;padding-top:2px;font-family:arial, sans serif;font-weight:normal;font-size:9px;font-variant:small-caps;">canon</legend> <div style="padding:5px 10px 0 0;text-align:right;">answer</div> </fieldset> <!-- item --> <fieldset style="margin:0;padding:3px;border:1px solid #4e4b44;border-right:0;"> <legend style="float:left;height:5px;margin:-5px 0 0 0;padding-top:2px;font-family:arial, sans serif;font-weight:normal;font-size:9px;font-variant:small-caps;">age</legend> <div style="padding:5px 10px 0 5px;text-align:right;">##</div> </fieldset> <!-- item --> <fieldset style="flex-grow:1;margin:0;padding:3px;border:1px solid #4e4b44;border-right:0;"> <legend style="float:left;height:5px;margin:-5px 0 0 0;padding-top:2px;font-family:arial, sans serif;font-weight:normal;font-size:9px;font-variant:small-caps;">pronouns</legend> <div style="width:100%;padding:5px 10px 0 0;text-align:right;">answer</div> </fieldset> <!-- item --> <fieldset style="flex-grow:1;margin:0;padding:3px;border:1px solid #4e4b44;border-right:0;"> <legend style="float:left;height:5px;margin:-5px 0 0 0;padding-top:2px;font-family:arial, sans serif;font-weight:normal;font-size:9px;font-variant:small-caps;">canon point</legend> <div style="padding:5px 10px 0 0;text-align:right;">answer</div> </fieldset> </div> <!-- row one end --> <!-- row two: about --> <fieldset style="width:100%;margin:0;padding:3px;border:0;border-bottom:1px solid #4e4b44;"> <legend style="float:left;height:5px;margin:-5px 0 0 0;padding-top:2px;font-family:arial, sans serif;font-weight:normal;font-size:9px;font-variant:small-caps;">about</legend> <div style="width:100%;padding:10px 10px 5px 0;text-align:justify;"> </lj-raw>a short about section!<lj-raw> </div> </fieldset> <!-- row two end --> <!-- row three: first impressions --> <div style="width:100%;padding:5px 0;display:grid;grid-template-columns: .5fr 3fr;border-bottom:1px solid #4e4b44;"> <!-- appearance --> <div style="padding:2px 5px;display:flex;justify-content:center;align-items:center;border-right:1px solid #4e4b44;">visual</div> <div style="padding:2px 5px;">brief description of appearance</div> </div> <div style="width:100%;padding:5px 0;display:grid;grid-template-columns: .5fr 3fr;border-bottom:1px solid #4e4b44;"> <!-- voice --> <div style="padding:2px 5px;display:flex;justify-content:center;align-items:center;border-right:1px solid #4e4b44;">voice</div> <div style="padding:2px 5px;">describe your character's voice</div> </div> <div style="width:100%;padding:5px 0;display:grid;grid-template-columns: .5fr 3fr;border-bottom:1px solid #4e4b44;"> <!-- personality --> <div style="padding:2px 5px;display:flex;justify-content:center;align-items:center;border-right:1px solid #4e4b44;">pers.</div> <div style="padding:2px 5px;">word . word . word . word . word</div> </div> <!-- row three end --> <!-- row four: ooc --> <div style="width:100%;display:flex;justify-content:start;align-items:start;align-content:start;gap:0;"> <!-- item --> <fieldset style="flex-grow:1;margin:0;padding:3px;border:0;border-bottom:1px solid #4e4b44;"> <legend style="float:left;height:5px;margin:-5px 0 0 0;padding-top:2px;font-family:arial, sans serif;font-weight:normal;font-size:9px;font-variant:small-caps;">player</legend> <div style="padding:5px 10px 0 0;text-align:right;">name</div> </fieldset> <!-- item --> <fieldset style="margin:0;padding:3px;border:1px solid #4e4b44;border-right:0;border-top:0;"> <legend style="float:left;height:5px;margin:-5px 0 0 0;padding-top:2px;font-family:arial, sans serif;font-weight:normal;font-size:9px;font-variant:small-caps;">age</legend> <div style="padding:5px 10px 0 5px;text-align:right;">##</div> </fieldset> <!-- item --> <fieldset style="flex-grow:1;margin:0;padding:3px;border:1px solid #4e4b44;border-right:0;border-top:0;"> <legend style="float:left;height:5px;margin:-5px 0 0 0;padding-top:2px;font-family:arial, sans serif;font-weight:normal;font-size:9px;font-variant:small-caps;">pronouns</legend> <div style="width:100%;padding:5px 10px 0 0;text-align:right;">xx/xx</div> </fieldset> <!-- item --> <fieldset style="flex-grow:1;margin:0;padding:3px;border:1px solid #4e4b44;border-right:0;border-top:0;"> <legend style="float:left;height:5px;margin:-5px 0 0 0;padding-top:2px;font-family:arial, sans serif;font-weight:normal;font-size:9px;font-variant:small-caps;">timezone</legend> <div style="padding:5px 10px 0 0;text-align:right;">XXX</div> </fieldset> </div> <!-- row four end --> <!-- credit row --> <div style="width:100%;padding:3px 0 0;text-align:right;"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;font-size:9px;color:#726f67;">♥</a></div> <!-- credit end --> <!-- TEXT CONTENTS OF LABEL END--> </div> </div></lj-raw>

ORIGINAL CHARACTER VERSION
<lj-raw><div style="box-sizing:border-box;width:100%;max-width:400px;min-height:400px;margin:25px auto;padding:12px;display:flex;justify-content:stretch;align-item:stretch;align-content:stretch;-webkit-filter:drop-shadow(1px 2px 2px rgba(0,0,0,0.25));background:radial-gradient(transparent 0px, transparent 4px, #d1ccc8 4px, #d1ccc8);background-size: 5% 5%;background-position: -2.5% -2.5%;line-height:1.2;font-family:'Times New Roman', serif;font-size:13px;color:#4e4b44"> <div style="width:100%;background:#d1ccc8;display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;align-content:start;gap:0;"> <!-- TEXT CONTENTS OF LABEL START --> <!-- header items --> <div style="width:100%;height:90px;margin-bottom:10px;display:grid;grid-template-columns:1fr 1.25fr;gap:10px;"> <div style="box-sizing:border-box;padding-top:10px;line-height:1;font-family:arial, sans serif;text-align:right;font-size: clamp(22px, 3vw, 25px);font-weight:bold;word-wrap:break-word;">CHARACTER NAME</div> <div style="box-sizing:border-box;width:100%;height:100%;border:3px solid #efedea;background:#ccc url('IMG_URL')center;background-size:cover;"></div> </div> <!-- header items end --> <!-- row one: basics --> <div style="width:100%;display:flex;justify-content:start;align-items:start;align-content:start;gap:0;"> <!-- item --> <fieldset style="flex-grow:1;margin:0;padding:3px;border:1px solid #4e4b44;border-left:0;border-right:0;"> <legend style="float:left;height:5px;margin:-5px 0 0 0;padding-top:2px;font-family:arial, sans serif;font-weight:normal;font-size:9px;font-variant:small-caps;">alias</legend> <div style="padding:5px 10px 0 0;text-align:right;">answer</div> </fieldset> <!-- item --> <fieldset style="margin:0;padding:3px;border:1px solid #4e4b44;border-right:0;"> <legend style="float:left;height:5px;margin:-5px 0 0 0;padding-top:2px;font-family:arial, sans serif;font-weight:normal;font-size:9px;font-variant:small-caps;">age</legend> <div style="padding:5px 10px 0 5px;text-align:right;">##</div> </fieldset> <!-- item --> <fieldset style="flex-grow:1;margin:0;padding:3px;border:1px solid #4e4b44;border-right:0;"> <legend style="float:left;height:5px;margin:-5px 0 0 0;padding-top:2px;font-family:arial, sans serif;font-weight:normal;font-size:9px;font-variant:small-caps;">pronouns</legend> <div style="width:100%;padding:5px 10px 0 0;text-align:right;">answer</div> </fieldset> <!-- item --> <fieldset style="flex-grow:1;margin:0;padding:3px;border:1px solid #4e4b44;border-right:0;"> <legend style="float:left;height:5px;margin:-5px 0 0 0;padding-top:2px;font-family:arial, sans serif;font-weight:normal;font-size:9px;font-variant:small-caps;">dob</legend> <div style="padding:5px 10px 0 0;text-align:right;">answer</div> </fieldset> </div> <!-- row one end --> <!-- row two: about --> <fieldset style="width:100%;margin:0;padding:3px;border:0;border-bottom:1px solid #4e4b44;"> <legend style="float:left;height:5px;margin:-5px 0 0 0;padding-top:2px;font-family:arial, sans serif;font-weight:normal;font-size:9px;font-variant:small-caps;">about</legend> <div style="width:100%;padding:10px 10px 5px 0;text-align:justify;"> </lj-raw>a short about section!<lj-raw> </div> </fieldset> <!-- row two end --> <!-- row three: first impressions --> <div style="width:100%;padding:5px 0;display:grid;grid-template-columns: .5fr 3fr;border-bottom:1px solid #4e4b44;"> <!-- appearance --> <div style="padding:2px 5px;display:flex;justify-content:center;align-items:center;border-right:1px solid #4e4b44;">visual</div> <div style="padding:2px 5px;">brief description of appearance</div> </div> <div style="width:100%;padding:5px 0;display:grid;grid-template-columns: .5fr 3fr;border-bottom:1px solid #4e4b44;"> <!-- voice --> <div style="padding:2px 5px;display:flex;justify-content:center;align-items:center;border-right:1px solid #4e4b44;">voice</div> <div style="padding:2px 5px;">describe your character's voice</div> </div> <div style="width:100%;padding:5px 0;display:grid;grid-template-columns: .5fr 3fr;border-bottom:1px solid #4e4b44;"> <!-- personality --> <div style="padding:2px 5px;display:flex;justify-content:center;align-items:center;border-right:1px solid #4e4b44;">pers.</div> <div style="padding:2px 5px;">word . word . word . word . word</div> </div> <!-- row three end --> <!-- row four: ooc --> <div style="width:100%;display:flex;justify-content:start;align-items:start;align-content:start;gap:0;"> <!-- item --> <fieldset style="flex-grow:1;margin:0;padding:3px;border:0;border-bottom:1px solid #4e4b44;"> <legend style="float:left;height:5px;margin:-5px 0 0 0;padding-top:2px;font-family:arial, sans serif;font-weight:normal;font-size:9px;font-variant:small-caps;">player</legend> <div style="padding:5px 10px 0 0;text-align:right;">name</div> </fieldset> <!-- item --> <fieldset style="margin:0;padding:3px;border:1px solid #4e4b44;border-right:0;border-top:0;"> <legend style="float:left;height:5px;margin:-5px 0 0 0;padding-top:2px;font-family:arial, sans serif;font-weight:normal;font-size:9px;font-variant:small-caps;">age</legend> <div style="padding:5px 10px 0 5px;text-align:right;">##</div> </fieldset> <!-- item --> <fieldset style="flex-grow:1;margin:0;padding:3px;border:1px solid #4e4b44;border-right:0;border-top:0;"> <legend style="float:left;height:5px;margin:-5px 0 0 0;padding-top:2px;font-family:arial, sans serif;font-weight:normal;font-size:9px;font-variant:small-caps;">pronouns</legend> <div style="width:100%;padding:5px 10px 0 0;text-align:right;">xx/xx</div> </fieldset> <!-- item --> <fieldset style="flex-grow:1;margin:0;padding:3px;border:1px solid #4e4b44;border-right:0;border-top:0;"> <legend style="float:left;height:5px;margin:-5px 0 0 0;padding-top:2px;font-family:arial, sans serif;font-weight:normal;font-size:9px;font-variant:small-caps;">timezone</legend> <div style="padding:5px 10px 0 0;text-align:right;">XXX</div> </fieldset> </div> <!-- row four end --> <!-- credit row --> <div style="width:100%;padding:3px 0 0;text-align:right;"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;font-size:9px;color:#726f67;">♥</a></div> <!-- credit end --> <!-- TEXT CONTENTS OF LABEL END--> </div> </div></lj-raw>

THE EVENT CODE

EVENT TITLE HEADER TEXT

what's up?

Dragée oat cake chocolate bar jelly carrot cake chupa chups jelly-o chupa chups sugar plum. Tootsie roll jujubes apple pie gingerbread cake pie caramels soufflé. Powder jujubes tiramisu cotton candy gingerbread liquorice macaroon icing lemon drops.

Dragée oat cake chocolate bar jelly carrot cake chupa chups jelly-o chupa chups sugar plum. Tootsie roll jujubes apple pie gingerbread cake pie caramels soufflé. Powder jujubes tiramisu cotton candy gingerbread liquorice macaroon icing lemon drops.

♥

<lj-raw><div style="box-sizing:border-box;width:100%;max-width:400px;min-height:200px;margin:25px auto;padding:10px;display:flex;justify-content:stretch;align-item:stretch;align-content:stretch;-webkit-filter:drop-shadow(1px 2px 2px rgba(0,0,0,0.25));background:radial-gradient(transparent 0px, transparent 4px, #d1ccc8 4px, #d1ccc8);background-size: 5% 5%;background-position: -2.5% -2.5%;line-height:1.2;font-family:'Times New Roman', serif;font-size:13px;color:#4e4b44"> <div style="width:100%;background:#d1ccc8;display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;align-content:start;gap:0;"> <!-- TEXT CONTENTS OF LABEL START --> <!-- header items --> <div style="width:100%;height:120px;margin-bottom:10px;display:grid;grid-template-columns:1fr 1.25fr;gap:10px;"> <div style="box-sizing:border-box;padding:5px 0 0;line-height:1;display:flex;justify-content:end;align-items:center;align-content:stretch;font-family:arial, sans serif;text-align:right;font-size: clamp(22px, 3vw, 25px);font-weight:bold;word-wrap:break-word;">EVENT TITLE HEADER TEXT</div> <div style="box-sizing:border-box;width:100%;height:100%;border:3px solid #efedea;background:#ccc url('IMG_URL')center;background-size:cover;"></div> </div> <!-- header items end --> <!-- row two: description --> <div style="width:100%;height:4px;border-top:1px solid #4e4b44;"></div> <fieldset style="width:100%;margin:0;padding:3px;border:0;border-top:1px solid #4e4b44;border-bottom:1px solid #4e4b44;"> <legend style="float:left;height:5px;margin:-5px 0 0 0;padding-top:5px;font-family:arial, sans serif;font-weight:normal;font-size:9px;font-variant:small-caps;">what's up?</legend> <div style="width:100%;padding:10px 10px 5px 0;text-align:justify;"> </lj-raw>description of your event here!<lj-raw> </div> </fieldset> <!-- row two end --> <!-- credit row --> <div style="width:100%;padding:3px 0 0;text-align:right;"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;font-size:9px;color:#726f67;">♥</a></div> <!-- credit end --> <!-- TEXT CONTENTS OF LABEL END--> </div> </div></lj-raw>

THE NAV CODE

HEADER TEXT

Dragée oat cake chocolate bar jelly carrot cake chupa chups jelly-o chupa chups sugar plum. Tootsie roll jujubes apple pie gingerbread cake pie caramels soufflé. Powder jujubes tiramisu cotton candy gingerbread liquorice macaroon icing lemon drops.

premise rules taken reserve application ooc comm ic comm memes activity mods world faq

♥

<lj-raw><div style="box-sizing:border-box;width:100%;max-width:400px;min-height:200px;margin:25px auto;padding:10px;display:flex;justify-content:stretch;align-item:stretch;align-content:stretch;-webkit-filter:drop-shadow(1px 2px 2px rgba(0,0,0,0.25));background:radial-gradient(transparent 0px, transparent 4px, #d1ccc8 4px, #d1ccc8);background-size: 5% 5%;background-position: -2.5% -2.5%;line-height:1.2;font-family:'Times New Roman', serif;font-size:13px;color:#4e4b44"> <div style="width:100%;background:#d1ccc8;display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;align-content:start;gap:0;"> <!-- TEXT CONTENTS OF LABEL START --> <!-- header --> <div style="width:100%;margin-bottom:10px;display:grid;grid-template-columns:1fr 125px 1fr;grid-template-rows:125px;justify-content:center;align-items:center;align-content:center;"> <!-- header image --> <div style="grid-column-start:2;grid-column-end:3;grid-row-start:1;grid-row-end:2;width:125px;height:125px;margin:0 auto;border-radius:50%;border:3px solid #efedea;background:#ccc url('IMG_URL')center;background-size:cover;"></div> <!-- header image end --> <fieldset style="grid-column-start:1;grid-column-end:4;grid-row-start:1;grid-row-end:2;margin:0;padding:3px;border:0;border-top:1px solid #4e4b44;"> <legend style="margin:0 auto;padding:10px;text-align:center;font-size: clamp(22px, 3vw, 25px);font-weight:bold;text-shadow: 2px 2px #efedea;">HEADER TEXT</legend> </fieldset> </div> <!-- header end --> <!-- row two: description --> <div style="width:100%;height:4px;border-top:1px solid #4e4b44;"></div> <fieldset style="width:100%;margin:0;padding:3px;border:0;border-top:1px solid #4e4b44;border-bottom:1px solid #4e4b44;"> <div style="width:100%;padding:5px 10px 5px 0;text-align:justify;"> </lj-raw>brief descriptive text!<lj-raw> </div> </fieldset> <!-- row two end --> <!-- row three: nav --> <div style="width:100%;margin-top:3px;padding:5px 0;display:grid;grid-template-columns:auto auto auto auto;gap:5px;border:1px solid #4e4b44;border-left:0;border-right:0;text-transform:uppercase;line-height:1.2"> <a style="text-decoration:none;text-align:center;display:flex;padding:2px 10px;background:#4e4b44;color:#efedea" href="#URL_HERE">link</a> <a style="text-decoration:none;padding:2px 10px;background:#4e4b44;color:#efedea" href="#URL_HERE">link</a> <a style="text-decoration:none;padding:2px 10px;background:#4e4b44;color:#efedea" href="#URL_HERE">link</a> <a style="text-decoration:none;padding:2px 10px;background:#4e4b44;color:#efedea" href="#URL_HERE">link</a> </div> <!-- row three end --> <!-- credit row --> <div style="width:100%;padding:3px 0 0;text-align:right;"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;font-size:9px;color:#726f67;">♥</a></div> <!-- credit end --> <!-- TEXT CONTENTS OF LABEL END--> </div> </div></lj-raw>