Design System

Franklin Style Guide

Design tokens, component library, and usage patterns for the Franklin marketing website.

Brand Colors

Core color palette for Franklin

Primary

#005689

CTAs, primary buttons, icons, key interactive elements

Deep

#001738

All headings and primary text

Muted

#757679

Body text and secondary content

Accent

#FFAE0C

Use sparingly (max 10%), special highlights only

Typography

Font families and text styles

Headings - DM Sans (Aeonik alternative)

Heading 1

Heading 2

Heading 3

Heading 4

Body - Inter

This is body text at base size (16px). Used for paragraphs and main content.

This is small text (14px). Used for secondary information and captions.

This is extra small text (12px). Used for labels and metadata.

Buttons

All button variants and sizes with Franklin branding

Primary Buttons

Sizes

With Icons

States

Outline/Secondary Buttons

Sizes

With Icons

Ghost Buttons

Destructive Buttons

Form Elements

Inputs, labels, and form components

Input Fields

Checkboxes

Cards

Card components with headers, content, and footers

Card Title
Card description goes here with supporting text.

This is the main content area of the card where you can put any information.

With Icon
Cards can include icons and various content types.

Feature Name

Feature description

Minimal Card

Cards can be used with minimal content and structure.

Badges & Pills

Status indicators and labels

Primary Badge

Alpha Access
Available

Status Badges

ActiveComing SoonDeprecatedNeutral

Accent Badge (use sparingly)

Now in Alpha

Skeleton Loaders

Loading states for content

Text Skeletons

Card Skeleton

Design Tokens

Spacing, borders, and other constants

Border Radius

none (0px)

sm (2px)

md (6px)

lg (8px)

xl (12px)

Shadows

shadow-sm

shadow-md

Section Spacing

Use py-24 for major section padding (top and bottom)

Usage Guidelines

Best practices and patterns

Use primary buttons for main CTAs

Join Alpha, Submit, Book Demo - these should use the primary button style

Use outline buttons for secondary actions

Learn More, View Documentation - use outline variant

Never use gradients

Franklin brand uses solid colors only

Use accent color sparingly

Maximum 10% of design - special highlights only (e.g., "Now in Alpha" badges)

Don't mix custom styles with button variants

Use inline styles for Franklin brand colors consistently

Avoid harsh shadows or overly playful animations

Keep effects subtle and professional