Finamodel / Brand reference

The Finamodel look.

One place for our identity, interface and the details that make it ours.

Get the assets
Finawork brand guidelinesExplore the app identity, geometric deliverable icons and the shared Fina character.
01 / Identity

Identity

A familiar name, an editorial wordmark, a compact financial mark.

Primary wordmark
Finamodel
Instrument Serif · regular · original proportions
Compact markFinamodel app iconApp icon & favicon
FinamodelReversed on ink
.brand-wordmark

Keep the signature intact.

Always spell it Finamodel. Use the actual serif wordmark or supplied light icon asset. Keep the wordmark upright, uncompressed and in one color.

Give it room.

Recommended clear space: at least half the capital letter height on every side. Use ink on light surfaces and warm white on ink.

01

Let the model lead.

Show useful financial detail: a workbook, a calculation, a clearly labelled result. Decoration stays secondary.

02

Keep the surface quiet.

Warm canvas, white paper, charcoal type and fine borders. Use green and orange with a purpose.

03

Be precise and approachable.

Clear headings, ordinary language and specific actions. Make complex finance easier to read.

02 / Color

Color

Neutrals do most of the work. Green carries the financial detail. Orange adds emphasis.

Core palette · shown in components

Canvas#F7F7F4
Page background
Revenue forecastWhite card on warm canvas
background

The warm off-white page background. Give content room to breathe.

Page canvas + card surface

Ink#262626
Primary actions.
charcoal

Exact charcoal for primary button fills, dark button labels and button borders.

ui/Button · primary variant

Model green#34785C
Illustrative annual growth+12.0%Positive growth
success

Results, positive signals, financial detail and selected accents.

CagrWidget · positive result pattern

Orange#F54E00
Illustrative annual growth−4.0%Negative growth
accent / brand

Small accents and selected caution or negative-result patterns in calculator widgets. Keep large surfaces neutral.

CagrWidget · negative result pattern

Why two border shades?

Both are 1px wide. The lighter shade separates information; the darker shade makes controls easier to find. They’re supporting interface colors.

Separating content

Revenue
Operating costs

#E5E5E5 · a quiet line between things you read.

Identifying a control

#CCCCCC · a stronger edge around something you can edit.

Supporting interface colors Surfaces, text, borders & existing workbook details

These support the four core colors. Excel green is an existing preview detail, not a second Finamodel brand green.

Paper#FFFFFF
Model assumptionsA white working surface
card

Cards, inputs and workbook surfaces.

Card and input surface pattern

Muted surface#EAEAE8
Soft fill, secondary emphasis
muted

Secondary buttons, quiet panels and catalog card backgrounds.

ui/Button · secondary variant

Secondary text#6B6B6B
Revenue forecast

Adjust the assumptions to compare scenarios.

muted-foreground

Descriptions, supporting labels and navigation.

ModelCard · supporting description

Hairline#E5E5E5
Revenue $1.12mOperating profit $336kIllustrative values · quiet divider
border

One-pixel dividers, card edges and table structure.

Table and section divider pattern

Input border#CCCCCC
A stronger edge around a control
input

Outlined buttons and input boundaries.

ui/Button · outline variant

Excel green#217346
financial_model.xlsx
Existing workbook title bar
workbook chrome

An existing Excel-preview title bar detail, not a second Finamodel brand green.

TemplateCard · existing preview chrome

Reference blue#536D9B
=SUM(B4:B12)

Cell references inside article code.

code references

Cell references and named ranges in article code examples.

globals.css · blog-code-cell-reference

Quiet label#888888
Financial modelmodel.xlsx
secondary detail

Nonessential captions and decorative metadata; use darker ink for small essential text.

Footer · secondary metadata pattern

These are the HEX values used directly in site components. The rounded HSL tokens in globals.css can differ slightly. Use an existing component’s values when extending it.

03 / Typography

Typography

Serif for the signature. Sans for the interface. Monospace for formulas and technical detail.

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 & web app scales

