Internal preview · not linked from nav
Accordsign brand kit
The visual system that everything else inherits from. Locked for final review — every real page will be built against this spec.
Locked · brand kit final
Five axes, five picks. Approve or redline.
- Colors
- A · Logo-true (
#FBB116+#444342+ white) - Type
- A · Inter + Instrument Serif
- Buttons
- A · 6 px rounded
- Cards
- B · Border + soft shadow
- Voice
- A · Razorpay-direct (short, declarative, numbers over emotion)
Audit trail: /brand-kit/options/ shows all three options per axis and what got picked.
1 · Logo
Horizontal lockup for headers and primary use. Icon-only for favicons, app icons, and tight spaces.
Horizontal · light surfaces
Horizontal · dark surfaces (needs an inverted/light wordmark variant — todo for the designer)
2 · Color
Two-color palette extracted directly from Final Logo.ai. Tonal scales for both. Plus four status colors used sparingly.
Brand
11 tones
Logo gold. Anchor: #FBB116. Use sparingly — CTAs, highlights, accents. Never for body text.
brand-50
#FEF8E7
brand-100
#FCEEC0
brand-200
#FBE395
brand-300
#FAD56A
brand-400
#FAC740
brand-500
#FBB116
logo
brand-600
#D89200
brand-700
#A56F00
brand-800
#735000
brand-900
#4E3700
brand-950
#2E2000
Ink
11 tones
Wordmark charcoal. Anchor: #444342. The workhorse — headings, body, borders, dark surfaces.
ink-50
#F7F7F6
ink-100
#E8E7E6
ink-200
#CFCDCB
ink-300
#ADA9A6
ink-400
#7D7975
ink-500
#58524F
ink-600
#444342
wordmark
ink-700
#353433
ink-800
#252423
ink-900
#161514
ink-950
#0A0A09
Status
Used for inline banners, form validation, payment outcomes. Never as a brand accent.
Success
success-500 · #16A34A
Warning
warning-500 · #F59E0B
Danger
danger-500 · #DC2626
Info
info-500 · #2563EB
3 · Typography
Inter for UI and body — geometric, neutral, legible at every size. Instrument Serif for editorial headlines — gives the marketing site a confident, human voice without losing the SaaS feel.
Display XL
Sign smarter.
Display
Built for modern teams.
H1 (sans)
Page heading
H2
Section heading
H3
Subsection
H4
Card title
Lead
Sub-headline / lede paragraph that introduces a section.
Body
Default paragraph text. We use Inter at 16px / 1.6 line-height for everything below H4. The colour is ink-700 — not pure black, which fatigues the eye on long-form pages.
Small
Captions, helper text, meta information.
Tiny
Eyebrows / labels
4 · Buttons
Three weights: primary (one per view), secondary (alternate path), ghost (utility). Sharp corners signal precision over warmth — apt for a contract platform.
Primary · ink
Primary · brand (use for the one CTA per page)
Secondary · outline
Ghost / link
5 · Form elements
Used on contact page, newsletter (eventually), and any embedded calculators.
We'll only use this to reply to your message.
6 · Cards & banners
Three card weights and four banner styles. Elevated is the locked default for feature blocks, pricing tiers, and persona cards (axis 4 = pick B). Flat and Highlight remain available for specific contexts.
Elevated · pick B
Aadhaar eSign included
Buy credits as you need them. Validity up to 12 months.
Flat · available
Pay only for what you use
No subscriptions. No seat minimums. ₹40 per document. Use when the page is already shadow-heavy.
Highlight · accent
Built for modern teams
No bloat. No enterprise complexity. Just signing that works.
Saved. Your document is now in the signed folder.
Heads up. Two signers are still pending.
Failed. Aadhaar verification did not match the document signer.
New. Salesforce integration is now live for Business accounts.
7 · Voice & tone
Razorpay / Cred-direct. Confident, sharp, never apologetic. Short sentences. Active voice. No marketing fluff.
Yes
- "Sign in 30 seconds. No account needed."
- "₹40 per document. Pay as you sign."
- "Aadhaar eSign for India. ESIGN-ready for the US."
No
- "Streamline your business with our innovative platform."
- "Empower your team to achieve more, together."
- "World-class enterprise-grade e-signature solutions."
Built for review only. To edit: src/pages/brand-kit.astro.
Tokens live in src/styles/global.css.