Official Brand Identity

Subraps
Brand Book

A comprehensive guide to using the Subraps visual identity consistently across all platforms and materials.

Version 1.0  ·  2025
Section 01

Color Palette

The Subraps palette is rooted in deep emerald trust and vibrant green energy — evoking financial confidence, growth, and clarity.

Primary Colors
Subraps Green
#6BBB5A
Primary
Deep Emerald
#0d2b1e
Dark
Mid Gray
#b0aea5
Neutral
Light Gray
#e8e6dc
Neutral
Extended Palette
Light Green
#A5C343
Accent
Emerald Mid
#143d28
Dark
Emerald Light
#1e5c3a
Dark
Gold Cream
#e2c89a
Accent
Cream
#f7f3ec
Background
Cream Dark
#ede7da
Background
Ink
#1a1a1a
Text
Ink Soft
#3d3d3d
Text
Section 02

Typography

Outfit is the sole typeface of Subraps — geometric, approachable, and authoritative across every weight.

Outfit
Primary Typeface

Used for all headings, body text, UI labels, and brand communications.

Light 300 Regular 400 Medium 500 SemiBold 600 Bold 700 ExtraBold 800 Black 900
Arial
Fallback Typeface

Use Arial as a system fallback when Outfit is unavailable. Maintain hierarchy and weight pairings.

Regular Bold
Display
48px / 900
Findependent
Heading 1
32px / 800
Financial Freedom
Heading 2
22px / 700
Smart Accounting Tools
Heading 3
18px / 600
Manage your subscriptions
Body
16px / 400
Subraps helps you track, manage and optimize your finances with clarity and confidence. Built for individuals and businesses.
Small
13px / 400
Supporting copy and UI micro-text at small scale
Caption
11px / 700 UC
Section Label · Category Tag
Section 03

Logo Do's & Don'ts

The Subraps logo must always be used with care. Follow these guidelines to maintain brand integrity across all applications.

Do's — Approved Usage
Do: Logo on white
Use on clean white or light backgrounds
Do: Horizontal with tagline
Use horizontal layout with tagline
Do: White on green
Use white logo on brand green background
Do: White on dark
Use white logo on deep emerald background
Do: White on emerald
Use on mid-green backgrounds with contrast
Do: Monochrome black
Use single-colour black version when needed
Do: On cream background
Use on cream / off-white backgrounds — preserve clear space around logo
Don'ts — Prohibited Usage
Don't: Wrong green circle
Don't use off-brand circle shades on icon
Don't: Wrong logo colour
Don't swap the icon with incorrect greens
Don't: Green wordmark
Don't colour the wordmark in green
Don't: Wrong typeface
Don't use alternative or serif fonts
Don't: Disproportionate icon
Don't distort icon-to-wordmark ratio
Don't: Stretched horizontally
Don't stretch or distort the logo shape
Don't: Underline added
Don't add strokes, underlines or outlines
Don't: Low-contrast gray
Don't use low-contrast or desaturated text
Section 04

Logo Variants Gallery

The full library of approved Subraps logo treatments — covering light, dark, coloured, and monochrome contexts.

Horizontal — White BG
Horizontal — White Background
Primary usage on digital & print
Horizontal — Cream BG
Horizontal — Cream Background
Warm document and editorial use
White on Light Green
White — Light Green Background
Banners, social media covers
White on Deep Emerald
White — Deep Emerald Background
Dark-mode, presentations, merchandise
White on Brand Green
White — Brand Green Background
Marketing collateral, packaging
Monochrome Black
Monochrome — Black
Single-colour print, embossing, fax
Icon Only
Icon Mark — Standalone
Favicon, app icon, small-scale use
Horizontal with tagline — White
Horizontal + Tagline — White BG
Full brand statement, letterheads
Section 05

Favicon & App Icon

The Subraps icon mark — a circular emblem combining a bar-chart growth motif with a checkmark sweep — is used standalone at small sizes and as the app icon.

Favicon 16 16 × 16 — Browser favicon
Favicon 32 32 × 32 — Retina tab icon
Favicon 64 64 × 64 — Bookmark icon
Favicon 128 128 × 128 — App icon
Favicon 256 180 × 180 — iOS touch icon

In Context

Subraps — Findependent
Browser tab simulation
App icon
Home screen / launcher
Section 06

UI Components

Core interface building blocks for the Subraps product ecosystem — consistent in colour, weight, and spacing.

Buttons
Badges & Chips
Growth Verified Premium Pending Alert
Active Pro Plan Inactive
Cards
Monthly Revenue
Track your income streams
Portfolio
Asset overview
Stat Cards
₹2.4M
Revenue
↑ 12.4%
98%
Accuracy
↑ 3.1%
4.9★
Rating
↑ 0.2
Form Elements
Alerts & Notifications
Payment Verified
Your transaction of ₹14,200 was processed successfully.
Report Ready
Your Q2 financial summary is available to download.
Progress & Data
Budget Utilisation 72%
Savings Goal 45%
Tax Filing 90%
Bootstrap Icons (Brand-Relevant)
Revenue
Growth
Wallet
Finance
Business
Verified
Invoice
Tax
Banking
Analytics
FX
Report
KYC
Corporate
Payments
Security
Alerts
Settings
Section 07

Quick Reference

All Subraps colours at a glance — names, hex values, CSS variables, and typical usage roles.

Swatch Name Hex CSS Variable Role
Subraps Green#6BBB5A--goldPrimary Brand
Deep Emerald#0d2b1e--emeraldDark BG / Text
Emerald Mid#143d28--emerald-midDark Surface
Emerald Light#1e5c3a--emerald-lightMid Surface
Light Green#A5C343--gold-lightAccent
Gold Cream#e2c89a--gold-creamWarm Accent
Cream#f7f3ec--creamPage BG
Cream Dark#ede7da--cream-darkCard BG
Light Gray#e8e6dc--light-grayBorders
Mid Gray#b0aea5--mid-grayMuted Text
Ink#1a1a1a--inkBody Text
Ink Soft#3d3d3d--ink-softSecondary Text
White#ffffff--whiteSurface
Approved Colour Combinations
Aa
Green on White
Aa
Green on Emerald
Aa
Emerald on Cream
Aa
Emerald on Green