Pixels at a 16px root
Font sizes for website and web app Tailwind tokens
TokenWebsiteWeb app
text-xs1212
text-sm1312.25
text-base14.513.75
text-lg16.515.75
text-xl1817
text-2xl2221
text-3xl2725.75
text-4xl3230.5
text-5xl4340.75
text-6xl5451.25
text-7xl6561.75
text-8xl8681.75
text-9xl115109.25
text-body-sm13.512.75
text-lead15.514.75
text-article-title36—
text-metric24—
text-title-sm—19

A dash means the token belongs only to the other product. The specimens and component examples below use the website scale.

Wordmark

Instrument Serif

400 · normal · 0 tracking
Finamodel

Display

Helvetica Neue

32–43 px · 500 · tight tracking · 1.2 line height
Financial models, made clear.

Section heading

Helvetica Neue

22–27 px · 500 · tight tracking
Built around the numbers

Body

Helvetica Neue

14.5–16.5 px · 400 · relaxed line height
Start with a template. Adjust the assumptions. Understand what changes.

Label

Helvetica Neue

12 px · 600 · uppercase · 0.12em tracking
MODEL ASSUMPTIONS

Technical

Courier New

13 px · 400 · tabular numbers
=NPV(discount_rate, cash_flows) $1,250,000

System-first body type

Helvetica Neue → Helvetica → Arial → sans-serif. Use medium-weight headings, relaxed body copy and tight heading tracking.

A restrained serif

Instrument Serif is loaded by the site for the wordmark. Keep product headings in the sans family. Courier New is for formulas, filenames and compact data.

Keep navigation, labels and KPI values in sans, with tabular numbers for alignment. Use explicit responsive font sizes rather than viewport-width scaling.

04 / Components

Components

Working examples of the site’s shared UI. The source library below includes every exported component module.

Buttons

components/ui/Button.tsx

Select a variant to get its code. Heights: 32, 40 and 48px.

primary
secondary
outline
white
<Button variant="primary" size="md">Continue</Button>

Inputs & results

Interactive examples

Change the assumption to update the result.

NumberField

Starting revenue ($)

NumberInput

Pill outline · leading icon · 44px height

ScreenerSearchInput
Illustrative next-year revenue$1,120,000Starting revenue × (1 + growth)

Catalog cards

Live components

Muted surfaces turn white on hover. The workbook lifts, the shadow deepens and a green arrow appears.

Data surfaces

Tables, chips & charts
financial_model.xlsx
Revenue summary
Illustrative financial figures, USD thousands
USD thousands202620272028
Revenue1,0001,1201,254
Operating costs(700)(762)(828)
EBITDA300358426

Illustrative data · right-aligned figures · units in the header

Illustrative margin ranges
widgets/BenchmarkChart.tsx

Feedback & disclosure

Existing site patterns
Model readyExcel templateValuation
What makes a Finamodel card?

A small corner radius, a quiet surface, clear hierarchy and useful model detail. Save full pill corners for actions, search and small labels.

FAQs

Two live patterns

Boxed questions

Independent disclosures. Open several answers to compare them.

Frequently asked

Which FAQ style should I use?+

Use independent disclosures for company and template pages. Use the single-open accordion for calculator pages. Both share the site’s boxed question styling.

Can I reuse these components on another page?+

Yes. Import the existing component and supply the page’s content through its props. Keep its typography, spacing and interaction states consistent with the surrounding site.

Where can I find the implementation?+

Each specimen includes its source and a copyable usage example. The source library below lists the exported components across the site.

Have more financial modelling questions? Contact us

components/CompanyFAQ.tsx

Single-open accordion

One answer at a time, with a plus/minus control. Used on calculator pages.

Frequently asked

Use independent disclosures for company and template pages. Use the single-open accordion for calculator pages. Both share the site’s boxed question styling.

Yes. Import the existing component and supply the page’s content through its props. Keep its typography, spacing and interaction states consistent with the surrounding site.

Each specimen includes its source and a copyable usage example. The source library below lists the exported components across the site.

Have more financial modelling questions? Contact us

tools/BusinessMetricCalculatorParts.tsx → FaqSection

Expandable content

ReadMoreSection

A fading preview with working “Read more” and “Show less” controls.

A model overview

A useful overview explains what the model covers, the assumptions someone can change and the outputs they can review. Start with the purpose before introducing individual worksheets.

Keep the assumptions visible

