[Work Skin] Disco Elysium-style formatting

This work skin is designed to be used with extremely basic formating. There is no wrapper you have to add around your text. Just activate it on your work and it will apply the background and paragraph formatting.

Example

Example of the workskin in action vs. what the text formating looks like without the workskin.

Workskin ON

Ceiling Fan — The fan is spinning.

Grab the tie.
Pull on the fan.
Pull on the light bulb.

Ceiling Fan — A terrible mistake! Turn the lights off IMMEDIATELY! You can practically feel the photons burning a hole in your brain.

Pain Threshold — It's just a little hangover-induced photosensitivity. Don't over-react.

Item gained: Horrific Necktie

Kim Kitsuragi — A bespectacled man in an orange bomber jacket has folded up his newspaper and is now tapping his foot on the floor. Looks like he's been waiting for quite some time.

After catching your attention, he narrows his eyes and extends his hand in greeting.

Esprit de Corps — If an assault were launched on this building right now -- if the windows came crashing down and the whole world descended upon you -- this man would hurl himself in death's way to save you. You are sure of this -- but why?

Perception (Sight) [Medium: Success] — On the sleeve of his bomber jacket -- as well as on its back -- are the same enigmatic white rectangles as on your blazer.

Hold on, who is he to me?
Shake his hand.
Don't shake his hand.

Kim Kitsuragi — "Hello, I'm Kim Kitsuragi." His grip is firm. "Lieutenant, Precinct 57. You must be from the 41st…"

You realize he is waiting for your name.

You — "I don't really know my name."

Kim Kitsuragi — "Okay, then." He processes the information, then disregards it.

"It looks like we had a little scheduling error on Sunday. Saturday too, actually… Have you had time to talk to the manager here?"

Rhetoric [Hard: Success] — What he means is he has been trying to meet up with you for two days, but you have been otherwise occupied.

Workskin OFF

Ceiling Fan — The fan is spinning.

Grab the tie.
Pull on the fan.
Pull on the light bulb.

Ceiling Fan — A terrible mistake! Turn the lights off IMMEDIATELY! You can practically feel the photons burning a hole in your brain.

Pain Threshold — It's just a little hangover-induced photosensitivity. Don't over-react.

Item gained: Horrific Necktie

Kim Kitsuragi — A bespectacled man in an orange bomber jacket has folded up his newspaper and is now tapping his foot on the floor. Looks like he's been waiting for quite some time.

After catching your attention, he narrows his eyes and extends his hand in greeting.

Perception (Sight) [Medium: Success] — On the sleeve of his bomber jacket -- as well as on its back -- are the same enigmatic white rectangles as on your blazer.

Hold on, who is he to me?
Shake his hand.
Don't shake his hand.

Kim Kitsuragi — "Hello, I'm Kim Kitsuragi." His grip is firm. "Lieutenant, Precinct 57. You must be from the 41st…"

You realize he is waiting for your name.

You — "I don't really know my name."

Kim Kitsuragi — "Okay, then." He processes the information, then disregards it.

"It looks like we had a little scheduling error on Sunday. Saturday too, actually… Have you had time to talk to the manager here?"

Rhetoric [Hard: Success] — What he means is he has been trying to meet up with you for two days, but you have been otherwise occupied.

Usage

Rich text / Google Docs / Ellipsus people should be able to use this skin without any hassle. Just add the correct class for the skills in the HTML view after pasting your text, in case you want to make them colorful. If you don't, you don't have to. The speaker names will be styled regardless but stay the normal text color.

Making text bold should usually be translated into a  and not a  tag. Please verify and if it works differently for you, adjust the CSS.

Equally, making text monospaced should be translated into a <code> tag, if it is <pre> or something else, adjust the CSS.

Basic Rules

