Values

Four principles behind every decision.

01

Performance first

Every choice ties back to leads, revenue, automation, or measurable speed.

02

AI-native, not gimmicky

We use intelligent flows, dashboards, and agents — not robot mascots.

03

Trustworthy and direct

Specific numbers, real tradeoffs, no theatre. Founder-led tone.

04

Premium dark tech

Black surfaces, orange energy, glass layers, controlled motion.

Color

A focused, dark-first palette.

Core surfaces & text

Brand accent

Category accents

Used to differentiate service categories and blog topics. Never replace the orange brand accent with these — they are supporting colors, not competing brand colors.

Typography

Tomorrow on Inter, sharp and clear.

DisplayTomorrow · Google Fonts

Aa

Mobile experiences that ship fast.

Ag

Light

Ag

Regular

Ag

Medium

Ag

Semibold

Ag

Bold

Ag

Italic

Tomorrow on Google Fonts

BodyInter · Google Fonts

Aa

Inter handles every paragraph, label, and UI control. Generous line-height, optical alignment, and a wide weight range keep long-form content readable on any surface — from blog posts to pricing tables.

Ag

Light

Ag

Regular

Ag

Medium

Ag

Semibold

Ag

Bold

Ag

Black

Type scale

Use this scale before introducing a new size. The clamp() values handle responsive scaling automatically.

Display XL

clamp(3.5rem, 8vw, 7rem)

Homepage hero only

Architecting growth

Display L

clamp(2.5rem, 6vw, 5.5rem)

Page heroes (H1)

Brand palette

Display M

clamp(2rem, 4vw, 4rem)

Section H2

How we look & feel

Heading L

1.75rem

Card H3, prominent sub-section

Color system

Heading M

1.25rem

Default card title

Surface elevation

Body Large

1.125rem

Lead paragraphs, hero subtitle

A clear, performance-led brand for AI growth.

Body

1rem

Default paragraph

Designed for founders, CMOs, and operators in India and beyond.

Caption

0.875rem

Captions, helper text

Press a swatch to copy its hex.

Label

0.75rem

Section labels, chips, breadcrumbs

DIGITAL PATRON • BRAND

Logo

Digital Patron lockup & marks.

Full lockup

Navbar, footer

Standard logo

Marketing pages

Compact mark

Cards, social avatars

Icon

Favicon, app icon

Clear space

Maintain clear space around the logo equal to the height of the icon's stroke. Never crowd the mark with adjacent text or graphics.

Color usage

Default to the orange + white duotone. Acceptable variants: all-white on dark, all-black on light. Never recolor the mark outside these ranges.

Components

Surfaces, buttons, badges.

Buttons & CTAs

Badges & pills

Section labelFeaturedAITag

Surfaces & elevation

Glass — base

Subtle 3% white over dark. Default card surface.

Glass — hover

Hover deepens fill to 6% and lifts the border to a soft orange.

Glass — active

Active surfaces add a soft radial orange glow plus brighter borders.

Radii

full

9999px

3xl

1.5rem

2xl

1rem

xl

0.75rem

md

0.5rem

Iconography

Two icon systems, one job each.

UI icons

lucide-react

For functional UI affordances: arrows, status, navigation, inputs. Stroke 1.5–2px, monochrome (currentColor), inherits text color.

ArrowRight

Check

Search

Settings

Bell

Zap

Layers

Sparkles

Default size 14–20px in pills, 18–24px in buttons, 32–40px in feature blocks.

Brand icons

Simple Icons + Font Awesome

For technologies, platforms, and partner brands (React Native, Firebase, AWS, etc.). Render in the brand's official color so the stack is instantly recognisable.

React

Next.js

TypeScript

Tailwind

Swift

Kotlin

React Native

Flutter

Firebase

Supabase

AWS

GCP

Azure

Vercel

GitHub

Docker

OpenAI

Used inside tech stack pills, partner sections, and integration grids. Powered by src/components/icons/BrandIcon.tsx.

Tech stack pills (live preview)

Next.jsReact 19TypeScriptTailwind v4Framer MotionSwiftKotlinReact NativeFirebaseSupabaseNode.jsPythonAWSGCPAzureVercelCloudflareGitHub ActionsDockerOpenAIAnthropicWhatsApp

Motion

Calm at rest, sharp on intent.

Principle 1

Demo, not decoration

Motion should explain something — a flow, a metric, a state change. If it does nothing, remove it.

Principle 2

Calm at rest, sharp on intent

Idle pages stay still. Hover, scroll, and click trigger short, confident animations (180–450ms).

Principle 3

Respect the user

All motion respects prefers-reduced-motion. We never animate critical content into existence — content is always reachable instantly.

Principle 4

Spring physics, not easing chains

Use Framer Motion springs and natural easing. Avoid robotic linear motion outside of progress indicators.

Snap

120ms

Hover, focus

Reveal

450ms

Scroll-in cards

Hero

700ms

Page hero stagger

Voice

Direct, founder-led, specific.

Hero subtitleUseDigital Patron is a performance-focused agency built on AI, automation, and smart experimentation.

Hero subtitleAvoidWe unlock unprecedented synergies to revolutionise your digital journey.

Service descriptionUseWhatsApp chatbots that handle 24/7 lead qualification — typically deflecting 78% of Tier-1 queries within 30 days.

Service descriptionAvoidCutting-edge AI solutions that transform customer engagement at scale.

Pricing lineUseFlat retainer. No percentage of ad spend. We earn more when your CPA goes down.

Pricing lineAvoidCustom pricing tailored to your unique business needs.

Implementation

CSS tokens & how to use them.

--color-background#000000Page bg

--color-foreground#FFFFFFPrimary text

--color-secondary#F97316Brand accent (orange)

--color-ai#7B61FFAI/agent accent (purple)

--color-muted#A1A1AABody text

--color-muted-dark#71717ATertiary text

--font-displayTomorrowHeadings via font-heading

--font-interInterBody via font-sans

How Digital Patron looks, feels, and sounds.