Group revenue, costs and timing into clearly labelled inputs. Include the units and period beside each value so the next person can understand the model without reconstructing its logic.

Give results context

Show the scenario behind each result. Use consistent number formats, right-aligned figures and short explanations of the calculation. Identify illustrative figures so they cannot be mistaken for company data.

Leave room for detail

Expandable content keeps longer explanations available without making the initial view overwhelming. Use it for background and methodology; keep essential assumptions and actions visible from the start.

components/ReadMoreSection.tsx

Results & formulas

Illustrative figures

Next-year revenue

$1.12m

$1m starting revenue, growing 12%.

Operating profit

$336k

Illustrative 30% operating margin.

Revenue growth

12.0%

The assumption used in this example.

tools/BusinessMetricCalculatorParts.tsx → ResultCard

Formula explanation

Monospace is reserved for the calculation; labels and results stay sans.

Revenue × (1 + growth)
$1,000,000 × 1.12 = $1,120,000
tools/BusinessMetricCalculatorParts.tsx → FormulaBlock

Author attribution

ArticleAuthorBio

The shared author block used on articles and calculators, including its original links.

Alex Tapio, founder of Finamodel and ex-Deloitte financial modelling expert

Alex Tapio

Founder of Finamodel • Professional Financial Modeller • Ex-Deloitte

alextapio.comx.com/alextapioLinkedIncontact [at] finamodel.com
components/ArticleAuthorBio.tsx

Related tools & templates

RelatedToolCtas

The NPV calculator’s related links, with their existing destinations and hover states.

Keep modeling

Related financial calculators and templates

Use these next-step tools and Excel templates to turn the quick calculation into a more complete finance workflow.

IRR calculator for investment returnsSolve the discount rate that sets project NPV to zero.WACC calculator for discount ratesEstimate the cost of capital to use in valuation work.DCF model template for valuationBuild a full discounted cash flow model with terminal value.
components/tools/RelatedToolCtas.tsx
05 / Icons

Icons

The icons currently used across the site, including the custom funding-stage pieces. Select one to copy its JSX or download an SVG.

24 × 24 grid2px strokeRound caps & joinscurrentColor
79 icons

Pair icons with clear labels. Give icon-only buttons an accessible name; mark decorative icons aria-hidden. Keep colors tied to meaning.

06 / Patterns & motion

Patterns & motion

Fine grids, real workbook detail, generous spacing and small movements.

Dot fieldhero-dot-pattern

1px dots / 24px grid

Workbook gridBackgroundGrid

1px lines / 40px grid

A 4px spacing rhythm

4
8
12
16
24
32
48
64

16–24px page gutters · 24–32px card padding · 48–80px section spacing

Containers & edges

Common content widths are 1000px and 1200px. Keep 1px borders subtle. Use tiny card corners and fully rounded buttons; preserve component-specific radii.

Workbook imagery

Use real sheet detail, green title bars, restrained window controls and overlapping paper surfaces. Keep text and numbers legible at the intended size.

Existing Finamodel income statement in the green workbook theme
Existing workbook reference · /recolor/green.png
Model ready

Small movement. Clear feedback.

Motion with a purpose

Entrances: 600ms, ease-out, 16px upward. Catalog hover: 300ms; workbook movement: 500ms. Pause or remove decorative movement for reduced-motion preferences.

Explore Fina's expressions

Meet Fina.

A charcoal square and two bright eyes connect Finamodel with Finawork. Keep the same proportions at every size, with a clear label beside compact appearances.

24 px
32 px
48 px
64 px
96 px

24–32 px: compact companion

The silhouette and eyes carry recognition. Pair with a short label for status or actions; keep movement restrained.

48–96 px: a familiar presence

Give Fina more room in introductions and guidance. Preserve the charcoal fill, white eyes and original geometry.

Full character study in Finawork
07 / Voice

Voice

Direct, useful and specific. Write like someone who knows the model and respects the reader’s time.

Use

Download Excel template

Avoid

Unlock your financial potential

Name the action and the file.
Use

Change the assumptions to compare scenarios.

Avoid

Supercharge your strategic decision-making.

Explain what someone can do.
Use

Revenue grows 12% in this example.

Avoid

Unprecedented, industry-leading growth.

