diff --git a/.idea/.idea.StartSCH/.idea/indexLayout.xml b/.idea/.idea.StartSCH/.idea/indexLayout.xml
index 6564a892..3743158c 100644
--- a/.idea/.idea.StartSCH/.idea/indexLayout.xml
+++ b/.idea/.idea.StartSCH/.idea/indexLayout.xml
@@ -11,6 +11,7 @@
       <Path>global.json</Path>
     </explicitIncludes>
     <explicitExcludes>
+      <Path>StartSch/wwwroot/app.css</Path>
       <Path>StartSch/wwwroot/css</Path>
       <Path>StartSch/wwwroot/js</Path>
       <Path>StartSch/wwwroot/sw.js</Path>
diff --git a/StartSch.Wasm/Components/Card.razor b/StartSch.Wasm/Components/Card.razor
new file mode 100644
index 00000000..89e47a33
--- /dev/null
+++ b/StartSch.Wasm/Components/Card.razor
@@ -0,0 +1,65 @@
+<article class="card @(Variant switch
+                     {
+                         CardVariant.Post => "post",
+                         CardVariant.Event => "event",
+                         _ => throw new NotImplementedException(),
+                     })">
+    @if (ContainerContent is { })
+    {
+        <div class="container-content">
+            @ContainerContent
+        </div>
+    }
+
+    <div class="top-details">
+        <div>
+            @TopDetails
+        </div>
+        <div class="admin-buttons">
+            @AdminButtons
+        </div>
+    </div>
+
+    <div class="title">
+        @if (InternalUrl is { })
+        {
+            <a href="@InternalUrl">
+                <Heading Level="@HeadingLevel">
+                    @Title
+                </Heading>
+            </a>
+        }
+        else
+        {
+            <Heading Level="@HeadingLevel">
+                @Title
+            </Heading>
+        }
+    </div>
+
+    <div class="middle-details">
+        @MiddleDetails
+    </div>
+    <div class="content">
+        @Content
+    </div>
+    @if (ChildContent is { })
+    {
+        <div class="child-content">
+            @ChildContent
+        </div>
+    }
+</article>
+
+@code {
+    [Parameter, EditorRequired] public CardVariant Variant { get; set; }
+    [Parameter] public RenderFragment? ContainerContent { get; set; }
+    [Parameter] public RenderFragment? AdminButtons { get; set; }
+    [Parameter, EditorRequired] public int HeadingLevel { get; set; }
+    [Parameter] public RenderFragment? TopDetails { get; set; }
+    [Parameter] public RenderFragment? Title { get; set; }
+    [Parameter] public string? InternalUrl { get; set; }
+    [Parameter] public RenderFragment? MiddleDetails { get; set; }
+    [Parameter] public RenderFragment? Content { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+}
diff --git a/StartSch.Wasm/Components/Card.razor.css b/StartSch.Wasm/Components/Card.razor.css
new file mode 100644
index 00000000..15544268
--- /dev/null
+++ b/StartSch.Wasm/Components/Card.razor.css
@@ -0,0 +1,63 @@
+.card {
+    &.post {
+        background-color: var(--sch-comp-card-container-color);
+        color: var(--sch-comp-card-content-color);
+    }
+    
+    &.event {
+        border: 1px solid var(--md-sys-color-outline-variant);
+        background-color: var(--md-sys-color-surface-container-high);
+    }
+
+    border-radius: 4px;
+    
+    padding: 20px;
+
+    &:first-child {
+        border-top-left-radius: 24px;
+        border-top-right-radius: 24px;
+    }
+
+    &:last-child {
+        border-bottom-left-radius: 24px;
+        border-bottom-right-radius: 24px;
+    }
+    
+    .container-content {
+        background-color: var(--md-sys-color-surface-container-low);
+        padding: 16px;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 16px;
+        margin-bottom: 12px;
+    }
+    
+    .top-details {
+        margin-bottom: 10px;
+        align-items: center;
+        
+        &:has(.admin-buttons *) {
+            display: grid;
+            grid-template-columns: 1fr auto;
+            gap: 8px;
+        }
+    }
+    
+    .title {
+        font-family: var(--md-sys-typescale-title-medium-font);
+        font-size: var(--md-sys-typescale-title-medium-size);
+        line-height: var(--md-sys-typescale-title-medium-line-height);
+        font-weight: var(--md-sys-typescale-title-medium-weight);
+        letter-spacing: var(--md-sys-typescale-title-medium-tracking)
+    }
+    
+    .middle-details {
+    }
+    
+    .content {
+        font-family: var(--md-sys-typescale-body-medium-font);
+        font-size: var(--md-sys-typescale-body-medium-size);
+        line-height: var(--md-sys-typescale-body-medium-line-height);
+        font-weight: var(--md-sys-typescale-body-medium-weight);
+        letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+    }
+}
diff --git a/StartSch.Wasm/Components/CardList.razor b/StartSch.Wasm/Components/CardList.razor
new file mode 100644
index 00000000..622b9ae4
--- /dev/null
+++ b/StartSch.Wasm/Components/CardList.razor
@@ -0,0 +1,7 @@
+<div>
+    @ChildContent
+</div>
+
+@code {
+    [Parameter, EditorRequired] public required RenderFragment ChildContent { get; set; }
+}
diff --git a/StartSch.Wasm/Components/CardList.razor.css b/StartSch.Wasm/Components/CardList.razor.css
new file mode 100644
index 00000000..6dfbaf9e
--- /dev/null
+++ b/StartSch.Wasm/Components/CardList.razor.css
@@ -0,0 +1,5 @@
+* {
+    display: flex;
+    gap: 2px;
+    flex-direction: column;
+}
diff --git a/StartSch.Wasm/Components/CardVariant.cs b/StartSch.Wasm/Components/CardVariant.cs
new file mode 100644
index 00000000..fe851ca7
--- /dev/null
+++ b/StartSch.Wasm/Components/CardVariant.cs
@@ -0,0 +1,7 @@
+namespace StartSch.Wasm.Components;
+
+public enum CardVariant
+{
+    Post,
+    Event,
+}
diff --git a/StartSch.Wasm/Components/Heading.razor b/StartSch.Wasm/Components/Heading.razor
new file mode 100644
index 00000000..8aece021
--- /dev/null
+++ b/StartSch.Wasm/Components/Heading.razor
@@ -0,0 +1,44 @@
+@switch (Level)
+{
+    case 1:
+        <h1 @attributes="@AdditionalAttributes">
+            @ChildContent
+        </h1>
+        break;
+    case 2:
+        <h2 @attributes="@AdditionalAttributes">
+            @ChildContent
+        </h2>
+        break;
+    case 3:
+        <h3 @attributes="@AdditionalAttributes">
+            @ChildContent
+        </h3>
+        break;
+    case 4:
+        <h4 @attributes="@AdditionalAttributes">
+            @ChildContent
+        </h4>
+        break;
+    case 5:
+        <h5 @attributes="@AdditionalAttributes">
+            @ChildContent
+        </h5>
+        break;
+    case 6:
+        <h6 @attributes="@AdditionalAttributes">
+            @ChildContent
+        </h6>
+        break;
+    default:
+        throw new NotSupportedException();
+}
+
+@code {
+    [Parameter, EditorRequired] public RenderFragment? ChildContent { get; set; }
+    [Parameter, EditorRequired] public int Level { get; set; }
+
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+}
diff --git a/StartSch.Wasm/Components/Heading.razor.css b/StartSch.Wasm/Components/Heading.razor.css
new file mode 100644
index 00000000..3c84b6b8
--- /dev/null
+++ b/StartSch.Wasm/Components/Heading.razor.css
@@ -0,0 +1,7 @@
+* {
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    font-weight: inherit;
+    letter-spacing: inherit;
+}
diff --git a/StartSch/Components/Pages/FontStylesPage.razor b/StartSch/Components/Pages/FontStylesPage.razor
new file mode 100644
index 00000000..afab5616
--- /dev/null
+++ b/StartSch/Components/Pages/FontStylesPage.razor
@@ -0,0 +1,89 @@
+@page "/fonts"
+
+@layout AdminLayout
+
+<Title>Betűtípusok</Title>
+
+<div class="font-specimen">
+    <h1>M3 tipográfiai stílusok</h1>
+    <p class="intro">
+        A Material 3 típus-skála mind a 30 stílusa (15 alap + 15 emphasized), három betűtípuson
+        összehasonlítva. A tényleges témában a display/headline/title stílusok a <i>brand</i>, a
+        body/label stílusok a <i>plain</i> betűtípushoz tartoznak (lásd
+        <code>css/tokens/md-sys-type.css</code>); ez az oldal mindhárom betűtípust megmutatja.
+        Az <i>emphasized</i> stílusok súlya egy lépéssel magasabb (400→500, 500→700) az M3
+        expressive frissítés szerint.
+    </p>
+
+    @foreach (var variant in Variants)
+    {
+        <h2>@variant.Label</h2>
+
+        <div class="header">
+            <div class="role-col">Stílus</div>
+            @foreach (var family in Families)
+            {
+                <div class="family-col">@family.Label</div>
+            }
+        </div>
+
+        @foreach (var role in Roles)
+        {
+            <div class="role-row">
+                <div class="role-col">
+                    <div class="role-name">@role.Name</div>
+                    <div class="role-spec">@(variant.Id == "emphasized-" ? role.EmphasizedSpec : role.Spec)</div>
+                </div>
+                @foreach (var family in Families)
+                {
+                    <div class="sample" style="@Style(role.Id, family.Id, variant.Id)">@Sample</div>
+                }
+            </div>
+        }
+    }
+</div>
+
+@code {
+    private const string Sample = "Árvíztűrő tükörfúrógép — The quick brown fox jumps over the lazy dog 0123456789";
+
+    private static readonly (string Id, string Label)[] Families =
+    [
+        ("serif", "Roboto Serif"),
+        ("google-sans", "Google Sans Flex"),
+        ("roboto-flex", "Roboto Flex"),
+    ];
+
+    // variant.Id is the typescale token prefix: "" for baseline, "emphasized-" for emphasized
+    private static readonly (string Id, string Label)[] Variants =
+    [
+        ("", "Alap (baseline)"),
+        ("emphasized-", "Emphasized"),
+    ];
+
+    // Size / line-height / weight / tracking, from the M3 v0.192 baseline and expressive emphasized scales
+    private static readonly (string Id, string Name, string Spec, string EmphasizedSpec)[] Roles =
+    [
+        ("display-large", "Display Large", "57 / 64 · w400 · −0.25", "57 / 64 · w500"),
+        ("display-medium", "Display Medium", "45 / 52 · w400", "45 / 52 · w500"),
+        ("display-small", "Display Small", "36 / 44 · w400", "36 / 44 · w500"),
+        ("headline-large", "Headline Large", "32 / 40 · w400", "32 / 40 · w500"),
+        ("headline-medium", "Headline Medium", "28 / 36 · w400", "28 / 36 · w500"),
+        ("headline-small", "Headline Small", "24 / 32 · w400", "24 / 32 · w500"),
+        ("title-large", "Title Large", "22 / 28 · w400", "22 / 28 · w500"),
+        ("title-medium", "Title Medium", "16 / 24 · w500 · 0.15", "16 / 24 · w700 · 0.15"),
+        ("title-small", "Title Small", "14 / 20 · w500 · 0.1", "14 / 20 · w700 · 0.1"),
+        ("body-large", "Body Large", "16 / 24 · w400 · 0.5", "16 / 24 · w500 · 0.15"),
+        ("body-medium", "Body Medium", "14 / 20 · w400 · 0.25", "14 / 20 · w500 · 0.25"),
+        ("body-small", "Body Small", "12 / 16 · w400 · 0.4", "12 / 16 · w500 · 0.4"),
+        ("label-large", "Label Large", "14 / 20 · w500 · 0.1", "14 / 20 · w700 · 0.1"),
+        ("label-medium", "Label Medium", "12 / 16 · w500 · 0.5", "12 / 16 · w700 · 0.5"),
+        ("label-small", "Label Small", "11 / 16 · w500 · 0.5", "11 / 16 · w700 · 0.5"),
+    ];
+
+    private static string Style(string role, string family, string variant) =>
+        $"font-family:var(--md-ref-typeface-{family});" +
+        $"font-size:var(--md-sys-typescale-{variant}{role}-size);" +
+        $"line-height:var(--md-sys-typescale-{variant}{role}-line-height);" +
+        $"font-weight:var(--md-sys-typescale-{variant}{role}-weight);" +
+        $"letter-spacing:var(--md-sys-typescale-{variant}{role}-tracking);";
+}
diff --git a/StartSch/Components/Pages/FontStylesPage.razor.css b/StartSch/Components/Pages/FontStylesPage.razor.css
new file mode 100644
index 00000000..07894de5
--- /dev/null
+++ b/StartSch/Components/Pages/FontStylesPage.razor.css
@@ -0,0 +1,43 @@
+.font-specimen {
+    padding: 16px;
+    max-width: 1200px;
+    margin: auto;
+}
+
+.intro {
+    color: var(--md-sys-color-on-surface-variant);
+    margin-bottom: 24px;
+}
+
+.header,
+.role-row {
+    display: grid;
+    grid-template-columns: 200px 1fr 1fr 1fr;
+    gap: 0 24px;
+    align-items: start;
+}
+
+.header {
+    font-weight: 600;
+    padding-bottom: 8px;
+    border-bottom: 1px solid var(--md-sys-color-outline-variant);
+}
+
+.role-row {
+    padding: 16px 0;
+    border-bottom: 1px solid var(--md-sys-color-outline-variant);
+}
+
+.role-name {
+    font-weight: 500;
+}
+
+.role-spec {
+    color: var(--md-sys-color-on-surface-variant);
+    font-size: var(--md-sys-typescale-body-small-size);
+    line-height: var(--md-sys-typescale-body-small-line-height);
+}
+
+.sample {
+    min-width: 0;
+}
diff --git a/StartSch/Components/Pages/Home.razor b/StartSch/Components/Pages/Home.razor
index 8705bea7..608f5fb2 100644
--- a/StartSch/Components/Pages/Home.razor
+++ b/StartSch/Components/Pages/Home.razor
@@ -35,52 +35,48 @@
 else
 {
     <LayoutView Layout="@typeof(DocumentLayout)">
-        <div id="home-page">
-            <header class="top-bar">
-                <div id="logo">
-                    <a href="/">
-                        <Title>
-                            StartSCH
-                        </Title>
-                    </a>
-                </div>
-
-                <div id="menu-toggle">
-                    <md-icon-button onclick="toggleMenu()">
-                        <md-icon>menu</md-icon>
-                    </md-icon-button>
-                </div>
-
-                <div id="top-level-links">
-                    <TopLevelLinks/>
-                </div>
-
-                <MiscLinks/>
-
-            </header>
-
-            <div class="scrim" onclick="toggleMenu()"></div>
-
-            <main class="home">
-                <div id="left-widgets">
-                    @* <section id="events"> *@
-                    @*     <h2>Események</h2> *@
-                    @*     <article> *@
-                    @*         <h3>QPA</h3> *@
-                    @*         <article> *@
-                    @*             <h4>1. het</h4> *@
-                    @*             <article> *@
-                    @*                 <h5>Videki nap</h5> *@
-                    @*                 <article> *@
-                    @*                     <h6>Lejutas</h6> *@
-                    @*                 </article> *@
-                    @*             </article> *@
-                    @*         </article> *@
-                    @*     </article> *@
-                    @* </section> *@
-                </div>
-
-                <div id="right-widgets">
+        <MainGrid IsHomePage="@true">
+            <PrimaryContent>
+                <main>
+                    <section id="news">
+                        <h2 style="margin-bottom: 8px; margin-top: 30px">
+                            Hírek
+                        </h2>
+                        
+                        @if (_posts != null)
+                        {
+                            <CardList>
+                                <InfiniteList Items="@_posts" HasMore="@hasMore" NextLink="@nextLink">
+                                    <ItemTemplate Context="post">
+                                        <PostPreview Post="post"/>
+                                    </ItemTemplate>
+                                </InfiniteList>
+                            </CardList>
+                        }
+
+                        <div style="height: 64px"></div>
+                    </section>
+                </main>
+            </PrimaryContent>
+            <SecondaryContent>
+                @* <section id="events"> *@
+                @*     <h2>Események</h2> *@
+                @*     <article> *@
+                @*         <h3>QPA</h3> *@
+                @*         <article> *@
+                @*             <h4>1. het</h4> *@
+                @*             <article> *@
+                @*                 <h5>Videki nap</h5> *@
+                @*                 <article> *@
+                @*                     <h6>Lejutas</h6> *@
+                @*                 </article> *@
+                @*             </article> *@
+                @*         </article> *@
+                @*     </article> *@
+                @* </section> *@
+            </SecondaryContent>
+            <TertiaryContent>
+                <AuthorizeView>
                     <section id="openings">
                         <h2>
                             Nyitások
@@ -90,7 +86,7 @@ else
                             foreach (var opening in _openings)
                             {
                                 var page = opening.Categories[0].Page;
-                                
+
                                 <article>
                                     <div class="title">
                                         <h3 style="display: inline">
@@ -99,7 +95,7 @@ else
                                             </a>
                                         </h3>
 
-                                        <AdminButtonsForEvent Event="@opening" />
+                                        <AdminButtonsForEvent Event="@opening"/>
                                     </div>
 
                                     <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 8px">
@@ -108,7 +104,7 @@ else
                                         <span class="date-display">
                                             <DateDisplay Date="@opening.Start"/>
                                         </span>
-                                        
+
                                         @{
                                             var orderable = opening is { OutOfStock: null }
                                                             && opening.OrderingStart <= currentInstant
@@ -143,7 +139,6 @@ else
                             }
                         }
 
-
                         <div style="margin-top: 16px; text-align: end">
                             <a href="/openings"
                                style="color: var(--md-sys-color-on-surface-variant); font-variation-settings: 'opsz' 16, 'wdth' 100, 'GRAD' 100">
@@ -152,38 +147,9 @@ else
                             </a>
                         </div>
                     </section>
-
-                    <section id="about">
-                        <hr style="margin: 6px 0 24px 0"/>
-                        <MiscLinks/>
-                    </section>
-                </div>
-
-                <section id="news">
-                    <h2 style="border-bottom: 1px solid var(--md-sys-color-outline-variant); padding-bottom: 4px; margin-bottom: 24px">
-                        Hírek
-                    </h2>
-
-                    @if (_posts != null)
-                    {
-                        <InfiniteList Items="@_posts" HasMore="@hasMore" NextLink="@nextLink">
-                            <ItemTemplate Context="post">
-                                <PostPreview Post="post"/>
-                            </ItemTemplate>
-                        </InfiniteList>
-                    }
-
-                    <div style="height: 64px"></div>
-                </section>
-            </main>
-        </div>
-
-        <script>
-            function toggleMenu() {
-                document.body.children[0].classList.toggle("menu-open");
-            }
-        </script>
-
+                </AuthorizeView>
+            </TertiaryContent>
+        </MainGrid>
     </LayoutView>
 }
 
diff --git a/StartSch/Components/Pages/PagePage.razor b/StartSch/Components/Pages/PagePage.razor
index 02e9da50..c2b36a9e 100644
--- a/StartSch/Components/Pages/PagePage.razor
+++ b/StartSch/Components/Pages/PagePage.razor
@@ -89,24 +89,25 @@
         }
     </article>
 
