Awesome-omni-skill sarvam-style-frontend

Design Direction

Purpose: Market a serious, production-grade AI platform for enterprises and government with an India-first identity. Convey trust, scale, and clarity while keeping the interface modern and confident.

Tone:

• Clean, assertive, and product-focused.

• No “AI slop” gradients or neon overload.

• Strong typographic hierarchy with bold headlines, tight line lengths, and concise copy.

• Subtle motion; everything feels composed, never chaotic.

Differentiating Moves:

• Hero section is sparse but powerful: a single strong headline, subhead, and one primary CTA, supported by logos and a simple “platform pillars” strip.

• Reusable “section patterns”: three-up cards, badge rows, testimonial modules, research/update cards.

• India-first cues via copy (“India’s Sovereign AI Platform”, “AI for all from India”), not cliché tricolor overload.

Tech Stack

• Framework: React (Vite or Next.js).

• Animation: Framer Motion for:

  • Hero text entrance (fade + slight upward motion).

  • Logo/marquee scroll or fade-in.

  • Card hover elevation & shadow transitions.

• Styling:

  • CSS Modules or a single global CSS file with CSS variables for colors and typography.

  • Prefer utility-ish classes but handcrafted, not Tailwind.

Typography

Use a strong sans family with good weight range and a refined secondary face.

Recommended pairing:

• Display / Headings:

  Satoshi

  ,

  General Sans

  , or

  Metropolis

  (download via Fontshare or local files).

• Body:

  IBM Plex Sans

  ,

  Source Sans 3

  , or

  System UI

  as fallback.

Example

@font-face

setup:

@font-face {

font-family: 'Satoshi';

src: url('/fonts/Satoshi-Regular.woff2') format('woff2');

font-weight: 400;

font-style: normal;

font-display: swap;

}

@font-face {

font-family: 'Satoshi';

src: url('/fonts/Satoshi-Medium.woff2') format('woff2');

font-weight: 500;

font-style: normal;

font-display: swap;

}

@font-face {

font-family: 'Satoshi';

src: url('/fonts/Satoshi-Bold.woff2') format('woff2');

font-weight: 700;

font-style: normal;

font-display: swap;

}

Global typography::root {

--font-sans: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

}

body {

font-family: var(--font-sans);

color: #050816;

background-color: #f5f5f7;

}

Color System

Extracted-style palette inspired by Sarvam::root {

/* Neutral surface */

--bg-body: #f5f5f7;

--bg-surface: #ffffff;

--bg-subtle: #f0f2f5;

/* Primary */

--primary: #111827; /* deep ink */

--primary-soft: #1f2937;

--primary-contrast: #f97316; /* warm accent (CTA) */

/* Borders & lines */

--border-subtle: #e5e7eb;

--border-strong: #d1d5db;

/* Text */

--text-primary: #020617;

--text-muted: #6b7280;

--text-soft: #9ca3af;

/* Badges */

--badge-bg: #eef2ff;

--badge-text: #4338ca;

/* Shadow */

--shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.08);

}

Layout & Composition

• Max-width container ~1120–1200px, centered with generous top/bottom padding.

• Hero area:

▫ Left: text stack (badge, eyebrow, h1, subcopy, CTA + secondary link).

▫ Right: could be interactive demo or cards (like “Population-scale Applications / State-of-the-art Models / Infrastructure…”).

• Sections have clear titles + descriptions + content grids (3 columns on desktop, stack on mobile).