Use a number and give it context.
08 / Source library

Source library

Find the existing implementation before building another one. Search by component name, path or exported symbol.

125 modules
Analyticscomponents/Analytics.tsxLayout & marketing
components/Analytics.tsx

Exports: Analytics

AppLinkcomponents/AppLink.tsxLayout & marketing
components/AppLink.tsx

Exports: AppLink

AppPreviewStackcomponents/AppPreviewStack.tsxData & previews
components/AppPreviewStack.tsx

Exports: AppPreviewProofPoints, AppPreviewStack

ArticleAuthorBiocomponents/ArticleAuthorBio.tsxContent
components/ArticleAuthorBio.tsx

Exports: ArticleAuthorBio

AuthorBiocomponents/AuthorBio.tsxContent
components/AuthorBio.tsx

Exports: AuthorBio

BenchmarkChartHorizontal financial range chart in the green palette.Widgets
components/widgets/BenchmarkChart.tsx

Exports: BenchmarkChart

BlogIndexcomponents/blog/BlogIndex.tsxContent
components/blog/BlogIndex.tsx

Exports: BlogIndex

BlogPostcomponents/blog/BlogPost.tsxContent
components/blog/BlogPost.tsx

Exports: BlogPost

BrandRecolorSectioncomponents/BrandRecolorSection.tsxData & previews
components/BrandRecolorSection.tsx

Exports: BrandRecolorSection

BreakEvenCalculatorcomponents/tools/BreakEvenCalculator.tsxCalculators
components/tools/BreakEvenCalculator.tsx

Exports: BreakEvenCalculator

BreakEvenWidgetcomponents/widgets/BreakEvenWidget.tsxWidgets
components/widgets/BreakEvenWidget.tsx

Exports: BreakEvenWidget

BusinessMetricCalculatorPartsShared number fields, result cards, assumptions, charts and FAQ sections.Calculators
components/tools/BusinessMetricCalculatorParts.tsx

Exports: NumberField, CalculatorHero, ResultCard, FormulaBlock, FaqSection, ToolAuthorBio

ButtonFour variants, three sizes and disabled state.Primitives
components/ui/Button.tsx

Exports: Button

CagrCalculatorcomponents/tools/CagrCalculator.tsxCalculators
components/tools/CagrCalculator.tsx

Exports: CagrCalculator

CagrWidgetcomponents/widgets/CagrWidget.tsxWidgets
components/widgets/CagrWidget.tsx

Exports: CagrWidget

CategoriesBrowsercomponents/CategoriesBrowser.tsxCatalog
components/CategoriesBrowser.tsx

Exports: CategoriesBrowser

ChunkLoadRecoverycomponents/ChunkLoadRecovery.tsxLayout & marketing
components/ChunkLoadRecovery.tsx

Exports: ChunkLoadRecovery

ChurnRateCalculatorcomponents/tools/ChurnRateCalculator.tsxCalculators
components/tools/ChurnRateCalculator.tsx

Exports: ChurnRateCalculator

CompanyCTAcomponents/CompanyCTA.tsxLayout & marketing
components/CompanyCTA.tsx

Exports: CompanyCTA

CompanyFAQcomponents/CompanyFAQ.tsxContent
components/CompanyFAQ.tsx

Exports: CompanyFAQ

CompanyForecastCalculatorcomponents/tools/CompanyForecastCalculator.tsxCalculators
components/tools/CompanyForecastCalculator.tsx

Exports: CompanyForecastCalculator

CompanyForecastWidgetcomponents/widgets/CompanyForecastWidget.tsxWidgets
components/widgets/CompanyForecastWidget.tsx

Exports: CompanyForecastWidget

CompanyListcomponents/CompanyList.tsxCatalog
components/CompanyList.tsx

Exports: CompanyList

CompanyListViewcomponents/CompanyListView.tsxCatalog
components/CompanyListView.tsx

Exports: CompanyListView

CompanyLogocomponents/CompanyLogo.tsxLayout & marketing
components/CompanyLogo.tsx

Exports: CompanyLogo

CompanyPreviewRailcomponents/CompanyPreviewRail.tsxData & previews
components/CompanyPreviewRail.tsx

Exports: CompanyPreviewRail

