@stacklist-app/brandkit 1.1.1 → 1.2.1

package/lib/config-schema.js

@@ -1,41 +1,62 @@
 /**
- * Starter config template with __TODO markers for AI agents.
- * Every section includes example entries with the correct field names
- * so AI agents can see the exact schema contract.
- * Extractable fields (colors, fonts, spacing, logos) are populated by generate.
+ * Default showcase config — a complete, company-agnostic "Brandkit" brand guide.
+ *
+ * This is what `brandkit init` scaffolds and what the example/ demo renders, so
+ * a fresh standup looks polished immediately. It doubles as living documentation:
+ * every section is populated with real, neutral sample content (no __TODO), using
+ * the v1.1.2 accent convention (--accent / --accent-foreground / --accent-text).
+ *
+ * Swap the values for your own brand. `brandkit generate` overwrites the
+ * extractable fields (colors, fonts, spacing, logos) from your codebase and
+ * preserves the curated ones (voice, components, accessibility copy).
  */
 function starterConfig() {
   return {
     brand: {
-      name: '__TODO',
-      displayName: '__TODO',
-      tagline: '__TODO',
-      description: '__TODO: A brief description of the brand and its visual language.',
-      url: '__TODO',
-      byline: '__TODO',
+      name: 'brandkit',
+      displayName: 'Brandkit',
+      tagline: 'The config-driven brand guide',
+      description: 'Brandkit turns a single config.json into a complete, living brand guide — colors, typography, logos, voice, and components, all driven by design tokens. This is the default guide; swap the config and assets to make it your own.',
+      url: 'github.com/The-Stack-Lab/brandkit',
+      byline: 'Open source · MIT',
       version: '1.0',
-      date: new Date().toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
+      date: new Date().toLocaleDateString('en-US', { month: 'long', year: 'numeric' }),
+      // Renames the "Web Style Guide" label in the header + footer.
+      guideLabel: 'Web Style Guide',
+      // Optional logo images. headerLogo replaces the text wordmark on the
+      // gradient header (use a light/reversed logo); sidebarLogo replaces the
+      // brand name at the top of the left menu (use a dark logo). Leave empty
+      // to fall back to the brand name as text.
+      headerLogo: '',
+      sidebarLogo: 'logos/brandkit-wordmark-dark.svg'
     },
     fonts: {
       display: {
-        family: 'Inter',
-        googleImport: 'Inter:wght@300;400;500;600;700',
-        description: '__TODO: Describe the display font character and usage.'
+        family: 'Space Grotesk',
+        googleImport: 'Space+Grotesk:wght@400;500;600;700',
+        description: 'Space Grotesk — a geometric sans with a little character. Used for headlines, the wordmark, and large display moments.'
       },
       body: {
         family: 'Inter',
         googleImport: 'Inter:wght@300;400;500;600;700',
-        description: '__TODO: Describe the body font character and usage.'
+        description: 'Inter — a highly legible workhorse for body copy, UI labels, and long-form reading at every size.'
       }
     },
     theme: {
-      '--purple': '#6366F1',
-      '--violet': '#4338CA',
+      // Accent fill vs. text split. --accent is the fill; --accent-foreground
+      // is text/icons ON the fill; --accent-text is the accent used AS text on
+      // a light surface. For a low-contrast fill (e.g. a bright orange), set
+      // --accent-foreground to a dark value and --accent-text to a darker shade.
+      '--accent': '#4F46E5',
+      '--accent-rgb': '79, 70, 229',
+      '--accent-foreground': '#FFFFFF',
+      '--accent-text': '#4338CA',
+      '--accent-2': '#7C3AED',
       '--lavender': '#A5B4FC',
-      '--coral': '#F87171',
-      '--coral-dark': '#DC2626',
-      '--coral-light': '#FCA5A5',
-      '--magenta': '#EC4899',
+      '--coral': '#FB7185',
+      '--coral-dark': '#E11D48',
+      '--coral-light': '#FDA4AF',
+      '--magenta': '#DB2777',
       '--ink': '#111827',
       '--graphite': '#374151',
       '--slate': '#6B7280',
@@ -43,16 +64,15 @@ function starterConfig() {
       '--mist': '#F3F4F6',
       '--cloud': '#F9FAFB',
       '--white': '#FFFFFF',
-      '--success': '#10B981',
-      '--warning': '#F59E0B',
-      '--error': '#EF4444',
-      '--info': '#3B82F6',
-      '--gradient-brand': 'linear-gradient(135deg, #4338CA 0%, #6366F1 50%, #EC4899 100%)',
-      '--gradient-brand-subtle': 'linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(236, 72, 153, 0.06) 100%)',
-      '--purple-rgb': '99, 102, 241',
+      '--success': '#16A34A',
+      '--warning': '#D97706',
+      '--error': '#DC2626',
+      '--info': '#2563EB',
+      '--gradient-brand': 'linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%)',
+      '--gradient-brand-subtle': 'linear-gradient(135deg, rgba(79, 70, 229, 0.06) 0%, rgba(124, 58, 237, 0.06) 100%)',
       '--ink-rgb': '17, 24, 39',
-      '--error-rgb': '239, 68, 68',
-      '--success-rgb': '16, 185, 129'
+      '--error-rgb': '220, 38, 38',
+      '--success-rgb': '22, 163, 74'
     },
     nav: [
       { group: 'Colors', items: [
@@ -76,57 +96,62 @@ function starterConfig() {
     ],
     colors: {
       brand: { label: 'Brand', items: [
-        { name: '__TODO: Primary', hex: '#6366F1', oklch: 'oklch(0.55 0.22 264)', cssVar: '--color-primary', role: '__TODO: Primary accent', light: false },
-        { name: '__TODO: Secondary', hex: '#EC4899', oklch: 'oklch(0.59 0.22 346)', cssVar: '--color-secondary', role: '__TODO: Secondary accent', light: false }
+        { name: 'Indigo', hex: '#4F46E5', oklch: 'oklch(0.51 0.23 277)', cssVar: '--accent', role: 'Primary accent — buttons, links, focus', light: false },
+        { name: 'Violet', hex: '#7C3AED', oklch: 'oklch(0.54 0.25 293)', cssVar: '--accent-2', role: 'Secondary accent, gradient end', light: false }
       ]},
       neutrals: { label: 'Neutrals', items: [
-        { name: 'Ink', hex: '#111827', oklch: 'oklch(0.17 0.02 265)', cssVar: '--foreground', role: 'Primary text, headings', light: false },
-        { name: 'Slate', hex: '#6B7280', oklch: 'oklch(0.55 0.02 265)', cssVar: '--muted-foreground', role: 'Tertiary text, captions', light: false },
-        { name: 'Mist', hex: '#F3F4F6', oklch: 'oklch(0.96 0.01 265)', cssVar: '--secondary', role: 'Section backgrounds', light: true },
-        { name: 'Cloud', hex: '#F9FAFB', oklch: 'oklch(0.98 0.00 265)', cssVar: '--background', role: 'Page background', light: true }
+        { name: 'Ink', hex: '#111827', oklch: 'oklch(0.21 0.03 265)', cssVar: '--ink', role: 'Primary text, headings', light: false },
+        { name: 'Graphite', hex: '#374151', oklch: 'oklch(0.37 0.03 260)', cssVar: '--graphite', role: 'Secondary text, descriptions', light: false },
+        { name: 'Slate', hex: '#6B7280', oklch: 'oklch(0.55 0.02 264)', cssVar: '--slate', role: 'Tertiary text, captions', light: false },
+        { name: 'Mist', hex: '#F3F4F6', oklch: 'oklch(0.97 0.00 265)', cssVar: '--mist', role: 'Borders, section backgrounds', light: true },
+        { name: 'Cloud', hex: '#F9FAFB', oklch: 'oklch(0.98 0.00 248)', cssVar: '--cloud', role: 'Page background', light: true }
       ]},
       semantic: { label: 'Semantic', items: [
-        { name: 'Success', hex: '#10B981', oklch: 'oklch(0.70 0.17 163)', cssVar: '--success', role: 'Confirmations, positive states', light: false },
-        { name: 'Warning', hex: '#F59E0B', oklch: 'oklch(0.78 0.16 80)', cssVar: '--warning', role: 'Attention, caution states', light: false },
-        { name: 'Error', hex: '#EF4444', oklch: 'oklch(0.59 0.22 27)', cssVar: '--destructive', role: 'Errors, destructive actions', light: false }
+        { name: 'Success', hex: '#16A34A', oklch: 'oklch(0.63 0.17 149)', cssVar: '--success', role: 'Confirmations, positive states', light: false },
+        { name: 'Warning', hex: '#D97706', oklch: 'oklch(0.67 0.16 58)', cssVar: '--warning', role: 'Attention, caution states', light: false },
+        { name: 'Error', hex: '#DC2626', oklch: 'oklch(0.58 0.22 27)', cssVar: '--error', role: 'Errors, destructive actions', light: false }
       ]}
     },
     gradients: [
       {
         name: 'Brand',
-        css: 'linear-gradient(135deg, #4338CA 0%, #6366F1 50%, #EC4899 100%)',
-        description: '__TODO: Primary gradient usage',
+        css: 'linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%)',
+        description: 'Hero backgrounds, feature headers, the wordmark lockup',
         stops: [
-          { color: '#4338CA', position: '0%', name: 'Violet' },
-          { color: '#6366F1', position: '50%', name: 'Indigo' },
-          { color: '#EC4899', position: '100%', name: 'Pink' }
+          { color: '#4F46E5', position: '0%', name: 'Indigo' },
+          { color: '#7C3AED', position: '100%', name: 'Violet' }
         ]
       },
       {
         name: 'Subtle',
-        css: 'linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(236, 72, 153, 0.06) 100%)',
+        css: 'linear-gradient(135deg, rgba(79, 70, 229, 0.06) 0%, rgba(124, 58, 237, 0.06) 100%)',
         description: 'Card tints, section backgrounds, hover states'
       }
     ],
     gradientUsage: {
-      do: ['__TODO: When to use the gradient'],
-      dont: ['__TODO: When not to use the gradient']
+      do: ['Hero and feature section backgrounds', 'Large display headlines (as gradient text)', 'Key stat numbers and accent moments'],
+      dont: ['Body copy or small text', 'Behind dense UI or data tables', 'More than one focal area per screen']
     },
     sections: {
-      gradients: '__TODO: Describe the gradient system.',
-      gradientTextDemo: '__TODO: A headline to demo gradient text.',
-      logos: 'Download logo files for use across web, social, and print materials. Select format and size, then download.',
-      components: '__TODO: Describe the component patterns.',
-      spacing: '__TODO: Describe the spacing scale.',
-      variables: '__TODO: Describe the CSS variable system.'
+      gradients: 'One brand gradient, used sparingly for hero moments and large headlines. The subtle variant tints cards and section backgrounds without competing with content.',
+      gradientTextDemo: 'One config, every token.',
+      logos: 'Download the logo in the format and size you need. Select a variant, then download — raster formats can be resized on the fly.',
+      components: 'A small set of building blocks — buttons, cards, and stats — that inherit every brand token automatically. Change the config and they all update.',
+      spacing: 'A consistent spacing scale keeps layouts in rhythm. Use these tokens for padding, gaps, and margins instead of arbitrary values.',
+      variables: 'Every token below is a CSS custom property. Copy any line and drop it straight into your stylesheet.'
     },
     hierarchy: [
       { class: 'h-primary', label: 'Primary', colorVar: '--ink', colorName: 'Ink', hex: '#111827', description: 'Primary text — body copy, headings, and content where readability is critical.' },
       { class: 'h-secondary', label: 'Secondary', colorVar: '--graphite', colorName: 'Graphite', hex: '#374151', description: 'Secondary text — descriptions, supporting information, and labels.' },
       { class: 'h-tertiary', label: 'Tertiary', colorVar: '--slate', colorName: 'Slate', hex: '#6B7280', description: 'Tertiary text — captions, timestamps, footnotes, and metadata.' },
-      { class: 'h-accent', label: 'Accent', colorVar: '--purple', colorName: 'Primary', hex: '#6366F1', description: 'Accent text — links, interactive labels, and calls to action.' }
+      { class: 'h-accent', label: 'Accent', colorVar: '--accent-text', colorName: 'Indigo', hex: '#4338CA', description: 'Accent text — links, interactive labels, and calls to action.' }
+    ],
+    logos: [
+      { name: 'Wordmark', description: 'Primary lockup — use on light backgrounds.', variants: { svg: 'logos/brandkit-wordmark-dark.svg' }, background: 'light' },
+      { name: 'Wordmark, reversed', description: 'For dark backgrounds and photography.', variants: { svg: 'logos/brandkit-wordmark-light.svg' }, background: 'dark' },
+      { name: 'Monogram', description: 'Compact mark for avatars and favicons.', variants: { svg: 'logos/brandkit-mark.svg' }, background: 'light' },
+      { name: 'Monogram on gradient', description: 'Reversed mark for the brand gradient.', variants: { svg: 'logos/brandkit-mark-white.svg' }, background: 'gradient' }
     ],
-    logos: [],
     logoSizes: [
       { label: 'Original', width: null },
       { label: '800px', width: 800 },
@@ -134,34 +159,44 @@ function starterConfig() {
       { label: '200px', width: 200 }
     ],
     typography: [
-      { name: 'Display XL', font: 'display', size: '72px', weight: 700, tracking: '-0.03em', leading: '1.05', sample: '__TODO: Hero headline' },
-      { name: 'Display', font: 'display', size: '56px', weight: 700, tracking: '-0.025em', leading: '1.1', sample: '__TODO: Section headline' },
-      { name: 'H1', font: 'display', size: '44px', weight: 700, tracking: '-0.02em', leading: '1.15', sample: '__TODO: Page heading' },
-      { name: 'H2', font: 'display', size: '36px', weight: 700, tracking: '-0.015em', leading: '1.2', sample: '__TODO: Section heading' },
-      { name: 'H3', font: 'display', size: '28px', weight: 600, tracking: '-0.01em', leading: '1.3', sample: '__TODO: Subsection heading' },
-      { name: 'H4', font: 'display', size: '22px', weight: 600, tracking: '-0.005em', leading: '1.35', sample: '__TODO: Card heading' },
-      { name: 'Body LG', font: 'body', size: '18px', weight: 400, tracking: '0', leading: '1.7', sample: '__TODO: Intro paragraph' },
-      { name: 'Body', font: 'body', size: '16px', weight: 400, tracking: '0', leading: '1.7', sample: '__TODO: Body copy' },
-      { name: 'Body SM', font: 'body', size: '14px', weight: 400, tracking: '0', leading: '1.6', sample: '__TODO: Small text' },
-      { name: 'Caption', font: 'body', size: '12px', weight: 500, tracking: '0.02em', leading: '1.5', sample: '__TODO: Caption text' },
-      { name: 'Overline', font: 'body', size: '11px', weight: 700, tracking: '0.1em', leading: '1.4', sample: '__TODO: Overline text', uppercase: true }
+      { name: 'Display XL', font: 'display', size: '72px', weight: 700, tracking: '-0.03em', leading: '1.05', sample: 'One config, every token' },
+      { name: 'Display', font: 'display', size: '56px', weight: 700, tracking: '-0.025em', leading: '1.1', sample: 'A brand guide that builds itself' },
+      { name: 'H1', font: 'display', size: '44px', weight: 700, tracking: '-0.02em', leading: '1.15', sample: 'Design tokens, end to end' },
+      { name: 'H2', font: 'display', size: '36px', weight: 700, tracking: '-0.015em', leading: '1.2', sample: 'Colors, type, and components' },
+      { name: 'H3', font: 'display', size: '28px', weight: 600, tracking: '-0.01em', leading: '1.3', sample: 'Consistent by construction' },
+      { name: 'H4', font: 'display', size: '22px', weight: 600, tracking: '-0.005em', leading: '1.35', sample: 'A card heading, set in display' },
+      { name: 'Body LG', font: 'body', size: '18px', weight: 400, tracking: '0', leading: '1.7', sample: 'Lead paragraphs and intros sit comfortably at this size with generous line height.' },
+      { name: 'Body', font: 'body', size: '16px', weight: 400, tracking: '0', leading: '1.7', sample: 'The default for body copy — legible, neutral, and easy on the eyes at any length.' },
+      { name: 'Body SM', font: 'body', size: '14px', weight: 400, tracking: '0', leading: '1.6', sample: 'Smaller supporting text for secondary details and helper copy.' },
+      { name: 'Caption', font: 'body', size: '12px', weight: 500, tracking: '0.02em', leading: '1.5', sample: 'Captions, timestamps, and metadata' },
+      { name: 'Overline', font: 'body', size: '11px', weight: 700, tracking: '0.1em', leading: '1.4', sample: 'Section label', uppercase: true }
     ],
     voice: {
-      description: '__TODO: Describe the brand voice.',
-      do: ['__TODO: Example of good copy'],
-      dont: ['__TODO: Example of bad copy']
+      description: 'Clear, confident, and friendly. Brandkit speaks like a thoughtful teammate — it explains the what and the why without jargon, and never talks down to the reader.',
+      do: ['Swap the config and your whole guide updates.', 'Every token is one source of truth.', 'Ship a polished brand guide in minutes.'],
+      dont: ['Leverage synergistic design paradigms.', 'It just works (somehow).', 'Refer to the documentation for further details.']
     },
     accessibility: [
-      { fg: '#6366F1', bg: '#FFFFFF', fgName: 'Primary', bgName: 'White', ratio: '__TODO', rating: '__TODO', border: true, largeText: false },
-      { fg: '#FFFFFF', bg: '#111827', fgName: 'White', bgName: 'Ink', ratio: '__TODO', rating: '__TODO', border: false, largeText: false }
+      { fg: '#4338CA', bg: '#FFFFFF', fgName: 'Indigo Text', bgName: 'White', ratio: '7.9:1', rating: 'AAA', border: true, largeText: false },
+      { fg: '#FFFFFF', bg: '#4F46E5', fgName: 'White', bgName: 'Indigo', ratio: '6.3:1', rating: 'AA', border: false, largeText: false },
+      { fg: '#FFFFFF', bg: '#111827', fgName: 'White', bgName: 'Ink', ratio: '17.7:1', rating: 'AAA', border: false, largeText: false },
+      { fg: '#374151', bg: '#F9FAFB', fgName: 'Graphite', bgName: 'Cloud', ratio: '9.9:1', rating: 'AAA', border: true, largeText: false },
+      { fg: '#6B7280', bg: '#FFFFFF', fgName: 'Slate', bgName: 'White', ratio: '4.8:1', rating: 'AA', border: true, largeText: false },
+      { fg: '#FFFFFF', bg: '#16A34A', fgName: 'White', bgName: 'Success', ratio: '3.3:1', rating: 'AA Large', border: false, largeText: true }
     ],
     cssVariables: [
-      { section: 'Colors', vars: [
-        { prop: '--color-primary', value: '#6366F1', comment: 'Primary brand color' },
-        { prop: '--foreground', value: '#111827', comment: 'Primary text' }
+      { section: 'Accent', vars: [
+        { prop: '--accent', value: '#4F46E5', comment: 'Fill — buttons, active states' },
+        { prop: '--accent-foreground', value: '#FFFFFF', comment: 'Text/icons on the fill' },
+        { prop: '--accent-text', value: '#4338CA', comment: 'Accent as text on light' }
+      ]},
+      { section: 'Neutrals', vars: [
+        { prop: '--ink', value: '#111827', comment: 'Primary text' },
+        { prop: '--slate', value: '#6B7280', comment: 'Tertiary text' },
+        { prop: '--cloud', value: '#F9FAFB', comment: 'Page background' }
       ]},
       { section: 'Typography', vars: [
-        { prop: '--font-display', value: "'Inter', sans-serif", comment: 'Display font' },
+        { prop: '--font-display', value: "'Space Grotesk', sans-serif", comment: 'Display font' },
         { prop: '--font-body', value: "'Inter', sans-serif", comment: 'Body font' }
       ]}
     ],
@@ -175,14 +210,25 @@ function starterConfig() {
     components: {
       buttons: [
         { variant: 'Primary', items: [
-          { class: 'btn-primary', sizes: ['sm', 'md', 'lg'], labels: ['Small', '__TODO: Medium CTA', '__TODO: Large CTA'] }
+          { class: 'btn-primary', sizes: ['sm', 'md', 'lg'], labels: ['Get started', 'Get started', 'Get started'] }
+        ]},
+        { variant: 'Secondary & ghost', items: [
+          { class: 'btn-secondary', sizes: ['md'], labels: ['Documentation'] },
+          { class: 'btn-ghost', sizes: ['md'], labels: ['Learn more'] }
+        ]},
+        { variant: 'Gradient', items: [
+          { class: 'btn-gradient', sizes: ['md'], labels: ['Try the demo'] }
         ]}
       ],
       cards: [
-        { title: '__TODO: Card Title', description: '__TODO: Card description text', tag: '__TODO' }
+        { title: 'One config', description: 'A single config.json drives every color, font, and component in the guide.', tag: 'Tokens' },
+        { title: 'Zero dependencies', description: 'Vanilla JS and CSS variables — nothing to install, nothing to maintain.', tag: 'Lightweight' },
+        { title: 'Bolts onto anything', description: 'Drop it into React, Vite, Astro, Next.js, or plain HTML in minutes.', tag: 'Portable' }
       ],
       stats: [
-        { value: '__TODO', label: '__TODO: Stat description' }
+        { value: '1', label: 'Config file to rule them all' },
+        { value: '0', label: 'Runtime dependencies' },
+        { value: '12', label: 'Sections, rendered from tokens' }
       ]
     }
   };