.page {

min-height: 100vh;

background: radial-gradient(circle at top left, #e5f0ff 0, #f5f5f7 40%, #f5f5f7 100%);

}

.container {

max-width: 1120px;

margin: 0 auto;

padding: 3rem 1.5rem 5rem;

}

Motion Guidelines

Use Framer Motion:

• Hero:

▫ Fade in + slight upward movement on load.

▫ Stagger text elements (badge → h1 → subcopy → buttons).

• Logos:

▫ Either static grid with subtle hover scale, or slow continuous marquee.

• Cards:

▫ Hover: scale to ‎⁠1.02⁠, elevate shadow, subtle border-color shift.

▫ On scroll: fade in + translateY 16px.

Example Framer Motion pattern:const fadeUp = {

hidden: { opacity: 0, y: 24 },

show: (i = 0) => ({

opacity: 1,

y: 0,

transition: {

  delay: 0.15 + i * 0.07,

  duration: 0.5,

  ease: [0.21, 0.47, 0.32, 0.98],

},

}),

};

Use this for hero lines and cards via ‎⁠custom={index}⁠.

Components

Build everything as composable React components:

• ‎⁠HeroSection⁠: hero copy + CTA + supporting “pillar cards”

• ‎⁠LogoStrip⁠: partner logos grid/marquee

• ‎⁠PlatformPillarsSection⁠: three cards with icon/eyebrow/title/body

• ‎⁠CapabilitiesTabs⁠: tabs for Conversational Agents / TTS / STT / Vision / Dubbing with a simple demo area

• ‎⁠DeploymentOptions⁠: Sarvam Cloud / Private Cloud / On-Prem cards

• ‎⁠TestimonialSection⁠: quote + person + logo

• ‎⁠UpdatesSection⁠: research & updates cards

• ‎⁠Footer⁠: structured nav + metadata

Each component:

• Accepts data via props (titles, copy, links).

• Encodes Sarvam-style layout and motion internally.

Constraints

• Avoid overusing gradients; when used, they’re soft and minimal.

• Don’t use generic purple/blue “AI gradient blobs”.

• Don’t over-animate; keep motion focused and meaningful.

• Respect accessibility: color contrast, focus styles on buttons/links, semantic HTML.

Developer Workflow

1. Define global tokens (colors, typography, spacing) via CSS variables.

2. Implement ‎⁠<HeroSection />⁠ with Framer Motion animations and test on multiple viewport sizes.

3. Add ‎⁠<LogoStrip />⁠ and ‎⁠<PlatformPillarsSection />⁠ to match the “Powering India’s AI-first future” and “Full-stack platform” narrative.

4. Layer in remaining sections: capabilities tabs, deployment options, testimonial, updates.

5. Iterate on microcopy and motion timing to ensure the page feels confident, not hyperactive.

You can drop this in

SKILL.md

for your /how-to-web flow.

---

2. Implementing the hero / top section in React + CSS + Framer Motion

Let’s implement one specific element inspired by the current page:

• The hero headline: “India’s Sovereign AI Platform / AI for all from India”

• Subtext blocks like “Built on sovereign compute…”

• Primary CTA: “Experience Sarvam”

• Partner logos section (“India builds with Sarvam”)

• “Powering India’s AI-first future” strip with 3 pillar cards.

2.1. File structure

Something like:

• src/components/Hero.tsx

• src/components/LogoStrip.tsx

• src/components/PlatformPillars.tsx

• src/styles/global.css

  (or

  Hero.css

  etc.)

2.2. Global CSS: fonts + colors

Assuming you’ve downloaded fonts like Satoshi and placed in

public/fonts

.

/* src/styles/global.css */

/* Fonts */

@font-face {

font-family: 'Satoshi';

src: url('/fonts/Satoshi-Regular.woff2') format('woff2');

font-weight: 400;

font-style: normal;

font-display: swap;

}

@font-face {

font-family: 'Satoshi';

src: url('/fonts/Satoshi-Medium.woff2') format('woff2');

font-weight: 500;

font-style: normal;

font-display: swap;

}

@font-face {

font-family: 'Satoshi';

src: url('/fonts/Satoshi-SemiBold.woff2') format('woff2');

font-weight: 600;

font-style: normal;

font-display: swap;

}

:root {

--bg-body: #f5f5f7;

--bg-surface: #ffffff;

--bg-subtle: #f0f2f5;

--primary: #111827;

--primary-soft: #1f2937;

--primary-contrast: #f97316;

--border-subtle: #e5e7eb;

--border-strong: #d1d5db;

--text-primary: #020617;

--text-muted: #6b7280;

--text-soft: #9ca3af;

--badge-bg: #eef2ff;

--badge-text: #4338ca;

--shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.08);

}

*,

*::before,

*::after {

box-sizing: border-box;

}

body {

margin: 0;

font-family: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

background: radial-gradient(circle at top left, #e5f0ff 0, #f5f5f7 40%, #f5f5f7 100%);

color: var(--text-primary);

}

.page {

min-height: 100vh;

}

.container {

max-width: 1120px;

margin: 0 auto;

padding: 3rem 1.5rem 5rem;

}

2.3. Hero component (React + Framer Motion)// src/components/Hero.tsx

import { motion } from 'framer-motion';

import './Hero.css';

const fadeUp = {

hidden: { opacity: 0, y: 24 },

show: (i: number = 0) => ({

opacity: 1,

y: 0,

transition: {

  delay: 0.15 + i * 0.08,

  duration: 0.55,

  ease: [0.21, 0.47, 0.32, 0.98],

},

}),

};

export function Hero() {

return (

<section className="hero">

  <div className="hero-inner">

    <div className="hero-text">

      <motion.div

        className="hero-badge"

        initial="hidden"

        animate="show"

        variants={fadeUp}

        custom={0}

      >

        India&apos;s Sovereign AI Platform

      </motion.div>

      <motion.h1

        className="hero-title"

        initial="hidden"

        animate="show"

        variants={fadeUp}

        custom={1}

      >

        AI for all <br /> from&nbsp;India

      </motion.h1>

      <motion.p

        className="hero-subtitle"

        initial="hidden"

        animate="show"

        variants={fadeUp}

        custom={2}

      >

        Built on sovereign compute. Powered by frontier-class models. Delivering population-scale

        impact.

      </motion.p>

      <motion.div

        className="hero-cta-row"

        initial="hidden"

        animate="show"

        variants={fadeUp}

        custom={3}

      >

        <button className="hero-primary-btn">

          Experience Sarvam

        </button>

        <button className="hero-secondary-btn">

          Talk to Sales

        </button>

      </motion.div>

      <motion.p

        className="hero-footnote"

        initial="hidden"

        animate="show"

        variants={fadeUp}

        custom={4}

      >

        Built for Enterprise · Government · Developers

      </motion.p>

    </div>

    <motion.div

      className="hero-side"

      initial={{ opacity: 0, y: 32 }}

      animate={{ opacity: 1, y: 0 }}

      transition={{ delay: 0.4, duration: 0.7, ease: [0.21, 0.47, 0.32, 0.98] }}

    >

      <div className="hero-pillars">

        <div className="pillar-card">

          <div className="pillar-eyebrow">Sovereign by design</div>

          <h3>Full control, entirely in India</h3>

          <p>

            Build, deploy, and run AI with full sovereignty over data, models, and infrastructure.

          </p>

        </div>

        <div className="pillar-card">

          <div className="pillar-eyebrow">State-of-the-art models</div>

          <h3>Built for India&apos;s languages</h3>

          <p>

            Industry-leading performance tuned for Indian languages, culture, and context.

          </p>

        </div>

        <div className="pillar-card">

          <div className="pillar-eyebrow">Human at the core</div>

          <h3>Engineers in the loop</h3>

          <p>

            Forward-deployed teams work with you to ship production-ready AI agents.

          </p>

        </div>

      </div>

    </motion.div>

  </div>

</section>

);

}

2.4. Hero-specific CSS/* src/components/Hero.css */

.hero {

padding-top: 5rem;

padding-bottom: 3rem;

}

.hero-inner {

max-width: 1120px;

margin: 0 auto;

padding: 0 1.5rem;

display: grid;

grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);

gap: 3.5rem;

align-items: center;

}

.hero-text {

max-width: 560px;

}

.hero-badge {

display: inline-flex;

align-items: center;

padding: 0.35rem 0.8rem;

border-radius: 999px;

background-color: var(--badge-bg);

color: var(--badge-text);

font-size: 0.75rem;

letter-spacing: 0.06em;

text-transform: uppercase;

font-weight: 600;

margin-bottom: 1rem;

}

.hero-title {

font-size: clamp(2.6rem, 3.5vw, 3.4rem);

line-height: 1.05;

letter-spacing: -0.04em;

margin: 0 0 1.2rem;

color: var(--text-primary);

}