CompanyScreenercomponents/CompanyScreener.tsxCatalog
components/CompanyScreener.tsx

Exports: CompanyScreener

CompanySectorGridcomponents/CompanySectorGrid.tsxCatalog
components/CompanySectorGrid.tsx

Exports: CompanySectorGrid

CompoundInterestCalculatorcomponents/tools/CompoundInterestCalculator.tsxCalculators
components/tools/CompoundInterestCalculator.tsx

Exports: CompoundInterestCalculator

CompoundInterestWidgetcomponents/widgets/CompoundInterestWidget.tsxWidgets
components/widgets/CompoundInterestWidget.tsx

Exports: CompoundInterestWidget

CookieBannercomponents/ui/CookieBanner.tsxPrimitives
components/ui/CookieBanner.tsx

Exports: CookieBanner

CopilotCTAcomponents/CopilotCTA.tsxLayout & marketing
components/CopilotCTA.tsx

Exports: CopilotCTA

CopilotLinkcomponents/CopilotLink.tsxLayout & marketing
components/CopilotLink.tsx

Exports: CopilotLink

CopilotPromptFormcomponents/CopilotPromptForm.tsxLayout & marketing
components/CopilotPromptForm.tsx

Exports: CopilotPromptForm

DcfCalculatorcomponents/tools/DcfCalculator.tsxCalculators
components/tools/DcfCalculator.tsx

Exports: DcfCalculator

DebtCapacityCalculatorcomponents/tools/DebtCapacityCalculator.tsxCalculators
components/tools/DebtCapacityCalculator.tsx

Exports: DebtCapacityCalculator

DesignDocSectionscomponents/DesignDocSections.tsxLayout & marketing
components/DesignDocSections.tsx

Exports: DesignDocSections

DownloadButtoncomponents/DownloadButton.tsxPrimitives
components/DownloadButton.tsx

Exports: DownloadButton

DscrCalculatorcomponents/tools/DscrCalculator.tsxCalculators
components/tools/DscrCalculator.tsx

Exports: DscrCalculator

DscrWidgetcomponents/widgets/DscrWidget.tsxWidgets
components/widgets/DscrWidget.tsx

Exports: DscrWidget

EmbedWorkbookcomponents/EmbedWorkbook.tsxData & previews
components/EmbedWorkbook.tsx

Exports: EmbedWorkbook

EquityDilutionCalculatorcomponents/tools/EquityDilutionCalculator.tsxCalculators
components/tools/EquityDilutionCalculator.tsx

Exports: EquityDilutionCalculator

EvEbitdaCalculatorcomponents/tools/EvEbitdaCalculator.tsxCalculators
components/tools/EvEbitdaCalculator.tsx

Exports: EvEbitdaCalculator

ExcelChartOverlaycomponents/ExcelChartOverlay.tsxData & previews
components/ExcelChartOverlay.tsx

Exports: ExcelChartOverlay

ExcelPreviewInteractive workbook surface with sheet navigation.Data & previews
components/ExcelPreview.tsx

Exports: ExcelPreview

FaqCategoryArticlecomponents/faq/FaqCategoryArticle.tsxContent
components/faq/FaqCategoryArticle.tsx

Exports: FaqCategoryArticle

FaqContactLinkcomponents/FaqContactLink.tsxLayout & marketing
components/FaqContactLink.tsx

Exports: FaqContactLink

FaqIndexcomponents/faq/FaqIndex.tsxContent
components/faq/FaqIndex.tsx

Exports: FaqIndex

FaqSearchcomponents/faq/FaqSearch.tsxContent
components/faq/FaqSearch.tsx

Exports: FaqSearch

FeaturedLibrarySectioncomponents/FeaturedLibrarySection.tsxLayout & marketing
components/FeaturedLibrarySection.tsx

Exports: FeaturedLibrarySection

FooterWordmark, site directory and legal links.Layout & marketing
components/Footer.tsx

Exports: Footer

FounderSalaryCalculatorcomponents/tools/FounderSalaryCalculator.tsxCalculators
components/tools/FounderSalaryCalculator.tsx

Exports: FounderSalaryCalculator

FundingIconsReusable knight and queen funding-stage icons.Primitives
components/icons/FundingIcons.tsx

