Skip to content

DESIGN.md

Latest commit

 

History

History
229 lines (201 loc) · 9.01 KB

DESIGN.md

File metadata and controls

229 lines (201 loc) · 9.01 KB
Raw
name Senzen Composer Financial Platform
description Product-first financial intelligence and automated budgeting platform design system for Senzen, modeled directly on Composer by SoFi (composer.trade). Light cream canvas, crisp typography, restrained green accents, and interactive logic block previews.
colors
canvas surface-card surface-lifted surface-subtle border-hairline border-strong ink-primary ink-body ink-muted ink-faint brand-green brand-green-hover brand-green-subtle surplus-green surplus-subtle deficit-crimson deficit-subtle discretionary-blue recurring-slate
#F6F2EE
#FFFFFF
#ECE8E3
#E5E2DD
#E5E2DD
#D0CCC6
#101516
#273234
#666666
#8C8C8C
#1EC072
#049F55
#E5F9FC
#1EC072
#EBF9F1
#DC2626
#FEF2F2
#1871DA
#273234
typography
display-xl display-lg display-md heading-card body-lg body-md body-sm caption numeric-mono numeric-hero
fontFamily fontSize fontWeight lineHeight letterSpacing
Plus Jakarta Sans, Inter, -apple-system, sans-serif
56px
600
1.08
-0.035em
fontFamily fontSize fontWeight lineHeight letterSpacing
Plus Jakarta Sans, Inter, -apple-system, sans-serif
40px
600
1.12
-0.03em
fontFamily fontSize fontWeight lineHeight letterSpacing
Plus Jakarta Sans, Inter, -apple-system, sans-serif
28px
600
1.2
-0.02em
fontFamily fontSize fontWeight lineHeight letterSpacing
Plus Jakarta Sans, Inter, -apple-system, sans-serif
20px
600
1.3
-0.015em
fontFamily fontSize fontWeight lineHeight letterSpacing
Plus Jakarta Sans, Inter, -apple-system, sans-serif
18px
400
1.6
-0.01em
fontFamily fontSize fontWeight lineHeight letterSpacing
Plus Jakarta Sans, Inter, -apple-system, sans-serif
15px
400
1.55
0em
fontFamily fontSize fontWeight lineHeight letterSpacing
Plus Jakarta Sans, Inter, -apple-system, sans-serif
13px
400
1.5
0em
fontFamily fontSize fontWeight lineHeight letterSpacing
Plus Jakarta Sans, Inter, -apple-system, sans-serif
12px
500
1.4
0.01em
fontFamily fontSize fontWeight lineHeight letterSpacing
JetBrains Mono, SF Mono, Menlo, monospace
15px
500
1.4
-0.02em
fontFamily fontSize fontWeight lineHeight letterSpacing
JetBrains Mono, SF Mono, Menlo, monospace
32px
600
1.1
-0.03em
rounded
xs sm md lg pill
3px
6px
8px
12px
9999px
spacing
xs sm md lg xl 2xl section
4px
8px
16px
24px
32px
48px
80px
components
button-primary button-secondary card-composer
backgroundColor textColor rounded padding
{colors.brand-green}
{colors.ink-primary}
{rounded.sm}
10px 20px
backgroundColor textColor borderColor rounded padding
{colors.surface-card}
{colors.ink-primary}
{colors.border-hairline}
{rounded.sm}
10px 20px
backgroundColor borderColor rounded padding shadow
{colors.surface-card}
{colors.border-hairline}
{rounded.md}
{spacing.lg}
0 1px 3px rgba(16, 21, 22, 0.04), 0 6px 16px rgba(16, 21, 22, 0.02)

1. Overview & Graphic Identity Decisions

Senzen is a Product-First Financial Engine. It follows the visual DNA of Composer by SoFi (composer.trade): light cream canvas, crisp typography, restrained green accents, and transparent live product logic blocks.

