# Finamodel brand guidelines

The visual reference for the Finamodel site: identity, colors, typography, components, icons and assets.

## Principles
- **Let the model lead.** Show useful financial detail: a workbook, a calculation, a clearly labelled result. Decoration stays secondary.
- **Keep the surface quiet.** Warm canvas, white paper, charcoal type and fine borders. Use green and orange with a purpose.
- **Be precise and approachable.** Clear headings, ordinary language and specific actions. Make complex finance easier to read.

## Identity
Use the exact spelling Finamodel, with a capital F. The wordmark uses Instrument Serif, weight 400, normal style, zero tracking and a 0.35px currentColor text stroke. Use the supplied light Finawork two-bar SVG (white tile with charcoal bars) for compact placements; do not typeset a replacement. Recommended clear space: at least half the wordmark cap height.

## Color
- **Canvas**: #F7F7F4 (background). The warm off-white page background. Give content room to breathe.
- **Ink**: #262626 (charcoal). Exact charcoal for primary button fills, dark button labels and button borders.
- **Model green**: #34785C (success). Results, positive signals, financial detail and selected accents.
- **Orange**: #F54E00 (accent / brand). Small accents and selected caution or negative-result patterns in calculator widgets. Keep large surfaces neutral.
- **Paper**: #FFFFFF (card). Cards, inputs and workbook surfaces.
- **Muted surface**: #EAEAE8 (muted). Secondary buttons, quiet panels and catalog card backgrounds.
- **Secondary text**: #6B6B6B (muted-foreground). Descriptions, supporting labels and navigation.
- **Hairline**: #E5E5E5 (border). One-pixel dividers, card edges and table structure.
- **Input border**: #CCCCCC (input). Outlined buttons and input boundaries.
- **Excel green**: #217346 (workbook chrome). An existing Excel-preview title bar detail, not a second Finamodel brand green.
- **Reference blue**: #536D9B (code references). Cell references and named ranges in article code examples.
- **Quiet label**: #888888 (secondary detail). Nonessential captions and decorative metadata; use darker ink for small essential text.

Core palette: Canvas, Ink, Model green and Orange. The remaining colors support surfaces, text, borders and existing workbook details; they are not additional core brand colors.