Exports: ChessKnight, ChessQueen

FundingRoundScattercomponents/FundingRoundScatter.tsxData & previews
components/FundingRoundScatter.tsx

Exports: FundingRoundScatter

FundingRoundScrollercomponents/FundingRoundScroller.tsxCatalog
components/FundingRoundScroller.tsx

Exports: FundingRoundScroller

GuidedModelToolcomponents/tools/GuidedModelTool.tsxCalculators
components/tools/GuidedModelTool.tsx

Exports: GuidedModelTool

HistoricalFinancialsTabscomponents/HistoricalFinancialsTabs.tsxData & previews
components/HistoricalFinancialsTabs.tsx

Exports: HistoricalFinancialsTabs

IrrCalculatorcomponents/tools/IrrCalculator.tsxCalculators
components/tools/IrrCalculator.tsx

Exports: IrrCalculator

IrrWidgetcomponents/widgets/IrrWidget.tsxWidgets
components/widgets/IrrWidget.tsx

Exports: IrrWidget

LoanAmortizationCalculatorcomponents/tools/LoanAmortizationCalculator.tsxCalculators
components/tools/LoanAmortizationCalculator.tsx

Exports: LoanAmortizationCalculator

LoanAmortizationWidgetcomponents/widgets/LoanAmortizationWidget.tsxWidgets
components/widgets/LoanAmortizationWidget.tsx

Exports: LoanAmortizationWidget

LtvCacCalculatorcomponents/tools/LtvCacCalculator.tsxCalculators
components/tools/LtvCacCalculator.tsx

Exports: LtvCacCalculator

MarketingRoiRoasCalculatorcomponents/tools/MarketingRoiRoasCalculator.tsxCalculators
components/tools/MarketingRoiRoasCalculator.tsx

Exports: MarketingRoiRoasCalculator

MarketShareGrowthCalculatorcomponents/tools/MarketShareGrowthCalculator.tsxCalculators
components/tools/MarketShareGrowthCalculator.tsx

Exports: MarketShareGrowthCalculator

ModelCardCompany or startup card with a logo and workbook.Catalog
components/ModelCard.tsx

Exports: ModelCard

ModelIntegritySectioncomponents/ModelIntegritySection.tsxLayout & marketing
components/ModelIntegritySection.tsx

Exports: ModelIntegritySection

ModelShareButtoncomponents/ModelShareButton.tsxPrimitives
components/ModelShareButton.tsx

Exports: ModelShareButton

MrrArrCalculatorcomponents/tools/MrrArrCalculator.tsxCalculators
components/tools/MrrArrCalculator.tsx

Exports: MrrArrCalculator

NavbarDesktop mega menus and mobile navigation.Layout & marketing
components/Navbar.tsx

Exports: Navbar

NpvCalculatorcomponents/tools/NpvCalculator.tsxCalculators
components/tools/NpvCalculator.tsx

Exports: NpvCalculator

NpvWidgetcomponents/widgets/NpvWidget.tsxWidgets
components/widgets/NpvWidget.tsx

Exports: NpvWidget

NumberInputFormatted numeric input with increment controls.Widgets
components/widgets/NumberInput.tsx

Exports: NumberInput

PaybackPeriodCalculatorcomponents/tools/PaybackPeriodCalculator.tsxCalculators
components/tools/PaybackPeriodCalculator.tsx

Exports: PaybackPeriodCalculator

PaybackPeriodWidgetcomponents/widgets/PaybackPeriodWidget.tsxWidgets
components/widgets/PaybackPeriodWidget.tsx

Exports: PaybackPeriodWidget

Pricingcomponents/Pricing.tsxLayout & marketing
components/Pricing.tsx

Exports: Pricing

Privacycomponents/legal/Privacy.tsxContent
components/legal/Privacy.tsx

Exports: Privacy

ProfitMarginCalculatorcomponents/tools/ProfitMarginCalculator.tsxCalculators
components/tools/ProfitMarginCalculator.tsx

Exports: ProfitMarginCalculator

ProfitMarginWidgetcomponents/widgets/ProfitMarginWidget.tsxWidgets
components/widgets/ProfitMarginWidget.tsx

Exports: ProfitMarginWidget

