Merge pull request #118 from peelar/vk/453c-task-1-2-expand

Add Friendly (Nunito) and Premium (DM Serif Display) font styles (Vibe Kanban)

Author: peelar

.changeset/five-font-personalities.md

@@ -0,0 +1,5 @@
+---
+"dopeshot-app": patch
+---
+
+Add Friendly (Nunito) and Premium (DM Serif Display) font styles for brand users, including tier-aware font selection and updated adaptive typography rules.

apps/app/src/app/(playground)/_components/playground-page.tsx

@@ -443,6 +443,7 @@ function PlaygroundPageInner({
           onUploadClick={openFilePicker}
           isProcessingUpload={isProcessingUpload}
           showUploadButton={requiresScreenshot}
+          isBrandUser={isBrandUser}
           onUploadAsset={handleFileProcess}
         />
       ) : null}

apps/app/src/app/layout.tsx

@@ -5,10 +5,10 @@ import {
   Commissioner,
   IBM_Plex_Mono,
   Bricolage_Grotesque,
-  Rubik,
   Chivo,
   Chakra_Petch,
-  Playfair_Display,
+  Nunito,
+  DM_Serif_Display,
 } from "next/font/google";
 import Script from "next/script";
 import "./globals.css";
@@ -50,9 +50,9 @@ const bricolageGrotesque = Bricolage_Grotesque({
   variable: "--font-bold",
 });
 