-    <hr>
-
-    <section>
-        <h2>Történet</h2>
-        @foreach (object item in _items)
-        {
-            <div @key="@GetKey(item)">
+    <section style="margin-top: 32px">
+        <CardList>
+            @foreach (object item in _items)
+            {
                 @switch (item)
                 {
                     case Post post:
-                        <PostPreview Post="@post" KnownPageId="@PageId"/>
+                        <PostPreview Post="@post"
+                                     KnownPageId="@PageId"
+                                     @key="@GetKey(item)"/>
                         break;
                     case Event e:
-                        <EventPreviewTree Event="@e" KnownPageId="@PageId"/>
+                        <EventPreviewTree Event="@e"
+                                          KnownPageId="@PageId"
+                                          @key="@GetKey(item)"/>
                         break;
                 }
-            </div>
-        }
+            }
+        </CardList>
     </section>
 </main>
 
diff --git a/StartSch/Components/Shared/DateDisplay.razor b/StartSch/Components/Shared/DateDisplay.razor
index e83fb2db..30edbeca 100644
--- a/StartSch/Components/Shared/DateDisplay.razor
+++ b/StartSch/Components/Shared/DateDisplay.razor
@@ -1,6 +1,4 @@
-<span>
-    @DateFormatter.Format(Date ?? new(), End, Now ?? SystemClock.Instance.GetCurrentInstant())
-</span>
+@DateFormatter.Format(Date ?? new(), End, Now ?? SystemClock.Instance.GetCurrentInstant())
 
 @code {
     [Parameter, EditorRequired] public required Instant? Date { get; set; }
diff --git a/StartSch/Components/Shared/EventHeader.razor b/StartSch/Components/Shared/EventHeader.razor
new file mode 100644
index 00000000..82134f53
--- /dev/null
+++ b/StartSch/Components/Shared/EventHeader.razor
@@ -0,0 +1,24 @@
+@{
+    var ev = Event;
+}
+<article style="display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: start">
+    <md-icon>event</md-icon>
+    <div style="display: flex; flex-direction: column">
+        <header>
+            <a href="/events/@ev.Id">
+                @ev.Title
+            </a>
+        </header>
+        @if (ev.Start.HasValue)
+        {
+            <span class="date-label">
+                <DateDisplay Date="@ev.Start" End="@ev.End" Now="@CurrentInstant"/>
+            </span>
+        }
+    </div>
+</article>
+
+@code {
+    [Parameter, EditorRequired] public required Event Event { get; set; }
+    [Parameter, EditorRequired] public Instant CurrentInstant { get; set; }
+}
diff --git a/StartSch/Components/Shared/EventHeader.razor.css b/StartSch/Components/Shared/EventHeader.razor.css
new file mode 100644
index 00000000..e69de29b
diff --git a/StartSch/Components/Shared/EventPreview.razor b/StartSch/Components/Shared/EventPreview.razor
index 4013d73f..09a0ee5c 100644
--- a/StartSch/Components/Shared/EventPreview.razor
+++ b/StartSch/Components/Shared/EventPreview.razor
@@ -1,54 +1,30 @@
-<article class="post-preview">
-    <header>
-        <div class="title">
-            <h3>
-                <a href="@($"/events/{Event.Id}")">
-                    @Event.Title
-                </a>
-            </h3>
-
-            @if (Event.Id != 0 && !HideAdminControls)
-            {
-                <AdminButtonsForEvent Event="@Event" />
-            }
-        </div>
-
-        <ul class="label-list">
-            <li>
-                <CategoryList Categories="@Event.Categories"/>
-
-                <div class="label">
-                    <md-icon>event</md-icon>
-                    <DateDisplay Date="@Event.Start" End="@Event.End" Now="@_currentInstant" />
-                </div>
-            </li>
-
-
-            @if (Event.Parent != null && !ParentKnown)
-            {
-                <li>
-                    <div class="label">
-                        <md-icon>event</md-icon>
-                        <a href="/events/@Event.Parent.Id" class="clip-text" style="max-width: 320px">
-                            @if (Event.Parent.Start.HasValue
-                                 && (Event.Parent.End ?? Event.Parent.Start.Value.Plus(Duration.FromHours(4))) > _currentInstant)
-                            {
-                                <text>
-                                    <DateDisplay Date="@Event.Parent.Start" Now="@_currentInstant" />:
-                                </text>
-                            }
-                            @Event.Parent.Title
-                        </a>
-                    </div>
-                </li>
-            }
-        </ul>
-    </header>
-
-    <div class="body">
+<Card
+    Variant="@CardVariant.Event"
+    HeadingLevel="3"
+    InternalUrl="@($"/events/{Event.Id}")">
+
+    <Title>
+        @Event.Title
+    </Title>
+
+    <AdminButtons>
+        @if (Event.Id != 0 && !HideAdminControls)
+        {
+            <AdminButtonsForEvent Event="@Event"/>
+        }
+    </AdminButtons>
+    <TopDetails>
+        <EventHeader Event="@Event" CurrentInstant="@_currentInstant" />
+    </TopDetails>
+
+    <Content>
         @((MarkupString)_content.HtmlExcerpt)
-    </div>
-</article>
+    </Content>
+
+    <ChildContent>
+        @ChildContent
+    </ChildContent>
+</Card>
 
 @code {
     [Parameter, EditorRequired] public required Event Event { get; set; }
@@ -58,6 +34,7 @@
     [Parameter] public bool HideAdminControls { get; set; }
     [Parameter] public bool ParentKnown { get; set; }
     [Parameter] public int? KnownPageId { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
 
     protected override void OnParametersSet()
     {
diff --git a/StartSch/Components/Shared/EventPreviewTree.razor b/StartSch/Components/Shared/EventPreviewTree.razor
index cd01cb1b..e8b360df 100644
--- a/StartSch/Components/Shared/EventPreviewTree.razor
+++ b/StartSch/Components/Shared/EventPreviewTree.razor
@@ -1,33 +1,33 @@
-<EventPreview Event="@Event" ParentKnown="@ParentKnown" KnownPageId="@KnownPageId"/>
-
-@foreach (object o in Event.Children
-     .Concat<object>(Event.Posts)
-     .OrderByDescending(o => o switch
-     {
-         Event e => e.Start,
-         Post p => p.Created,
-         _ => throw new InvalidOperationException()
-     })
-)
-{
-    var key = o switch
+<EventPreview Event="@Event" ParentKnown="@ParentKnown" KnownPageId="@KnownPageId">
+    @foreach (object o in Event.Children
+         .Concat<object>(Event.Posts)
+         .OrderByDescending(o => o switch
+         {
+             Event e => e.Start,
+             Post p => p.Created,
+             _ => throw new InvalidOperationException()
+         })
+    )
     {
-        Event e => e.Id,
-        Post p => int.MaxValue - p.Id,
-        _ => throw new InvalidOperationException()
-    };
-    <div @key="@key" style="margin-left: 32px">
-        @switch (o)
+        var key = o switch
         {
-            case Event e:
-                <EventPreviewTree Event="@e" ParentKnown="@true" KnownPageId="@KnownPageId"/>
-                break;
-            case Post p:
-                <PostPreview Post="@p" EventKnown="@true" KnownPageId="@KnownPageId"/>
-                break;
-        }
-    </div>
-}
+            Event e => e.Id,
+            Post p => int.MaxValue - p.Id,
+            _ => throw new InvalidOperationException()
+        };
+        <div @key="@key">
+            @switch (o)
+            {
+                case Event e:
+                    <EventPreviewTree Event="@e" ParentKnown="@true" KnownPageId="@KnownPageId"/>
+                    break;
+                case Post p:
+                    <PostPreview Post="@p" EventKnown="@true" KnownPageId="@KnownPageId"/>
+                    break;
+            }
+        </div>
+    }
+</EventPreview>
 
 @code {
     [Parameter, EditorRequired] public required Event Event { get; set; }
diff --git a/StartSch/Components/Shared/MainGrid.razor b/StartSch/Components/Shared/MainGrid.razor
new file mode 100644
index 00000000..520c7ecb
--- /dev/null
+++ b/StartSch/Components/Shared/MainGrid.razor
@@ -0,0 +1,47 @@
+<div class="main-grid">
+    <div class="logo-line">
+        <a href="/" class="logo-link">
+            @if (IsHomePage)
+            {
+                <h1 class="logo-text">StartSCH</h1>
+            }
+            else
+            {
+                <span class="logo-text">StartSCH</span>
+            }
+        </a>
+        <div class="menu-button" aria-hidden="true">
+            <md-icon-button onclick="toggleMenu()">
+                <md-icon>menu</md-icon>
+            </md-icon-button>
+        </div>
+    </div>
+    <div class="explore-button">
+        <TopLevelLinks />
+    </div>
+    <div class="tertiary-content">
+        <div class="misc-links">
+            <MiscLinks />
+        </div>
+        @TertiaryContent
+    </div>
+    <div class="secondary-content">
+        @SecondaryContent
+    </div>
+    <div class="primary-content">
+        @PrimaryContent
+    </div>
+    <div class="menu-scrim" onclick="toggleMenu()"></div>
+</div>
+<script>
+    function toggleMenu() {
+        document.getElementsByClassName('main-grid')[0].classList.toggle("menu-open");
+    }
+</script>
+
+@code {
+    [Parameter, EditorRequired] public required RenderFragment PrimaryContent { get; set; } // center
+    [Parameter] public RenderFragment? SecondaryContent { get; set; } // left
+    [Parameter] public RenderFragment? TertiaryContent { get; set; } // right
+    [Parameter] public bool IsHomePage { get; set; }
+}
diff --git a/StartSch/Components/Shared/MainGrid.razor.css b/StartSch/Components/Shared/MainGrid.razor.css
new file mode 100644
index 00000000..40b1edc8
--- /dev/null
+++ b/StartSch/Components/Shared/MainGrid.razor.css
@@ -0,0 +1,166 @@
+/* ts some bs so that we don't have to duplicate any HTML content as that might hurt SEO */
+
+/* Desktop */
+@media (width >= 1016px) {
+    .main-grid {
+        display: grid;
+        grid-template-columns:
+            1fr
+            minmax(16px, 32px)
+            [left] minmax(250px, 300px)
+            minmax(16px, 32px)
+            [middle] minmax(450px, 600px)
+            minmax(16px, 32px)
+            [right] minmax(250px, 300px)
+            minmax(16px, 32px)
+            1fr;
+        grid-template-rows:
+            96px
+            24px
+            auto
+            [end];
+    }
+
+    .logo-line {
+        grid-column: left;
+        justify-self: center;
+        align-self: center;
+
+        .menu-button {
+            display: none;
+        }
+    }
+
+    .explore-button {
+        grid-column: right;
+        grid-row: 1;
+        
+        align-self: center;
+    }
+
+    .primary-content {
+        grid-column: middle;
+        grid-row: 1 / end;
+    }
+
+    .secondary-content {
+        grid-column: left;
+        grid-row: 3 / end;
+    }
+
+    .tertiary-content {
+        grid-column: right;
+        grid-row: 3 / end;
+        
+        display: flex;
+        flex-direction: column;
+        gap: 64px;
+        
+        .misc-links {
+            order: 2;
+        }
+    }
+}
+
+/* Mobile */
+@media (width < 1016px) {
+    .main-grid {
+        display: grid;
+        grid-template-columns:
+                1fr
+                16px
+                [middle] minmax(200px, 600px)
+                16px
+                1fr;
+        grid-template-rows:
+                64px
+                16px
+                [tertiary-content] auto
+                16px
+                [primary-content] auto;
+    }
+    
+    .logo-line {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 64px;
+        background-color: var(--md-sys-color-surface-container);
+        z-index: 10;
+        
+        display: grid;
+        grid-template-columns: 64px 1fr 64px;
+        align-items: center;
+        justify-items: center;
+        
+        .logo-link {
+            grid-column: 2;
+        }
+        
+        .menu-button {
+            grid-column: 3;
+        }
+    }
+
+    .explore-button {
+        display: none;
+    }
+
+    .primary-content {
+        grid-column: middle;
+        grid-row: primary-content;
+    }
+
+    .secondary-content {
+        display: none;
+    }
+    
+    .tertiary-content {
+        grid-column: middle;
+        grid-row: tertiary-content;
+        
+        .misc-links {
+            display: none;
+        }
+    }
+    
+    .menu-open {
+        .explore-button {
+            position: fixed;
+            top: 64px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: var(--md-sys-color-surface-container);
+            left: 0;
+            right: 0;
+            z-index: 10;
+            height: 64px;
+        }
+
+        .misc-links {
+            position: fixed;
+            top: 128px;
+            display: flex;
+            padding: 16px 16px 16px 69px;
+            background-color: var(--md-sys-color-surface-container);
+            left: 0;
+            right: 0;
+            z-index: 10;
+            justify-content: center;
+        }
+        
+        .menu-scrim {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(0, 0, 0, 0.5);
+            z-index: 5;
+            backdrop-filter: blur(2px);
+            cursor: pointer;
+        }
+    }
+}
diff --git a/StartSch/Components/Shared/MiscLinks.razor b/StartSch/Components/Shared/MiscLinks.razor
index 9ac33c2f..24e1280e 100644
--- a/StartSch/Components/Shared/MiscLinks.razor
+++ b/StartSch/Components/Shared/MiscLinks.razor
@@ -2,7 +2,7 @@
 @inject AuthorizationService AuthorizationService
 @inject IHostEnvironment HostEnvironment
 
-<menu class="misc-links">
+<menu>
     <AuthorizeView Context="_">
         <NotAuthorized>
             <li>
@@ -45,7 +45,6 @@
                     </md-text-button>
                 </LogOutForm>
             </li>
-            <hr style="width: 32px; margin: 24px 0"/>
         </Authorized>
     </AuthorizeView>
 
diff --git a/StartSch/Components/Shared/MiscLinks.razor.css b/StartSch/Components/Shared/MiscLinks.razor.css
new file mode 100644
index 00000000..0f5a69d5
--- /dev/null
+++ b/StartSch/Components/Shared/MiscLinks.razor.css
@@ -0,0 +1,10 @@
+menu {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+li {
+    margin: 0;
+}
diff --git a/StartSch/Components/Shared/PostPreview.razor b/StartSch/Components/Shared/PostPreview.razor
index 5f219d2c..10a340fc 100644
--- a/StartSch/Components/Shared/PostPreview.razor
+++ b/StartSch/Components/Shared/PostPreview.razor
@@ -2,65 +2,47 @@
     bool isDraft = Post.Published == null && !HideAdminControls;
 }
 
-<article class="post-preview @(isDraft ? "draft" : null)">
-    <header>
-        <div class="title">
-            <h3>
-                <a href="@($"/posts/{Post.Id}")">
-                    @Post.Title
-                </a>
-            </h3>
+<Card
+    Variant="@CardVariant.Post"
+    HeadingLevel="3"
+    InternalUrl="@($"/posts/{Post.Id}")"
+    ContainerContent="@GetContainerEntityDetails()">
+    <AdminButtons>
+        @if (!HideAdminControls)
+        {
+            <AdminButtonsForPost Post="@Post"/>
+        }
+    </AdminButtons>
 
-            @if (!HideAdminControls)
-            {
-                <AdminButtonsForPost Post="@Post" />
-            }
-        </div>
-
-        <ul class="label-list">
-            <li>
-                <CategoryList Categories="@Post.Categories" />
+    <TopDetails>
+        <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px">
+            <CategoryList Categories="@Post.Categories"/>
 
-                <div class="label">
-                    <md-icon>chat</md-icon>
-                    @if (isDraft)
-                    {
-                        <span style="color: var(--md-sys-color-error); font-weight: bold">
-                            Vázlat
-                        </span>
-                    }
-                    else
-                    {
-                        <DateDisplay Date="@Post.Published"/>
-                    }
-                </div>
-            </li>
+            <div class="date-label">
+                @if (isDraft)
+                {
+                    <span style="color: var(--md-sys-color-error); font-weight: bold">
+                        Vázlat
+                    </span>
+                }
+                else
+                {
+                    <DateDisplay Date="@Post.Published"/>
+                }
+            </div>
+        </div>
+    </TopDetails>
 
-            @if (Post.Event != null && !EventKnown)
-            {
-                <li>
-                    <div class="label">
-                        <md-icon>event</md-icon>
-                        <a href="/events/@Post.Event.Id" class="clip-text" style="max-width: 300px">
-                            @if (Post.Event.Start.HasValue
-                                 && (Post.Event.End ?? Post.Event.Start.Value.Plus(Duration.FromHours(4))) > _currentInstant)
-                            {
-                                <text>
-                                    <DateDisplay Date="@Post.Event.Start"/>:
-                                </text>
-                            }
-                            @Post.Event.Title
-                        </a>
-                    </div>
-                </li>
-            }
-        </ul>
-    </header>
+    <Title>
+        @Post.Title
+    </Title>
 
-    <div class="body">
-        @((MarkupString)_content.HtmlExcerpt)
-    </div>
-</article>
+    <Content>
+        <div style="max-height: 2lh; overflow-y: clip; color: var(--md-sys-color-on-surface-variant)">
+            @((MarkupString)_content.HtmlExcerpt)
+        </div>
+    </Content>
+</Card>
 
 @code {
     private TextContent _content = null!;
@@ -76,4 +58,12 @@
         _content = new(Post.ContentMarkdown ?? "", Post.ExcerptMarkdown);
     }
 
+    private RenderFragment? GetContainerEntityDetails()
+    {
+        if (Post.Event is not { } ev || EventKnown)
+            return null;
+
+        return @<EventHeader Event="@ev" CurrentInstant="@_currentInstant" />;
+    }
+
 }
diff --git a/StartSch/Components/Shared/TopLevelLinks.razor b/StartSch/Components/Shared/TopLevelLinks.razor
index 80fdb9e4..65ac1426 100644
--- a/StartSch/Components/Shared/TopLevelLinks.razor
+++ b/StartSch/Components/Shared/TopLevelLinks.razor
@@ -1,11 +1,7 @@
-<menu>
-    @* <li><a href="/calendar">Naptár</a></li> *@
-    <li>
-        <expressive-button href="/explore" class="medium square filled">
-            <md-icon slot="icon">
-                explore
-            </md-icon>
-            Felfedezés
-        </expressive-button>
-    </li>
-</menu>
+@* <li><a href="/calendar">Naptár</a></li> *@
+<expressive-button href="/explore" class="medium square filled">
+    <md-icon slot="icon">
+        explore
+    </md-icon>
+    Felfedezés
+</expressive-button>
diff --git a/StartSch/Services/FontCache.cs b/StartSch/Services/FontCache.cs
index 126dddaf..3ede6563 100644
--- a/StartSch/Services/FontCache.cs
+++ b/StartSch/Services/FontCache.cs
@@ -28,6 +28,25 @@ public class FontCache
             Display = "swap",
         },
         new()
+        {
+            Families =
+            [
+                new()
+                {
+                    Name = "Google Sans Flex",
+                    ParameterNames = "wght,wdth,opsz,slnt",
+                    ParameterVariations = ["100..900,50..150,8..144,-10..0"],
+                },
+                new()
+                {
+                    Name = "Roboto Flex",
+                    ParameterNames = "opsz,wdth,wght,GRAD,slnt",
+                    ParameterVariations = ["8..144,25..151,100..1000,-200..150,-10..0"],
+                },
+            ],
+            Display = "swap",
+        },
+        new()
         {
             Families =
             [
diff --git a/StartSch/css/app.css b/StartSch/css/app.css
index bf499455..5db2b0c1 100644
--- a/StartSch/css/app.css
+++ b/StartSch/css/app.css
@@ -2,9 +2,11 @@
 
 @import "tokens/md-sys-col.css" layer(tokens);
 @import "tokens/md-sys-motion.css" layer(tokens);
+@import "tokens/md-sys-type.css" layer(tokens);
 @import "tokens/sch-comp.css" layer(tokens);
 @import "fonts.css" layer(tokens);
 @import "base.css" layer(base);
+@import "typescales.css" layer(base);
 
 @import "layout.css" layer(layout);
 @import "buttons.css" layer(components);
@@ -147,3 +149,12 @@
     border-bottom: 1px solid var(--md-sys-color-outline-variant);
     padding-bottom: 8px;
 }
+
+.date-label {
+    color: var(--md-sys-color-on-surface-variant);
+    font-family: var(--md-sys-typescale-label-medium-font);
+    font-size: var(--md-sys-typescale-label-medium-size);
+    font-weight: var(--md-sys-typescale-label-medium-weight);
+    line-height: var(--md-sys-typescale-label-medium-line-height);
+    letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+}
diff --git a/StartSch/css/base.css b/StartSch/css/base.css
index 5a2372b7..4465c591 100644
--- a/StartSch/css/base.css
+++ b/StartSch/css/base.css
@@ -8,8 +8,66 @@ body, h1, h2, h3, h4, h5, h6, p, ul, ol, menu, li, a, span, input, button, texta
 }
 
 body {
-    background: var(--md-sys-color-surface);
+    background: var(--md-sys-color-surface-container);
     color: var(--md-sys-color-on-surface);
+    font-family: var(--md-ref-typeface-plain);
+    font-size: var(--md-sys-typescale-body-large-size);
+    line-height: var(--md-sys-typescale-body-large-line-height);
+    font-weight: var(--md-sys-typescale-body-large-weight);
+}
+
+/* Material 3 type scale role defaults */
+h1 {
+    font-family: var(--md-sys-typescale-headline-large-font);
+    font-size: var(--md-sys-typescale-headline-large-size);
+    line-height: var(--md-sys-typescale-headline-large-line-height);
+    font-weight: var(--md-sys-typescale-headline-large-weight);
+    letter-spacing: var(--md-sys-typescale-headline-large-tracking);
+}
+
+h2 {
+    font-family: var(--md-sys-typescale-headline-medium-font);
+    font-size: var(--md-sys-typescale-headline-medium-size);
+    line-height: var(--md-sys-typescale-headline-medium-line-height);
+    font-weight: var(--md-sys-typescale-headline-medium-weight);
+    letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
+}
+
+h3 {
+    font-family: var(--md-sys-typescale-headline-small-font);
+    font-size: var(--md-sys-typescale-headline-small-size);
+    line-height: var(--md-sys-typescale-headline-small-line-height);
+    font-weight: var(--md-sys-typescale-headline-small-weight);
+    letter-spacing: var(--md-sys-typescale-headline-small-tracking);
+}
+
+h4 {
+    font-family: var(--md-sys-typescale-title-medium-font);
+    font-size: var(--md-sys-typescale-title-medium-size);
+    line-height: var(--md-sys-typescale-title-medium-line-height);
+    font-weight: var(--md-sys-typescale-title-medium-weight);
+    letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+}
+
+h5, h6 {
+    font-family: var(--md-sys-typescale-title-small-font);
+    font-size: var(--md-sys-typescale-title-small-size);
+    line-height: var(--md-sys-typescale-title-small-line-height);
+    font-weight: var(--md-sys-typescale-title-small-weight);
+    letter-spacing: var(--md-sys-typescale-title-small-tracking);
+}
+
+small {
+    color: var(--md-sys-color-on-surface-variant);
+    font-size: var(--md-sys-typescale-body-small-size);
+    line-height: var(--md-sys-typescale-body-small-line-height);
+    font-weight: var(--md-sys-typescale-body-small-weight);
+}
+/* Brand deviation from M3 display-large: heavier weight for page hero titles */
+.display h1 {
+    font-size: 64px;
+    font-weight: 900;
+    font-variation-settings: "wdth" 100, "GRAD" 0, "opsz" 144;
 }
 
 a {
@@ -21,10 +79,6 @@ a {
     }
 }
 
-small {
-    color: var(--md-sys-color-on-surface-variant);
-}
-
 img {
     max-width: 100%;
 }
diff --git a/StartSch/css/fonts.css b/StartSch/css/fonts.css
index a91f982d..153ad738 100644
--- a/StartSch/css/fonts.css
+++ b/StartSch/css/fonts.css
@@ -1,28 +1,17 @@
 .roboto-regular {
-    font-family: "Roboto", sans-serif;
+    font-family: "Roboto Serif", serif;
     font-weight: 400;
     font-style: normal;
 }
 
 .roboto-medium {
-    font-family: "Roboto", sans-serif;
+    font-family: "Roboto Serif", serif;
     font-weight: 500;
     font-style: normal;
 }
 
 .roboto-bold {
-    font-family: "Roboto", sans-serif;
+    font-family: "Roboto Serif", serif;
     font-weight: 700;
     font-style: normal;
 }
-
-body {
-    font-family: system-ui, sans-serif;
-    --md-ref-typeface-plain: system-ui, sans-serif;
-}
-
-.display h1 {
-    font-size: 64px;
-    font-weight: 900;
-    font-variation-settings: "wdth" 100, "GRAD" 0, "opsz" 144;
-}
diff --git a/StartSch/css/home.css b/StartSch/css/home.css
index 8de046ae..7cdd8ece 100644
--- a/StartSch/css/home.css
+++ b/StartSch/css/home.css
@@ -7,9 +7,23 @@
         #news {
             grid-column: middle;
             grid-row: 1 / 4;
-            background-color: var(--md-sys-color-surface-container-low);
+            /*background-color: var(--md-sys-color-surface);*/
             margin-top: 24px;
             padding: 16px;
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+            
+            .post-preview {
+                background-color: var(--md-sys-color-surface);
+                padding: 24px;
+                border-radius: 2px;
+                
+                &:first-child {
+                    border-top-left-radius: 24px;
+                    border-top-right-radius: 24px;
+                }
+            }
         }
     }
 
