diff --git a/src/components/templates/CategoryTemplate.tsx b/src/components/templates/CategoryTemplate.tsx
index 6abe5b9..05ecbeb 100644
--- a/src/components/templates/CategoryTemplate.tsx
+++ b/src/components/templates/CategoryTemplate.tsx
@@ -32,15 +32,17 @@ export const CategoryTemplate: FC<CategoryTemplateProps> = ({
 					<h2 id="definitions">
 						<Translation translationKey="definitions" />
 					</h2>
-					<ul class="subgridded">
+					<ul>
 						{page.body.content.items.map((item) => (
 							<li key={item.route}>
-								<div>
-									<a href={item.route}>
-										{item.code ? <code>{item.name}</code> : item.name}
-									</a>
+								<div class="flex">
+									<div class="min-w-[8rem]">
+										<a href={item.route}>
+											{item.code ? <code>{item.name}</code> : item.name}
+										</a>
+									</div>
+									<div>{item.oneliner}</div>
 								</div>
-								<div class="pl-4">{item.oneliner}</div>
 							</li>
 						))}
 					</ul>
diff --git a/src/components/templates/FuncTemplate.tsx b/src/components/templates/FuncTemplate.tsx
index cf72ff7..8ebc8ce 100644
--- a/src/components/templates/FuncTemplate.tsx
+++ b/src/components/templates/FuncTemplate.tsx
@@ -52,14 +52,14 @@ export const FuncTemplate: FC<FuncTemplateProps> = ({
 				switch (block.kind) {
 					case "html":
 						return (
-							<div class="my-4 text-gray-700">
+							<div class="text-gray-700">
 								<HtmlContent html={block.content} />
 							</div>
 						);
 					case "example":
 						// This will never reach for Typst v0.13.1 and v0.14.0-rc.1 documentations.
 						return (
-							<div class="my-6 bg-gray-50 p-4 rounded-md border border-gray-200">
+							<div>
 								{block.content.title}
 								<HtmlContent html={block.content.body} />
 							</div>
@@ -69,19 +69,14 @@ export const FuncTemplate: FC<FuncTemplateProps> = ({
 				}
 			})}
 
-			<h2 id="parameters" class="flex items-baseline gap-1">
-				<Translation translationKey="parameters" />
-				<Tooltip kind="parameters" />
+			<h2 id="parameters" class="flex">
+				<div class="flex items-baseline gap-1">
+					<Translation translationKey="parameters" />
+					<Tooltip kind="parameters" />
+				</div>
 			</h2>
-
-			<div class="mb-6">
-				<FunctionDefinition func={content} />
-			</div>
-
-			<div class="my-6">
-				<FunctionParameters params={content.params} />
-			</div>
-
+			<FunctionDefinition func={content} />
+			<FunctionParameters params={content.params} />
 			<ScopedDefinitions scope={content.scope} />
 		</BaseTemplate>
 	);
@@ -109,48 +104,47 @@ function ScopedDefinitions({
 	// the following heading levels will _not_ increase with the scope level.
 	return (
 		<div class="mt-8">
-			<h2 id={`${parentId}definitions`} class="flex items-baseline gap-1">
-				{parent ? (
-					// Currently, the scope has at most two levels.
-					// Therefore, it is sufficient to only annotate the direct `parent`.
-					<Translation translationKey="definitionsOf" name={parent.name} />
-				) : (
-					<Translation translationKey="definitions" />
-				)}
-				<Tooltip kind="definitions" />
+			<h2 id={`${parentId}definitions`} class="flex">
+				<div class="flex items-baseline gap-1">
+					{parent ? (
+						// Currently, the scope has at most two levels.
+						// Therefore, it is sufficient to only annotate the direct `parent`.
+						<Translation translationKey="definitionsOf" name={parent.name} />
+					) : (
+						<Translation translationKey="definitions" />
+					)}
+					<Tooltip kind="definitions" />
+				</div>
 			</h2>
 
 			{scope.map((method, _index) => {
 				const methodId = `${parentId}definitions-${method.name}`;
 
 				return (
-					<div
-						key={method.name}
-						class="mb-8 pb-6 border-b border-gray-100 last:border-0"
-					>
-						<h3 id={methodId} class="method-head mb-3 flex items-center gap-2">
-							<code
-								class="text-base font-medium"
-								style={
-									normalizeDeprecation(method) !== null
-										? { textDecoration: "line-through" }
-										: undefined
-								}
-							>
-								{method.name}
-							</code>
-
-							<small class="flex items-center">
-								{method.element && <Tooltip kind="element" />}
-								{method.contextual && <Tooltip kind="contextual" />}
-							</small>
+					<div key={method.name}>
+						<h3 id={methodId} class="flex">
+							<div class="flex items-center gap-2">
+								<code
+									class="text-base font-medium"
+									style={
+										normalizeDeprecation(method) !== null
+											? { textDecoration: "line-through" }
+											: undefined
+									}
+								>
+									{method.name}
+								</code>
+
+								<small class="flex items-center">
+									{method.element && <Tooltip kind="element" />}
+									{method.contextual && <Tooltip kind="contextual" />}
+								</small>
+							</div>
 						</h3>
 
 						{<DeprecationWarning item={method} level="scoped" />}
 
-						<div class="pl-2">
-							<FunctionDisplay func={method} prefix={methodId} />
-						</div>
+						<FunctionDisplay func={method} prefix={methodId} />
 
 						<ScopedDefinitions
 							scope={method.scope}
diff --git a/src/components/templates/GroupTemplate.tsx b/src/components/templates/GroupTemplate.tsx
index 2a27544..a9aa718 100644
--- a/src/components/templates/GroupTemplate.tsx
+++ b/src/components/templates/GroupTemplate.tsx
@@ -37,11 +37,13 @@ export const GroupTemplate: FC<GroupTemplateProps> = ({
 
 					{content.functions.map((method, _index) => (
 						<div key={method.name}>
-							<h3 id={`functions-${method.name}`} class="method-head">
-								<code class="text-base font-medium">{method.name}</code>
-								<div class="flex flex-wrap items-center gap-2 text-sm">
-									{method.element && <Tooltip kind="element" />}
-									{method.contextual && <Tooltip kind="contextual" />}
+							<h3 id={`functions-${method.name}`} class="flex">
+								<div class="flex items-center gap-2">
+									<code class="text-base font-medium">{method.name}</code>
+									<div class="flex flex-wrap items-center gap-2 text-sm">
+										{method.element && <Tooltip kind="element" />}
+										{method.contextual && <Tooltip kind="contextual" />}
+									</div>
 								</div>
 							</h3>
 							<FunctionDisplay
diff --git a/src/components/templates/TypeTemplate.tsx b/src/components/templates/TypeTemplate.tsx
index 7249a80..8c07408 100644
--- a/src/components/templates/TypeTemplate.tsx
+++ b/src/components/templates/TypeTemplate.tsx
@@ -37,9 +37,11 @@ export const TypeTemplate: FC<TypeTemplateProps> = ({
 
 			{content.constructor && (
 				<>
-					<h2 id="constructor" class="flex items-center gap-1">
-						<Translation translationKey="constructor" />
-						<Tooltip kind="parameters" />
+					<h2 id="constructor" class="flex">
+						<div class="flex items-center gap-1">
+							<Translation translationKey="constructor" />
+							<Tooltip kind="parameters" />
+						</div>
 					</h2>
 
 					<FunctionDisplay
@@ -52,21 +54,22 @@ export const TypeTemplate: FC<TypeTemplateProps> = ({
 
 			{content.scope.length > 0 && (
 				<>
-					<h2 id="definitions" class="flex items-center gap-1">
-						<Translation translationKey="definitions" />
-						<Tooltip kind="definitions" />
+					<h2 id="definitions" class="flex">
+						<div class="flex items-center gap-1">
+							<Translation translationKey="definitions" />
+							<Tooltip kind="definitions" />
+						</div>
 					</h2>
 
 					{content.scope.map((method, _index) => (
 						<div key={method.name}>
-							<h3
-								id={`definitions-${method.name}`}
-								class="method-head flex items-center gap-2 mb-3"
-							>
-								<code class="text-base font-medium">{method.name}</code>
-								<div class="flex flex-wrap items-center gap-2">
-									{method.element && <Tooltip kind="element" />}
-									{method.contextual && <Tooltip kind="contextual" />}
+							<h3 id={`definitions-${method.name}`} class="flex">
+								<div class="flex items-center gap-2">
+									<code class="text-base font-medium">{method.name}</code>
+									<div class="flex flex-wrap items-center gap-2">
+										{method.element && <Tooltip kind="element" />}
+										{method.contextual && <Tooltip kind="contextual" />}
+									</div>
 								</div>
 							</h3>
 
diff --git a/src/components/ui/FunctionDefinition.tsx b/src/components/ui/FunctionDefinition.tsx
index dafacd4..734f874 100644
--- a/src/components/ui/FunctionDefinition.tsx
+++ b/src/components/ui/FunctionDefinition.tsx
@@ -2,10 +2,25 @@ import type { FC } from "hono/jsx";
 import { basePath } from "../../metadata";
 import type { Func } from "../../types/model";
 import { joinPath } from "../../utils/path";
-import { genPath } from "./genPath";
 import { TypeIcon } from "./TypeIcon";
 import { buildParamId, type2href } from "./type2href";
 
+/**
+ * Returns the decorated function name with `.typ-func` and `.typ-punct` spans.
+ *
+ * For Typst v0.14.0, the path is either empty or has only one item.
+ */
+const DecoratedFuncName: FC<{ func: Func }> = ({ func }) => {
+	const funcName = func.self ? "self" : func.path.join(".");
+	return (
+		<>
+			<span>{funcName}</span>
+			{funcName !== "" && <span class="typ-punct">.</span>}
+			<span class="typ-func">{func.name}</span>
+		</>
+	);
+};
+
 type FunctionDefinitionProps = {
 	func: Func;
 	/**
@@ -21,26 +36,22 @@ export const FunctionDefinition: FC<FunctionDefinitionProps> = ({
 	prefix = undefined,
 }) => {
 	return (
-		<div class="bg-gray-50 p-4 rounded-md border border-gray-100 overflow-x-auto">
-			<div class="code code-definition font-mono text-base">
-				<span class="text-gray-500">{func.self ? "self." : genPath(func)}</span>
-				<span class="typ-func font-semibold text-blue-500">{func.name}</span>
-				<span class="text-gray-700">(</span>
-				<div class="arguments pl-4 md:pl-6 flex flex-col">
+		<pre>
+			<code>
+				<DecoratedFuncName func={func} />
+				<span class="typ-punct">(</span>
+				<span class="arguments pl-4 md:pl-6 flex flex-col">
 					{func.params.map((param, index) => (
-						<div
+						<span
 							key={param.name}
 							class="overview-param flex flex-row items-center py-0.5"
 						>
 							{!param.positional && (
-								<div class="flex-shrink-0">
-									<a
-										href={`#${buildParamId(param.name, prefix)}`}
-										class="text-gray-800 hover:text-blue-500 transition-colors mr-1"
-									>
-										<span class="font-medium">{param.name}</span>
-										<span class="text-gray-500">:</span>
+								<div class="flex-shrink-0 mr-1">
+									<a href={`#${buildParamId(param.name, prefix)}`}>
+										<span>{param.name}</span>
 									</a>
+									<span class="typ-punct">:</span>
 								</div>
 							)}
 							<div class="flex flex-row flex-wrap gap-1">
@@ -58,38 +69,34 @@ export const FunctionDefinition: FC<FunctionDefinitionProps> = ({
 								})}
 							</div>
 							{index < func.params.length - 1 && (
-								<span class="text-gray-500 ml-1">,</span>
+								<span class="typ-punct">,</span>
 							)}
-						</div>
+						</span>
 					))}
-				</div>
-				<span class="text-gray-700">)</span>
+				</span>
+
+				<span class="typ-punct">)</span>
 
 				{func.returns.length > 0 && (
 					<>
-						<span class="text-gray-500 mx-1">-&gt;</span>
-						<div class="inline-flex flex-wrap gap-1">
-							{func.returns.map((ret, i) => {
+						<span class="typ-op mx-1">-&gt;</span>
+						<div class="inline-flex flex-wrap gap-1 py-0.5">
+							{func.returns.map((ret, _) => {
 								const href = type2href(ret);
 								return (
-									<>
-										<TypeIcon
-											key={ret}
-											type={ret}
-											href={
-												href ? joinPath(basePath, "reference", href) : undefined
-											}
-										/>
-										{i < func.returns.length - 1 && (
-											<span class="text-gray-500 mx-1">,</span>
-										)}
-									</>
+									<TypeIcon
+										key={ret}
+										type={ret}
+										href={
+											href ? joinPath(basePath, "reference", href) : undefined
+										}
+									/>
 								);
 							})}
 						</div>
 					</>
 				)}
-			</div>
-		</div>
+			</code>
+		</pre>
 	);
 };
diff --git a/src/components/ui/FunctionDisplay.tsx b/src/components/ui/FunctionDisplay.tsx
index ef5c785..6c1d7ca 100644
--- a/src/components/ui/FunctionDisplay.tsx
+++ b/src/components/ui/FunctionDisplay.tsx
@@ -32,7 +32,7 @@ export const FunctionDisplay: FC<FunctionDisplayProps> = ({
 					case "example":
 						return isExampleFolding ? (
 							<details class="folding-example group">
-								<summary class="flex items-center gap-1 text-sm font-medium text-blue-600 cursor-pointer hover:text-blue-800 marker:hidden">
+								<summary class="flex items-center gap-1 text-sm font-medium cursor-pointer text-gray-600 hover:text-gray-800 transition-colors marker:hidden">
 									<div class="w-4 h-4 text-gray-400 transform transition-transform duration-200 group-open:rotate-90">
 										<ChevronRightIcon />
 									</div>
@@ -41,27 +41,19 @@ export const FunctionDisplay: FC<FunctionDisplayProps> = ({
 										title={block.content.title}
 									/>
 								</summary>
-								<div class="mt-2 bg-white p-3 rounded-md border border-gray-200 text-sm">
+								<div>
 									<HtmlContent html={block.content.body} />
 								</div>
 							</details>
 						) : (
-							<div class="bg-gray-50 p-4 rounded-md border border-gray-200">
-								<HtmlContent html={block.content.body} />
-							</div>
+							<HtmlContent html={block.content.body} />
 						);
 					default:
 						return null;
 				}
 			})}
-
-			<div class="my-4">
-				<FunctionDefinition func={func} prefix={prefix} />
-			</div>
-
-			<div class="my-4">
-				<FunctionParameters params={func.params} prefix={prefix} />
-			</div>
+			<FunctionDefinition func={func} prefix={prefix} />
+			<FunctionParameters params={func.params} prefix={prefix} />
 		</>
 	);
 };
diff --git a/src/components/ui/FunctionParameters.tsx b/src/components/ui/FunctionParameters.tsx
index 6b43c64..0cc15c4 100644
--- a/src/components/ui/FunctionParameters.tsx
+++ b/src/components/ui/FunctionParameters.tsx
@@ -31,35 +31,33 @@ export const FunctionParameters: FC<FunctionParametersProps> = ({
 	return (
 		<div class="space-y-6">
 			{params.map((param, _index) => (
-				<div
-					key={param.name}
-					class="bg-gray-50 rounded-md p-4 border border-gray-100"
-				>
-					<Heading
-						id={buildParamId(param.name, prefix)}
-						class="flex flex-wrap items-center gap-2 mb-3"
-					>
-						<code class="text-base font-medium">{param.name}</code>
-						<div class="flex flex-wrap items-center gap-2 text-sm">
-							<div class="flex flex-wrap gap-1">
-								{param.types.map((t) => {
-									const href = type2href(t);
-									return (
-										<TypeIcon
-											key={t}
-											type={t}
-											href={
-												href ? joinPath(basePath, "reference", href) : undefined
-											}
-										/>
-									);
-								})}
-							</div>
+				<div>
+					<Heading id={buildParamId(param.name, prefix)} class="flex">
+						<div class="flex flex-wrap items-center gap-2">
+							<code class="text-base font-medium">{param.name}</code>
+							<div class="flex flex-wrap items-center gap-2 text-sm">
+								<div class="flex flex-wrap gap-1 font-normal">
+									{param.types.map((t) => {
+										const href = type2href(t);
+										return (
+											<TypeIcon
+												key={t}
+												type={t}
+												href={
+													href
+														? joinPath(basePath, "reference", href)
+														: undefined
+												}
+											/>
+										);
+									})}
+								</div>
 
-							{param.required && <Tooltip kind="required" />}
-							{param.positional && <Tooltip kind="positional" />}
-							{param.variadic && <Tooltip kind="variadic" />}
-							{param.settable && <Tooltip kind="settable" />}
+								{param.required && <Tooltip kind="required" />}
+								{param.positional && <Tooltip kind="positional" />}
+								{param.variadic && <Tooltip kind="variadic" />}
+								{param.settable && <Tooltip kind="settable" />}
+							</div>
 						</div>
 					</Heading>
 
@@ -74,7 +72,7 @@ export const FunctionParameters: FC<FunctionParametersProps> = ({
 							case "example":
 								return (
 									<details class="folding-example group">
-										<summary class="flex items-center gap-1 text-sm font-medium text-blue-600 cursor-pointer hover:text-blue-800 marker:hidden">
+										<summary class="flex my-4 items-center gap-1 text-sm font-medium cursor-pointer text-gray-600 hover:text-gray-800 transition-colors marker:hidden">
 											<div class="w-4 h-4 text-gray-400 transform transition-transform duration-200 group-open:rotate-90">
 												<ChevronRightIcon />
 											</div>
@@ -83,7 +81,7 @@ export const FunctionParameters: FC<FunctionParametersProps> = ({
 												title={block.content.title}
 											/>
 										</summary>
-										<div class="mt-2 bg-white p-3 rounded-md border border-gray-200 text-sm">
+										<div>
 											<HtmlContent html={block.content.body} />
 										</div>
 									</details>
@@ -95,24 +93,24 @@ export const FunctionParameters: FC<FunctionParametersProps> = ({
 
 					{param.strings.length > 0 && (
 						<details
-							class="my-4 folding-example group"
+							class="folding-example group"
 							// The list of strings can be very long. For example, `page.paper` has 100+ possibilities.
 							open={param.strings.length <= 5}
 						>
-							<summary class="flex items-center gap-1 text-sm font-medium text-blue-600 cursor-pointer hover:text-blue-800 marker:hidden">
+							<summary class="flex my-4 items-center gap-1 text-sm font-medium cursor-pointer text-gray-600 hover:text-gray-800 transition-colors marker:hidden">
 								<div class="w-4 h-4 text-gray-400 transform transition-transform duration-200 group-open:rotate-90">
 									<ChevronRightIcon />
 								</div>
 								<Translation translationKey="stringValues" />
 							</summary>
-							<ul class="type-args space-y-2">
+							<ul>
 								{param.strings.map((string) => (
 									<li key={string.string}>
-										<div class="break-box">
-											<div class="mb-1">
-												<code class="text-gray-800">{string.string}</code>
+										<div>
+											<div>
+												<code>{string.string}</code>
 											</div>
-											<div class="text-sm text-gray-700">
+											<div>
 												<HtmlContent html={string.details} />
 											</div>
 										</div>
@@ -123,14 +121,10 @@ export const FunctionParameters: FC<FunctionParametersProps> = ({
 					)}
 
 					{param.default && (
-						<p class="mt-5 text-sm">
-							<span class="font-medium">
-								<Translation translationKey="defaultValue" />
-							</span>{" "}
-							<span class="text-gray-700">
-								<HtmlContent html={param.default} />
-							</span>
-						</p>
+						<div class="flex flex-wrap items-center gap-2">
+							<Translation translationKey="defaultValue" />
+							<HtmlContent html={param.default} />
+						</div>
 					)}
 				</div>
 			))}
diff --git a/src/components/ui/genPath.ts b/src/components/ui/genPath.ts
deleted file mode 100644
index 1b8493e..0000000
--- a/src/components/ui/genPath.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { Func } from "../../types/model";
-
-/**
- * Concatenates path segments.
- *
- * @param item - A Func object
- * @returns - The concatenated path string
- */
-export const genPath = (item: Func): string => {
-	return item.path.map((s) => `${s}.`).join("");
-};
diff --git a/src/globals.css b/src/globals.css
index 2954e11..2b0f9c1 100644
--- a/src/globals.css
+++ b/src/globals.css
@@ -116,71 +116,71 @@ cf.
 - crates/typst-syntax/src/highlight.rs
 - crates/typst-library/src/text/raw.rs
 */
-pre code span.typ-comment {
+code span.typ-comment {
 	color: #8a8a8a;
 }
-pre code span.typ-escape {
+code span.typ-escape {
 	color: #1d6c76;
 }
-pre code span.typ-strong {
+code span.typ-strong {
 	font-weight: bold;
 }
-pre code span.typ-emph {
+code span.typ-emph {
 	font-style: italic;
 }
-pre code span.typ-link {
+code span.typ-link {
 	text-decoration: underline;
 	color: #1d6c76;
 }
-pre code span.typ-raw {
+code span.typ-raw {
 	color: #818181;
 }
-pre code span.typ-label {
+code span.typ-label {
 	color: #1d6c76;
 }
-pre code span.typ-ref {
+code span.typ-ref {
 	color: #1d6c76;
 }
-pre code span.typ-heading {
+code span.typ-heading {
 	color: #4b69c6;
 	font-weight: bold;
 	text-decoration: underline;
 }
-pre code span.typ-marker {
+code span.typ-marker {
 	color: #8b41b1;
 }
-pre code span.typ-term {
+code span.typ-term {
 	color: #8b41b1;
 	font-weight: bold;
 }
-pre code span.typ-math-delim {
+code span.typ-math-delim {
 	color: #298e0d;
 }
-pre code span.typ-math-op {
+code span.typ-math-op {
 	color: #1d6c76;
 }
-pre code span.typ-key {
+code span.typ-key {
 	color: #d73a49;
 }
-pre code span.typ-num {
+code span.typ-num {
 	color: #b60157;
 }
-pre code span.typ-str {
+code span.typ-str {
 	color: #298e0d;
 }
-pre code span.typ-func {
+code span.typ-func {
 	color: #4b69c6;
 }
-pre code span.typ-pol {
+code span.typ-pol {
 	color: #8b41b1;
 }
-pre code span.typ-punct {
+code span.typ-punct {
 	color: #6b7280;
 }
-pre code span.typ-op {
+code span.typ-op {
 	color: #d73a49;
 }
-pre code span.typ-error {
+code span.typ-error {
 	background: #d73a49;
 	color: #ffffff;
 	padding: 0 0.12rem;