alice.pds.demo.boltless.dev
This repository has no description
web: move off-scale font sizes onto the type scale
every non-base font size was a raw tailwind utility, so the design system's
scale was documented in Typography.svelte and app.css but only actually used by
Typography itself. the raw sizes now map onto the tokens:
text-xs -> text-paragraph-small (12px, exact)
text-base -> text-paragraph-large (16px, exact)
text-xl -> text-heading-4 (20px, exact)
text-2xl -> text-heading-3 (24px, exact)
text-3xl -> text-heading-2 (30px, exact)
font-mono text-xs -> text-monospace-small
text-sm is left alone: it is 14px, which is the base body size, and the base
size is out of scope.
text-lg (18px) is not on the scale, so each one snapped by hierarchy: the
subsection h2s in repo/new and the settings tabs go down to paragraph-large so
they stay below their paragraph-large h1s, while the profile display name and
the repo title go up to heading-4 so they stay above the body copy under them.
the heading tokens also carry a weight, so anything that was rendering at 400
keeps an explicit font-normal — the marketing lede, the login tagline, the issue
title and the repo title row. adopting the heading weights there is a design
call, not a refactor, so it's left for later.
verified computed sizes and weights are unchanged on the marketing home, login,
repo and issues pages, and read the storybook renders for the primitives.
Signed-off-by: eti <eti@eti.tf>
author
eti
committer
dawn
date
(Jul 31, 2026, 10:57 PM +0300)
commit
5899ddb5
5899ddb5540e2ab6c478eb9b5668007b474933fd
parent
4293a321
4293a32194a6768c4e009d868d804d932f334768
change-id
qpquksum
qpquksumnvtptswoznvqmprlzswzplsz
+79
-59
+4
-4
web/src/lib/components/home/MarketingHome.svelte
+4
-4
web/src/lib/components/home/MarketingHome.svelte
···
14
14
15
15
{#snippet marketingButton(label: string, showArrow: boolean, className: string)}
16
16
<button
17
-
class="inline-flex cursor-pointer items-center justify-center gap-2 rounded border border-border-success bg-background-success-emphasis px-4 py-2 text-base font-medium text-foreground-on-emphasis hover:bg-background-success-emphasis-hover {className}"
17
+
class="inline-flex cursor-pointer items-center justify-center gap-2 rounded border border-border-success bg-background-success-emphasis px-4 py-2 text-paragraph-large font-medium text-foreground-on-emphasis hover:bg-background-success-emphasis-hover {className}"
18
18
type="submit"
19
19
>
20
20
{label}
···
39
39
name="id"
40
40
required
41
41
placeholder="Enter your email"
42
-
class="min-w-0 flex-1 rounded border border-border-strong bg-background-default px-3 py-2 text-base text-foreground-default placeholder:text-foreground-placeholder focus:border-foreground-subtle focus:outline-none"
42
+
class="min-w-0 flex-1 rounded border border-border-strong bg-background-default px-3 py-2 text-paragraph-large text-foreground-default placeholder:text-foreground-placeholder focus:border-foreground-subtle focus:outline-none"
43
43
/>
44
44
{@render marketingButton(label, showArrow, buttonClass)}
45
45
</form>
···
53
53
tightly-knit<br />social coding.
54
54
</h1>
55
55
56
-
<div class="max-w-2xl space-y-6 text-xl leading-8 text-foreground-default">
56
+
<div class="max-w-2xl space-y-6 text-heading-4 leading-8 font-normal text-foreground-default">
57
57
<p>The next-generation social coding platform.</p>
58
58
<p>
59
59
We envision a place where developers have ownership of their code, communities can freely
···
90
90
<h2 class="text-5xl font-bold tracking-[-0.04em] text-foreground-default md:text-6xl">
91
91
Stay in the loop
92
92
</h2>
93
-
<p class="mt-6 max-w-2xl text-xl leading-8 text-foreground-muted">
93
+
<p class="mt-6 max-w-2xl text-heading-4 leading-8 font-normal text-foreground-muted">
94
94
We've got a newsletter. Punch in your email to stay updated on what we're shipping at Tangled.
95
95
</p>
96
96
{@render signupForm(
+3
-1
web/src/lib/components/profile/ActivityStub.svelte
+3
-1
web/src/lib/components/profile/ActivityStub.svelte
+3
-1
web/src/lib/components/profile/FollowButton.svelte
+3
-1
web/src/lib/components/profile/FollowButton.svelte
···
93
93
<span>{following ? "Unfollow" : "Follow"}</span>
94
94
</Button>
95
95
{#if relation.failed}
96
-
<p class="mt-1 text-xs text-foreground-danger">Something went wrong. Try again.</p>
96
+
<p class="mt-1 text-paragraph-small text-foreground-danger">
97
+
Something went wrong. Try again.
98
+
</p>
97
99
{/if}
98
100
</div>
99
101
{/if}
+2
-2
web/src/lib/components/profile/ProfileCard.svelte
+2
-2
web/src/lib/components/profile/ProfileCard.svelte
···
53
53
<div class="flex flex-row flex-nowrap items-center gap-2">
54
54
<h1
55
55
title={identity.handle}
56
-
class="overflow-hidden text-lg font-bold text-ellipsis whitespace-nowrap"
56
+
class="overflow-hidden text-heading-4 font-bold text-ellipsis whitespace-nowrap"
57
57
>
58
58
{identity.handle}
59
59
</h1>
···
79
79
{:else}
80
80
<div class="space-y-2 text-sm">
81
81
{#if shown?.description}
82
-
<p class="pb-4 text-base md:pb-2">{shown.description}</p>
82
+
<p class="pb-4 text-paragraph-large md:pb-2">{shown.description}</p>
83
83
{/if}
84
84
85
85
<div class="hidden md:block">
+1
-1
web/src/lib/components/profile/ProfileEditForm.svelte
+1
-1
web/src/lib/components/profile/ProfileEditForm.svelte
+1
-1
web/src/lib/components/profile/StringCardContent.svelte
+1
-1
web/src/lib/components/profile/StringCardContent.svelte
···
23
23
{/if}
24
24
25
25
<div
26
-
class="mt-auto flex flex-wrap items-center gap-4 pt-2 font-mono text-xs text-foreground-subtle"
26
+
class="mt-auto flex flex-wrap items-center gap-4 pt-2 font-mono text-monospace-small text-foreground-subtle"
27
27
>
28
28
<span class="shrink-0"
29
29
>{entry.lines} line{entry.lines === 1 ? "" : "s"} · {compactRelativeTime(
+1
-1
web/src/lib/components/profile/tabs/OverviewTab.svelte
+1
-1
web/src/lib/components/profile/tabs/OverviewTab.svelte
+1
-1
web/src/lib/components/repo/BranchList.svelte
+1
-1
web/src/lib/components/repo/BranchList.svelte
···
20
20
21
21
<div class="flex flex-col gap-1">
22
22
{#each branches as branch (branch.name)}
23
-
<div class="flex items-center justify-between overflow-hidden text-base">
23
+
<div class="flex items-center justify-between overflow-hidden text-paragraph-large">
24
24
<div class="flex min-w-0 flex-1 items-center gap-2">
25
25
<a
26
26
href={resolve(`${base}/tree/${encodeURIComponent(branch.name)}` as "/")}
+5
-3
web/src/lib/components/repo/CloneDropdown.svelte
+5
-3
web/src/lib/components/repo/CloneDropdown.svelte
···
74
74
<div class="flex items-center justify-between">
75
75
<h3 class="text-sm font-medium text-foreground-default">Clone this repository</h3>
76
76
{#if repo.repoDid}
77
-
<Checkbox bind:checked={permalink} class="text-xs text-foreground-muted">
77
+
<Checkbox bind:checked={permalink} class="text-paragraph-small text-foreground-muted">
78
78
Use permalink
79
79
</Checkbox>
80
80
{/if}
···
83
83
{#each urls as entry (entry.label)}
84
84
{@const value = permalink && entry.perma ? entry.perma : entry.handle}
85
85
<div class="mt-4">
86
-
<span class="mb-1 block text-xs font-medium text-foreground-muted">{entry.label}</span>
86
+
<span class="mb-1 block text-paragraph-small font-medium text-foreground-muted"
87
+
>{entry.label}</span
88
+
>
87
89
<div
88
90
class="flex items-stretch divide-x divide-border-default rounded border border-border-default"
89
91
>
···
108
110
</div>
109
111
{/each}
110
112
111
-
<p class="mt-2 text-xs text-foreground-subtle">
113
+
<p class="mt-2 text-paragraph-small text-foreground-subtle">
112
114
For self-hosted knots, clone URLs may differ based on your setup.
113
115
</p>
114
116
+1
-1
web/src/lib/components/repo/CommitList.svelte
+1
-1
web/src/lib/components/repo/CommitList.svelte
···
24
24
<div class="flex items-start gap-1">
25
25
<a
26
26
href={resolve(`${base}/commit/${commit.hash}` as "/")}
27
-
class="text-base text-foreground-default no-underline hover:underline"
27
+
class="text-paragraph-large text-foreground-default no-underline hover:underline"
28
28
>
29
29
{commit.subject}
30
30
</a>
+1
-1
web/src/lib/components/repo/EmptyRepo.svelte
+1
-1
web/src/lib/components/repo/EmptyRepo.svelte
···
62
62
63
63
{#snippet bullet(n: number)}
64
64
<span
65
-
class="mr-2 inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-background-inset align-middle font-mono text-xs"
65
+
class="mr-2 inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-background-inset align-middle font-mono text-monospace-small"
66
66
>
67
67
{n}
68
68
</span>
+1
-1
web/src/lib/components/repo/LanguageBar.svelte
+1
-1
web/src/lib/components/repo/LanguageBar.svelte
···
29
29
class="flex flex-wrap items-center justify-center gap-4 border-b border-border-default px-4 py-2"
30
30
>
31
31
{#each languages as language (language.name)}
32
-
<div class="flex items-center gap-2 text-xs">
32
+
<div class="flex items-center gap-2 text-paragraph-small">
33
33
<span
34
34
class="inline-block size-2.5 shrink-0 rounded-full"
35
35
style={`background-color: ${colorFor(language.name)}`}
+1
-1
web/src/lib/components/repo/LastCommitPanel.svelte
+1
-1
web/src/lib/components/repo/LastCommitPanel.svelte
···
33
33
</div>
34
34
<a
35
35
{href}
36
-
class="w-fit rounded bg-background-inset px-2 py-1 font-mono text-xs text-foreground-muted no-underline hover:underline"
36
+
class="w-fit rounded bg-background-inset px-2 py-1 font-mono text-monospace-small text-foreground-muted no-underline hover:underline"
37
37
>
38
38
{commit.shortHash}
39
39
</a>
+1
-1
web/src/lib/components/repo/RepoCardContent.svelte
+1
-1
web/src/lib/components/repo/RepoCardContent.svelte
···
53
53
54
54
{#if repo.language !== undefined || stats.length > 0}
55
55
<div
56
-
class="mt-auto flex flex-wrap items-center gap-4 pt-2 font-mono text-xs text-foreground-subtle"
56
+
class="mt-auto flex flex-wrap items-center gap-4 pt-2 font-mono text-monospace-small text-foreground-subtle"
57
57
>
58
58
{#if repo.language}
59
59
<span class="flex items-center gap-2">
+1
-1
web/src/lib/components/repo/RepoHeader.svelte
+1
-1
web/src/lib/components/repo/RepoHeader.svelte
···
28
28
<section class="mb-2 px-4 py-2">
29
29
<div class="mb-2 flex flex-col items-start justify-between gap-4 sm:flex-row">
30
30
<div class="flex min-w-0 flex-col gap-2">
31
-
<div class="flex flex-wrap items-center gap-2 text-lg">
31
+
<div class="flex flex-wrap items-center gap-2 text-heading-4 font-normal">
32
32
<a
33
33
href={resolve(`/${repo.ownerHandle}` as "/")}
34
34
class="flex items-center gap-2 text-foreground-default no-underline hover:underline"
+3
-1
web/src/lib/components/repo/StarButton.svelte
+3
-1
web/src/lib/components/repo/StarButton.svelte
+1
-1
web/src/lib/components/repo/TagList.svelte
+1
-1
web/src/lib/components/repo/TagList.svelte
···
18
18
<div class="flex flex-col gap-1">
19
19
{#each tags as tag, index (tag.name)}
20
20
<div>
21
-
<div class="flex items-center gap-2 text-base">
21
+
<div class="flex items-center gap-2 text-paragraph-large">
22
22
<a
23
23
href={resolve(`${base}/tags/${encodeURIComponent(tag.name)}` as "/")}
24
24
class="truncate text-foreground-default no-underline hover:underline"
+1
-1
web/src/lib/components/repo/issues/IssueHeader.svelte
+1
-1
web/src/lib/components/repo/issues/IssueHeader.svelte
+1
-1
web/src/lib/components/settings/tabs/EmailsTab.svelte
+1
-1
web/src/lib/components/settings/tabs/EmailsTab.svelte
···
1
1
<div>
2
-
<h2 class="text-lg font-medium text-foreground-default">Email addresses</h2>
2
+
<h2 class="text-paragraph-large font-medium text-foreground-default">Email addresses</h2>
3
3
<p class="text-sm text-foreground-subtle">
4
4
Commits authored using emails listed here will be associated with your Tangled profile.
5
5
</p>
+1
-1
web/src/lib/components/settings/tabs/KeysTab.svelte
+1
-1
web/src/lib/components/settings/tabs/KeysTab.svelte
···
124
124
<div class="flex flex-col gap-4">
125
125
<div>
126
126
<div class="flex items-center justify-between gap-4">
127
-
<h2 class="text-lg font-medium text-foreground-default">SSH keys</h2>
127
+
<h2 class="text-paragraph-large font-medium text-foreground-default">SSH keys</h2>
128
128
<Button variant="primary" icon={Plus} popovertarget="add-key-popover">Add</Button>
129
129
</div>
130
130
<p class="pt-4 text-sm text-foreground-subtle">
+1
-1
web/src/lib/components/settings/tabs/KnotsTab.svelte
+1
-1
web/src/lib/components/settings/tabs/KnotsTab.svelte
···
1
1
<div>
2
-
<h2 class="text-lg font-medium text-foreground-default">Knots</h2>
2
+
<h2 class="text-paragraph-large font-medium text-foreground-default">Knots</h2>
3
3
<p class="text-sm text-foreground-subtle">
4
4
Knots are lightweight headless servers that enable users to host Git repositories with ease.
5
5
When creating a repository, you can choose a knot to store it on.
+1
-1
web/src/lib/components/settings/tabs/NotificationsTab.svelte
+1
-1
web/src/lib/components/settings/tabs/NotificationsTab.svelte
···
1
1
<div>
2
-
<h2 class="text-lg font-medium text-foreground-default">Notification preferences</h2>
2
+
<h2 class="text-paragraph-large font-medium text-foreground-default">Notification preferences</h2>
3
3
<p class="text-sm text-foreground-subtle">
4
4
Choose which notifications you want to receive when activity happens on your repositories and
5
5
profile.
+1
-1
web/src/lib/components/settings/tabs/ProfileTab.svelte
+1
-1
web/src/lib/components/settings/tabs/ProfileTab.svelte
···
27
27
</script>
28
28
29
29
<div>
30
-
<h2 class="text-lg font-medium text-foreground-default">Profile</h2>
30
+
<h2 class="text-paragraph-large font-medium text-foreground-default">Profile</h2>
31
31
<p class="pb-2 text-sm text-foreground-subtle">
32
32
Your account information from your AT Protocol identity.
33
33
</p>
+1
-1
web/src/lib/components/settings/tabs/SitesTab.svelte
+1
-1
web/src/lib/components/settings/tabs/SitesTab.svelte
+1
-1
web/src/lib/components/settings/tabs/SpindlesTab.svelte
+1
-1
web/src/lib/components/settings/tabs/SpindlesTab.svelte
···
1
1
<div>
2
-
<h2 class="text-lg font-medium text-foreground-default">Spindles</h2>
2
+
<h2 class="text-paragraph-large font-medium text-foreground-default">Spindles</h2>
3
3
<p class="text-sm text-foreground-subtle">
4
4
Spindles are servers that run continuous integration pipelines for your repositories.
5
5
</p>
+1
-1
web/src/lib/components/ui/Button.svelte
+1
-1
web/src/lib/components/ui/Button.svelte
+1
-1
web/src/lib/components/ui/ButtonCard.svelte
+1
-1
web/src/lib/components/ui/ButtonCard.svelte
+1
-1
web/src/lib/components/ui/EmptyState.svelte
+1
-1
web/src/lib/components/ui/EmptyState.svelte
···
10
10
</script>
11
11
12
12
<div
13
-
class="flex items-center justify-center rounded-sm border border-border-default p-12 text-base text-foreground-subtle italic"
13
+
class="flex items-center justify-center rounded-sm border border-border-default p-12 text-paragraph-large text-foreground-subtle italic"
14
14
>
15
15
<span class="flex items-center gap-2">{message}{@render children?.()}</span>
16
16
</div>
+2
-2
web/src/lib/components/ui/Error.svelte
+2
-2
web/src/lib/components/ui/Error.svelte
···
19
19
icon: "size-4",
20
20
toggle: "px-3 py-2 text-sm",
21
21
chevron: "size-4",
22
-
body: "px-3 py-2 text-xs"
22
+
body: "px-3 py-2 text-paragraph-small"
23
23
},
24
24
large: {
25
-
header: "px-4 py-3 text-base",
25
+
header: "px-4 py-3 text-paragraph-large",
26
26
icon: "size-5",
27
27
toggle: "px-4 py-3 text-sm",
28
28
chevron: "size-4",
+5
-2
web/src/lib/components/ui/Field.svelte
+5
-2
web/src/lib/components/ui/Field.svelte
···
27
27
28
28
<div class={`flex flex-col gap-1.5 ${className}`} {...rest}>
29
29
{#if label}
30
-
<label for={id} class="text-xs font-medium tracking-wide text-foreground-default uppercase">
30
+
<label
31
+
for={id}
32
+
class="text-paragraph-small font-medium tracking-wide text-foreground-default uppercase"
33
+
>
31
34
{label}
32
35
{#if required}
33
36
<span class="text-foreground-danger">*</span>
···
36
39
{/if}
37
40
{@render children({ id })}
38
41
{#if subtitle}
39
-
<p class="text-xs text-foreground-muted">{subtitle}</p>
42
+
<p class="text-paragraph-small text-foreground-muted">{subtitle}</p>
40
43
{/if}
41
44
</div>
+1
-1
web/src/lib/components/ui/Link.svelte
+1
-1
web/src/lib/components/ui/Link.svelte
+1
-1
web/src/lib/components/ui/Section.svelte
+1
-1
web/src/lib/components/ui/Section.svelte
+1
-1
web/src/lib/components/ui/Tag.svelte
+1
-1
web/src/lib/components/ui/Tag.svelte
···
2
2
import { tv, type VariantProps } from "$lib/tv";
3
3
4
4
export const tag = tv({
5
-
base: "inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs leading-none font-medium select-none",
5
+
base: "inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-paragraph-small leading-none font-medium select-none",
6
6
variants: {
7
7
color: {
8
8
default: "border border-border-default bg-background-default text-foreground-default",
+2
-2
web/src/routes/+error.svelte
+2
-2
web/src/routes/+error.svelte
···
47
47
<div
48
48
class={`mx-auto mb-4 flex size-16 items-center justify-center rounded-full ${copy.tone}`}
49
49
>
50
-
<span class="font-mono text-xl font-bold" aria-hidden="true">{copy.mark}</span>
50
+
<span class="font-mono text-heading-4 font-bold" aria-hidden="true">{copy.mark}</span>
51
51
</div>
52
52
</div>
53
53
54
54
<div class="space-y-4">
55
-
<h1 class="text-2xl font-bold text-foreground-default sm:text-3xl">
55
+
<h1 class="text-heading-3 font-bold text-foreground-default sm:text-heading-2">
56
56
{copy.status} — {copy.title}
57
57
</h1>
58
58
<p class="text-foreground-muted">{copy.message}</p>
+1
-1
web/src/routes/+page.svelte
+1
-1
web/src/routes/+page.svelte
+1
-1
web/src/routes/[handle]/[repo]/issues/new/+page.svelte
+1
-1
web/src/routes/[handle]/[repo]/issues/new/+page.svelte
···
31
31
</svelte:head>
32
32
33
33
<TabPanel class="py-6">
34
-
<h1 class="mb-4 text-xl font-bold text-foreground-default">Create a new issue</h1>
34
+
<h1 class="mb-4 text-heading-4 font-bold text-foreground-default">Create a new issue</h1>
35
35
<IssueForm
36
36
{markup}
37
37
repoDid={data.repo.repoDid ?? ""}
+9
-5
web/src/routes/login/+page.svelte
+9
-5
web/src/routes/login/+page.svelte
···
43
43
<a href={appPath("/")} class="flex items-center gap-2 no-underline hover:no-underline">
44
44
<img src="/logos/logotype.svg" alt="tangled" class="h-24 w-48 dark:invert" />
45
45
</a>
46
-
<p class="text-center text-xl text-foreground-default italic">tightly-knit social coding.</p>
46
+
<p class="text-center text-heading-4 font-normal text-foreground-default italic">
47
+
tightly-knit social coding.
48
+
</p>
47
49
</div>
48
50
49
51
<form class="mt-4" onsubmit={submit}>
···
60
62
inputmode="url"
61
63
required
62
64
placeholder="akshay.tngl.sh"
63
-
class="w-full rounded border border-border-default bg-background-default p-3 text-lg text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none md:text-base"
65
+
class="w-full rounded border border-border-default bg-background-default p-3 text-paragraph-large text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none"
64
66
/>
65
67
<p class="mt-1 text-sm text-foreground-subtle">
66
68
Use your <span class="text-foreground-default">AT Protocol</span> handle to log in. If
67
69
you're unsure, this is likely your Tangled
68
-
<code class="rounded bg-background-inset px-1 font-mono text-xs text-foreground-default"
70
+
<code
71
+
class="rounded bg-background-inset px-1 font-mono text-monospace-small text-foreground-default"
69
72
>(.tngl.sh)</code
70
73
>
71
74
or Bluesky
72
-
<code class="rounded bg-background-inset px-1 font-mono text-xs text-foreground-default"
75
+
<code
76
+
class="rounded bg-background-inset px-1 font-mono text-monospace-small text-foreground-default"
73
77
>(.bsky.social)</code
74
78
>
75
79
account.
···
83
87
loading={isSubmitting}
84
88
spinnerClass="size-4"
85
89
aria-label={isSubmitting ? "Logging in" : undefined}
86
-
class="my-2 mt-6 w-full text-base disabled:opacity-100"
90
+
class="my-2 mt-6 w-full text-paragraph-large disabled:opacity-100"
87
91
>
88
92
Login
89
93
</Button>
+1
-1
web/src/routes/oauth/callback/+page.svelte
+1
-1
web/src/routes/oauth/callback/+page.svelte
···
25
25
26
26
{#if auth.error}
27
27
<section class="mx-auto flex max-w-md flex-col items-center gap-4 px-7 py-16 text-center">
28
-
<p class="text-base text-foreground-danger">{auth.error}</p>
28
+
<p class="text-paragraph-large text-foreground-danger">{auth.error}</p>
29
29
<a href={appPath("/login")} class="inline-flex underline">Try again</a>
30
30
</section>
31
31
{:else}
+3
-3
web/src/routes/repo/new/+page.svelte
+3
-3
web/src/routes/repo/new/+page.svelte
···
23
23
24
24
<div class="mx-auto w-full max-w-2xl px-4 py-12">
25
25
<div class="px-6 py-2">
26
-
<h1 class="text-xl font-bold text-foreground-default">Create a new repository</h1>
26
+
<h1 class="text-heading-4 font-bold text-foreground-default">Create a new repository</h1>
27
27
<p class="mb-1 text-sm text-foreground-subtle">
28
28
Repositories contain a project's files and version history. All repositories are publicly
29
29
accessible.
···
42
42
</div>
43
43
44
44
<div class="flex-1 pb-12">
45
-
<h2 class="text-lg font-medium text-foreground-default">General</h2>
45
+
<h2 class="text-paragraph-large font-medium text-foreground-default">General</h2>
46
46
<div class="mb-4 text-sm text-foreground-subtle">Basic repository information.</div>
47
47
48
48
<div class="space-y-2">
···
105
105
</div>
106
106
107
107
<div class="flex-1">
108
-
<h2 class="text-lg font-medium text-foreground-default">Configuration</h2>
108
+
<h2 class="text-paragraph-large font-medium text-foreground-default">Configuration</h2>
109
109
<div class="mb-4 text-sm text-foreground-subtle">Repository settings and hosting.</div>
110
110
111
111
<div class="space-y-2">
+1
-1
web/src/routes/settings/+layout.svelte
+1
-1
web/src/routes/settings/+layout.svelte
···
35
35
36
36
<div class="mx-auto w-full max-w-screen-lg px-4 py-12">
37
37
<div class="px-2 py-2">
38
-
<h1 class="text-xl font-bold text-foreground-default">Settings</h1>
38
+
<h1 class="text-heading-4 font-bold text-foreground-default">Settings</h1>
39
39
</div>
40
40
41
41
<div class="mt-4 rounded border border-border-default bg-background-default p-6">
+1
-1
web/src/routes/strings/new/+page.svelte
+1
-1
web/src/routes/strings/new/+page.svelte
···
17
17
18
18
<div class="mx-auto w-full max-w-screen-lg px-4 py-12">
19
19
<div class="px-2 py-2">
20
-
<h1 class="text-xl font-bold text-foreground-default">Create a new string</h1>
20
+
<h1 class="text-heading-4 font-bold text-foreground-default">Create a new string</h1>
21
21
<p class="text-sm text-foreground-subtle">Store and share code snippets with ease.</p>
22
22
</div>
23
23