All paragraphs mark prose text and are slightly indented.
The first line of a paragraph that contains a  tag (bold) will be pulled forward to give a visual cue about a speaker change.
- Usage of bold text should be limited to the speaker's name.
Numbered lists mark dialog options.
- An underlined or bold dialog option will be treated as the chosen response.
- OR: Add the class "choice" to a list item to mark the chosen response.
Gained inventory items, quests, tasks or any other meta information should be denoted as monospace text.
- OR: use the dedicated class "meta" on a normal  or  tag.
For skill check results, make the text bold and italic.
- For RTE, best practice is probably to mark the speaker and the check result as bold, and then additionally add italics to only the check result.
- Any  tag within a  tag will be treated as a skill check result. (This does not affect any normal usage of italics in prose text).
- OR: Use the dedicated class "check-result" like this: [Trivial: Failure]

Required HTML Code to reproduce the example

<p><strong>Ceiling Fan</strong> — The fan is spinning.</p>

<ul>
    <li>Grab the tie.</li>
    <li>Pull on the fan.</li>
    <li><strong>Pull on the light bulb.</strong></li>
</ul>

<p><strong>Ceiling Fan</strong> — A terrible mistake! Turn the lights off IMMEDIATELY! You can practically feel the photons burning a hole in your brain.</p>
<p><strong class="fys">Pain Threshold</strong> — It's just a little hangover-induced photosensitivity. Don't over-react.</p>
<p><code>Item gained: Horrific Necktie</code></p>
<p><strong>Kim Kitsuragi</strong> — A bespectacled man in an orange bomber jacket has folded up his newspaper and is now tapping his foot on the floor. Looks like he's been waiting for quite some time.</p>
<p>After catching your attention, he narrows his eyes and extends his hand in greeting.</p>
<p><strong class="psy">Esprit de Corps</strong> — If an assault were launched on this building right now -- if the windows came crashing down and the whole world descended upon you -- this man would hurl himself in death's way to save you. You are sure of this -- but why?</p>
<p><strong class="int">Perception (Sight) <em>[Medium: Success]</em></strong> — On the sleeve of his bomber jacket -- as well as on its back -- are the same enigmatic white rectangles as on your blazer.</p>

<ul>
    <li>Hold on, who is he to me?</li>
    <li><strong>Shake his hand.</strong></li>
    <li>Don't shake his hand.</li>
</ul>

<p><strong>Kim Kitsuragi</strong> — "Hello, I'm Kim Kitsuragi." His grip is firm. "Lieutenant, Precinct 57. You must be from the 41st…"</p>
<p>You realize he is waiting for your name.</p>
<p><strong>You</strong> — "I don't really know my name."</p>
<p><strong>Kim Kitsuragi</strong> — "Okay, then." He processes the information, then disregards it.</p>
<p>"It looks like we had a little scheduling error on Sunday. Saturday too, actually… Have you had time to talk to the manager here?"</p>
<p><strong class="mot">Rhetoric <em>[Hard: Success]</em></strong> — What he means is he has been trying to meet up with you for two days, but you have been <em>otherwise occupied</em>.</p>

Required Markdown (Obsidian) to reproduce the example

**Ceiling Fan** — The fan is spinning.

- Grab the tie.
- Pull on the fan.
- **Pull on the light bulb.**

**Ceiling Fan** — A terrible mistake! Turn the lights off IMMEDIATELY! You can practically feel the photons burning a hole in your brain.

<strong class="fys">Pain Threshold</strong> — It's just a little hangover-induced photosensitivity. Don't over-react.

`Item gained: Horrific Necktie`

**Kim Kitsuragi** — A bespectacled man in an orange bomber jacket has folded up his newspaper and is now tapping his foot on the floor. Looks like he's been waiting for quite some time.
After catching your attention, he narrows his eyes and extends his hand in greeting.

<strong class="psy">Esprit de Corps</strong> — If an assault were launched on this building right now -- if the windows came crashing down and the whole world descended upon you -- this man would hurl himself in death's way to save you. You are sure of this -- but why?

