# Academia (Scholarly) > A lamp-lit library: mahogany and parchment, gold-leaf rules, classic Garamond, footnotes, roman numerals and library catalogue cards. - Nickname: Dark academia - Also called: Dark Academia, Library Aesthetic, Old-World Scholarly - Category: Editorial & Typographic - Moods: Serious, Nostalgic, Luxury, Calm - Industries: Education, Media & Entertainment, Luxury & Premium, Government & Nonprofit, Corporate & B2B - Style page: https://uilingo.dev/styles/academia-scholarly/ Academia dresses the interface like an old college library at night. A deep mahogany ground glows faintly under a reading lamp, text is parchment-coloured Garamond, and gold leaf appears only as fine tooled rules — the double line inside a book cover, a hairline under a title. Content is organised the way scholars do it: sections numbered with § and roman numerals, cards laid out as typewritten library catalogue cards with ruled lines and call numbers, side-notes in the margin and superscript footnote markers. Oxblood marks the important things, a green-lamp green the positive ones. ## Best for - Universities, courses and online academies - Libraries, archives, museums and journals - Book clubs, publishers and literary apps - Law, heritage and research institutions ## Avoid for - Fast consumer apps and checkout-heavy flows - Kids and playful brands - Tech products that need to feel new ## Do - Use gold only for 1px rules, frames and small marks — never for big fills - Number sections with § and roman numerals; set Latin nav, labels and tabs in small caps, and give metadata a typewriter face - Use oxblood (secondary #8E2F2A) for the one important thing and green-lamp green (accent #7E9A72) only for positive marks - Keep body text in a book serif at 1.7+ line-height (Thai 1.9), except on catalogue cards, which use a 28px line grid - Back claims with gold superscript footnote markers and matching notes, and place pull quotes as † margin side-notes on screens ≥1260px ## Don't - No bright saturated colours, neon or gradients beyond a soft lamp glow - Don’t use sans-serif headings or rounded pill buttons (pill radius is only for avatars and switches) - Don’t over-decorate with clip-art crests, owls or quills ## Audit Passed after 4 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, dark mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Academia (Scholarly)" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: dark ## The style in one line A lamp-lit library: mahogany and parchment, gold-leaf rules, classic Garamond, footnotes, roman numerals and library catalogue cards. Design keywords: mahogany & parchment, gold-leaf hairlines, Garamond serif, library catalogue cards, typewriter call numbers, roman numerals & §, footnotes & side-notes, lamp-lit glow. ## Visual language An old college library at night. The ground is deep mahogany (#1A120E) with a faint leather-grain noise and a warm reading-lamp glow from the top; text is parchment (#EFE4CC) set in EB Garamond and Crimson Pro; gold leaf (#C9A54E, the primary token) appears only as fine tooled lines — a double hairline under the header, an inset frame inside a book-cover card. Token roles: secondary #8E2F2A = oxblood, the one important thing (the 'important' button style, solid badges, the CTA book cover, the featured pricing plan); accent #7E9A72 = green-lamp green, for positive deltas and success-adjacent marks only. Content is organised like scholarship: § and roman-numeral section numbers, typewritten catalogue cards with ruled lines and call numbers, superscript footnote markers with matching notes, and margin side-notes. ## Signature details (must be visible) - Lamp-lit mahogany background on a fixed full-page layer: radial-gradient(70% 50% at 50% −8%, rgba(232,184,90,.16), transparent 70%) over a leather grain over #1A120E. Grain recipe: an inline data:image/svg+xml tile, 160×160px, containing followed by a flattening (every speck becomes the same warm brown, alpha 9%), repeated across the page - Gold-leaf tooling: 1px rules in gold at 55% opacity, doubled (1px line, 2px gap, 1px line) under the nav and above the footer; framed cards, CTA and featured items use an inset gold hairline 7–13px inside the edge - Library catalogue cards: a typewriter header '370.14 · CAT. Nº 01' (call number first, catalogue number second) in Courier Prime 0.72rem with a 2px oxblood rule beneath (absolutely placed at top 16px), horizontal ruled lines every 28px (border colour at 45%) and a punched hole at the bottom centre. Ruling is computed, not guessed: every text line in the card body (title and text, Latin and Thai) uses line-height 28px with margin 0; the body block starts at a fixed Y = padding-top 56px + icon 40px + icon margin 16px = 112px; the rules are repeating-linear-gradient(to bottom, transparent 0 27px, rule 27px 28px) positioned at 0 112px (size 100% calc(100% − 112px), no-repeat), i.e. along the bottom edge of each 28px line box — below Latin descenders and Thai lower vowels, never through Thai upper vowels or tone marks. Same offset for Thai - Section numbering: CSS counter — counter-reset: sec 0 on main; counter-increment: sec on the hero and on every section that has a head (eyebrow + h2), including stats and the CTA when they carry a head (in the reference they have none, so they stay unnumbered and the sequence never skips); the hero eyebrow shows '§ I', section eyebrows continue '§ II', '§ III'… (upper-roman); steps numbered I, II, III in framed squares; prose h2s prefixed with a gold § - Eyebrows: gold Crimson Pro small caps with 0.12em tracking (Latin) / Trirong 500 0.95rem, no tracking (Thai), prefixed with § and a roman numeral - Fleuron dividers: a centred ❧ in gold between two 120px gold hairlines (each at most 42% of the ornament's width, so they shorten on narrow screens), above the hero title and under centred section heads - Footnotes and side-notes, all visible on the landing page: gold Courier Prime superscript markers, each with a matching note in a small footnote block (Crimson Pro 0.85rem, text-muted, gold Courier numerals '1.', a 1px gold hairline above, max-width 640px, centred). The hero lead ends with marker 1 and its note sits directly under the plate caption; the features lead ends with marker 2 and its note closes the features section, under the cards; in articles the paragraphs carry markers and the notes form a list at the end of the prose. Margin side-notes: on the landing page the testimonials open with one featured figure (max-width 760px, centred, position: relative, inset gold frame) whose quote ends with a gold † and whose side-note is absolutely positioned at top 0, left: calc(100% + 32px), width 190px — at 1260px the margin is (1260 − 760) / 2 = 250px, enough for the 32px gap plus the 190px note; in articles the pull quote floats right into the margin (float: right; width 190px; margin-right −250px). Side-notes appear in the margin only on screens ≥1260px: Latin in italic text-muted, Thai in Trirong 400 roman, text-muted, no italic; both start with a gold †. Below 1260px they fold inline under the quote, with a 1px gold hairline above - Latin: italic Garamond for display titles, h2, card titles, plate captions and quotes; nav, labels and tabs are written in sentence case and set with text-transform: lowercase + font-variant: small-caps, so every letter is an even small cap; uppercase + 0.08em tracking only in Courier Prime metadata (badges, table headers, call numbers). Thai gets neither italic nor small caps nor tracking: Thai display, h2 and card titles use Trirong 500 roman; Thai quotes use Trirong 400 roman in the same parchment text colour as Latin quotes, under the gold quote mark. Break the Thai hero title by phrase (white-space: nowrap spans with between phrases) so it never splits inside a word. Keep italic for Latin words inside Thai text, such as journal titles and Latin names ## Design tokens — use these exact values Colours (dark mode): - background #1A120E - surface #231812 - surface-2 #2D1F17 - text #EFE4CC - text-muted #BCA98A - primary #C9A54E (text on it #1A120E) - secondary #8E2F2A (text on it #F5EBD6) - accent #7E9A72 - border #5A4330 - success #8DB47E · warning #D9A441 · danger #D9675E - chart series #C9A54E, #B5524A, #7E9A72, #D9C9A6, #8C6E52 Radius: sm 2px, md 3px, lg 4px, xl 6px, pill 999px Border width: 1px Shadows: sm `0 1px 0 rgba(0,0,0,0.25)`, md `0 10px 30px rgba(10,5,2,0.35)`, lg `0 24px 60px rgba(10,5,2,0.5)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.1 density Motion: 260ms cubic-bezier(.4,0,.2,1) ## Typography (Latin + Thai) - Headings: EB Garamond 500/600 with Thai fallback Trirong 500/600 - Body: Crimson Pro 400/500/600 with Thai fallback Trirong 400/500/600 - Mono: Courier Prime - Google Fonts URL: https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=Crimson+Pro:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Courier+Prime:wght@400;700&family=Trirong:wght@400;500;600&display=swap - CSS stacks: heading `"EB Garamond", "Trirong", system-ui, sans-serif`; body `"Crimson Pro", "Trirong", system-ui, sans-serif`; mono `"Courier Prime", ui-monospace, "SFMono-Regular", Menlo, "Trirong", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Trirong — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.8rem, 6.2vw, 5.4rem), heading weight 500, heading tracking 0 (Latin only), sentence-case labels. - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Trirong is a classic looped Thai text serif with the same calligraphic, old-style stress as EB Garamond and Crimson Pro, so headings and body read as one bookish family. ## Components - Buttons: 2px radius, Crimson Pro 600 with 0.06em tracking (Thai: no tracking). primary = gold leaf #C9A54E with mahogany text and a faint inner hairline, hover brightens 8%; secondary = gold 1px outline on transparent, hover fills gold at 12%; important = oxblood #8E2F2A solid with parchment text. The hero uses primary + secondary. Oxblood is the important surface: the CTA book cover and the featured pricing plan are oxblood, and the button on those oxblood surfaces is gold leaf - Thai line-height: Thai body 1.9 in prose (article prose 1.95) and Thai lead 1.85; inside catalogue cards Thai is locked to the 28px line grid (16px × 1.75 = 28px), like Latin - Radius: 2px on buttons, chips, tags, inputs and cards; the pill radius (999px) is for avatars and switch tracks only - Cards: #231812 surface, 1px leather-tan (#5A4330) border, 2px radius, a 1px dark bottom shadow; hover turns the border gold and lifts the shadow; highlight cards are oxblood with an inset gold frame - Inputs: darker-than-surface fill, 1px tan border, 2px radius; focus turns the border gold with a 3px gold ring at 20%; labels in small caps (Thai plain) - Badges: Courier Prime 0.72rem, uppercase with 0.08em tracking (Thai: Trirong, no case or tracking), in a 1px outline of the tone colour, no fill; the solid badge is oxblood; positive states use green-lamp #7E9A72/success green; table badges never wrap or clip (nowrap, 0.68rem) - Avatars: oxblood medallions with a gold ring and a second hairline ring 3px outside, italic initials (Thai roman) - Charts: gold primary line, dashed oxblood comparison, green-lamp for positive deltas, faint dashed grid; big stat numerals (stats strip, KPI values, prices on non-featured plans) in EB Garamond 500, gold, with font-variant-numeric: oldstyle-nums proportional-nums — always Latin digits, even on Thai pages; KPI cards are plain surface cards with no ruling; table headers in Courier caps in gold - Tabs and dashboard nav: small caps; active item gold with a 2px gold left bar (sidebar) or underline (tabs), set in italic (Thai roman) - Mobile tab bar: near-black leather with a gold double hairline on top; active item gold with italic label (Thai roman) - Pricing: all three plans carry the inset gold frame (1px gold at 55%, 7px inside the edge) and a gold-leaf button; the featured plan is the oxblood #8E2F2A surface, its price numerals are parchment #F5EBD6 instead of gold, and its muted text is #F5EBD6 at 80% — never text-muted #BCA98A, which fails contrast on oxblood ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: centred headline with the product visual below it. Navigation: bar style. Sections in order: hero → features → steps → testimonials → stats → pricing → faq → cta. Feature section as grid. Open with a centred title page: fleuron rule, the '§ I' gold eyebrow, a large italic Garamond title (Thai Trirong 500 roman, broken by phrase), a measured lead ending in footnote marker 1, gold and outline buttons, and a typewriter note. Then the plate: the product shot — a course dashboard with a 'lessons completed' line chart and two KPI cards (active learners, completion rate) — framed with a double gold hairline on solid surface #231812, captioned 'Plate I — ' in italic Crimson Pro (Thai: Trirong roman), text-muted, centred under the plate, with the hero's footnote block directly below the caption. Sections alternate between bare mahogany and a solid surface #231812 band ruled top and bottom with 1px gold (55%) hairlines; heads are centred with § numbering and a fleuron. Features: 6 catalogue cards in 3 columns = 2 full rows (1 column below 900px), followed by the section's footnote. Steps are roman numerals I–III in framed squares. Testimonials: the featured figure with its † margin side-note, then the other two quotes as a 2-column row of the same 760px width. Stats are gold oldstyle numerals separated by hairlines, pricing follows the pricing recipe, and the CTA is an oxblood book cover with tooled borders and a gold-leaf button. ## Content Use realistic product copy (fictional brand) suited to: Universities, courses and online academies. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Use gold only for 1px rules, frames and small marks — never for big fills - Number sections with § and roman numerals; set Latin nav, labels and tabs in small caps, and give metadata a typewriter face - Use oxblood (secondary #8E2F2A) for the one important thing and green-lamp green (accent #7E9A72) only for positive marks - Keep body text in a book serif at 1.7+ line-height (Thai 1.9), except on catalogue cards, which use a 28px line grid - Back claims with gold superscript footnote markers and matching notes, and place pull quotes as † margin side-notes on screens ≥1260px ## Don't - No bright saturated colours, neon or gradients beyond a soft lamp glow - Don’t use sans-serif headings or rounded pill buttons (pill radius is only for avatars and switches) - Don’t over-decorate with clip-art crests, owls or quills - Bright, saturated or neon colour and big gold fills — gold is for lines and small marks - Sans-serif headings, pill-shaped buttons or chips, or large radii - Using the green accent as a main action colour — green is only for positive marks; oxblood is the important colour - Temple arches, Thai motifs or ❖ ornaments (that is Thai Modern Heritage) - Drop caps, bright paper and red kickers (that is the Magazine style) - Clip-art crests, owls, quills or fake parchment photos - Italic, small caps or letter-spacing on Thai text, and ruled lines that cut through Thai tone marks ## Stack notes One self-contained HTML file with a