embrace.day — Brand Identity System

01

Design Philosophy

embrace.day v2 is a complete visual identity reset. The previous void/cosmic/ethereal aesthetic is retired. The new direction is bright, energetic, vibrant, playful, and futuristic — evoking creativity, community, discovery, and youth.

Reference Anchors

Hugging Face — Tech-forward, community-driven, playful icons, yellow-warm palette, rounded and friendly but technically credible.

Duolingo — Character-driven identity, bright/saturated colors, gamification energy, young/fun/approachable, mobile-native feel.

Emotional Target

A visitor lands on embrace.day and within 3 seconds thinks: "This is cool. These characters are interesting. I want to explore."

The energy of a design festival + the warmth of a favorite record shop. Art IS the content — the UI gets out of the way.

Key Characteristics: Warm off-white canvas that makes vibrant art pop · Character-tinted architecture (UI shifts color per artist) · OUTSHINE Glow (luminous gradient halo) · Two-font discipline (DM Sans + Sora) · Generous whitespace · Rounded corners throughout · Micro-animations on hover · No dark mode at launch

02

Color Palette

A carefully composed palette balancing warm energy with creative sophistication. Yellow brings optimism; violet adds edge.

Brand Primary & Secondary

OUTSHINE Yellow#FFD43BPrimary CTAs, active states

Yellow Hover#FCC419Hover / press states

Yellow Light#FFF9DBHighlight backgrounds

Electric Violet#7C3AEDSecondary buttons, links

Violet Hover#6D28D9Hover / press states

Violet Light#F3E8FFSubtle backgrounds

Surfaces & Backgrounds

Canvas#FEFCF9Page background

White#FFFFFFCards, modals

Cream#F8F6F0Secondary sections

Light Gray#F1F0EBDividers, inputs

Text Hierarchy

Text Primary#1A1A2EHeadlines, body

Text Secondary#5C5C6FSubtitles, descriptions

Text Tertiary#9E9EB0Placeholders, hints

Semantic States

Success#22C55EConfirmed, claimed

Warning#F59E0BLow stock, delays

Error#EF4444Failed, invalid

Info#3B82F6Informational

OUTSHINE Character Colors

Each character has an exclusive signature color that tints the UI on their pages. These colors never appear in the base UI.

NNOVA #FF6B6B

HHAZE #4ECDC4

VVOLT #A855F7

BBLOOM #34D399

RRAZE #FB923C

DDRIFT #818CF8

BBYTE #F472B6

FFLUX #FACC15

OUTSHINE Glow Effect

A luminous gradient halo behind character avatars and featured artworks. Uses character color at 15–25% opacity with ambient pulse animation.

N

H

V

B

03

Typography

Two-font discipline: Sora for display, DM Sans for everything else. Clean, modern, multi-script ready.

Display Font

Sora

AaBbCc 0123

Weights: 600, 700, 800. Used for headlines, brand name, character names, and display text. Modern, geometric, slightly futuristic.

Body Font

DM Sans

AaBbCc 0123

Weights: 400, 500, 600, 700. Used for body text, UI, labels, buttons, nav. Excellent multi-script support.

Type Scale

Level	Font	Size	Weight	Line Height	Sample
H1	Sora	56 / 36px	800	1.1	OUTSHINE
H2	Sora	40 / 28px	700	1.2	Section Title
H3	Sora	28 / 22px	700	1.3	Product Name
H4	DM Sans	20 / 18px	700	1.4	Section Label
Body Large	DM Sans	18 / 16px	400	1.65	Character bios, descriptions
Body	DM Sans	16 / 15px	400	1.6	General text, paragraphs
Caption	DM Sans	12 / 11px	500	1.4	LABEL TAG
Button	DM Sans	15px	600	1	Button Text

Multi-Script Support

8 languages supported: English (DM Sans / Sora) · Japanese (Noto Sans JP) · Thai (Noto Sans Thai, 1.8 line-height) · Chinese (Noto Sans SC) · Korean (Noto Sans KR) · Vietnamese (DM Sans) · Indonesian (DM Sans) · Spanish (DM Sans)

Rules: No italic for CJK scripts. Minimum font size: 12px anywhere, 15px for body. Headlines use tight tracking (−0.5 to −1.5px). Body uses open tracking with 1.6 line-height.

04

Components

Core UI building blocks. Every component follows the spacing scale, radius system, and shadow hierarchy.

Buttons

