Academia (Scholarly)

Also called: Dark Academia, Library Aesthetic, Old-World Scholarly

A lamp-lit library: mahogany and parchment, gold-leaf rules, classic Garamond, footnotes, roman numerals and library catalogue cards.

“Dark academia”Editorial & TypographicEra: Victorian libraries & Oxbridge colleges → 2020s “dark academia”SeriousNostalgicLuxuryCalm

Open full screen ↗

academia-scholarly / landingEN

academia-scholarly / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm2pxRadius md3pxRadius lg4pxRadius xl6pxDensity×1.1Display size×1Latin headingLatin bodyThai headingThai body

Colours · Dark

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

mahogany & parchmentgold-leaf hairlinesGaramond seriflibrary catalogue cardstypewriter call numbersroman numerals & §footnotes & side-noteslamp-lit glow

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

Not to be confused with

Thai Modern Heritage →Thai Modern Heritage uses temple arches, Prajam Yam motifs and temple red; Academia uses library cards, roman numerals, footnotes and leather-and-parchment browns with no cultural motifs.Editorial Grid / Magazine →Magazine is bright paper with drop caps, an asymmetric grid and a red kicker; Academia is dark mahogany with gold hairlines, catalogue cards and side-notes.Vintage Analog / Retro Film →Vintage Analog is about photographic grain, polaroids and faded colour; Academia is about books — serif type, ruled paper and gold tooling.

On mobile

Keep the mahogany ground and gold hairlines; lists become catalogue-card rows with a typewriter call number, the featured course is an oxblood book cover with a tooled gold frame, and side-notes fold back inline.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinEB Garamond · 500/600

The quick brown fox

Heading · ThaiTrirong · 500/600

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinCrimson Pro · 400/500/600

Clear words make shared decisions.

Body · ThaiTrirong · 400/500/600

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

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.

Colour palette

Light

Dark

Design tokens

Radius	`sm 2px · md 3px · lg 4px · xl 6px · pill 999px`
Border	`1px`
Shadow	`0 10px 30px rgba(10,5,2,0.35)`
Display	`clamp(2.8rem, 6.2vw, 5.4rem)`
Motion	`260ms cubic-bezier(.4,0,.2,1)`
Density	`×1.1`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Academia (Scholarly) (academia-scholarly) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is dark: add class="dark" to <html>.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: 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
 */
:root {
  --radius: 4px;
  --background: #F2E8D3;
  --foreground: #2A1A12;
  --card: #FAF4E6;
  --card-foreground: #2A1A12;
  --popover: #FAF4E6;
  --popover-foreground: #2A1A12;
  --primary: #6E2420;
  --primary-foreground: #F8EFDC;
  --secondary: #7D5F1C;
  --secondary-foreground: #FFF8EA;
  --muted: #E8DBBF;
  --muted-foreground: #6A5440;
  --accent: #E8DBBF;
  --accent-foreground: #2A1A12;
  --destructive: #A0261E;
  --border: #C4AE84;
  --input: #C4AE84;
  --ring: #6E2420;
  --chart-1: #6E2420;
  --chart-2: #A8862F;
  --chart-3: #2F4A35;
  --chart-4: #8C6E52;
  --chart-5: #C4AE84;
  --sidebar: #FAF4E6;
  --sidebar-foreground: #2A1A12;
  --sidebar-primary: #6E2420;
  --sidebar-primary-foreground: #F8EFDC;
  --sidebar-accent: #E8DBBF;
  --sidebar-accent-foreground: #2A1A12;
  --sidebar-border: #C4AE84;
  --sidebar-ring: #6E2420;
}

