Satyaki Branding Skill
Apply Satyaki Solutions Pvt Ltd brand identity to any application or project. Use this skill when building, reviewing, or branding any application for Satyaki Solutions.
Website: https://satyaki.co.in
Company: Satyaki Solutions Pvt Ltd
Tagline: "Creating Innovative Impulse"
Visual Identity Foundations
Logo Usage
- Use the official Satyaki Solutions logo in its approved SVG form — never recreate or redraw it
- Maintain minimum clear space around the logo (at least the height of the "S" in Satyaki on all sides)
- Respect minimum logo size: 120px width for digital, 25mm for print
- Provide light variant (for dark backgrounds) and dark variant (for light backgrounds)
- Include a monochrome white version for single-color contexts
- Always use SVG format for the logo for crisp scaling across resolutions
- Never stretch, skew, rotate, or distort the logo
- Never place the logo on busy or low-contrast backgrounds
- Derive the favicon and app icons from the Satyaki brand mark (the "S" symbol)
- Provide icon resolutions: 16x16, 32x32, 48x48, 64x64, 128x128, 192x192, 512x512
Color System
Primary Palette
:root {
/* Primary */
--satyaki-gold: #FCA719;
--satyaki-gold-light: #FDB94A;
--satyaki-gold-dark: #E09000;
/* Secondary */
--satyaki-blue: #458DFF;
--satyaki-blue-light: #6DA6FF;
--satyaki-blue-dark: #2B6FDB;
/* Neutrals */
--satyaki-black: #101010;
--satyaki-dark-gray: #1A1A2E;
--satyaki-gray: #4A4A5A;
--satyaki-light-gray: #E8E8ED;
--satyaki-off-white: #F5F5F7;
--satyaki-white: #FFFFFF;
/* Semantic Colors (harmonized with brand) */
--satyaki-success: #2ECC71;
--satyaki-warning: #FCA719; /* Reuses brand gold */
--satyaki-error: #E74C3C;
--satyaki-info: #458DFF; /* Reuses brand blue */
}
Dark Mode Palette
[data-theme="dark"] {
--satyaki-bg-primary: #0D0D1A;
--satyaki-bg-secondary: #1A1A2E;
--satyaki-bg-surface: #252540;
--satyaki-text-primary: #F5F5F7;
--satyaki-text-secondary: #B0B0C0;
--satyaki-gold: #FDB94A;
--satyaki-blue: #6DA6FF;
}
Color Rules
- All color combinations must meet WCAG AA contrast requirements (4.5:1 for normal text, 3:1 for large text)
- Use
--satyaki-gold for primary CTAs, highlights, and key interactive elements
- Use
--satyaki-blue for links, secondary actions, and informational elements
- Never introduce off-brand colors — derive any needed shade from the existing palette
- Define hover (10% lighter), active (10% darker), focus (with gold ring), and disabled (50% opacity) states using brand colors
Typography
Font Stack
/* Primary — used for all text */
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/* Monospace — for code blocks and terminal contexts */
font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
Type Scale
| Level | Size | Weight | Line Height | Usage |
|---|
| H1 | 46px | 700 | 1.2 | Hero headings |
| H2 | 36px | 600 | 1.25 | Section headings |
| H3 | 28px | 600 | 1.3 | Subsection headings |
| H4 | 22px | 600 | 1.35 | Card headings |
| H5 | 18px | 500 | 1.4 | Minor headings |
| H6 | 16px | 500 | 1.4 | Label headings |
| Body | 16px | 400 | 1.6 | Paragraph text |
| Small | 14px | 400 | 1.5 | Captions, helper text |
| Tiny | 12px | 400 | 1.4 | Labels, badges |
Typography Rules
- Use Poppins for all headings and body text — load via Google Fonts or self-host
- Always include the fallback font stack
- Load only weights 400, 500, 600, 700 to optimize performance
- Use woff2 format, preload the primary weights
- Ensure proper font licensing for commercial use
- Use sentence case for UI copy, title case for page titles only
- Maintain consistent text alignment: left-aligned for LTR content
Tone of Voice
Brand Voice: Professional, Innovative, Confident
Satyaki's voice is that of a trusted technology leader — authoritative yet approachable, innovative yet grounded.
Voice Principles
- Confident, not arrogant: "We deliver bespoke AI solutions" not "We're the best AI company"
- Innovative, not buzzwordy: Use terms like "transformative," "avant-garde," "bespoke" intentionally — not as filler
- Professional, not stiff: Warm enough to be human, rigorous enough to inspire trust
- Clear, not jargon-heavy: Explain complex concepts simply for decision-makers
Copy Guidelines
- Use consistent terminology: "AI/ML Solutions" (not "artificial intelligence solutions"), "SaaS" (not "software as a service" after first mention)
- Write microcopy (buttons, tooltips, errors) in the brand voice
- Use sentence case for all UI text
- Use the Oxford comma
- Personalize where appropriate: "Welcome back, Alex"
- Write empty states, error messages, and 404 pages with personality:
- Empty state: "Nothing here yet. Let's create something innovative."
- 404: "This page has ventured into uncharted territory. Let's get you back on track."
- Error: "Something went wrong on our end. Our team is on it."
- Maintain a glossary: Satyaki Solutions (full name), Satyaki (short form, acceptable after first mention), TaaS (Testing as a Service)
UI Components and Layout
Spacing System (8px grid)
4px | 8px | 12px | 16px | 24px | 32px | 48px | 64px | 96px | 128px
Border Radius
- Small elements (badges, chips): 4px
- Medium elements (inputs, cards): 8px
- Large elements (modals, sections): 12px
- Pill shape (tags, buttons): 999px
Shadows
--satyaki-shadow-sm: 0 1px 3px rgba(16, 16, 16, 0.08);
--satyaki-shadow-md: 0 4px 12px rgba(16, 16, 16, 0.12);
--satyaki-shadow-lg: 0 8px 24px rgba(16, 16, 16, 0.16);
--satyaki-shadow-xl: 0 16px 48px rgba(16, 16, 16, 0.20);
Buttons
- Primary: Gold background (
#FCA719), dark text (#101010), bold weight
- Secondary: Blue background (
#458DFF), white text
- Tertiary/Ghost: Transparent with gold or blue text, border on hover
- Destructive: Red (
#E74C3C) background, white text
- All buttons: Poppins font, 500 weight, 8px 24px padding, 8px border-radius
Iconography
- Use a consistent line-icon style (2px stroke, rounded caps)
- Icons should be 20x20 or 24x24 for UI, 48x48 for feature highlights
- Use brand gold (
#FCA719) for active/selected icon states
Form Inputs
- 1px solid
#E8E8ED border, 8px radius
- Focus ring: 2px solid
#FCA719 (gold)
- Error state: 2px solid
#E74C3C
- Label: 14px Poppins, 500 weight,
#4A4A5A
Imagery and Media
- Use a modern, technology-focused photography style — clean compositions with a cool-to-neutral tone
- Apply a subtle dark overlay on hero images to ensure text legibility
- Use branded data visualization colors: gold for primary data, blue for secondary, grays for baselines
- Provide meaningful alt text in the brand voice
- Optimize all images (WebP preferred, fallback to PNG/JPEG)
- Use branded placeholder avatars with the Satyaki gold accent
Motion and Interaction
Timing
--satyaki-duration-fast: 150ms;
--satyaki-duration-normal: 250ms;
--satyaki-duration-slow: 400ms;
--satyaki-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
--satyaki-easing-enter: cubic-bezier(0, 0, 0.2, 1);
--satyaki-easing-exit: cubic-bezier(0.4, 0, 1, 1);
Motion Rules
- Use 250ms with default easing for most transitions
- Respect
prefers-reduced-motion — disable non-essential animations
- Branded loading spinner: rotating Satyaki "S" mark in gold
- Subtle hover lift (translateY -2px + shadow increase) on interactive cards
- Page transitions: fade-in at 400ms
Platform-Specific Branding
Web Applications
- Favicon: Satyaki "S" mark, gold on transparent
- Page title format: "Page Name | Satyaki Solutions"
- Meta theme color:
#FCA719
- Open Graph images: branded template with logo, gold accent bar, dark background
Mobile Applications
- App icon: Satyaki mark on dark (#101010) background
- Splash screen: centered logo with gold loading indicator on dark background
- Status bar: dark style
CLI / Terminal Tools
- ASCII art Satyaki logo on
--version or first run
- Use gold ANSI color (closest: yellow/bright yellow) for highlights
- Brand help text and error messages in the Satyaki voice
Email Templates
- Header: dark background with Satyaki logo, gold accent line below
- Footer: company info, social links, "Satyaki Solutions Pvt Ltd" with tagline
- Body: white background, Poppins font (fallback to Arial)
PDF / Reports
- Header: Satyaki logo left-aligned, gold rule line
- Footer: page number, "satyaki.co.in", confidentiality notice
- Cover page: dark background, centered logo, gold accents
System and Operational Branding
- Onboarding: Branded welcome flow with Satyaki gold progress indicators
- Notifications/Toasts: Gold left-border accent, dark text on white
- Error Pages (404, 500): Branded with illustration, personality copy, and navigation back
- Maintenance Page: "We're upgrading our systems to serve you better. Back shortly." with Satyaki logo
- About Page: Version info, "Built by Satyaki Solutions Pvt Ltd", link to satyaki.co.in
- Loading States: Skeleton screens with subtle gold shimmer animation
- Powered By: Use "Powered by Satyaki Solutions" with logo for white-label products
Governance and Consistency Checklist
When reviewing any application for Satyaki branding compliance, verify:
Quick Reference
| Element | Value |
|---|
| Primary Color | #FCA719 (Gold) |
| Secondary Color | #458DFF (Blue) |
| Dark Background | #101010 |
| Font | Poppins (400, 500, 600, 700) |
| Border Radius | 8px (default) |
| Grid | 8px spacing system |
| Easing | cubic-bezier(0.4, 0, 0.2, 1) |
| Duration | 250ms (default) |
| Company Name | Satyaki Solutions Pvt Ltd |
| Tagline | Creating Innovative Impulse |
| Website | https://satyaki.co.in |