Splink Logo

Splink

Splink Brand

Logo, colors, and typography guidelines

Color Palette

Primary Brand Colors

The main brand color is a warm, energetic yellow (main-500: #ecb306) that conveys friendliness and efficiency.

main-50

Lightest tint, subtle backgrounds

main-100

Light backgrounds

main-200

Hover states, light accents

main-300

Secondary buttons, badges

main-400

Interactive elements

main-500

🎯 Main brand color - primary actions, highlights

main-600

Hover states for primary

main-700

Active states

main-800

Dark accents

main-900

Darkest shade

main-950

Near-black brand color

Neutral Colors (Stone)

Stone color palette used for text, backgrounds, borders, and neutral UI elements. stone-900 is the primary text color.

stone-50

Lightest neutral, subtle backgrounds

stone-100

Light backgrounds, disabled states

stone-200

Borders, dividers

stone-300

Form inputs, secondary borders

stone-400

Placeholder text, muted elements

stone-500

Secondary text, subtle accents

stone-600

Body text, secondary headings

stone-700

Primary text, emphasized content

stone-800

Strong emphasis, dark accents

stone-900

📝 Main text color - primary content, headings

stone-950

Near-black, extreme contrast

Usage Guidelines

Do's

  • Use main-500 (#ecb306) as the primary brand color
  • Ensure sufficient contrast for accessibility
  • Use stone colors for neutral UI elements
  • Use consistent color naming conventions

Don'ts

  • Don't use yellow text on white backgrounds
  • Don't use off-brand colors for primary actions
  • Don't modify color values without testing
  • Don't use stone colors for brand elements

Typography

Font Families

Noto Sans

Google Fonts

Primary body font for all general text content and UI elements

Weight: 400-700Variable: --font-noto-sans
The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Comfortaa

Google Fonts

Logo only - not used for any other text or UI elements

Weight: 800Variable: --font-logo

Outfit

Google Fonts

Display headings, section headers, and marketing content

Weight: 700-800Variable: --font-display
The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Type Scale

Display

text-6xl

Hero headlines

Splink Brand Guidelines

H1

text-4xl

Page titles

Typography System

H2

text-3xl

Section headers

Font Families

H3

text-2xl

Subsection headers

Type Scale

H4

text-xl

Component titles

Example Text

Body Large

text-lg

Important paragraphs

This is important body text that needs emphasis

Body

text-base

Default text

This is the standard body text used throughout the application

Body Small

text-sm

Secondary text

Secondary information and captions

Caption

text-xs

Labels and hints

Form labels and small annotations

Typography in Context

Receipt Splitting Made Simple

Transform the way you split expenses with friends using AI-powered receipt scanning and instant payment links.

How It Works

Splink uses advanced AI technology to automatically scan and parse your receipts, making it easy to split expenses fairly among friends. No more manual calculations or awkward money conversations.

Key Features

  • AI-Powered Scanning: Automatically extracts items and prices
  • Smart Splitting: Assign items to different people effortlessly
  • Instant Payments: Generate PromptPay QR codes for immediate settlement

Technical Details

Built with modern web technologies, Splink ensures fast performance and reliable accuracy. Our system processes receipts in real-time and maintains your privacy throughout the entire process.

/* Example CSS usage */ .display-heading { font-family: var(--font-display); font-weight: 700; } .body-text { font-family: var(--font-noto-sans); font-weight: 400; } .logo { font-family: var(--font-logo); font-weight: 800; }

This example demonstrates how the different font families work together to create a cohesive reading experience.

⚠️

Important: Comfortaa Usage Restriction

Comfortaa is reserved exclusively for the logo. Do not use it for headings, body text, buttons, or any other UI elements. Use Noto Sans or Outfit instead.

Guidelines

Best Practices

  • Use Noto Sans for all body text and UI elements
  • Use Comfortaa ONLY for the logo - never for other text
  • Use Outfit for marketing headlines and landing pages
  • Maintain consistent line heights (1.5-1.75 for body text)
  • Ensure sufficient color contrast for accessibility

Avoid

  • Don't use more than 3 fonts in a single interface
  • Don't use Comfortaa for anything except the logo
  • Don't set body text smaller than 14px
  • Don't use all caps for large blocks of text
  • Don't ignore responsive typography scaling