The 7 Identity Decisions

  1. Emotional Register & Reference DNA: Calm, Product-First, Technically Confident — Governed strictly by Composer (composer.trade). Real product UI, logic blocks, and visual proof in place of marketing fluff.
  2. Display Font: Plus Jakarta Sans / Inter for Display, H1, H2, and Card Titles. Mono for financial metrics, rates, and logic expressions.
  3. Signature Color Move: Cream Canvas (#F6F2EE) + Charcoal Ink (#101516) + Composer Green Primary (#1EC072).
  4. Edge Language & Radius: 6px–8px Crisp. --radius: 0.375rem (6px) for buttons and inputs, 8px for cards.
  5. Spacing Rhythm & Density: Clean 64px–80px section rhythms with 16px/24px modular cards and hairlines (#E5E2DD).
  6. Data as Design Visual Anchors: Real interactive logic rules (IF income > $5,000 -> Allocate 20% to Growth), metrics rows, and clear progress charts.
  7. Iconographic Voice & Motif: Lucide outline (1.5px stroke). Signature Motif: Visual logic blocks and product metric nodes.

Decisions

  • Reference DNA: Composer by SoFi (composer.trade) — single reference; do not blend other brands. Evidence captured 2026-08-22 from live HTML/CSS: #f6f2ee canvas, #101516 ink, #273234 secondary ink, restrained green accents including #1ec072/#049f55, and neue-haas-grotesk-display served by Adobe Typekit.
  • Emotional register: calm, product-first, technically confident — crisp copy and visible product proof, not editorial storytelling or concept-site theater.
  • Display/body font: Neue Haas Grotesk Display for display and UI/body — preserve local fallback stack where licensing prevents self-hosting; financial figures may use the existing mono face. No serif display treatment.
  • Neutrals: cool-tinted blue-charcoal and warm cream — migrate away from warm espresso/terracotta ledger neutrals toward Composer's cream canvas and blue-charcoal ink; no default Tailwind gray ramp.
  • Signature motif: live product proof blocks with thin rules and compact data visualizations — recurring in hero, feature sections, and authenticated overview; no exhibit stamps, editorial labels, or decorative ledger rules.
  • Dark mode: not used for the marketing redesign; authenticated surfaces retain existing dark-theme capability only where current app behavior requires it, with Composer-like light as the default.
  • [2026-08-22] (global) forceLight theme lock on landing to avoid previous dark-mode collision bug — previous bug required light mode enforcement for Senzen landing.

2. Full Token Sheet

Light Mode Variables (:root)

:root {
  --background: 38 22% 95%;          /* #F6F2EE Composer Cream */
  --foreground: 190 16% 8%;          /* #101516 Charcoal Ink */

  --card: 0 0% 100%;                 /* #FFFFFF Card Surface */
  --card-foreground: 190 16% 8%;
  --popover: 0 0% 100%;
  --popover-foreground: 190 16% 8%;

  /* Brand Primary: Composer Green */
  --primary: 151 73% 44%;            /* #1EC072 Green */
  --primary-foreground: 190 16% 8%;  /* #101516 Dark Ink for WCAG AA */

  /* Neutral Secondary & Muted */
  --secondary: 38 12% 91%;           /* #ECE8E3 Lifted Surface */
  --secondary-foreground: 190 16% 8%;
  --muted: 38 10% 88%;               /* #E5E2DD Subtle Surface */
  --muted-foreground: 0 0% 40%;      /* #666666 Muted Charcoal */
  --accent: 151 73% 44%;             /* #1EC072 */
  --accent-foreground: 190 16% 8%;

  /* Status & Financial Semantics */
  --destructive: 0 84% 60%;          /* #EF4444 Deficit Crimson */
  --destructive-foreground: 0 0% 100%;

  /* Hairlines & Focus */
  --border: 38 10% 88%;              /* #E5E2DD Hairline */
  --input: 38 10% 88%;
  --ring: 151 73% 44%;
  --radius: 0.375rem;

  /* Recharts Color Palette */
  --chart-1: 151 73% 44%;            /* Composer Green */
  --chart-2: 215 80% 48%;            /* Blue */
  --chart-3: 190 16% 8%;             /* Ink Dark */
  --chart-4: 38 90% 50%;             /* Amber */
  --chart-5: 0 84% 60%;              /* Red */
}

5. Implementation Notes

Files to Touch

  1. frontend/src/app/globals.css: Update :root and .dark variables with the Composer cream canvas (#F6F2EE), charcoal ink (#101516), and green accent (#1EC072) token palette.
  2. frontend/src/app/layout.tsx: Configure Next.js font imports for Plus Jakarta Sans (sans body and display) and JetBrains Mono (numbers/metrics).
  3. frontend/tailwind.config.ts: Extend fontFamily with sans: ["var(--font-sans)"], mono: ["var(--font-mono)"].
  4. frontend/src/components/example/navbar.tsx: Refactor to clean, light floating navbar with Composer brand styling.
  5. frontend/src/components/example/spotlight-demo.tsx: Clean product-first hero with live logic block preview.
  6. frontend/src/components/example/timeline-demo.tsx: Style timeline into structured feature milestones.
  7. frontend/src/components/example/chart-*.tsx: Bind chart fills to CSS variables var(--chart-1) through var(--chart-5).

Font Loading in Next.js (src/app/layout.tsx)

import { Plus_Jakarta_Sans, JetBrains_Mono } from "next/font/google";

const jakarta = Plus_Jakarta_Sans({
  subsets: ["latin"],
  variable: "--font-sans",
  display: "swap",
});

const jetbrainsMono = JetBrains_Mono({
  subsets: ["latin"],
  variable: "--font-mono",
  display: "swap",
});

Verification

After writing, verify with wc -l DESIGN.md.