ReadMoreSectionExpandable content with a fading lower edge.Primitives
components/ReadMoreSection.tsx

Exports: ReadMoreSection

RecolorStackOverlapping workbook images with colored title bars.Data & previews
components/RecolorStack.tsx

Exports: RecolorStack

Refundscomponents/legal/Refunds.tsxContent
components/legal/Refunds.tsx

Exports: Refunds

RelatedToolCtascomponents/tools/RelatedToolCtas.tsxCalculators
components/tools/RelatedToolCtas.tsx

Exports: RelatedToolCtas

RevenueGrowthRateCalculatorcomponents/tools/RevenueGrowthRateCalculator.tsxCalculators
components/tools/RevenueGrowthRateCalculator.tsx

Exports: RevenueGrowthRateCalculator

RoiCalculatorcomponents/tools/RoiCalculator.tsxCalculators
components/tools/RoiCalculator.tsx

Exports: RoiCalculator

RoiWidgetcomponents/widgets/RoiWidget.tsxWidgets
components/widgets/RoiWidget.tsx

Exports: RoiWidget

RuleOf72Calculatorcomponents/tools/RuleOf72Calculator.tsxCalculators
components/tools/RuleOf72Calculator.tsx

Exports: RuleOf72Calculator

RuleOf72Widgetcomponents/widgets/RuleOf72Widget.tsxWidgets
components/widgets/RuleOf72Widget.tsx

Exports: RuleOf72Widget

RunwayCalculatorcomponents/RunwayCalculator.tsxLayout & marketing
components/RunwayCalculator.tsx

Exports: RunwayCalculator

SalesFunnelConversionCalculatorcomponents/tools/SalesFunnelConversionCalculator.tsxCalculators
components/tools/SalesFunnelConversionCalculator.tsx

Exports: SalesFunnelConversionCalculator

SchedulePreviewSwitchercomponents/SchedulePreviewSwitcher.tsxData & previews
components/SchedulePreviewSwitcher.tsx

Exports: SchedulePreviewSwitcher

SchedulesDirectorycomponents/SchedulesDirectory.tsxCatalog
components/SchedulesDirectory.tsx

Exports: SchedulesDirectory

ScreenerSearchInputPill search input with a leading icon.Primitives
components/ScreenerSearchInput.tsx

Exports: ScreenerSearchInput

SearchBrowsercomponents/SearchBrowser.tsxCatalog
components/SearchBrowser.tsx

Exports: SearchBrowser

Securitycomponents/legal/Security.tsxContent
components/legal/Security.tsx

Exports: Security

SeoJsonLdcomponents/SeoJsonLd.tsxLayout & marketing
components/SeoJsonLd.tsx

Exports: SeoJsonLd

SiteShellThe site's navigation, content, footer and consent wrapper.Layout & marketing
components/SiteShell.tsx

Exports: SiteShell

SocialProofLogoscomponents/SocialProofLogos.tsxLayout & marketing
components/SocialProofLogos.tsx

Exports: SocialProofLogos

StartupCategoryGridcomponents/StartupCategoryGrid.tsxCatalog
components/StartupCategoryGrid.tsx

Exports: StartupCategoryGrid

StartupFundingRoundGridcomponents/StartupFundingRoundGrid.tsxCatalog
components/StartupFundingRoundGrid.tsx

Exports: StartupFundingRoundGrid

StartupFundingRoundScattercomponents/StartupFundingRoundScatter.tsxData & previews
components/StartupFundingRoundScatter.tsx

Exports: StartupFundingRoundScatter

StartupListViewcomponents/StartupListView.tsxCatalog
components/StartupListView.tsx

Exports: StartupListView

StartupModelsIndexcomponents/StartupModelsIndex.tsxCatalog
components/StartupModelsIndex.tsx

Exports: StartupModelsIndex

StartupRunwayCalculatorcomponents/tools/StartupRunwayCalculator.tsxCalculators
components/tools/StartupRunwayCalculator.tsx

Exports: StartupRunwayCalculator

StartupRunwayWidgetcomponents/widgets/StartupRunwayWidget.tsxWidgets
components/widgets/StartupRunwayWidget.tsx

Exports: StartupRunwayWidget

