From a0108f56b4b06f50eab2ff43ed729148b11aacdf Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Thu, 8 Oct 2026 14:52:42 +0200
Subject: [PATCH] Fix the pricing card border in dark mode, show six features
 on the Shape screenshot

---
 core/scss/ui/_pricing.scss    |  2 +-
 screenshots/pages/shape.astro | 13 ++++++++-----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/core/scss/ui/_pricing.scss b/core/scss/ui/_pricing.scss
index 80259cef6..4961d2e21 100644
--- a/core/scss/ui/_pricing.scss
+++ b/core/scss/ui/_pricing.scss
@@ -22,7 +22,7 @@ $pricing-card-width: 22rem;
   margin: 0 0 1rem;
   text-align: center;
   background: var(--bg-surface);
-  border: 1px solid $border-color;
+  border: var(--border-width) solid var(--border-color);
   box-shadow: var(--shadow-card);
   @include border-radius($border-radius-lg);
 
diff --git a/screenshots/pages/shape.astro b/screenshots/pages/shape.astro
index 621508cd4..aa6415a1d 100644
--- a/screenshots/pages/shape.astro
+++ b/screenshots/pages/shape.astro
@@ -1,8 +1,8 @@
 ---
-// Shape component: a three-item feature list, each item with a colored shape
-// above its heading, the way the marketing pages use it. Three colors so the
-// tint and the icon color read as a pair; medium size so the icons are legible
-// at picture size.
+// Shape component: a six-item feature grid, each item with a colored shape
+// above its heading, the way the marketing pages use it. Six colors so the
+// tint and the icon color read as a pair across the palette, at the default
+// size a page would use.
 import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
 import Card from '@ui/Card.astro'
 import CardBody from '@ui/CardBody.astro'
@@ -12,6 +12,9 @@ const features = [
   { icon: 'devices', color: 'blue', title: 'Mobile-optimized', text: 'Every page works on any screen size, from a phone to a wide monitor.' },
   { icon: 'mailbox', color: 'purple', title: 'Tested email clients', text: 'Checked in more than 90 email clients and devices.' },
   { icon: 'palette', color: 'green', title: 'Minimal design', text: 'Clean layouts based on Bootstrap and Material Design principles.' },
+  { icon: 'shield-check', color: 'orange', title: 'Secure by default', text: 'Sensible defaults for forms, auth pages and user settings.' },
+  { icon: 'chart-bar', color: 'red', title: 'Charts and tables', text: 'Dashboards, data grids and charts that fit in with the rest.' },
+  { icon: 'users', color: 'teal', title: 'Built for teams', text: 'Shared components and docs so everyone ships the same UI.' },
 ]
 ---
 
@@ -22,7 +25,7 @@ const features = [
         {
           features.map((feature) => (
             <div class="col-4">
-              <span class:list={['shape', 'shape-xl', `shape-${feature.color}`, 'mb-3']}>
+              <span class:list={['shape', `shape-${feature.color}`, 'mb-3']}>
                 <Icon name={feature.icon} />
               </span>
               <h3 class="h3">{feature.title}</h3>