<strong class="int">Perception (Sight) *[Medium: Success]*</strong> — On the sleeve of his bomber jacket -- as well as on its back -- are the same enigmatic white rectangles as on your blazer.

- Hold on, who is he to me?
- **Shake his hand.**
- Don't shake his hand.

**Kim Kitsuragi** — "Hello, I'm Kim Kitsuragi." His grip is firm. "Lieutenant, Precinct 57. You must be from the 41st…"
You realize he is waiting for your name.

**You** — "I don't really know my name."

**Kim Kitsuragi** — "Okay, then." He processes the information, then disregards it.

"It looks like we had a little scheduling error on Sunday. Saturday too, actually… Have you had time to talk to the manager here?"

<strong class="mot">Rhetoric *[Hard: Success]*</strong> — What he means is he has been trying to meet up with you for two days, but you have been *otherwise occupied*.

CSS

.userstuff {
    background: url(https://images.squidge.org/images/2026/07/31/backgroundtrans2.png);
    color: #ffffff;
    max-width: 512px;
    margin: auto;
    padding: 1pt 0;
}

.userstuff>p {
    padding-left: 40pt;
    padding-right: 18pt;
}

.userstuff>p:has(code),
.userstuff>p:has(.meta),
.userstuff>p:has(img),
.userstuff>p.meta {
    padding-left: 0pt;
    padding-right: 0pt;
}

.userstuff>p:has(>strong:first-child),
.userstuff>p:has(.speaker),
.userstuff>p:has(.int),
.userstuff>p:has(.mot),
.userstuff>p:has(.phy),
.userstuff>p:has(.fys) {
    text-indent: -20pt;
}

.userstuff>p>strong:first-child,
.userstuff .speaker,
.userstuff .int,
.userstuff .mot,
.userstuff .phy,
.userstuff .fys {
    text-transform: uppercase;
    font-weight: bold;
}

.userstuff strong>em,
.userstuff .speaker>em,
.userstuff .int>em,
.userstuff .mot>em,
.userstuff .phy>em,
.userstuff .fys>em,
.userstuff .check-result {
    color: #7e796a;
    font-style: normal;
    font-weight: lighter;
    text-transform: none;
}

.userstuff ol,
.userstuff ul {
    padding: 0;
}

.userstuff ol>li::marker,
.userstuff ul>li::marker {
    color: #fff;
}

.userstuff li::before {
    content: "-";
    padding-right: 0.5ch;
    color: #fff;
}

.userstuff li {
    list-style-type: decimal;
    margin-inline-start: 40pt;
    color: #be3c1c;
}

.userstuff li:has(>u),
.userstuff li:has(>strong),
.userstuff li:has(.choice),
.userstuff .choice {
    color: currentColor;
    font-weight: bold;
}

.userstuff li>u {
    text-decoration: none;
}

.userstuff code,
.userstuff .meta {
    color: #86a979;
    display: block;
    text-align: center;
    font-family: unset;
    font-size: em;
}

.userstuff .int {
    color: #6cc6ce;
}

.userstuff .psy {
    color: #705cbb;
}

.userstuff .fys {
    color: #c6496B;
}

.userstuff .mot {
    color: #E4b934;
}

Notes

.mot – Skill coloring for Motorics skills (yellow)
.int – Skill coloring for Intellect skills (blue)
.psy – Skill coloring for Psyche skills (purple)
.fys – Skill coloring for Physique skills (red)
.speaker – Class for normal speaker -- like people or environments (just cause)
.meta – For inventory items, tasks, … (equiv. to <code>)
.choice – Marks a list item as the chosen response (equiv. to  or )
.check-result – For skill check results (Success / Failure) (equiv. to  WITHIN a  tag or a  with the classes "int", "mot", "psy", "fys", "speaker")

If you don't want the background and width restriction, remove the very first css rule that applies only to .userstuff.

Actions

Kudos

rafimizated, 0dotexe, Charles_Rockafellor, and scorchedretinas left kudos on this work!

Archive of Our Own

Actions

Work Header