Primary: Yellow bg (#FFD43B), dark text, 14px 28px padding, 12px radius, shadow-sm. Hover: deeper yellow, translateY(−1px), shadow-md.

Secondary: Violet bg (#7C3AED), white text. Same sizing.

Ghost: Transparent, 1.5px border. Hover: violet border + violet-light bg.

Character-Tinted: Uses var(--character-color) on character pages.

Form Inputs

Text Input

Focused State

Tags & Badges

New Limited NOVA HAZE VOLT BLOOM

Cards

Product Card

NOVA's Tee

$29.99

N

NOVA

Visual Maximalist

Art Gallery Card

Hover reveals overlay

05

Layout & Spacing

8px grid system. Art-first philosophy: the art IS the content, UI gets out of the way.

Spacing Scale

xs

4px

sm

8

8px

md

16

16px

lg

24

24px

xl

32

32px

2xl

48

48px

3xl

64

64px

4xl

96

96px

Grid System

Desktop: 12-column grid, max-width 1280px, centered, 48px horizontal padding.

Tablet: 8-column grid, 32px padding.

Mobile: 4-column grid, 20px padding.

Radius system: sm 8px · md 12px · lg 16px · xl 24px · full 9999px (pills)

Art-First Layout Rules

Product pages: art 60%, purchase UI 40%. Character profiles: full-width hero, 50vh min. Gallery: masonry grid fills available space. Homepage hero: full-width, 70vh. Cards: image area ≥ 50% of card.

Whitespace: Section-to-section gap minimum 64px. Text block max-width 680px. Between card rows 32px. Inside cards minimum 24px.

06

Depth & Elevation

Flat design with selective lift. 4 shadow levels + character glow. No dramatic shadows.

Level 0 — Flat

No shadow

Level 1 — Subtle

shadow-sm

Level 2 — Elevated

shadow-md

Level 3 — Prominent

shadow-lg

Glow

shadow-glow

Surface Hierarchy

Canvas (#FEFCF9) → Page background

White (#FFFFFF) → Cards, modals, elevated surfaces

Cream (#F8F6F0) → Nested sections within cards

Glassmorphism: Only the sticky navbar uses glass effects (85% opacity + 16px blur). No other element.

07

Do's & Don'ts

Do ✓

Use OUTSHINE Yellow for primary CTAs
Tint UI with character colors on character pages
Maintain generous whitespace — art needs room
Use OUTSHINE Glow behind character avatars
Keep product images large — art is the selling point
Use rounded corners consistently (16/12/24px)
Animate on hover: subtle lift + shadow increase
Show prices in local currency
Treat character pages as artist portfolios

Don't ✗

Use dark/void/cosmic backgrounds — v1 is retired
Use Cormorant Garamond, Nunito, or v1 typography
Use soft purple (#C4B5D4) — old color is dead
Use "bots" in copy — they are "OUTSHINE artists"
Make commerce hidden or apologetic
Use shadows darker than level 3
Use more than 2 fonts per page
Auto-play music — always user-initiated
Use eiai green, dinomads gold, mica sage as accents

08

Responsive Behavior

Mobile-first touch targets. Minimum 44×44px for all interactive elements.

Breakpoint	Width	Columns	Nav
Desktop XL	≥ 1440px	12	Horizontal
Desktop	≥ 1024px	12	Horizontal
Tablet	≥ 768px	8	Hamburger
Mobile L	≥ 480px	4	Hamburger
Mobile	< 480px	4	Hamburger

Component Behavior

Component	Desktop	Mobile
Character grid	4 columns	Horizontal scroll
Product grid	3–4 columns	2 compact columns
Gallery	Masonry 3–4 cols	Single column
Cart	Sidebar slide-in	Full-screen modal
Product detail	60/40 split	Stacked
Music player	Full inline	Mini (fixed bottom)

09

Logo & Brand Identity

The Embrace Mark (sunrise arc) and OUTSHINE wordmark. Two distinct marks for different contexts.

Embrace Mark — Logo Usage

Light Background

embrace.day

Dark Background

embrace.day

Accent Background

embrace.day

OUTSHINE Wordmark

"OUTSHINE" in Sora 800 weight. Letter-spacing: 3px. All caps. The OUTSHINE name is the character program — not the website name.

Icon: A stylized radiance burst — 8 rays emanating from a central point, representing the 8 characters. Rays vary in length and thickness. Primary color: #FFD43B. On dark surfaces: white.

Minimum clear space: 1× the height of the "O" on all sides.

Naming Conventions

embrace.day — The site/brand name. Used in navigation, titles, footer, all brand references. This is the website identity.

OUTSHINE — The 8-character collective name. Used when referring to the group of AI artists as a whole ("the OUTSHINE collective", "OUTSHINE artists"). Used on character pages only, not navbar/footer/titles.

Dinomads Group — Parent company. Legal, copyright, and corporate contexts only. Never in marketing copy.

"Artists" not "bots" — Characters are always called "OUTSHINE artists" or "characters" in user-facing copy. Never "bots."

Brand Differentiation

Element	embrace.day	dinomads.org	mica.cafe	eiai.live
Primary	Yellow #FFD43B	Indigo #4F46E5	Sage #8B9E82	Green #059669
Secondary	Violet #7C3AED	Cream #FAFAF8	Rose #C87A9A	Dark #0F172A
Background	#FEFCF9 warm	#FAFAF8 cream	Warm white	#0F172A dark
Display Font	Sora	Plus Jakarta Sans	Nunito	Space Grotesk
Energy	Vibrant, playful	Warm, professional	Calm, gentle	Bold, technical
Mode	Light only	Light + dim	Light + dark	Dark only
Radius	16px medium	24px large	20px large	8px sharp

"Similarity is a failure. If an embrace.day page could be mistaken for any other Dinomads brand, it's wrong."

A

CSS Variables Export

Complete CSS custom properties for implementation. Copy this block into your root stylesheet.

/* === BRAND === */ --brand-yellow: #FFD43B; --brand-yellow-hover: #FCC419; --brand-yellow-light: #FFF9DB; --brand-violet: #7C3AED; --brand-violet-hover: #6D28D9; --brand-violet-light: #F3E8FF; /* === SURFACE === */ --canvas: #FEFCF9; --white: #FFFFFF; --cream: #F8F6F0; --light-gray: #F1F0EB; /* === TEXT === */ --text-primary: #1A1A2E; --text-secondary: #5C5C6F; --text-tertiary: #9E9EB0; /* === SPACING (8px grid) === */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px; /* === RADIUS === */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* === SHADOWS === */ --shadow-sm: 0 1px 2px rgba(26,26,46,0.05); --shadow-md: 0 4px 12px rgba(26,26,46,0.08); --shadow-lg: 0 8px 24px rgba(26,26,46,0.1); --shadow-glow: 0 0 40px var(--character-glow); /* === MOTION === */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms;