Brand & Design
Guidelines

Logo

The Porashona logo consists of the chat bubble icon paired with the wordmark set in Playfair Display. The chat bubble contains four dots representing conversation and collaboration. Always use these as a single unit. Never separate or alter the proportions.

Animated Logo

The animated version of the logo is used in website headers and loading states. The four dots inside the chat bubble bounce sequentially, creating a typing indicator effect that reflects the conversational nature of the product.

@keyframes dotBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%            { transform: translateY(-60px); }
}

.logo-dot {
  animation: dotBounce 1.8s ease-in-out infinite;
}

.logo-dot-1 { animation-delay: 0s; }
.logo-dot-2 { animation-delay: 0.15s; }
.logo-dot-3 { animation-delay: 0.3s; }
.logo-dot-4 { animation-delay: 0.45s; }

Color System

Our palette is warm and approachable, pairing earthy neutrals with vibrant accents. Every color is referenced by token name throughout the codebase.

Primary Accent

Accent Colors

Backgrounds

Soft Tints

Used as feature card backgrounds, chip fills, and gentle highlights. Each pairs with a matching accent for text and icons.

Text Colors

Status Colors

Borders & Glows

Gradients

Gradients are a core part of the Porashona visual identity. We layer animated multi-color gradients with floating soft-color blobs to create depth and warmth. Every gradient uses our brand accent and soft tint palettes.

Hero Background Gradient

The primary background gradient flows through five colors at a 160-degree angle. It animates over a 20-second cycle, creating a gentle, living canvas.

background: linear-gradient(160deg,
  var(--beige-lighter),
  var(--white),
  var(--orange-soft),
  var(--purple-soft),
  var(--blue-soft)
);
background-size: 400% 400%;
animation: heroGradient 20s ease-in-out infinite;

@keyframes heroGradient {
  0%, 100% { background-position: 0% 0%; }
  25%      { background-position: 100% 0%; }
  50%      { background-position: 100% 100%; }
  75%      { background-position: 0% 100%; }
}

Accent Text Gradient

Applied to headline accent words using background-clip: text. Uses the four primary accent colors and cycles over 12 seconds. This is the most vibrant gradient in the system.

background: linear-gradient(135deg,
  var(--orange), var(--purple),
  var(--blue), var(--green),
  var(--orange)
);
background-size: 300% 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: accentShift 12s ease-in-out infinite;

@keyframes accentShift {
  0%, 100% { background-position: 0% 50%; }
  25%      { background-position: 50% 0%; }
  50%      { background-position: 100% 50%; }
  75%      { background-position: 50% 100%; }
}

Button Gradient

Primary CTA buttons use a three-color gradient with a faster 8-second cycle. This creates visual energy and draws attention to key actions.

background: linear-gradient(135deg,
  var(--orange), var(--purple),
  var(--blue), var(--orange)
);
background-size: 300% 300%;
animation: btnGradient 8s ease-in-out infinite;

@keyframes btnGradient {
  0%, 100% { background-position: 0% 50%; }
  33%      { background-position: 50% 100%; }
  66%      { background-position: 100% 0%; }
}

Eyebrow Badge Gradient

The eyebrow badge above the hero title uses all four soft tints in a gentle shifting gradient. This is the subtlest animated gradient, designed for small UI elements.

Floating Blobs

The hero background includes four circular shapes with heavy blur (80px) that float and shift colors. Each blob has its own animation with different timing to prevent synchronization.

Animation Timing Hierarchy

All gradient animations use ease-in-out easing. Timing is deliberately staggered to create layered movement where no two elements sync up.

Usage Guidelines

OG Image

The OG image uses the same multi-color gradient system as the homepage hero, with the logo and wordmark in black. This keeps social media previews visually consistent with the live site experience.

Typography

We use two font families. Playfair Display brings scholarly character to headings, while Inter provides clean readability for everything else.

Type Scale

Tone of Voice

Porashona speaks like a smart friend, not a textbook. Our voice is encouraging, conversational, and clear.

Brand Rules

For press inquiries, partnership assets, or questions about brand usage, reach out at [email protected].