.dark {
  --background: #1A120E;
  --foreground: #EFE4CC;
  --card: #231812;
  --card-foreground: #EFE4CC;
  --popover: #231812;
  --popover-foreground: #EFE4CC;
  --primary: #C9A54E;
  --primary-foreground: #1A120E;
  --secondary: #8E2F2A;
  --secondary-foreground: #F5EBD6;
  --muted: #2D1F17;
  --muted-foreground: #BCA98A;
  --accent: #2D1F17;
  --accent-foreground: #EFE4CC;
  --destructive: #D9675E;
  --border: #5A4330;
  --input: #5A4330;
  --ring: #C9A54E;
  --chart-1: #C9A54E;
  --chart-2: #B5524A;
  --chart-3: #7E9A72;
  --chart-4: #D9C9A6;
  --chart-5: #8C6E52;
  --sidebar: #231812;
  --sidebar-foreground: #EFE4CC;
  --sidebar-primary: #C9A54E;
  --sidebar-primary-foreground: #1A120E;
  --sidebar-accent: #2D1F17;
  --sidebar-accent-foreground: #EFE4CC;
  --sidebar-border: #5A4330;
  --sidebar-ring: #C9A54E;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Academia (Scholarly) (academia-scholarly) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is dark: add class="dark" to <html>.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: 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
 */
@theme {
  --color-bg: #F2E8D3;
  --color-surface: #FAF4E6;
  --color-surface-2: #E8DBBF;
  --color-text: #2A1A12;
  --color-text-muted: #6A5440;
  --color-primary: #6E2420;
  --color-on-primary: #F8EFDC;
  --color-secondary: #7D5F1C;
  --color-on-secondary: #FFF8EA;
  --color-accent: #2F4A35;
  --color-border: #C4AE84;
  --color-success: #2F6B3A;
  --color-warning: #8A5A00;
  --color-danger: #A0261E;
  --color-chart-1: #6E2420;
  --color-chart-2: #A8862F;
  --color-chart-3: #2F4A35;
  --color-chart-4: #8C6E52;
  --color-chart-5: #C4AE84;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 6px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 0 rgba(0,0,0,0.25);
  --shadow-md: 0 10px 30px rgba(10,5,2,0.35);
  --shadow-lg: 0 24px 60px rgba(10,5,2,0.5);
  --font-heading: "EB Garamond", "Trirong", system-ui, sans-serif;
  --font-body: "Crimson Pro", "Trirong", system-ui, sans-serif;
  --font-mono: "Courier Prime", ui-monospace, "SFMono-Regular", Menlo, "Trirong", monospace;
}

.dark {
  --color-bg: #1A120E;
  --color-surface: #231812;
  --color-surface-2: #2D1F17;
  --color-text: #EFE4CC;
  --color-text-muted: #BCA98A;
  --color-primary: #C9A54E;
  --color-on-primary: #1A120E;
  --color-secondary: #8E2F2A;
  --color-on-secondary: #F5EBD6;
  --color-accent: #7E9A72;
  --color-border: #5A4330;
  --color-success: #8DB47E;
  --color-warning: #D9A441;
  --color-danger: #D9675E;
  --color-chart-1: #C9A54E;
  --color-chart-2: #B5524A;
  --color-chart-3: #7E9A72;
  --color-chart-4: #D9C9A6;
  --color-chart-5: #8C6E52;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Academia (Scholarly) (academia-scholarly). Default mode: dark. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.9098,
            0.8275
          ],
          "hex": "#f2e8d3"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9804,
            0.9569,
            0.902
          ],
          "hex": "#faf4e6"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9098,
            0.8588,
            0.749
          ],
          "hex": "#e8dbbf"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.102,
            0.0706
          ],
          "hex": "#2a1a12"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4157,
            0.3294,
            0.251
          ],
          "hex": "#6a5440"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4314,
            0.1412,
            0.1255
          ],
          "hex": "#6e2420"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9725,
            0.9373,
            0.8627
          ],
          "hex": "#f8efdc"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4902,
            0.3725,
            0.1098
          ],
          "hex": "#7d5f1c"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.9725,
            0.9176
          ],
          "hex": "#fff8ea"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1843,
            0.2902,
            0.2078
          ],
          "hex": "#2f4a35"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7686,
            0.6824,
            0.5176
          ],
          "hex": "#c4ae84"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1843,
            0.4196,
            0.2275
          ],
          "hex": "#2f6b3a"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5412,
            0.3529,
            0
          ],
          "hex": "#8a5a00"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6275,
            0.149,
            0.1176
          ],
          "hex": "#a0261e"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4314,
            0.1412,
            0.1255
          ],
          "hex": "#6e2420"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6588,
            0.5255,
            0.1843
          ],
          "hex": "#a8862f"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1843,
            0.2902,
            0.2078
          ],
          "hex": "#2f4a35"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.549,
            0.4314,
            0.3216
          ],
          "hex": "#8c6e52"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7686,
            0.6824,
            0.5176
          ],
          "hex": "#c4ae84"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.0706,
            0.0549
          ],
          "hex": "#1a120e"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1373,
            0.0941,
            0.0706
          ],
          "hex": "#231812"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1765,
            0.1216,
            0.0902
          ],
          "hex": "#2d1f17"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9373,
            0.8941,
            0.8
          ],
          "hex": "#efe4cc"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7373,
            0.6627,
            0.5412
          ],
          "hex": "#bca98a"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7882,
            0.6471,
            0.3059
          ],
          "hex": "#c9a54e"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.0706,
            0.0549
          ],
          "hex": "#1a120e"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5569,
            0.1843,
            0.1647
          ],
          "hex": "#8e2f2a"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9608,
            0.9216,
            0.8392
          ],
          "hex": "#f5ebd6"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4941,
            0.6039,
            0.4471
          ],
          "hex": "#7e9a72"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3529,
            0.2627,
            0.1882
          ],
          "hex": "#5a4330"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5529,
            0.7059,
            0.4941
          ],
          "hex": "#8db47e"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.851,
            0.6431,
            0.2549
          ],
          "hex": "#d9a441"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.851,
            0.4039,
            0.3686
          ],
          "hex": "#d9675e"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7882,
            0.6471,
            0.3059
          ],
          "hex": "#c9a54e"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7098,
            0.3216,
            0.2902
          ],
          "hex": "#b5524a"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4941,
            0.6039,
            0.4471
          ],
          "hex": "#7e9a72"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.851,
            0.7882,
            0.651
          ],
          "hex": "#d9c9a6"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.549,
            0.4314,
            0.3216
          ],
          "hex": "#8c6e52"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 2,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 3,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.25
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0392,
              0.0196,
              0.0078
            ],
            "hex": "#0a0502",
            "alpha": 0.35
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 10,
            "unit": "px"
          },
          "blur": {
            "value": 30,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0392,
              0.0196,
              0.0078
            ],
            "hex": "#0a0502",
            "alpha": 0.5
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 24,
            "unit": "px"
          },
          "blur": {
            "value": 60,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "EB Garamond",
        "Trirong",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Crimson Pro",
        "Trirong",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "Courier Prime",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Trirong",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 500
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 260,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.4,
      0,
      0.2,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.1
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 4
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!