From f9afe41fab01328c19e3ca4fdba978ce9250d575 Mon Sep 17 00:00:00 2001
From: Parker Lougheed <parlough@gmail.com>
Date: Mon, 17 Nov 2025 20:58:26 -0600
Subject: [PATCH] Simplify design systems section on widget catalog index page

---
 site/lib/src/components/common/card.dart |  2 +-
 src/content/ui/widgets/index.md          | 35 ++++++++++++------------
 2 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/site/lib/src/components/common/card.dart b/site/lib/src/components/common/card.dart
index 91892ba1150..6dde9a7983f 100644
--- a/site/lib/src/components/common/card.dart
+++ b/site/lib/src/components/common/card.dart
@@ -62,7 +62,7 @@ class Card extends StatelessComponent {
       ],
       content: [?child],
       link: link,
-      filled: link != null,
+      filled: link != null && attributes['filled'] != 'false',
       outlined: outlined,
     );
   }
diff --git a/src/content/ui/widgets/index.md b/src/content/ui/widgets/index.md
index 1a640246125..9be8667fcce 100644
--- a/src/content/ui/widgets/index.md
+++ b/src/content/ui/widgets/index.md
@@ -14,26 +14,25 @@ you can also see all the widgets in the [widget index][].
 Flutter ships with two design systems as part of the SDK.
 
 <div class="card-grid">
-{% assign categories = catalog.index | sortBy: 'name' -%}
-{% for section in categories %}
-  {%- if section.name == "Cupertino" or section.name == "Material components" -%}
-    <a class="card outlined-card" href="{{page.url}}/{{section.id}}">
-      <div class="card-header">
-        <span class="card-title">{{section.name}}</span>
-      </div>
-      <div class="card-content">
-        <p>{{section.description}}</p>
-      </div>
-    </a>
-  {% endif -%}
-{% endfor %}
+  <Card title="Cupertino" link="/ui/widgets/cupertino" outlined="true" filled="false">
+    Beautiful and high-fidelity widgets that align with
+    Apple's Human Interface Guidelines for iOS and macOS.
+  </Card>
+  <Card title="Material design" link="/ui/widgets/material" outlined="true" filled="false">
+    Visual, behavioral, and motion-rich widgets implementing
+    the Material 3 design specification.
+  </Card>
 </div>
 
-You can find many more designs systems created by the Flutter community
-on [pub.dev]({{site.pub}}), the package repository for Dart and Flutter,
-like for example the Windows-inspired [fluent_ui]({{site.pub-pkg}}/fluent_ui),
-macOS-inspired [macos_ui]({{site.pub-pkg}}/macos_ui),
-and the Ubuntu-inspired [yaru]({{site.pub-pkg}}/yaru) widgets.
+You can find many more design systems created by the Flutter community
+on [pub.dev]({{site.pub}}), the package repository for Dart and Flutter.
+For example, the Windows-inspired [fluent_ui][],
+macOS-inspired [macos_ui][],
+and the Ubuntu-inspired [yaru][] widgets.
+
+[fluent_ui]: {{site.pub-pkg}}/fluent_ui
+[macos_ui]: {{site.pub-pkg}}/macos_ui
+[yaru]: {{site.pub-pkg}}/yaru
 
 ## Base widgets