This page documents the typography, layout elements, and visual styles used throughout this site. Content is primarily placeholder text from Hipster Ipsum or generated by LLMs prompted to create Monty Python-themed examples, chosen purely for visual testing rather than accuracy[1].
As this page primarily exists to test visual styling, I'm certain it's a nightmare for screen reader users. While I've done my best to incorporate accessibility considerations like ARIA attributes where possible and designed my styles with accessibility principles in mind, this remains at heart a visual testing ground rather than a fully accessible page.
Colors
blue (3 colors)
blue-50
blue-500
blue-950
gray (11 colors)
gray-50
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
gray-950
green (4 colors)
green-50
green-600
green-700
green-950
lime (2 colors)
lime-50
lime-950
purple (2 colors)
purple-50
purple-950
red (4 colors)
red-50
red-500
red-700
red-950
tokyonight (44 colors)
day-bg
day-bg-dark
day-black
day-blue
day-blue0
day-blue1
day-blue2
day-blue5
day-blue7
day-dark3
day-diff-add
day-diff-delete
day-fg
day-fg-dark
day-green
day-magenta
day-orange
day-purple
day-red
day-red1
day-teal
day-yellow
moon-bg
moon-bg-dark
moon-black
moon-blue
moon-blue0
moon-blue1
moon-blue2
moon-blue5
moon-blue7
moon-dark3
moon-diff-add
moon-diff-delete
moon-fg
moon-fg-dark
moon-green
moon-magenta
moon-orange
moon-purple
moon-red
moon-red1
moon-teal
moon-yellow
yellow (2 colors)
yellow-50
yellow-950
zinc (11 colors)
zinc-50
zinc-100
zinc-200
zinc-300
zinc-400
zinc-500
zinc-600
zinc-700
zinc-800
zinc-900
zinc-950
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraphs
Scenester four dollar toast ethical, air plant pinterest vexillologist vinyl food truck sustainable vaporware. Woke taxidermy XOXO tbh chartreuse, tattooed tilde. Kitsch etsy actually narwhal knausgaard retro.
Ugh prism asymmetrical food truck waistcoat. Green juice small batch bodega boys raw denim affogato, palo santo hot chicken chia ugh 90's williamsburg chicharrones. Mumblecore readymade chartreuse umami, whatever 90's tumblr celiac vegan polaroid neutral milk hotel. Retro normcore snackwave raclette distillery keffiyeh aesthetic air plant shabby chic kickstarter fingerstache. Craft beer aesthetic photo booth locavore hexagon.
Cold-pressed venmo vegan cronut art party adaptogen. Selvage crucifix yuccie, cupping schlitz glossier green juice JOMO hella.
Links
Tilde vexillologist plaid cornhole fit. Prism pabst kombucha, gentrify chia brunch etsy ennui. Intelligentsia fashion axe skateboard, direct trade JOMO flannel plaid offal deep v. Ethical glossier poke salvia street art distillery man braid franzen. Affogato before they sold out austin bushwick schlitz keffiyeh edison bulb seitan. Gluten-free cray wolf cornhole, slow-carb food truck DSA YOLO kickstarter cardigan church-key pinterest affogato.
Lists
Ordered
- Sus poutine yes plz mixtape praxis copper mug yr knausgaard asymmetrical cornhole banjo blackbird spyplane VHS plaid vexillologist.
- Fashion axe church-key twee, gochujang swag XOXO tumblr.
Ugh iPhone ethical humblebrag flannel post-ironic etsy kickstarter fanny pack polaroid.
Green juice small batch bodega boys raw denim affogato, palo santo hot chicken chia ugh 90's williamsburg chicharrones.
Photo booth blue bottle vegan fanny pack vexillologist wolf.
- Helvetica banjo bruh, plaid roof party sriracha scenester fam jawn church-key hot chicken 8-bit.
- Aesthetic cliche vexillologist blog heirloom cardigan plaid af kogi distillery kickstarter raw denim mustache 8-bit.
Unordered
Mlkshk schlitz poutine 8-bit la croix Brooklyn kombucha chia occupy YOLO mumblecore squid crucifix.
Sriracha normcore hashtag, skateboard four dollar toast brunch helvetica echo park food truck intelligentsia waistcoat chia.
I'm baby gatekeep kitsch messenger bag tousled air plant, man braid flexitarian schlitz pickled fixie.
- Kombucha vibecession jianbing austin vice cold-pressed. Before they sold out jianbing godard same. Mlkshk ramps single-origin coffee you probably haven't heard of them enamel pin letterpress yr slow-carb.
- Grailed bushwick swag, tbh humblebrag adaptogen blue bottle try-hard dreamcatcher portland umami gatekeep actually +1.
- Literally bodega boys gochujang kitsch yes plz man bun distillery plaid tousled.
- Kombucha vibecession jianbing austin vice cold-pressed. Before they sold out jianbing godard same. Mlkshk ramps single-origin coffee you probably haven't heard of them enamel pin letterpress yr slow-carb.
Letterpress celiac put a bird on it raw denim portland kale chips +1 typewriter subway tile plaid vaporware tumblr.
Task
- [ ] Intelligentsia iceland polaroid, fashion axe franzen solarpunk palo santo chillwave selfies helvetica tofu mixtape dreamcatcher austin hella.
- [ ] Unicorn pabst messenger bag, YOLO franzen DIY gastropub 90's.
- [ ] Occupy blue bottle tousled chartreuse waistcoat.
- [ ] Unicorn pabst messenger bag, YOLO franzen DIY gastropub 90's.
- [-] Scenester four dollar toast ethical, air plant pinterest vexillologist vinyl food truck sustainable vaporware.
- [x] Woke taxidermy XOXO tbh chartreuse, tattooed tilde.
[ ] Kitsch etsy actually narwhal knausgaard retro.
[-] Mustache post-ironic pork belly solarpunk 3 wolf moon +1 hella skateboard beard air plant JOMO.
[x] Ugh prism asymmetrical food truck waistcoat.
Code
Inline
Plaid butcher grailed hell of poutine, tote bag DSA gluten-free locavore JOMO af forage raclette. Fingerstache banh mi neutral milk hotel lyft cray venmo single-origin coffee brunch gluten-free food truck cardigan. Selvage fit enamel pin vice artisan squid drinking vinegar raclette pitchfork cray mumblecore.
This Heading 1 has code
This Heading 2 has code
This Heading 3 has code
This Heading 4 has code
This Heading 5 has code
This Heading 6 has code
Blocks
Standard width
from enum import Enum
# African swallow in m/s
AIRSPEED_VELOCITY = 24.0
class Shrubbery(Enum):
"""A nice shrubbery for the Knights Who Say Ni."""
SMALL = 1
MEDIUM = 2
LARGE = 3Breakout widths
// TODO: add press_wild_flowers and wears_high_heels
struct Lumberjack {
ok: bool,
sleeps_all_night: bool,
works_all_day: bool,
}
impl Lumberjack {
fn new() -> Self {
Lumberjack {
ok: true,
sleeps_all_night: true,
works_all_day: true,
}
}
fn sing(&self) -> String {
"I'm a lumberjack and I'm OK!"
}
}// Nobody expects these chief weapons
const chiefWeapons = [
"surprise",
"fear",
"ruthless efficiency",
"an almost fanatical devotion to the Pope",
"nice red uniforms"
];
function announceWeapons(count = 3) {
return `Our ${count} weapons are: ${chiefWeapons.slice(0, count).join(", ")}!`;
}---@module "argument-clinic"
local M = {}
---@type string[]
local contradictions = {"No it isn't", "No you didn't", "No it won't"}
---@type boolean
local fee_paid = false
---@param statement boolean Whether the statement is true
---@return string Response from the argument clinic
function M.argue(statement)
if not fee_paid then
return "Haven't paid!"
end
return statement and contradictions[1] or "Yes it is!"
end
---@return string Location of the abuse service
function M.abuse_service()
return "Room 12A, next door."
end
---@param paid boolean Whether the fee has been paid
---@return nil
function M.set_fee_paid(paid)
fee_paid = paid
end
return MFull bleed width
def is_dead_parrot(parrot_state):
"""Check if the parrot has ceased to be."""
states = ["deceased", "expired", "late", "bereft of life"]
return parrot_state.lower() in states or "pushing up daisies" in parrot_stateTables
Standard width
| Insult | Target |
|---|---|
| "Your mother was a hamster and your father smelt of elderberries!" | Arthur |
| "You empty-headed animal food trough wiper!" | Knights |
| "You're not the Messiah, you're a very naughty boy!" | Crowd |
| "I fart in your general direction!" | The Brits |
Breakout widths
| Sketch | Year | Memorable Line |
|---|---|---|
| Dead Parrot | 1969 | "This is an ex-parrot!" |
| Spam | 1970 | "Spam, spam, spam, lovely spam!" |
| Argument Clinic | 1972 | "No it isn't." "Yes it is!" |
| Upper Class Twit | 1970 | "The crowd are going wild!" |
| Character | Actor | Weapon | Quest | Favorite Color |
|---|---|---|---|---|
| King Arthur | Graham Chapman | Excalibur | Holy Grail | Blue |
| Sir Lancelot | John Cleese | Sword | Holy Grail | Red... No, Blue! |
| Sir Robin | Eric Idle | Chicken | Ran Away | Yellow |
| Tim | John Cleese | Explosions | Being an Enchanter | Black |
| Character | Actor | Scene | Quote | Blasphemy Rating |
|---|---|---|---|---|
| Brian | Graham Chapman | Crucifixion | "Always look on the bright side of life" | ✝️✝️ |
| Pontius Pilate | Michael Palin | Palace | "Stwike him, Centuwion!" | ✝️ |
| Reg | John Cleese | PFJ Meeting | "What have the Romans ever done for us?" | ✝️✝️✝️ |
| Biggus Dickus | Graham Chapman | Palace | "He has a wife, you know..." | ✝️✝️✝️✝️ |
Full bleed width
| Film | Year | Budget | Box Office | Director | Runtime | Swear Count | Coconut Usage |
|---|---|---|---|---|---|---|---|
| Holy Grail | 1975 | $400K | $5M | Gilliam/Jones | 91 min | 12 | Extensive |
| Life of Brian | 1979 | $4M | $20M | Terry Jones | 94 min | 28 | None |
| Meaning of Life | 1983 | $9M | $14M | Terry Jones | 107 min | 35 | Minimal |
| And Now For Something... | 1971 | $250K | $1.1M | Ian MacNaughton | 88 min | 8 | Moderate |
Blockquote
I'm baby kombucha ramps tbh, chia Brooklyn plaid lo-fi godard. Letterpress hexagon blue bottle, lumbersexual ethical ascot waistcoat jean shorts fashion axe. DIY edison bulb single-origin coffee iPhone la croix retro chartreuse mustache letterpress 90's gatekeep cloud bread. Butcher before they sold out bespoke, yes plz actually neutra palo santo offal.
Callouts
Caution
Edison bulb woke disrupt fit 3 wolf moon kale chips banh mi hexagon selvage succulents JOMO vice hammock cardigan. Cray shoreditch meh, waistcoat wolf cornhole marxism tilde bruh iPhone readymade authentic forage mixtape. Affogato church-key deep v vibecession keffiyeh iceland meh vape air plant, butcher mixtape VHS.
Documentation
Mixtape franzen fixie try-hard. Photo booth offal neutra, +1 af farm-to-table umami vaporware ugh master cleanse VHS chambray prism. 8-bit street art schlitz readymade. Tonx chia chillwave celiac, iceland selvage slow-carb.
Important
Keffiyeh live-edge trust fund flannel. Disrupt listicle cred hammock fanny pack vexillologist celiac.
Note
I'm baby single-origin coffee thundercats chartreuse blue bottle distillery vaporware 3 wolf moon swag trust fund butcher bicycle rights mixtape. Ennui poke iPhone etsy waistcoat Brooklyn, deep v VHS.
Tip
Readymade gorpcore you probably haven't heard of them venmo photo booth.
Tl;dr
Poke sartorial vexillologist, trust fund pabst jawn pour-over quinoa aesthetic pork belly lyft banjo pug cliche. Heirloom vinyl pinterest pok pok pabst woke farm-to-table jean shorts tattooed semiotics church-key vaporware. Kale chips everyday carry slow-carb, pabst +1 viral small batch taiyaki man braid edison bulb tumblr seitan. Cronut keffiyeh +1 pour-over, tote bag intelligentsia kale chips locavore DIY. Glossier fingerstache umami, cardigan vape yuccie four dollar toast mustache bushwick pinterest la croix photo booth. Hella chartreuse green juice, taxidermy edison bulb semiotics shabby chic humblebrag chicharrones.
/* Ministry of Silly Walks - Animation Collection
For the Department of Silly Walks, established 1970
Level of silliness must meet or exceed 83% to qualify for a grant */
.silly-walker {
width: 8px;
height: 30px;
background-color: #222;
position: relative;
margin: 50px auto;
}
/* Head */
.silly-walker::before {
content: "";
position: absolute;
top: -8px;
left: -2px;
width: 12px;
height: 12px;
background-color: #222;
border-radius: 50%;
}
/* Arms (like a bowler-hatted civil servant) */
.silly-walker::after {
content: "";
position: absolute;
top: 5px;
left: -7px;
width: 22px;
height: 2px;
background-color: #222;
}
/* The Classic Cleese - the iconic high-stepping, jerky walk */
@keyframes classic-cleese {
0% { transform: translateX(0) rotate(0); }
10% { transform: translateX(10px) rotate(5deg); }
20% { transform: translateX(20px) scaleY(1.2) rotate(0); }
30% { transform: translateX(30px) scaleY(1.4) rotate(-5deg); }
40% { transform: translateX(40px) scaleY(1) rotate(0); }
50% { transform: translateX(50px) scaleY(0.9) rotate(5deg); }
60% { transform: translateX(60px) scaleY(1.4) rotate(0); }
70% { transform: translateX(70px) scaleY(1.2) rotate(-5deg); }
80% { transform: translateX(80px) scaleY(1) rotate(0); }
90% { transform: translateX(90px) scaleY(0.9) rotate(5deg); }
100% { transform: translateX(100px) rotate(0); }
}
/* The Civil Servant Shuffle - subtle but just odd enough to be rejected */
@keyframes civil-servant {
0% { transform: translateX(0) rotate(0); }
20% { transform: translateX(20px) rotate(3deg); }
40% { transform: translateX(40px) rotate(-2deg); }
50% { transform: translateX(50px) skewX(10deg); }
60% { transform: translateX(60px) rotate(2deg); }
80% { transform: translateX(80px) rotate(-3deg); }
100% { transform: translateX(100px) rotate(0); }
}
/* The La Marche Futile - overly elaborate but going nowhere */
@keyframes la-marche-futile {
0% { transform: translateX(0) rotate(0); }
15% { transform: translateX(0) rotate(10deg); }
30% { transform: translateX(10px) rotate(-5deg); }
45% { transform: translateX(10px) rotate(15deg); }
60% { transform: translateX(20px) rotate(-10deg); }
75% { transform: translateX(20px) rotate(5deg); }
90% { transform: translateX(30px) rotate(-15deg); }
100% { transform: translateX(30px) rotate(0); }
}
/* The Ministry Approved - exaggerated and absurd */
@keyframes ministry-approved {
0% { transform: translateX(0) translateY(0) rotate(0); }
10% { transform: translateX(10px) translateY(-5px) rotate(15deg); }
20% { transform: translateX(20px) translateY(0) rotate(0); }
30% { transform: translateX(30px) translateY(-15px) rotate(-10deg); }
40% { transform: translateX(40px) translateY(0) scaleY(1.3); }
50% { transform: translateX(50px) translateY(-10px) rotate(20deg); }
60% { transform: translateX(60px) translateY(0) scaleY(0.8); }
70% { transform: translateX(70px) translateY(-20px) rotate(-15deg); }
80% { transform: translateX(80px) translateY(0) rotate(0); }
90% { transform: translateX(90px) translateY(-5px) rotate(10deg); }
100% { transform: translateX(100px) translateY(0) rotate(0); }
}
/* The Grant Application - starts normal, becomes increasingly silly */
@keyframes grant-application {
0% { transform: translateX(0) rotate(0); }
20% { transform: translateX(20px) rotate(0); }
30% { transform: translateX(30px) rotate(5deg); }
40% { transform: translateX(40px) rotate(-5deg) scaleY(1.1); }
50% { transform: translateX(50px) rotate(10deg) scaleY(1.2); }
60% { transform: translateX(60px) rotate(-10deg) scaleY(1.3); }
70% { transform: translateX(70px) rotate(15deg) scaleY(1.4); }
80% { transform: translateX(80px) rotate(-15deg) scaleY(1.5); }
90% { transform: translateX(90px) rotate(20deg) scaleY(1.6); }
100% { transform: translateX(100px) rotate(-20deg) scaleY(1.7); }
}
/* Apply animations to walker classes */
.silly-walker.classic-cleese {
animation: classic-cleese 4s linear forwards;
}
.silly-walker.civil-servant {
animation: civil-servant 3s linear forwards;
}
.silly-walker.la-marche-futile {
animation: la-marche-futile 5s linear forwards;
}
.silly-walker.ministry-approved {
animation: ministry-approved 6s linear forwards;
}
.silly-walker.grant-application {
animation: grant-application 8s linear forwards;
}
/* Speed modifiers that can be added to any walk */
.silly-walker.hastened {
animation-duration: 2s !important;
}
.silly-walker.government-speed {
animation-duration: 10s !important;
}
/* Walker with briefcase - add this class for the full civil servant look */
.silly-walker.with-briefcase::before {
content: "";
position: absolute;
bottom: 5px;
right: -10px;
width: 8px;
height: 12px;
background-color: #222;
}Mixtape glossier live-edge waistcoat, narwhal tofu vegan heirloom quinoa irony venmo hoodie woke fingerstache letterpress. Pour-over beard fit normcore gatekeep. Farm-to-table wolf vegan hot chicken celiac af ugh. Keytar direct trade skateboard fingerstache kombucha, health goth mustache schlitz drinking vinegar praxis. Fashion axe gastropub letterpress, migas gentrify bushwick tote bag prism master cleanse cray.
Warning
Migas health goth neutral milk hotel bushwick. Street art DSA fixie retro dreamcatcher, franzen messenger bag aesthetic hexagon praxis flexitarian cred. Helvetica shabby chic kickstarter vinyl. Grailed offal fixie jianbing +1, bicycle rights poke enamel pin small batch marxism.
With Custom Title
Vaporware same mixtape activated charcoal gastropub blackbird spyplane venmo shabby chic helvetica la croix slow-carb portland gentrify.
Fashion axe jean shorts direct trade DIY drinking vinegar. Thundercats meh normcore mixtape retro, sriracha fanny pack organic man braid hell of four loko pabst chicharrones big mood. Helvetica banjo bruh, plaid roof party sriracha scenester fam jawn church-key hot chicken 8-bit. Mlkshk schlitz poutine 8-bit la croix Brooklyn kombucha chia occupy YOLO mumblecore squid crucifix. Single-origin coffee prism fam copper mug lyft blue bottle kale chips bodega boys synth.
Footnotes
I'm baby listicle bitters typewriter chia man braid iceland umami, pinterest food truck tofu twee synth raw denim.[2] Vibecession beard lo-fi pop-up actually, knausgaard offal readymade aesthetic schlitz hashtag.
Dreamcatcher jean shorts everyday carry, farm-to-table gorpcore cred forage Brooklyn 90's artisan whatever tumeric blackbird spyplane woke vice.[3]
Given the reliabilty of LLMs, it's likely completely wrong. I have no idea how many swears are said in each movie, I didn't look it up, and frankly I don't care. I just needed some content to test how everything looks. ↩︎
Tattooed hot chicken vinyl lumbersexual mustache iPhone. Keytar single-origin coffee enamel pin lomo banjo kale chips, blog squid. ↩︎
Helvetica brunch intelligentsia hoodie vibecession. XOXO yuccie vaporware, snackwave austin tacos DSA butcher man bun selfies. Master cleanse lomo jianbing, beard fanny pack taiyaki flexitarian chambray VHS. ↩︎