StartupScreenercomponents/StartupScreener.tsxCatalog
components/StartupScreener.tsx

Exports: StartupScreener

StickyTemplateCtacomponents/StickyTemplateCta.tsxLayout & marketing
components/StickyTemplateCta.tsx

Exports: StickyTemplateCta

StoreHomecomponents/StoreHome.tsxLayout & marketing
components/StoreHome.tsx

Exports: StoreHome

TamSamSomCalculatorcomponents/tools/TamSamSomCalculator.tsxCalculators
components/tools/TamSamSomCalculator.tsx

Exports: TamSamSomCalculator

TeamCredentialLinkcomponents/TeamCredentialLink.tsxLayout & marketing
components/TeamCredentialLink.tsx

Exports: TeamCredentialLink

TeamSectioncomponents/TeamSection.tsxLayout & marketing
components/TeamSection.tsx

Exports: TeamSection

TemplateAppLinkcomponents/TemplateAppLink.tsxLayout & marketing
components/TemplateAppLink.tsx

Exports: TemplateAppLink

TemplateCardTemplate tile with a miniature workbook preview.Catalog
components/TemplateCard.tsx

Exports: TemplateCard

TemplatesBrowsercomponents/TemplatesBrowser.tsxCatalog
components/TemplatesBrowser.tsx

Exports: TemplatesBrowser

TerminalValueCalculatorcomponents/tools/TerminalValueCalculator.tsxCalculators
components/tools/TerminalValueCalculator.tsx

Exports: TerminalValueCalculator

Termscomponents/legal/Terms.tsxContent
components/legal/Terms.tsx

Exports: Terms

TiltCardPointer-responsive card with reduced-motion styling.Primitives
components/TiltCard.tsx

Exports: TiltCard

TimeSavingsCalculatorcomponents/TimeSavingsCalculator.tsxLayout & marketing
components/TimeSavingsCalculator.tsx

Exports: TimeSavingsCalculator

ToolsIndexcomponents/tools/ToolsIndex.tsxCalculators
components/tools/ToolsIndex.tsx

Exports: ToolsIndex

TradingViewWidgetcomponents/TradingViewWidget.tsxData & previews
components/TradingViewWidget.tsx

Exports: TradingViewWidget

Turnstilecomponents/Turnstile.tsxLayout & marketing
components/Turnstile.tsx

Exports: Turnstile

UserCohortRetentionCalculatorcomponents/tools/UserCohortRetentionCalculator.tsxCalculators
components/tools/UserCohortRetentionCalculator.tsx

Exports: UserCohortRetentionCalculator

WaccCalculatorcomponents/tools/WaccCalculator.tsxCalculators
components/tools/WaccCalculator.tsx

Exports: WaccCalculator

WaccWidgetcomponents/widgets/WaccWidget.tsxWidgets
components/widgets/WaccWidget.tsx

Exports: WaccWidget

WorkingCapitalCalculatorcomponents/tools/WorkingCapitalCalculator.tsxCalculators
components/tools/WorkingCapitalCalculator.tsx

Exports: WorkingCapitalCalculator

WorkingCapitalWidgetcomponents/widgets/WorkingCapitalWidget.tsxWidgets
components/widgets/WorkingCapitalWidget.tsx

Exports: WorkingCapitalWidget

Inventory generated from the site’s component exports. Refresh after additions with npx tsx scripts/generate-brand-library.ts. Page-specific modules are included for reference; inspect their props before reuse.

09 / Assets

Assets

Original files and portable references for the next Finamodel page.

App iconSVG · light
App iconPNG · 512 × 512
App iconPNG · 192 × 192
FaviconPNG · 32 × 32
FaviconPNG · 16 × 16
Download favicon.icoRead Markdown version

Source of truth

app/globals.css · tailwind.config.ts · app/layout.tsx · components/ui/Button.tsx

This guide documents the current site and recommended usage. The original component files own their behavior and styling.

Go further

Build the financial model you need with Fina

Browse templates, examples, and downloadable Excel models for the analysis you are trying to build. If you can't find your model, ask Fina to build a model for your specific needs.

Start for free
Excel financial model spreadsheet preview showing Customer Rollforward
Fina interactive chat interface preview