diff --git a/StartSch/css/main-layout.css b/StartSch/css/main-layout.css
index e764c593..d63bdf07 100644
--- a/StartSch/css/main-layout.css
+++ b/StartSch/css/main-layout.css
@@ -7,7 +7,6 @@
         main {
             grid-column: middle;
             grid-row: 1 / 4;
-            background-color: var(--md-sys-color-surface-container-low);
             margin-top: 24px;
             padding: 16px;
         }
diff --git a/StartSch/css/posts.css b/StartSch/css/posts.css
index 6cb63028..c0180b7f 100644
--- a/StartSch/css/posts.css
+++ b/StartSch/css/posts.css
@@ -127,6 +127,4 @@ EventView, EventPreview, PostView, PostPreview, GroupPage
     .body {
         margin-top: 4px;
     }
-
-    margin-bottom: 16px;
 }
diff --git a/StartSch/css/tokens/md-sys-type.css b/StartSch/css/tokens/md-sys-type.css
new file mode 100644
index 00000000..2e764663
--- /dev/null
+++ b/StartSch/css/tokens/md-sys-type.css
@@ -0,0 +1,204 @@
+/*
+Material 3 type scale (md.sys.typescale.*).
+Values: Google Material 3 v0.192 (https://m3.material.io/styles/typography/type-scale-tokens),
+matching @material/web token definitions. The font/size/line-height/weight tokens are
+consumed by @material/web components; tracking tokens are part of the spec but not
+read by the components.
+*/
+:root {
+    --md-ref-typeface-serif: "Roboto Serif", serif;
+    --md-ref-typeface-google-sans: "Google Sans Flex", sans-serif;
+    --md-ref-typeface-roboto-flex: "Roboto Flex", sans-serif;
+
+    --md-ref-typeface-brand: var(--md-ref-typeface-google-sans);
+    /*--md-ref-typeface-plain: var(--md-ref-typeface-roboto-flex);*/
+    --md-ref-typeface-plain: var(--md-ref-typeface-google-sans);
+
+    --md-ref-typeface-weight-regular: 400;
+    --md-ref-typeface-weight-medium: 500;
+    --md-ref-typeface-weight-bold: 700;
+
+    --md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);
+    --md-sys-typescale-body-large-size: 1rem;
+    --md-sys-typescale-body-large-line-height: 1.5rem;
+    --md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular);
+    --md-sys-typescale-body-large-tracking: 0.03125rem;
+
+    --md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);
+    --md-sys-typescale-body-medium-size: 0.875rem;
+    --md-sys-typescale-body-medium-line-height: 1.25rem;
+    --md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular);
+    --md-sys-typescale-body-medium-tracking: 0.015625rem;
+
+    --md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);
+    --md-sys-typescale-body-small-size: 0.75rem;
+    --md-sys-typescale-body-small-line-height: 1rem;
+    --md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular);
+    --md-sys-typescale-body-small-tracking: 0.025rem;
+
+    --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);
+    --md-sys-typescale-display-large-size: 3.5625rem;
+    --md-sys-typescale-display-large-line-height: 4rem;
+    --md-sys-typescale-display-large-weight: var(--md-ref-typeface-weight-regular);
+    --md-sys-typescale-display-large-tracking: -0.015625rem;
+
+    --md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);
+    --md-sys-typescale-display-medium-size: 2.8125rem;
+    --md-sys-typescale-display-medium-line-height: 3.25rem;
+    --md-sys-typescale-display-medium-weight: var(--md-ref-typeface-weight-regular);
+    --md-sys-typescale-display-medium-tracking: 0rem;
+
+    --md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);
+    --md-sys-typescale-display-small-size: 2.25rem;
+    --md-sys-typescale-display-small-line-height: 2.75rem;
+    --md-sys-typescale-display-small-weight: var(--md-ref-typeface-weight-regular);
+    --md-sys-typescale-display-small-tracking: 0rem;
+
+    --md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);
+    --md-sys-typescale-headline-large-size: 2rem;
+    --md-sys-typescale-headline-large-line-height: 2.5rem;
+    --md-sys-typescale-headline-large-weight: var(--md-ref-typeface-weight-regular);
+    --md-sys-typescale-headline-large-tracking: 0rem;
+
+    --md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);
+    --md-sys-typescale-headline-medium-size: 1.75rem;
+    --md-sys-typescale-headline-medium-line-height: 2.25rem;
+    --md-sys-typescale-headline-medium-weight: var(--md-ref-typeface-weight-regular);
+    --md-sys-typescale-headline-medium-tracking: 0rem;
+
+    --md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);
+    --md-sys-typescale-headline-small-size: 1.5rem;
+    --md-sys-typescale-headline-small-line-height: 2rem;
+    --md-sys-typescale-headline-small-weight: var(--md-ref-typeface-weight-regular);
+    --md-sys-typescale-headline-small-tracking: 0rem;
+
+    --md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);
+    --md-sys-typescale-title-large-size: 1.375rem;
+    --md-sys-typescale-title-large-line-height: 1.75rem;
+    --md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-regular);
+    --md-sys-typescale-title-large-tracking: 0rem;
+
+    --md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);
+    --md-sys-typescale-title-medium-size: 1rem;
+    --md-sys-typescale-title-medium-line-height: 1.5rem;
+    --md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);
+    --md-sys-typescale-title-medium-tracking: 0.009375rem;
+
+    --md-sys-typescale-title-small-font: var(--md-ref-typeface-plain);
+    --md-sys-typescale-title-small-size: 0.875rem;
+    --md-sys-typescale-title-small-line-height: 1.25rem;
+    --md-sys-typescale-title-small-weight: var(--md-ref-typeface-weight-medium);
+    --md-sys-typescale-title-small-tracking: 0.00625rem;
+
+    --md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);
+    --md-sys-typescale-label-large-size: 0.875rem;
+    --md-sys-typescale-label-large-line-height: 1.25rem;
+    --md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);
+    --md-sys-typescale-label-large-tracking: 0.00625rem;
+
+    --md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);
+    --md-sys-typescale-label-medium-size: 0.75rem;
+    --md-sys-typescale-label-medium-line-height: 1rem;
+    --md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-medium);
+    --md-sys-typescale-label-medium-tracking: 0.03125rem;
+
+    --md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);
+    --md-sys-typescale-label-small-size: 0.6875rem;
+    --md-sys-typescale-label-small-line-height: 1rem;
+    --md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium);
+    --md-sys-typescale-label-small-tracking: 0.03125rem;
+
+    /* Emphasized type scale (M3 expressive update).
+       Values: androidx material3 TypeScaleTokens (v0_103).
+       Weight bumps baseline 400→500, 500→700; display-large tracking −0.25→0,
+       body-large tracking 0.5→0.15; sizes/line-heights/fonts unchanged. */
+    --md-sys-typescale-emphasized-body-large-font: var(--md-ref-typeface-plain);
+    --md-sys-typescale-emphasized-body-large-size: 1rem;
+    --md-sys-typescale-emphasized-body-large-line-height: 1.5rem;
+    --md-sys-typescale-emphasized-body-large-weight: var(--md-ref-typeface-weight-medium);
+    --md-sys-typescale-emphasized-body-large-tracking: 0.009375rem;
+
+    --md-sys-typescale-emphasized-body-medium-font: var(--md-ref-typeface-plain);
+    --md-sys-typescale-emphasized-body-medium-size: 0.875rem;
+    --md-sys-typescale-emphasized-body-medium-line-height: 1.25rem;
+    --md-sys-typescale-emphasized-body-medium-weight: var(--md-ref-typeface-weight-medium);
+    --md-sys-typescale-emphasized-body-medium-tracking: 0.015625rem;
+
+    --md-sys-typescale-emphasized-body-small-font: var(--md-ref-typeface-plain);
+    --md-sys-typescale-emphasized-body-small-size: 0.75rem;
+    --md-sys-typescale-emphasized-body-small-line-height: 1rem;
+    --md-sys-typescale-emphasized-body-small-weight: var(--md-ref-typeface-weight-medium);
+    --md-sys-typescale-emphasized-body-small-tracking: 0.025rem;
+
+    --md-sys-typescale-emphasized-display-large-font: var(--md-ref-typeface-brand);
+    --md-sys-typescale-emphasized-display-large-size: 3.5625rem;
+    --md-sys-typescale-emphasized-display-large-line-height: 4rem;
+    --md-sys-typescale-emphasized-display-large-weight: var(--md-ref-typeface-weight-medium);
+    --md-sys-typescale-emphasized-display-large-tracking: 0rem;
+
+    --md-sys-typescale-emphasized-display-medium-font: var(--md-ref-typeface-brand);
+    --md-sys-typescale-emphasized-display-medium-size: 2.8125rem;
+    --md-sys-typescale-emphasized-display-medium-line-height: 3.25rem;
+    --md-sys-typescale-emphasized-display-medium-weight: var(--md-ref-typeface-weight-medium);
+    --md-sys-typescale-emphasized-display-medium-tracking: 0rem;
+
+    --md-sys-typescale-emphasized-display-small-font: var(--md-ref-typeface-brand);
+    --md-sys-typescale-emphasized-display-small-size: 2.25rem;
+    --md-sys-typescale-emphasized-display-small-line-height: 2.75rem;
+    --md-sys-typescale-emphasized-display-small-weight: var(--md-ref-typeface-weight-medium);
+    --md-sys-typescale-emphasized-display-small-tracking: 0rem;
+
+    --md-sys-typescale-emphasized-headline-large-font: var(--md-ref-typeface-brand);
+    --md-sys-typescale-emphasized-headline-large-size: 2rem;
+    --md-sys-typescale-emphasized-headline-large-line-height: 2.5rem;
+    --md-sys-typescale-emphasized-headline-large-weight: var(--md-ref-typeface-weight-medium);
+    --md-sys-typescale-emphasized-headline-large-tracking: 0rem;
+
+    --md-sys-typescale-emphasized-headline-medium-font: var(--md-ref-typeface-brand);
+    --md-sys-typescale-emphasized-headline-medium-size: 1.75rem;
+    --md-sys-typescale-emphasized-headline-medium-line-height: 2.25rem;
+    --md-sys-typescale-emphasized-headline-medium-weight: var(--md-ref-typeface-weight-medium);
+    --md-sys-typescale-emphasized-headline-medium-tracking: 0rem;
+
+    --md-sys-typescale-emphasized-headline-small-font: var(--md-ref-typeface-brand);
+    --md-sys-typescale-emphasized-headline-small-size: 1.5rem;
+    --md-sys-typescale-emphasized-headline-small-line-height: 2rem;
+    --md-sys-typescale-emphasized-headline-small-weight: var(--md-ref-typeface-weight-medium);
+    --md-sys-typescale-emphasized-headline-small-tracking: 0rem;
+
+    --md-sys-typescale-emphasized-title-large-font: var(--md-ref-typeface-brand);
+    --md-sys-typescale-emphasized-title-large-size: 1.375rem;
+    --md-sys-typescale-emphasized-title-large-line-height: 1.75rem;
+    --md-sys-typescale-emphasized-title-large-weight: var(--md-ref-typeface-weight-medium);
+    --md-sys-typescale-emphasized-title-large-tracking: 0rem;
+
+    --md-sys-typescale-emphasized-title-medium-font: var(--md-ref-typeface-plain);
+    --md-sys-typescale-emphasized-title-medium-size: 1rem;
+    --md-sys-typescale-emphasized-title-medium-line-height: 1.5rem;
+    --md-sys-typescale-emphasized-title-medium-weight: var(--md-ref-typeface-weight-bold);
+    --md-sys-typescale-emphasized-title-medium-tracking: 0.009375rem;
+
+    --md-sys-typescale-emphasized-title-small-font: var(--md-ref-typeface-plain);
+    --md-sys-typescale-emphasized-title-small-size: 0.875rem;
+    --md-sys-typescale-emphasized-title-small-line-height: 1.25rem;
+    --md-sys-typescale-emphasized-title-small-weight: var(--md-ref-typeface-weight-bold);
+    --md-sys-typescale-emphasized-title-small-tracking: 0.00625rem;
+
+    --md-sys-typescale-emphasized-label-large-font: var(--md-ref-typeface-plain);
+    --md-sys-typescale-emphasized-label-large-size: 0.875rem;
+    --md-sys-typescale-emphasized-label-large-line-height: 1.25rem;
+    --md-sys-typescale-emphasized-label-large-weight: var(--md-ref-typeface-weight-bold);
+    --md-sys-typescale-emphasized-label-large-tracking: 0.00625rem;
+
+    --md-sys-typescale-emphasized-label-medium-font: var(--md-ref-typeface-plain);
+    --md-sys-typescale-emphasized-label-medium-size: 0.75rem;
+    --md-sys-typescale-emphasized-label-medium-line-height: 1rem;
+    --md-sys-typescale-emphasized-label-medium-weight: var(--md-ref-typeface-weight-bold);
+    --md-sys-typescale-emphasized-label-medium-tracking: 0.03125rem;
+
+    --md-sys-typescale-emphasized-label-small-font: var(--md-ref-typeface-plain);
+    --md-sys-typescale-emphasized-label-small-size: 0.6875rem;
+    --md-sys-typescale-emphasized-label-small-line-height: 1rem;
+    --md-sys-typescale-emphasized-label-small-weight: var(--md-ref-typeface-weight-bold);
+    --md-sys-typescale-emphasized-label-small-tracking: 0.03125rem;
+}
diff --git a/StartSch/css/tokens/sch-comp.css b/StartSch/css/tokens/sch-comp.css
index e7218451..d0e6b0da 100644
--- a/StartSch/css/tokens/sch-comp.css
+++ b/StartSch/css/tokens/sch-comp.css
@@ -1,3 +1,4 @@
 :root {
-    --sch-comp-card-container-color: var(--md-sys-color-surface-container-low);
+    --sch-comp-card-container-color: var(--md-sys-color-surface-container-lowest);
+    --sch-comp-card-content-color: var(--md-sys-color-on-surface);
 }