-const rubik = Rubik({
+const nunito = Nunito({
   subsets: ["latin"],
-  weight: ["400", "600"],
+  weight: ["400", "600", "700"],
   variable: "--font-friendly",
 });
 
@@ -68,8 +68,9 @@ const chakraPetch = Chakra_Petch({
   variable: "--font-technical",
 });
 
-const playfairDisplay = Playfair_Display({
+const dmSerifDisplay = DM_Serif_Display({
   subsets: ["latin"],
+  weight: ["400"],
   variable: "--font-premium",
 });
 
@@ -80,10 +81,10 @@ const fontVariables = [
   commissioner.variable,
   ibmPlexMono.variable,
   bricolageGrotesque.variable,
-  rubik.variable,
+  nunito.variable,
   chivo.variable,
   chakraPetch.variable,
-  playfairDisplay.variable,
+  dmSerifDisplay.variable,
 ].join(" ");
 
 const siteUrl = "https://app.dopeshot.io";

apps/app/src/components/config/layout-config.tsx

@@ -25,9 +25,14 @@ import { track } from "@/lib/analytics";
 interface LayoutConfigProps {
   onUploadAsset?: (file: File, kind: "screenshot" | "logo" | "background") => void;
   isMobile?: boolean;
+  isBrandUser?: boolean;
 }
 
-export const LayoutConfigPanel = ({ onUploadAsset, isMobile = false }: LayoutConfigProps) => {
+export const LayoutConfigPanel = ({
+  onUploadAsset,
+  isMobile = false,
+  isBrandUser = false,
+}: LayoutConfigProps) => {
   const config = useAtomValue(configAtom);
   const setConfig = useSetAtom(configAtom);
   const assets = useAtomValue(assetsAtom);
@@ -187,7 +192,7 @@ export const LayoutConfigPanel = ({ onUploadAsset, isMobile = false }: LayoutCon
             <div className="flex w-full items-center justify-between">
               <span className="text-sm font-semibold">Text</span>
             </div>
-            <LayoutSection />
+            <LayoutSection isBrandUser={isBrandUser} />
           </section>
         )}
 

apps/app/src/components/layout/mobile-actions.tsx

@@ -26,6 +26,7 @@ interface MobileActionsProps {
   onUploadClick: () => void;
   isProcessingUpload: boolean;
   showUploadButton: boolean;
+  isBrandUser?: boolean;
   onUploadAsset: (file: File, kind: "screenshot" | "logo" | "background") => void;
 }
 
@@ -38,6 +39,7 @@ export function MobileActions({
   onUploadClick,
   isProcessingUpload,
   showUploadButton,
+  isBrandUser = false,
   onUploadAsset,
 }: MobileActionsProps) {
   const sheetRef = useRef<HTMLDivElement>(null);
@@ -200,7 +202,11 @@ export function MobileActions({
               />
             </div>
             <div className="mt-4 h-[calc(100%-48px)] overflow-y-auto">
-              <LayoutConfigPanel onUploadAsset={onUploadAsset} isMobile={true} />
+              <LayoutConfigPanel
+                onUploadAsset={onUploadAsset}
+                isMobile={true}
+                isBrandUser={isBrandUser}
+              />
             </div>
           </SheetContent>
         </Sheet>

apps/app/src/components/layout/sidebar-tabs.tsx

@@ -70,7 +70,7 @@ export function SidebarTabs({ onUploadAsset, onFeedbackClick }: SidebarTabsProps
       {/* Tab content - scrollable */}
       <div className="flex-1 min-h-0 min-w-0 overflow-y-auto overflow-x-hidden">
         {activeTab === "design" ? (
-          <LayoutConfigPanel onUploadAsset={onUploadAsset} />
+          <LayoutConfigPanel onUploadAsset={onUploadAsset} isBrandUser={isBrandUser} />
         ) : (
           <BrandPanel />
         )}

apps/app/src/components/selectors/font-style-selector.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { FontStyle } from "@/domain/layout/types";
-import { FONT_STYLES } from "@/domain/layout/fonts";
+import { BRAND_FONTS, FONT_STYLES, FREE_FONTS } from "@/domain/layout/fonts";
 import {
   Select,
   SelectContent,
@@ -13,10 +13,16 @@ import {
 interface FontStyleSelectorProps {
   fontStyle: FontStyle;
   onFontStyleChange: (fontStyle: FontStyle) => void;
+  isBrandUser?: boolean;
 }
 
-export function FontStyleSelector({ fontStyle, onFontStyleChange }: FontStyleSelectorProps) {
+export function FontStyleSelector({
+  fontStyle,
+  onFontStyleChange,
+  isBrandUser = false,
+}: FontStyleSelectorProps) {
   const currentStyle = FONT_STYLES.find((s) => s.id === fontStyle);
+  const availableStyles = isBrandUser ? BRAND_FONTS : FREE_FONTS;
 
   return (
     <div className="w-full">
@@ -33,7 +39,7 @@ export function FontStyleSelector({ fontStyle, onFontStyleChange }: FontStyleSel
           </SelectValue>
         </SelectTrigger>
         <SelectContent className="min-w-48">
-          {FONT_STYLES.map((style) => (
+          {availableStyles.map((style) => (
             <SelectItem key={style.id} value={style.id} className="py-2">
               <div className="flex flex-col gap-1">
                 <span className="font-medium text-sm">{style.name}</span>

apps/app/src/components/sidebar/layout-section.tsx

@@ -8,7 +8,11 @@ import { Label } from "@/components/ui/label";
 import { FontStyleSelector } from "@/components/selectors/font-style-selector";
 import type { FontStyle } from "@/domain/layout/types";
 
-export function LayoutSection() {
+interface LayoutSectionProps {
+  isBrandUser?: boolean;
+}
+
+export function LayoutSection({ isBrandUser = false }: LayoutSectionProps) {
   const config = useAtomValue(configAtom);
   const setConfig = useSetAtom(configAtom);
   const orientation = useAtomValue(orientationAtom);
@@ -86,6 +90,7 @@ export function LayoutSection() {
           <FontStyleSelector
             fontStyle={config.fontStyle}
             onFontStyleChange={handleFontStyleChange}
+            isBrandUser={isBrandUser}
           />
         </div>
       )}

apps/app/src/domain/layout/adaptive-typography.ts

@@ -10,7 +10,8 @@ import type { FontStyle } from "./types";
  * - Founder: Balanced, neutral, max 3 lines
  * - Billboard: Bold, expressive, max 2 lines
  * - Terminal: Compact, technical, max 4 lines
- * - Editorial: Elegant, serif, max 2 lines
+ * - Friendly: Warm, rounded, max 3 lines
+ * - Premium: Display serif, max 2 lines
  */
 
 export interface TypographyScalingRules {
@@ -70,6 +71,28 @@ export const FONT_STYLE_SCALING_RULES: Record<FontStyle, TypographyScalingRules>
     titleLetterSpacing: -0.01,
     subtitleLetterSpacing: -0.01,
   },
+  friendly: {
+    titleMinSize: 2.25,
+    titleMaxSize: 4.25,
+    subtitleMinSize: 1.0,
+    subtitleMaxSize: 1.4,
+    titleLineHeight: 1.12,
+    subtitleLineHeight: 1.45,
+    titleMaxLines: 3,
+    subtitleMaxLines: 3,
+    titleLetterSpacing: -0.01,
+  },
+  premium: {
+    titleMinSize: 2.5,
+    titleMaxSize: 4.75,
+    subtitleMinSize: 1.0,
+    subtitleMaxSize: 1.35,
+    titleLineHeight: 1.02,
+    subtitleLineHeight: 1.4,
+    titleMaxLines: 2,
+    subtitleMaxLines: 2,
+    titleLetterSpacing: -0.01,
+  },
 
 };
 
@@ -92,7 +115,6 @@ export function getTitleClasses(fontStyle: FontStyle, textLength?: number): stri
   const rules = FONT_STYLE_SCALING_RULES[fontStyle];
 
   const baseClasses = [
-    "font-bold",
     "text-balance",
     "overflow-wrap-anywhere",
   ];
@@ -104,9 +126,11 @@ export function getTitleClasses(fontStyle: FontStyle, textLength?: number): stri
 
   // Add style-specific classes
   const styleClasses: Record<FontStyle, string[]> = {
-    founder: ["tracking-tight"],
+    founder: ["tracking-tight", "font-bold"],
     billboard: ["tracking-tighter", "font-extrabold"],
-    terminal: ["tracking-tight", "font-mono"],
+    terminal: ["tracking-tight", "font-bold", "font-mono"],
+    friendly: ["tracking-tight", "font-semibold"],
+    premium: ["tracking-tighter", "font-normal"],
   };
 
   baseClasses.push(...styleClasses[fontStyle]);
@@ -136,6 +160,8 @@ export function getSubtitleClasses(fontStyle: FontStyle, textLength?: number): s
     founder: ["tracking-normal"],
     billboard: ["tracking-tight", "font-medium"],
     terminal: ["tracking-tight", "font-mono"],
+    friendly: ["tracking-normal", "font-normal"],
+    premium: ["tracking-tight", "font-normal"],
   };
 
   baseClasses.push(...styleClasses[fontStyle]);

apps/app/src/domain/layout/fonts.ts

@@ -16,7 +16,9 @@ export interface FontStyleDefinition {
 
 /**
  * Font Styles for Free Users
- * Four opinionated typographic systems that adapt automatically
+ * Opinionated typographic systems that adapt automatically.
+ *
+ * Free users can select a subset (see `FREE_FONTS`).
  */
 export const FONT_STYLES: FontStyleDefinition[] = [
   {
@@ -43,10 +45,32 @@ export const FONT_STYLES: FontStyleDefinition[] = [
     cssVariable: "--font-developer",
     description: "Monospace, technical, tool-like",
   },
+  {
+    id: "friendly",
+    name: "Friendly",
+    fontName: "Nunito",
+    foundry: "Google Fonts",
+    cssVariable: "--font-friendly",
+    description: "Rounded, upbeat, approachable",
+  },
+  {
+    id: "premium",
+    name: "Premium",
+    fontName: "DM Serif Display",
+    foundry: "Colophon Foundry",
+    cssVariable: "--font-premium",
+    description: "High-contrast, editorial, luxury",
+  },
 ];
 
 export const DEFAULT_FONT_STYLE: FontStyle = "founder";
 
+export const FREE_FONTS: FontStyleDefinition[] = FONT_STYLES.filter(
+  (style) => style.id === "founder" || style.id === "billboard" || style.id === "terminal",
+);
+
+export const BRAND_FONTS: FontStyleDefinition[] = FONT_STYLES;
+
 /**
  * Get font style definition by ID
  */
@@ -178,8 +202,8 @@ export const FONTS: FontDefinition[] = [
   {
     id: "friendly",
     alias: "Buddy",
-    fontName: "Rubik",
-    foundry: "Hubert & Fischer",
+    fontName: "Nunito",
+    foundry: "Google Fonts",
     cssVariable: "--font-friendly",
   },
   {
@@ -199,8 +223,8 @@ export const FONTS: FontDefinition[] = [
   {
     id: "premium",
     alias: "BlackTie",
-    fontName: "Playfair Display",
-    foundry: "Claus Eggers Sorensen",
+    fontName: "DM Serif Display",
+    foundry: "Colophon Foundry",
     cssVariable: "--font-premium",
   },
 ];