.hero-subtitle {

margin: 0 0 1.8rem;

font-size: 1rem;

line-height: 1.6;

color: var(--text-muted);

max-width: 440px;

}

.hero-cta-row {

display: flex;

align-items: center;

gap: 0.9rem;

margin-bottom: 1.3rem;

}

.hero-primary-btn {

border: none;

cursor: pointer;

padding: 0.75rem 1.4rem;

border-radius: 999px;

background-color: var(--primary-contrast);

color: #111827;

font-weight: 600;

font-size: 0.95rem;

box-shadow: 0 16px 30px rgba(249, 115, 22, 0.3);

transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;

}

.hero-primary-btn:hover {

transform: translateY(-1px);

box-shadow: 0 20px 40px rgba(249, 115, 22, 0.35);

background-color: #ea580c;

}

.hero-secondary-btn {

border-radius: 999px;

border: 1px solid var(--border-subtle);

background-color: rgba(255, 255, 255, 0.85);

color: var(--text-primary);

padding: 0.75rem 1.2rem;

cursor: pointer;

font-size: 0.9rem;

font-weight: 500;

display: inline-flex;

align-items: center;

gap: 0.4rem;

backdrop-filter: blur(8px);

transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;

}

.hero-secondary-btn:hover {

background-color: #ffffff;

border-color: var(--border-strong);

transform: translateY(-1px);

}

.hero-footnote {

margin: 0;

font-size: 0.85rem;

color: var(--text-soft);

}

/* Right side pillars */

.hero-side {

display: flex;

justify-content: flex-end;

}

.hero-pillars {

background-color: var(--bg-surface);

border-radius: 1.5rem;

padding: 1.8rem 1.6rem;

border: 1px solid rgba(209, 213, 219, 0.8);

box-shadow: var(--shadow-soft);

display: grid;

grid-template-columns: 1fr;

gap: 1.3rem;

}

.pillar-card {

padding: 0.9rem 0.9rem 1rem;

border-radius: 1rem;

border: 1px solid rgba(229, 231, 235, 0.9);

background: linear-gradient(

135deg,

rgba(248, 250, 252, 0.95),

rgba(241, 245, 249, 0.9)

);

transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;

}

.pillar-card:hover {

transform: translateY(-3px);

box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);

border-color: rgba(148, 163, 184, 0.9);

}

.pillar-eyebrow {

font-size: 0.75rem;

font-weight: 600;

text-transform: uppercase;

letter-spacing: 0.08em;

color: var(--text-soft);

margin-bottom: 0.3rem;

}

.pillar-card h3 {

font-size: 0.98rem;

margin: 0 0 0.35rem;

color: var(--text-primary);

}

.pillar-card p {

margin: 0;

font-size: 0.86rem;

line-height: 1.5;

color: var(--text-muted);

}

@media (min-width: 960px) {

.hero-pillars {

grid-template-columns: 1fr;

}

}

@media (max-width: 960px) {

.hero-inner {

grid-template-columns: minmax(0, 1fr);

gap: 2.8rem;

}

.hero-side {

justify-content: flex-start;

}

}

@media (max-width: 640px) {

.hero {

padding-top: 3.5rem;

}

.hero-cta-row {

flex-direction: column;

align-items: flex-start;

}

.hero-pillars {

padding: 1.4rem 1.2rem;

}

}

2.5. Partner logo strip

Sarvam has an “India builds with Sarvam” logo grid. You can implement a reusable version:// src/components/LogoStrip.tsx

import { motion } from 'framer-motion';

import './LogoStrip.css';

const logos = [

'Partner 1',

'Partner 2',

'Partner 3',

'Partner 4',

'Partner 5',

'Partner 6',

'Partner 7',

'Partner 8',

];

export function LogoStrip() {

return (

<section className="logo-strip">

  <div className="logo-strip-inner">

    <div className="logo-strip-heading">

      <span className="logo-strip-eyebrow">India builds with Sarvam</span>

    </div>

    <div className="logo-grid">

      {logos.map((name, idx) => (

        <motion.div

          key={name}

          className="logo-pill"

          initial={{ opacity: 0, y: 10 }}

          whileInView={{ opacity: 1, y: 0 }}

          viewport={{ once: true, margin: '-40px' }}

          transition={{ delay: idx * 0.03, duration: 0.4 }}

        >

          <span>{name}</span>

        </motion.div>

      ))}

    </div>

  </div>

</section>

);

}

