fix: address brand page review feedback — sizing, wording, and layout

- Decrease container width to max-w-2xl to match other info pages
- Increase font sizes from text-xs to text-sm (14px+)
- Increase button sizes from sm to md for better touch targets
- Update guidelines wording per alexdln's suggestion with Discord link

Author: Adebesin-Cell

app/components/Brand/Customize.vue

@@ -144,7 +144,7 @@ async function downloadCustomPng() {
         <!-- Accent color picker -->
         <fieldset class="flex items-center gap-3 flex-1 border-none p-0 m-0">
           <legend class="sr-only">{{ $t('brand.customize.accent_label') }}</legend>
-          <span class="text-xs font-mono text-fg-muted shrink-0">{{
+          <span class="text-sm font-mono text-fg-muted shrink-0">{{
             $t('brand.customize.accent_label')
           }}</span>
           <div class="flex items-center gap-1.5" role="radiogroup">
@@ -170,13 +170,13 @@ async function downloadCustomPng() {
 
         <!-- Background toggle -->
         <div class="flex items-center gap-3">
-          <span class="text-xs font-mono text-fg-muted">{{ $t('brand.customize.bg_label') }}</span>
+          <span class="text-sm font-mono text-fg-muted">{{ $t('brand.customize.bg_label') }}</span>
           <div
             class="flex items-center border border-border rounded-md overflow-hidden"
             role="radiogroup"
           >
             <ButtonBase
-              size="sm"
+              size="md"
               role="radio"
               :aria-checked="customBgDark"
               :aria-label="$t('brand.logos.on_dark')"
@@ -189,7 +189,7 @@ async function downloadCustomPng() {
               {{ $t('brand.logos.on_dark') }}
             </ButtonBase>
             <ButtonBase
-              size="sm"
+              size="md"
               role="radio"
               :aria-checked="!customBgDark"
               :aria-label="$t('brand.logos.on_light')"
@@ -207,7 +207,7 @@ async function downloadCustomPng() {
         <!-- Download buttons -->
         <div class="flex items-center gap-2">
           <ButtonBase
-            size="sm"
+            size="md"
             :aria-label="$t('brand.customize.download_svg_aria')"
             :disabled="svgLoading"
             @click="downloadCustomSvg"
@@ -220,7 +220,7 @@ async function downloadCustomPng() {
             {{ $t('brand.logos.download_svg') }}
           </ButtonBase>
           <ButtonBase
-            size="sm"
+            size="md"
             :aria-label="$t('brand.customize.download_png_aria')"
             :disabled="pngLoading"
             @click="downloadCustomPng"

app/pages/brand.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ACCENT_COLORS } from '#shared/utils/constants'
+import { ACCENT_COLORS, DISCORD_COMMUNITY_URL } from '#shared/utils/constants'
 
 useSeoMeta({
   title: () => `${$t('brand.title')} - npmx`,
@@ -69,7 +69,7 @@ async function handlePngDownload(logo: (typeof logos)[number]) {
 
 <template>
   <main class="container flex-1 py-12 sm:py-16 overflow-x-hidden">
-    <article class="max-w-4xl mx-auto">
+    <article class="max-w-2xl mx-auto">
       <!-- Header -->
       <header class="mb-12">
         <div class="flex items-baseline justify-between gap-4 mb-4">
@@ -119,12 +119,12 @@ async function handlePngDownload(logo: (typeof logos)[number]) {
                     />
                   </div>
                   <div class="flex items-center justify-between mt-2">
-                    <span class="text-xs text-fg-subtle font-mono">{{
+                    <span class="text-sm text-fg-subtle font-mono">{{
                       $t('brand.logos.on_dark')
                     }}</span>
                     <div class="flex items-center gap-2">
                       <ButtonBase
-                        size="sm"
+                        size="md"
                         :aria-label="
                           $t('brand.logos.download_svg_aria', {
                             name: `${logo.name()} (${$t('brand.logos.on_dark')})`,
@@ -145,7 +145,7 @@ async function handlePngDownload(logo: (typeof logos)[number]) {
                         {{ $t('brand.logos.download_svg') }}
                       </ButtonBase>
                       <ButtonBase
-                        size="sm"
+                        size="md"
                         :aria-label="
                           $t('brand.logos.download_png_aria', {
                             name: `${logo.name()} (${$t('brand.logos.on_dark')})`,
@@ -189,12 +189,12 @@ async function handlePngDownload(logo: (typeof logos)[number]) {
                     />
                   </div>
                   <div class="flex items-center justify-between mt-2">
-                    <span class="text-xs text-fg-subtle font-mono">{{
+                    <span class="text-sm text-fg-subtle font-mono">{{
                       $t('brand.logos.on_light')
                     }}</span>
                     <div class="flex items-center gap-2">
                       <ButtonBase
-                        size="sm"
+                        size="md"
                         :aria-label="
                           $t('brand.logos.download_svg_aria', {
                             name: `${logo.name()} (${$t('brand.logos.on_light')})`,
@@ -215,7 +215,7 @@ async function handlePngDownload(logo: (typeof logos)[number]) {
                         {{ $t('brand.logos.download_svg') }}
                       </ButtonBase>
                       <ButtonBase
-                        size="sm"
+                        size="md"
                         :aria-label="
                           $t('brand.logos.download_png_aria', {
                             name: `${logo.name()} (${$t('brand.logos.on_light')})`,
@@ -314,7 +314,17 @@ async function handlePngDownload(logo: (typeof logos)[number]) {
           <blockquote
             class="border-is-2 border-is-accent ps-6 py-2 text-fg-muted leading-relaxed italic"
           >
-            {{ $t('brand.guidelines.message') }}
+            <i18n-t keypath="brand.guidelines.message" tag="p" class="m-0">
+              <template #link>
+                <a
+                  :href="DISCORD_COMMUNITY_URL"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="text-accent hover:underline"
+                  >{{ $t('brand.guidelines.discord_link_text') }}</a
+                >
+              </template>
+            </i18n-t>
           </blockquote>
         </section>
       </div>

i18n/locales/en.json

@@ -1521,7 +1521,8 @@
     },
     "guidelines": {
       "title": "just a note",
-      "message": "When using the npmx logo, we kindly ask that you keep it legible — ensure there's enough contrast against the background and don't go smaller than 24px. Accessibility matters to us, and we appreciate you keeping that in mind."
+      "message": "Accessibility matters to us, and we would love you to follow us in this vision. When using mentioned media, ensure there is enough contrast against the background, and don't go smaller than 24px. If you need any other resources or additional information about the project, feel free to reach us at {link}.",
+      "discord_link_text": "chat.npmx.dev"
     }
   }
 }