Zelfium Affinia

Design Brand Identity

A comprehensive guide to our design language, visual elements, and brand principles that create a cohesive and engaging user experience.

Introduction

Zelfium Affinia's design system is built to create a seamless, intuitive, and emotionally resonant experience for users exploring their affinity with others. Our design principles emphasize clarity, warmth, and scientific credibility while maintaining a modern aesthetic.

This guide outlines the core elements of our brand identity, from color and typography to interactive components and animation principles.

Color Palette

Primary Colors

Primary

White (#FFFFFF)

Secondary

Soft Light Gray (#F5F7FA)

Accent Gradient

Start: Soft Peach (#FF9A8B) → Middle: Warm Coral (#FF6B6B) → End: Deep Rose (#DE5E78)

Text Colors

Sample Text

Text

Dark Gray (#333333)

Sample Text

Subtext

Medium Gray (#666666)

Dark Mode Colors

Background

Deep Navy (#121826)

Container Background

Dark Blue-Gray (#1E2A45)

Text Colors

Sample Text

Text

Off-White (#F0F2F5)

Sample Text

Subtext

Light Gray (#B0B8C4)

Typography

English Fonts

Primary (Headings): Nunito

Heading 1 (700)

Heading 2 (700)

Heading 3 (600)

Heading 4 (600)

Heading 5 (500)

Secondary (Body): Quicksand

Standard body text (400) - The quick brown fox jumps over the lazy dog.

Small text (400) - The quick brown fox jumps over the lazy dog.

Caption text (400) - The quick brown fox jumps over the lazy dog.

Japanese Fonts

Primary (Headings): M PLUS Rounded 1c

見出し 1 (700)

見出し 2 (700)

見出し 3 (500)

Secondary (Body): Kosugi Maru

標準本文テキスト (400) - いろはにほへとちりぬるをわかよたれそつねならむ

小さいテキスト (400) - いろはにほへとちりぬるをわかよたれそつねならむ

Layout Elements

Containers

Card Container

Cards feature a white background (dark blue-gray in dark mode), 12px border radius, and subtle shadow. A special gradient accent appears on the right side.

Separators

Content above separator

Content below separator

Spacing

Content padding: 24px

Space between sections: 40px

Paragraph spacing: 1.5rem (24px)

Heading to body spacing: 1rem (16px)

Interactive Elements

Buttons

Primary Button

Secondary Button

Form Elements

Input Fields

Default Input

Focused Input

Error State

This field is required

Chat UI Elements

Hello! How can I help you understand your affinity with others today?

10:30 AM

I'd like to understand my compatibility with my colleague John.

10:31 AM

Special Visual Effects

Layer Effect

Layered Panel Effect

Outline Effect

Active Navigation Item

Selected Item

Pricing Plans

Prepaid Model

Spark

$10/plan

800 tokens
17% discount

Popular

Plus

$50/plan

5,000 tokens
33% discount

Best Value

Max

$100/plan

11,000 tokens
45% discount

Get 5% bonus tokens with auto-recharge

Implementation

Font Integration

// In _app.js or layout.js
import { Nunito, Quicksand, M_PLUS_Rounded_1c, Kosugi_Maru } from 'next/font/google'

// English fonts
const nunito = Nunito({
  weight: ['400', '500', '600', '700'],
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-nunito'
})

const quicksand = Quicksand({
  weight: ['400', '500', '700'],
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-quicksand'
})

// Japanese fonts
const mPlusRounded = M_PLUS_Rounded_1c({
  weight: ['400', '500', '700'],
  subsets: ['japanese'],
  display: 'swap',
  variable: '--font-mplusrounded'
})

const kosugiMaru = Kosugi_Maru({
  weight: ['400'],
  subsets: ['japanese'],
  display: 'swap',
  variable: '--font-kosugimaru'
})

// Use in component or layout
return (
  <div className={`${nunito.variable} ${quicksand.variable} ${mPlusRounded.variable} ${kosugiMaru.variable}`}>
    {children}
  </div>
)

CSS Variables

:root {
  /* Colors */
  --color-primary: #FFFFFF;
  --color-secondary: #F5F7FA;
  --color-gradient-start: #FF9A8B;
  --color-gradient-middle: #FF6B6B;
  --color-gradient-end: #DE5E78;
  --color-text: #333333;
  --color-subtext: #666666;
  
  /* Dark Mode Colors */
  --color-dark-bg: #121826;
  --color-dark-container: #1E2A45;
  --color-dark-text: #F0F2F5;
  --color-dark-subtext: #B0B8C4;
  
  /* Typography */
  --en-heading-font: var(--font-nunito), sans-serif;
  --en-body-font: var(--font-quicksand), sans-serif;
  --jp-heading-font: var(--font-mplusrounded), sans-serif;
  --jp-body-font: var(--font-kosugimaru), sans-serif;
  
  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  
  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;
}

Terminology

Affinity vs. Compatibility

"Compatibility" has been replaced with "Affinity" throughout the service, though both keywords are used together for SEO purposes.

Relationship Types

❤️Romance

😊Friendship

💼Colleague

⭐Boss

👨‍👧Parent-Child

Back to Home