/* src/components/LogoStrip.css */

.logo-strip {

padding: 1.8rem 0 2.6rem;

}

.logo-strip-inner {

max-width: 1120px;

margin: 0 auto;

padding: 0 1.5rem;

}

.logo-strip-heading {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 1.4rem;

}

.logo-strip-eyebrow {

font-size: 0.8rem;

text-transform: uppercase;

letter-spacing: 0.12em;

color: var(--text-soft);

font-weight: 600;

}

.logo-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

gap: 0.9rem;

}

.logo-pill {

border-radius: 999px;

padding: 0.7rem 1.2rem;

border: 1px solid var(--border-subtle);

background: rgba(255, 255, 255, 0.88);

backdrop-filter: blur(8px);

display: flex;

align-items: center;

justify-content: center;

color: var(--text-muted);

font-size: 0.8rem;

font-weight: 500;

transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;

}

.logo-pill:hover {

border-color: var(--border-strong);

transform: translateY(-2px);

box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);

}

2.6. Wiring it up in App.tsx// src/App.tsx

import './styles/global.css';

import { Hero } from './components/Hero';

import { LogoStrip } from './components/LogoStrip';

function App() {

return (

<div className="page">

  <Hero />

  <LogoStrip />

  {/* next sections: PlatformPillars, Capabilities, etc. */}

</div>

);

}

export default App;

Step-by-step reasoning for implementation

1. Set up React + Framer Motion

▫ Create a Vite React project.

▫ ‎⁠npm install framer-motion⁠.

▫ Add ‎⁠global.css⁠ with fonts and color tokens. Import it in ‎⁠main.tsx⁠/‎⁠App.tsx⁠.

2. Define typography + color tokens first

▫ This locks in the vibe (like Sarvam) before layout.

▫ Use CSS variables and ‎⁠@font-face⁠ for your chosen display/body fonts.

3. Build the hero layout in raw HTML/JSX

▫ Grid with two columns: text + side card.

▫ Use proper semantic tags (‎⁠section⁠, ‎⁠h1⁠, ‎⁠p⁠, ‎⁠button⁠).

▫ Keep copy short and stacked like on sarvam.ai.

4. Style hero with CSS

▫ Match spacing: big top padding, constrained text width.

▫ Badge style for “India’s Sovereign AI Platform”.

▫ High-contrast headline, muted subcopy.

5. Add Framer Motion for entrance animations

▫ Create a shared ‎⁠fadeUp⁠ variant and assign ‎⁠custom={index}⁠ to elements.

▫ Animate hero side card separately so it feels like it slides in as one block.

6. Implement partner logo strip

▫ Create a simple grid with pill-shaped tiles.

▫ Use Framer Motion ‎⁠whileInView⁠ for subtle entrance when scrolled into view.

7. Refine micro-interactions

▫ Hover on buttons and pillar cards: tiny ‎⁠translateY⁠ changes, box-shadow bump.

▫ Keep motion durations between 0.3–0.6s; easing cubic-bezier to feel smooth.

Fonts and color recap

Fonts you may want to download (or equivalents):

• ‎⁠Satoshi⁠ (or ‎⁠General Sans⁠, ‎⁠Metropolis⁠) for headings and body.

• Alternative system-safe stack: ‎⁠system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif⁠.

Key CSS color variables (you can tweak to taste):--bg-body: #f5f5f7;

--bg-surface: #ffffff;

--bg-subtle: #f0f2f5;

--primary: #111827;

--primary-soft: #1f2937;

--primary-contrast: #f97316;

--border-subtle: #e5e7eb;

--border-strong: #d1d5db;

--text-primary: #020617;

--text-muted: #6b7280;

--text-soft: #9ca3af;

--badge-bg: #eef2ff;

--badge-text: #4338ca;

--shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.08);

If you want, we can next drill down into another specific element from the page (e.g., the “See it in action” tabbed section) and build that as a React + Framer Motion component set.