### Color in components
Canvas sits behind white cards. Ink fills the shared primary Button; Muted surface fills its secondary variant. Model green marks positive growth and Orange marks negative growth in CagrWidget. Secondary text supports card descriptions. Reference blue highlights cell references in article code. Excel green remains in existing workbook preview title bars.
Both border shades are 1px: Hairline (#E5E5E5) quietly separates content; Input border (#CCCCCC) gives controls a stronger edge. The Color section shows an editable field beside a divider and live primary, secondary and outline buttons.

These HEX values are the direct colors used by site components. globals.css also has rounded HSL semantic tokens; they can differ slightly. Keep each existing component on its own implementation values.

## Typography
The website uses a 14.5px base size. The web app uses 13.75px, with most sizes about 5% smaller than the website. Values below assume the browser’s default 16px root; respect the reader’s font and zoom preferences.
Use the type tokens in each product’s Tailwind configuration. Keep the root font size, spacing, control dimensions and breakpoints unchanged. Standard size tokens retain their existing line heights; custom sizes inherit their context. Smaller text can wrap differently.
The text-xs token remains 12px in both products. Existing smaller editor labels, wordmarks, icon glyphs, chart labels, workbook cell formatting and workbook zoom retain their own sizes. Mobile app and site form text stays at least 1rem; workbook cell inputs keep their own typography.

### Website specimens
- **Wordmark**: Instrument Serif; 400 · normal · 0 tracking.
- **Display**: Helvetica Neue; 32–43 px · 500 · tight tracking · 1.2 line height.
- **Section heading**: Helvetica Neue; 22–27 px · 500 · tight tracking.
- **Body**: Helvetica Neue; 14.5–16.5 px · 400 · relaxed line height.
- **Label**: Helvetica Neue; 12 px · 600 · uppercase · 0.12em tracking.
- **Technical**: Courier New; 13 px · 400 · tabular numbers.

### Website and web app type scales
| Token | Website (px) | Web app (px) | Default line height (px) |
| --- | ---: | ---: | ---: |
| text-xs | 12 | 12 | 16 |
| text-sm | 13 | 12.25 | 20 |
| text-base | 14.5 | 13.75 | 24 |
| text-lg | 16.5 | 15.75 | 28 |
| text-xl | 18 | 17 | 28 |
| text-2xl | 22 | 21 | 32 |
| text-3xl | 27 | 25.75 | 36 |
| text-4xl | 32 | 30.5 | 40 |
| text-5xl | 43 | 40.75 | 48 |
| text-6xl | 54 | 51.25 | 60 |
| text-7xl | 65 | 61.75 | 72 |
| text-8xl | 86 | 81.75 | 96 |
| text-9xl | 115 | 109.25 | 128 |
| text-body-sm | 13.5 | 12.75 | Inherited |
| text-lead | 15.5 | 14.75 | Inherited |
| text-article-title | 36 | — | Inherited |
| text-metric | 24 | — | Inherited |
| text-title-sm | — | 19 | Inherited |

Sans fallback: Helvetica, Arial, sans-serif. Mono fallback: Courier, monospace. Serif fallback: Georgia, serif. Instrument Serif is reserved for the wordmark. Keep navigation, labels and KPI values in sans; use tabular numbers for alignment. Reserve monospace for technical content. Use explicit font sizes at responsive breakpoints, not viewport-width scaling.

## Components
Reuse Button (primary, secondary, outline, white; sm, md, lg), NumberField, NumberInput, ScreenerSearchInput, TemplateCard, ModelCard, ReadMoreSection and the calculator widgets. See the interactive source library at /brand#library for the full site inventory.

### FAQs
CompanyFAQ accepts faqs with q and a fields and allows independent disclosures. FaqSection, exported from components/tools/BusinessMetricCalculatorParts.tsx, accepts question and answer fields and opens one answer at a time. Both use the site's boxed question styling. Live examples: /brand#faq-patterns.

### Content and result patterns
ReadMoreSection provides expandable content with a fading preview (/brand#expandable-content). ResultCard presents a label, formatted value and detail; FormulaBlock presents the calculation in monospace (/brand#result-patterns). Both are exported from components/tools/BusinessMetricCalculatorParts.tsx. ArticleAuthorBio provides the site's existing author attribution (/brand#author-pattern). RelatedToolCtas selects related calculator and template links from a calculator slug (/brand#related-pattern). Each live specimen includes a copyable usage example.

## Icons
Use the site's Lucide outline icons: a 24 × 24 viewBox, 2px default stroke, round caps and joins, currentColor. Common display sizes are 14, 16, 20 and 24px. The custom ChessKnight and ChessQueen are in components/icons/FundingIcons.tsx. Give icon-only controls an accessible name; hide decorative icons from assistive technology.
Activity, AlertTriangle, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Award, BarChart3, Building, Building2, Calculator, Calendar, CalendarDays, Check, CheckCircle, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, CircleDollarSign, Clock, Code2, Columns3, Copy, CreditCard, DollarSign, Download, ExternalLink, Facebook, FileCheck2, FileSearch, FileSpreadsheet, Filter, Gauge, GraduationCap, Grid2X2, Info, Landmark, LineChart, Linkedin, Loader2, Mail, Menu, MessageCircle, Minus, Nut, Package, Percent, PieChart, Plus, Receipt, RefreshCcw, RefreshCw, Repeat2, Scale, Search, Share2, Shield, ShieldAlert, ShieldCheck, SlidersHorizontal, Sparkles, Sprout, Table2, TableProperties, Target, ThumbsUp, Trash2, TrendingDown, TrendingUp, User, Users, Wallet, Workflow, X, XCircle

## Layout and motion
Use a 4px spacing rhythm; common content widths are 1000px and 1200px. Gutters: 16px mobile, 24px desktop. Buttons and search use pill corners; numeric inputs and cards stay square or nearly square. The intended card radius is approximately 2px; the current rounded-sm token mapping needs a separate fix because it subtracts 4px from a 2px base. Do not change shared radii incidentally.
Use hero-dot-pattern (1px dots every 24px), BackgroundGrid (40px grid), thin dividers, green workbook title bars, and right-aligned tabular figures. fade-up enters over 600ms from 16px below; catalog cards use 300ms transitions and 500ms preview movement. Respect prefers-reduced-motion.

## Voice
- Use “Download Excel template” instead of “Unlock your financial potential” Name the action and the file.
- Use “Change the assumptions to compare scenarios.” instead of “Supercharge your strategic decision-making.” Explain what someone can do.
- Use “Revenue grows 12% in this example.” instead of “Unprecedented, industry-leading growth.” Use a number and give it context.

## Assets
- [App icon, SVG](/favicon.svg)
- [App icon, 512px](/icon-512.png)
- [App icon, 192px](/icon-192.png)
- [Favicon, 32px](/favicon-32x32.png)
- [Favicon, 16px](/favicon-16x16.png)
- [Favicon, ICO](/favicon.ico)

## Component inventory
- **Analytics** (Layout & marketing): components/Analytics.tsx. Exports: Analytics.
- **AppLink** (Layout & marketing): components/AppLink.tsx. Exports: AppLink.
- **AppPreviewStack** (Data & previews): components/AppPreviewStack.tsx. Exports: AppPreviewProofPoints, AppPreviewStack.
- **ArticleAuthorBio** (Content): components/ArticleAuthorBio.tsx. Exports: ArticleAuthorBio.
- **AuthorBio** (Content): components/AuthorBio.tsx. Exports: AuthorBio.
- **BenchmarkChart** (Widgets): components/widgets/BenchmarkChart.tsx. Exports: BenchmarkChart.
- **BlogIndex** (Content): components/blog/BlogIndex.tsx. Exports: BlogIndex.
- **BlogPost** (Content): components/blog/BlogPost.tsx. Exports: BlogPost.
- **BrandRecolorSection** (Data & previews): components/BrandRecolorSection.tsx. Exports: BrandRecolorSection.
- **BreakEvenCalculator** (Calculators): components/tools/BreakEvenCalculator.tsx. Exports: BreakEvenCalculator.
- **BreakEvenWidget** (Widgets): components/widgets/BreakEvenWidget.tsx. Exports: BreakEvenWidget.
- **BusinessMetricCalculatorParts** (Calculators): components/tools/BusinessMetricCalculatorParts.tsx. Exports: NumberField, CalculatorHero, ResultCard, FormulaBlock, FaqSection, ToolAuthorBio.
- **Button** (Primitives): components/ui/Button.tsx. Exports: Button.
- **CagrCalculator** (Calculators): components/tools/CagrCalculator.tsx. Exports: CagrCalculator.
- **CagrWidget** (Widgets): components/widgets/CagrWidget.tsx. Exports: CagrWidget.
- **CategoriesBrowser** (Catalog): components/CategoriesBrowser.tsx. Exports: CategoriesBrowser.
- **ChunkLoadRecovery** (Layout & marketing): components/ChunkLoadRecovery.tsx. Exports: ChunkLoadRecovery.
- **ChurnRateCalculator** (Calculators): components/tools/ChurnRateCalculator.tsx. Exports: ChurnRateCalculator.
- **CompanyCTA** (Layout & marketing): components/CompanyCTA.tsx. Exports: CompanyCTA.
- **CompanyFAQ** (Content): components/CompanyFAQ.tsx. Exports: CompanyFAQ.
- **CompanyForecastCalculator** (Calculators): components/tools/CompanyForecastCalculator.tsx. Exports: CompanyForecastCalculator.
- **CompanyForecastWidget** (Widgets): components/widgets/CompanyForecastWidget.tsx. Exports: CompanyForecastWidget.
- **CompanyList** (Catalog): components/CompanyList.tsx. Exports: CompanyList.
- **CompanyListView** (Catalog): components/CompanyListView.tsx. Exports: CompanyListView.
- **CompanyLogo** (Layout & marketing): components/CompanyLogo.tsx. Exports: CompanyLogo.
- **CompanyPreviewRail** (Data & previews): components/CompanyPreviewRail.tsx. Exports: CompanyPreviewRail.
- **CompanyScreener** (Catalog): components/CompanyScreener.tsx. Exports: CompanyScreener.
- **CompanySectorGrid** (Catalog): components/CompanySectorGrid.tsx. Exports: CompanySectorGrid.
- **CompoundInterestCalculator** (Calculators): components/tools/CompoundInterestCalculator.tsx. Exports: CompoundInterestCalculator.
- **CompoundInterestWidget** (Widgets): components/widgets/CompoundInterestWidget.tsx. Exports: CompoundInterestWidget.
- **CookieBanner** (Primitives): components/ui/CookieBanner.tsx. Exports: CookieBanner.
- **CopilotCTA** (Layout & marketing): components/CopilotCTA.tsx. Exports: CopilotCTA.
- **CopilotLink** (Layout & marketing): components/CopilotLink.tsx. Exports: CopilotLink.
- **CopilotPromptForm** (Layout & marketing): components/CopilotPromptForm.tsx. Exports: CopilotPromptForm.
- **DcfCalculator** (Calculators): components/tools/DcfCalculator.tsx. Exports: DcfCalculator.
- **DebtCapacityCalculator** (Calculators): components/tools/DebtCapacityCalculator.tsx. Exports: DebtCapacityCalculator.
- **DesignDocSections** (Layout & marketing): components/DesignDocSections.tsx. Exports: DesignDocSections.
- **DownloadButton** (Primitives): components/DownloadButton.tsx. Exports: DownloadButton.
- **DscrCalculator** (Calculators): components/tools/DscrCalculator.tsx. Exports: DscrCalculator.
- **DscrWidget** (Widgets): components/widgets/DscrWidget.tsx. Exports: DscrWidget.
- **EmbedWorkbook** (Data & previews): components/EmbedWorkbook.tsx. Exports: EmbedWorkbook.
- **EquityDilutionCalculator** (Calculators): components/tools/EquityDilutionCalculator.tsx. Exports: EquityDilutionCalculator.
- **EvEbitdaCalculator** (Calculators): components/tools/EvEbitdaCalculator.tsx. Exports: EvEbitdaCalculator.
- **ExcelChartOverlay** (Data & previews): components/ExcelChartOverlay.tsx. Exports: ExcelChartOverlay.
- **ExcelPreview** (Data & previews): components/ExcelPreview.tsx. Exports: ExcelPreview.
- **FaqCategoryArticle** (Content): components/faq/FaqCategoryArticle.tsx. Exports: FaqCategoryArticle.
- **FaqContactLink** (Layout & marketing): components/FaqContactLink.tsx. Exports: FaqContactLink.
- **FaqIndex** (Content): components/faq/FaqIndex.tsx. Exports: FaqIndex.
- **FaqSearch** (Content): components/faq/FaqSearch.tsx. Exports: FaqSearch.
- **FeaturedLibrarySection** (Layout & marketing): components/FeaturedLibrarySection.tsx. Exports: FeaturedLibrarySection.
- **Footer** (Layout & marketing): components/Footer.tsx. Exports: Footer.
- **FounderSalaryCalculator** (Calculators): components/tools/FounderSalaryCalculator.tsx. Exports: FounderSalaryCalculator.
- **FundingIcons** (Primitives): components/icons/FundingIcons.tsx. Exports: ChessKnight, ChessQueen.
- **FundingRoundScatter** (Data & previews): components/FundingRoundScatter.tsx. Exports: FundingRoundScatter.
- **FundingRoundScroller** (Catalog): components/FundingRoundScroller.tsx. Exports: FundingRoundScroller.
- **GuidedModelTool** (Calculators): components/tools/GuidedModelTool.tsx. Exports: GuidedModelTool.
- **HistoricalFinancialsTabs** (Data & previews): components/HistoricalFinancialsTabs.tsx. Exports: HistoricalFinancialsTabs.
- **IrrCalculator** (Calculators): components/tools/IrrCalculator.tsx. Exports: IrrCalculator.
- **IrrWidget** (Widgets): components/widgets/IrrWidget.tsx. Exports: IrrWidget.
- **LoanAmortizationCalculator** (Calculators): components/tools/LoanAmortizationCalculator.tsx. Exports: LoanAmortizationCalculator.
- **LoanAmortizationWidget** (Widgets): components/widgets/LoanAmortizationWidget.tsx. Exports: LoanAmortizationWidget.
- **LtvCacCalculator** (Calculators): components/tools/LtvCacCalculator.tsx. Exports: LtvCacCalculator.
- **MarketingRoiRoasCalculator** (Calculators): components/tools/MarketingRoiRoasCalculator.tsx. Exports: MarketingRoiRoasCalculator.
- **MarketShareGrowthCalculator** (Calculators): components/tools/MarketShareGrowthCalculator.tsx. Exports: MarketShareGrowthCalculator.
- **ModelCard** (Catalog): components/ModelCard.tsx. Exports: ModelCard.
- **ModelIntegritySection** (Layout & marketing): components/ModelIntegritySection.tsx. Exports: ModelIntegritySection.
- **ModelShareButton** (Primitives): components/ModelShareButton.tsx. Exports: ModelShareButton.
- **MrrArrCalculator** (Calculators): components/tools/MrrArrCalculator.tsx. Exports: MrrArrCalculator.
- **Navbar** (Layout & marketing): components/Navbar.tsx. Exports: Navbar.
- **NpvCalculator** (Calculators): components/tools/NpvCalculator.tsx. Exports: NpvCalculator.
- **NpvWidget** (Widgets): components/widgets/NpvWidget.tsx. Exports: NpvWidget.
- **NumberInput** (Widgets): components/widgets/NumberInput.tsx. Exports: NumberInput.
- **PaybackPeriodCalculator** (Calculators): components/tools/PaybackPeriodCalculator.tsx. Exports: PaybackPeriodCalculator.
- **PaybackPeriodWidget** (Widgets): components/widgets/PaybackPeriodWidget.tsx. Exports: PaybackPeriodWidget.
- **Pricing** (Layout & marketing): components/Pricing.tsx. Exports: Pricing.
- **Privacy** (Content): components/legal/Privacy.tsx. Exports: Privacy.
- **ProfitMarginCalculator** (Calculators): components/tools/ProfitMarginCalculator.tsx. Exports: ProfitMarginCalculator.
- **ProfitMarginWidget** (Widgets): components/widgets/ProfitMarginWidget.tsx. Exports: ProfitMarginWidget.
- **ReadMoreSection** (Primitives): components/ReadMoreSection.tsx. Exports: ReadMoreSection.
- **RecolorStack** (Data & previews): components/RecolorStack.tsx. Exports: RecolorStack.
- **Refunds** (Content): components/legal/Refunds.tsx. Exports: Refunds.
- **RelatedToolCtas** (Calculators): components/tools/RelatedToolCtas.tsx. Exports: RelatedToolCtas.
- **RevenueGrowthRateCalculator** (Calculators): components/tools/RevenueGrowthRateCalculator.tsx. Exports: RevenueGrowthRateCalculator.
- **RoiCalculator** (Calculators): components/tools/RoiCalculator.tsx. Exports: RoiCalculator.
- **RoiWidget** (Widgets): components/widgets/RoiWidget.tsx. Exports: RoiWidget.
- **RuleOf72Calculator** (Calculators): components/tools/RuleOf72Calculator.tsx. Exports: RuleOf72Calculator.
- **RuleOf72Widget** (Widgets): components/widgets/RuleOf72Widget.tsx. Exports: RuleOf72Widget.
- **RunwayCalculator** (Layout & marketing): components/RunwayCalculator.tsx. Exports: RunwayCalculator.
- **SalesFunnelConversionCalculator** (Calculators): components/tools/SalesFunnelConversionCalculator.tsx. Exports: SalesFunnelConversionCalculator.
- **SchedulePreviewSwitcher** (Data & previews): components/SchedulePreviewSwitcher.tsx. Exports: SchedulePreviewSwitcher.
- **SchedulesDirectory** (Catalog): components/SchedulesDirectory.tsx. Exports: SchedulesDirectory.
- **ScreenerSearchInput** (Primitives): components/ScreenerSearchInput.tsx. Exports: ScreenerSearchInput.
- **SearchBrowser** (Catalog): components/SearchBrowser.tsx. Exports: SearchBrowser.
- **Security** (Content): components/legal/Security.tsx. Exports: Security.
- **SeoJsonLd** (Layout & marketing): components/SeoJsonLd.tsx. Exports: SeoJsonLd.
- **SiteShell** (Layout & marketing): components/SiteShell.tsx. Exports: SiteShell.
- **SocialProofLogos** (Layout & marketing): components/SocialProofLogos.tsx. Exports: SocialProofLogos.
- **StartupCategoryGrid** (Catalog): components/StartupCategoryGrid.tsx. Exports: StartupCategoryGrid.
- **StartupFundingRoundGrid** (Catalog): components/StartupFundingRoundGrid.tsx. Exports: StartupFundingRoundGrid.
- **StartupFundingRoundScatter** (Data & previews): components/StartupFundingRoundScatter.tsx. Exports: StartupFundingRoundScatter.
- **StartupListView** (Catalog): components/StartupListView.tsx. Exports: StartupListView.
- **StartupModelsIndex** (Catalog): components/StartupModelsIndex.tsx. Exports: StartupModelsIndex.
- **StartupRunwayCalculator** (Calculators): components/tools/StartupRunwayCalculator.tsx. Exports: StartupRunwayCalculator.
- **StartupRunwayWidget** (Widgets): components/widgets/StartupRunwayWidget.tsx. Exports: StartupRunwayWidget.
- **StartupScreener** (Catalog): components/StartupScreener.tsx. Exports: StartupScreener.
- **StickyTemplateCta** (Layout & marketing): components/StickyTemplateCta.tsx. Exports: StickyTemplateCta.
- **StoreHome** (Layout & marketing): components/StoreHome.tsx. Exports: StoreHome.
- **TamSamSomCalculator** (Calculators): components/tools/TamSamSomCalculator.tsx. Exports: TamSamSomCalculator.
- **TeamCredentialLink** (Layout & marketing): components/TeamCredentialLink.tsx. Exports: TeamCredentialLink.
- **TeamSection** (Layout & marketing): components/TeamSection.tsx. Exports: TeamSection.
- **TemplateAppLink** (Layout & marketing): components/TemplateAppLink.tsx. Exports: TemplateAppLink.
- **TemplateCard** (Catalog): components/TemplateCard.tsx. Exports: TemplateCard.
- **TemplatesBrowser** (Catalog): components/TemplatesBrowser.tsx. Exports: TemplatesBrowser.
- **TerminalValueCalculator** (Calculators): components/tools/TerminalValueCalculator.tsx. Exports: TerminalValueCalculator.
- **Terms** (Content): components/legal/Terms.tsx. Exports: Terms.
- **TiltCard** (Primitives): components/TiltCard.tsx. Exports: TiltCard.
- **TimeSavingsCalculator** (Layout & marketing): components/TimeSavingsCalculator.tsx. Exports: TimeSavingsCalculator.
- **ToolsIndex** (Calculators): components/tools/ToolsIndex.tsx. Exports: ToolsIndex.
- **TradingViewWidget** (Data & previews): components/TradingViewWidget.tsx. Exports: TradingViewWidget.
- **Turnstile** (Layout & marketing): components/Turnstile.tsx. Exports: Turnstile.
- **UserCohortRetentionCalculator** (Calculators): components/tools/UserCohortRetentionCalculator.tsx. Exports: UserCohortRetentionCalculator.
- **WaccCalculator** (Calculators): components/tools/WaccCalculator.tsx. Exports: WaccCalculator.
- **WaccWidget** (Widgets): components/widgets/WaccWidget.tsx. Exports: WaccWidget.
- **WorkingCapitalCalculator** (Calculators): components/tools/WorkingCapitalCalculator.tsx. Exports: WorkingCapitalCalculator.
- **WorkingCapitalWidget** (Widgets): components/widgets/WorkingCapitalWidget.tsx. Exports: WorkingCapitalWidget.

## Source of truth
app/globals.css; app/layout.tsx; tailwind.config.ts; components/ui/Button.tsx. App typography: finamodel-web-app/frontend/tailwind.config.ts and frontend/src/index.css. The /brand page documents both type scales; component examples belong to the website.

Canonical: https://finamodel.com/brand