diff --git a/StartSch/css/tokens/sch-layout.css b/StartSch/css/tokens/sch-layout.css
new file mode 100644
index 00000000..074fadaf
--- /dev/null
+++ b/StartSch/css/tokens/sch-layout.css
@@ -0,0 +1,3 @@
+:root {
+    --sch-layout-
+}
diff --git a/StartSch/css/typescales.css b/StartSch/css/typescales.css
new file mode 100644
index 00000000..9176804c
--- /dev/null
+++ b/StartSch/css/typescales.css
@@ -0,0 +1,211 @@
+.typescale-display-large {
+    font-family: var(--md-sys-typescale-display-large-font);
+    font-size: var(--md-sys-typescale-display-large-size);
+    line-height: var(--md-sys-typescale-display-large-line-height);
+    font-weight: var(--md-sys-typescale-display-large-weight);
+    letter-spacing: var(--md-sys-typescale-display-large-tracking);
+}
+.typescale-display-medium {
+    font-family: var(--md-sys-typescale-display-medium-font);
+    font-size: var(--md-sys-typescale-display-medium-size);
+    line-height: var(--md-sys-typescale-display-medium-line-height);
+    font-weight: var(--md-sys-typescale-display-medium-weight);
+    letter-spacing: var(--md-sys-typescale-display-medium-tracking);
+}
+.typescale-display-small {
+    font-family: var(--md-sys-typescale-display-small-font);
+    font-size: var(--md-sys-typescale-display-small-size);
+    line-height: var(--md-sys-typescale-display-small-line-height);
+    font-weight: var(--md-sys-typescale-display-small-weight);
+    letter-spacing: var(--md-sys-typescale-display-small-tracking);
+}
+.typescale-headline-large {
+    font-family: var(--md-sys-typescale-headline-large-font);
+    font-size: var(--md-sys-typescale-headline-large-size);
+    line-height: var(--md-sys-typescale-headline-large-line-height);
+    font-weight: var(--md-sys-typescale-headline-large-weight);
+    letter-spacing: var(--md-sys-typescale-headline-large-tracking);
+}
+.typescale-headline-medium {
+    font-family: var(--md-sys-typescale-headline-medium-font);
+    font-size: var(--md-sys-typescale-headline-medium-size);
+    line-height: var(--md-sys-typescale-headline-medium-line-height);
+    font-weight: var(--md-sys-typescale-headline-medium-weight);
+    letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
+}
+.typescale-headline-small {
+    font-family: var(--md-sys-typescale-headline-small-font);
+    font-size: var(--md-sys-typescale-headline-small-size);
+    line-height: var(--md-sys-typescale-headline-small-line-height);
+    font-weight: var(--md-sys-typescale-headline-small-weight);
+    letter-spacing: var(--md-sys-typescale-headline-small-tracking);
+}
+.typescale-title-large {
+    font-family: var(--md-sys-typescale-title-large-font);
+    font-size: var(--md-sys-typescale-title-large-size);
+    line-height: var(--md-sys-typescale-title-large-line-height);
+    font-weight: var(--md-sys-typescale-title-large-weight);
+    letter-spacing: var(--md-sys-typescale-title-large-tracking);
+}
+.typescale-title-medium {
+    font-family: var(--md-sys-typescale-title-medium-font);
+    font-size: var(--md-sys-typescale-title-medium-size);
+    line-height: var(--md-sys-typescale-title-medium-line-height);
+    font-weight: var(--md-sys-typescale-title-medium-weight);
+    letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+}
+.typescale-title-small {
+    font-family: var(--md-sys-typescale-title-small-font);
+    font-size: var(--md-sys-typescale-title-small-size);
+    line-height: var(--md-sys-typescale-title-small-line-height);
+    font-weight: var(--md-sys-typescale-title-small-weight);
+    letter-spacing: var(--md-sys-typescale-title-small-tracking);
+}
+.typescale-body-large {
+    font-family: var(--md-sys-typescale-body-large-font);
+    font-size: var(--md-sys-typescale-body-large-size);
+    line-height: var(--md-sys-typescale-body-large-line-height);
+    font-weight: var(--md-sys-typescale-body-large-weight);
+    letter-spacing: var(--md-sys-typescale-body-large-tracking);
+}
+.typescale-body-medium {
+    font-family: var(--md-sys-typescale-body-medium-font);
+    font-size: var(--md-sys-typescale-body-medium-size);
+    line-height: var(--md-sys-typescale-body-medium-line-height);
+    font-weight: var(--md-sys-typescale-body-medium-weight);
+    letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+}
+.typescale-body-small {
+    font-family: var(--md-sys-typescale-body-small-font);
+    font-size: var(--md-sys-typescale-body-small-size);
+    line-height: var(--md-sys-typescale-body-small-line-height);
+    font-weight: var(--md-sys-typescale-body-small-weight);
+    letter-spacing: var(--md-sys-typescale-body-small-tracking);
+}
+.typescale-label-large {
+    font-family: var(--md-sys-typescale-label-large-font);
+    font-size: var(--md-sys-typescale-label-large-size);
+    line-height: var(--md-sys-typescale-label-large-line-height);
+    font-weight: var(--md-sys-typescale-label-large-weight);
+    letter-spacing: var(--md-sys-typescale-label-large-tracking);
+}
+.typescale-label-medium {
+    font-family: var(--md-sys-typescale-label-medium-font);
+    font-size: var(--md-sys-typescale-label-medium-size);
+    line-height: var(--md-sys-typescale-label-medium-line-height);
+    font-weight: var(--md-sys-typescale-label-medium-weight);
+    letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+}
+.typescale-label-small {
+    font-family: var(--md-sys-typescale-label-small-font);
+    font-size: var(--md-sys-typescale-label-small-size);
+    line-height: var(--md-sys-typescale-label-small-line-height);
+    font-weight: var(--md-sys-typescale-label-small-weight);
+    letter-spacing: var(--md-sys-typescale-label-small-tracking);
+}
+
+.typescale-emphasized-display-large {
+    font-family: var(--md-sys-typescale-emphasized-display-large-font);
+    font-size: var(--md-sys-typescale-emphasized-display-large-size);
+    line-height: var(--md-sys-typescale-emphasized-display-large-line-height);
+    font-weight: var(--md-sys-typescale-emphasized-display-large-weight);
+    letter-spacing: var(--md-sys-typescale-emphasized-display-large-tracking);
+}
+.typescale-emphasized-display-medium {
+    font-family: var(--md-sys-typescale-emphasized-display-medium-font);
+    font-size: var(--md-sys-typescale-emphasized-display-medium-size);
+    line-height: var(--md-sys-typescale-emphasized-display-medium-line-height);
+    font-weight: var(--md-sys-typescale-emphasized-display-medium-weight);
+    letter-spacing: var(--md-sys-typescale-emphasized-display-medium-tracking);
+}
+.typescale-emphasized-display-small {
+    font-family: var(--md-sys-typescale-emphasized-display-small-font);
+    font-size: var(--md-sys-typescale-emphasized-display-small-size);
+    line-height: var(--md-sys-typescale-emphasized-display-small-line-height);
+    font-weight: var(--md-sys-typescale-emphasized-display-small-weight);
+    letter-spacing: var(--md-sys-typescale-emphasized-display-small-tracking);
+}
+.typescale-emphasized-headline-large {
+    font-family: var(--md-sys-typescale-emphasized-headline-large-font);
+    font-size: var(--md-sys-typescale-emphasized-headline-large-size);
+    line-height: var(--md-sys-typescale-emphasized-headline-large-line-height);
+    font-weight: var(--md-sys-typescale-emphasized-headline-large-weight);
+    letter-spacing: var(--md-sys-typescale-emphasized-headline-large-tracking);
+}
+.typescale-emphasized-headline-medium {
+    font-family: var(--md-sys-typescale-emphasized-headline-medium-font);
+    font-size: var(--md-sys-typescale-emphasized-headline-medium-size);
+    line-height: var(--md-sys-typescale-emphasized-headline-medium-line-height);
+    font-weight: var(--md-sys-typescale-emphasized-headline-medium-weight);
+    letter-spacing: var(--md-sys-typescale-emphasized-headline-medium-tracking);
+}
+.typescale-emphasized-headline-small {
+    font-family: var(--md-sys-typescale-emphasized-headline-small-font);
+    font-size: var(--md-sys-typescale-emphasized-headline-small-size);
+    line-height: var(--md-sys-typescale-emphasized-headline-small-line-height);
+    font-weight: var(--md-sys-typescale-emphasized-headline-small-weight);
+    letter-spacing: var(--md-sys-typescale-emphasized-headline-small-tracking);
+}
+.typescale-emphasized-title-large {
+    font-family: var(--md-sys-typescale-emphasized-title-large-font);
+    font-size: var(--md-sys-typescale-emphasized-title-large-size);
+    line-height: var(--md-sys-typescale-emphasized-title-large-line-height);
+    font-weight: var(--md-sys-typescale-emphasized-title-large-weight);
+    letter-spacing: var(--md-sys-typescale-emphasized-title-large-tracking);
+}
+.typescale-emphasized-title-medium {
+    font-family: var(--md-sys-typescale-emphasized-title-medium-font);
+    font-size: var(--md-sys-typescale-emphasized-title-medium-size);
+    line-height: var(--md-sys-typescale-emphasized-title-medium-line-height);
+    font-weight: var(--md-sys-typescale-emphasized-title-medium-weight);
+    letter-spacing: var(--md-sys-typescale-emphasized-title-medium-tracking);
+}
+.typescale-emphasized-title-small {
+    font-family: var(--md-sys-typescale-emphasized-title-small-font);
+    font-size: var(--md-sys-typescale-emphasized-title-small-size);
+    line-height: var(--md-sys-typescale-emphasized-title-small-line-height);
+    font-weight: var(--md-sys-typescale-emphasized-title-small-weight);
+    letter-spacing: var(--md-sys-typescale-emphasized-title-small-tracking);
+}
+.typescale-emphasized-body-large {
+    font-family: var(--md-sys-typescale-emphasized-body-large-font);
+    font-size: var(--md-sys-typescale-emphasized-body-large-size);
+    line-height: var(--md-sys-typescale-emphasized-body-large-line-height);
+    font-weight: var(--md-sys-typescale-emphasized-body-large-weight);
+    letter-spacing: var(--md-sys-typescale-emphasized-body-large-tracking);
+}
+.typescale-emphasized-body-medium {
+    font-family: var(--md-sys-typescale-emphasized-body-medium-font);
+    font-size: var(--md-sys-typescale-emphasized-body-medium-size);
+    line-height: var(--md-sys-typescale-emphasized-body-medium-line-height);
+    font-weight: var(--md-sys-typescale-emphasized-body-medium-weight);
+    letter-spacing: var(--md-sys-typescale-emphasized-body-medium-tracking);
+}
+.typescale-emphasized-body-small {
+    font-family: var(--md-sys-typescale-emphasized-body-small-font);
+    font-size: var(--md-sys-typescale-emphasized-body-small-size);
+    line-height: var(--md-sys-typescale-emphasized-body-small-line-height);
+    font-weight: var(--md-sys-typescale-emphasized-body-small-weight);
+    letter-spacing: var(--md-sys-typescale-emphasized-body-small-tracking);
+}
+.typescale-emphasized-label-large {
+    font-family: var(--md-sys-typescale-emphasized-label-large-font);
+    font-size: var(--md-sys-typescale-emphasized-label-large-size);
+    line-height: var(--md-sys-typescale-emphasized-label-large-line-height);
+    font-weight: var(--md-sys-typescale-emphasized-label-large-weight);
+    letter-spacing: var(--md-sys-typescale-emphasized-label-large-tracking);
+}
+.typescale-emphasized-label-medium {
+    font-family: var(--md-sys-typescale-emphasized-label-medium-font);
+    font-size: var(--md-sys-typescale-emphasized-label-medium-size);
+    line-height: var(--md-sys-typescale-emphasized-label-medium-line-height);
+    font-weight: var(--md-sys-typescale-emphasized-label-medium-weight);
+    letter-spacing: var(--md-sys-typescale-emphasized-label-medium-tracking);
+}
+.typescale-emphasized-label-small {
+    font-family: var(--md-sys-typescale-emphasized-label-small-font);
+    font-size: var(--md-sys-typescale-emphasized-label-small-size);
+    line-height: var(--md-sys-typescale-emphasized-label-small-line-height);
+    font-weight: var(--md-sys-typescale-emphasized-label-small-weight);
+    letter-spacing: var(--md-sys-typescale-emphasized-label-small-tracking);
+}
diff --git a/StartSch/js/components/expressive-button.ts b/StartSch/js/components/expressive-button.ts
index 1bcf6c1f..71d63b68 100644
--- a/StartSch/js/components/expressive-button.ts
+++ b/StartSch/js/components/expressive-button.ts
@@ -52,6 +52,34 @@ export class ExpressiveButton extends MdButton {
                 display: flex;
             }
 
+            :host(.chip) {
+                --_container-height: 32px;
+                --_leading-space: 10px;
+                --_trailing-space: 10px;
+                --_with-leading-icon-leading-space: 10px;
+                --_with-leading-icon-trailing-space: 10px;
+                --_with-trailing-icon-leading-space: 10px;
+                --_with-trailing-icon-trailing-space: 10px;
+                --md-icon-size: 20px;
+                --_icon-size: 20px;
+                gap: 4px;
+            }
+
+            :host(.chip.square) {
+                /* intentionally different from the Material spec, so that the difference is more visible between
+                 selected/unselected states */
+                --shape: 10px;
+            }
+
+            :host(.chip.round) {
+                --shape: 16px;
+            }
+
+            :host(:not(.standard).chip:active) {
+                /* intentionally different from the Material spec */
+                --shape: 6px;
+            }
+
             :host(.extra-small) {
                 --_container-height: 32px;
                 --_leading-space: 10px;