Brand Guidelines

Slides that listen,
Ideas that lead.

Visual Identity & Design System for Slidea — the interactive presentation platform.

Version 1.0 · Updated 2026

01 — Signature Motif

The Crayon Curve

The Crayon Curve is Slidea's primary brand asset — a dynamic, flowing ribbon that embodies creative momentum, continuous learning, and human touch in digital presentations.

✦ Move your cursor over the curve to interact with the crayon stroke

Full Gradient Sweep

Hero banners & landing pages. Thick, bold, full gradient with texture.

Thin Accent Line

Email headers & dividers. Single-color or gradient, 2–4px weight.

Corner Flourish

Slide templates & cards. Quarter-curve in corner, subtle accent.

Textured Wave

Print backgrounds & merchandise. Wide, soft, heavy crayon texture.

Construction Rules

✦ Direction
Curves flow left-to-right or bottom-to-top, symbolizing progress and growth.

✦ Stroke Width
Varies from 4px to 40px to emulate crayon pressure — thin at edges, thick at center.

✦ Gradient
Always uses the Slidea gradient: Blue → Purple → Magenta → Pink → Red.

✦ Texture
Optional grain overlay at 10–15% opacity for an authentic crayon-on-paper feel.

02 — Color System

Color Palette

A vibrant "crayon box" palette that appeals to GenZ aesthetics while remaining enterprise-appropriate. Click any swatch to copy its hex code.

Primary Colors

Copied!

Slidea Blue

#4D4DFF

RGB(77, 77, 255)

Copied!

Slidea Purple

#7B3FE4

RGB(123, 63, 228)

Copied!

Slidea Magenta

#C02AA7

RGB(192, 42, 167)

Copied!

Slidea Red

#E61E2A

RGB(230, 30, 42)

Extended Crayon Palette

Copied!

Crayon Yellow

#FFC107

RGB(255, 193, 7)

Copied!

Crayon Green

#28C76F

RGB(40, 199, 111)

Copied!

Crayon Orange

#FF6B35

RGB(255, 107, 53)

Copied!

Crayon Teal

#00C9DB

RGB(0, 201, 219)

GenZ Accent Colors

Copied!

Soft Lavender

#C4B5FD

RGB(196, 181, 253)

Copied!

Mint Fresh

#6EE7B7

RGB(110, 231, 183)

Copied!

Warm Peach

#FFBBA8

RGB(255, 187, 168)

Copied!

Coral Pink

#FF6F91

RGB(255, 111, 145)

Neutrals

Copied!

Dark Ink

#1A1A28

RGB(26, 26, 40)

Copied!

Slate Text

#314259

RGB(49, 66, 89)

Copied!

Lavender Mist

#F0EEFC

RGB(240, 238, 252)

Copied!

Pure White

#FFFFFF

RGB(255, 255, 255)

Gradient Specification

GRADIENT DIRECTION →

#4D4DFF

Blue

#7B3FE4

Purple

#C02AA7

Magenta

#E01E6E

Pink

#E61E2A

Red

Usage Ratio: 60-30-10

60%

Neutral BGs

30%

Primary

10%

Accent

03 — Type System

Typography

Lexend Deca as primary typeface — designed for reading proficiency, aligning with our education-forward values.

PRIMARY — Lexend Deca

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( )

Display Hero48–60px / Bold 700 / 1.1

H1 Page Title32–40px / Bold 700 / 1.2

H2 Section Title24–28px / SemiBold 600 / 1.3

H3 Subsection18–20px / Medium 500 / 1.4

Body text for content and descriptions14–16px / Regular 400 / 1.6

Caption and small supporting text12px / Regular 400 / 1.5

font-family: "Lexend Deca", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

04 — Logo System

Logo Do's & Don'ts

Maintain logo integrity across all applications. Never distort, alter, or misrepresent the Slidea wordmark and mark.

✗ Don't Stretch or Distort

Always maintain the original aspect ratio (120:30). Never compress horizontally or vertically.

✓ Use on White Backgrounds

Use the primary full-color gradient logo on clean white or light backgrounds for optimal clarity and brand recognition.

✗ Don't Rotate

Keep the logo horizontally aligned at all times. Never rotate at any angle.

✗ Don't Add Drop Shadow

Do not add drop shadows, outer glows, or other raster effects to the logo artwork.

✗ Don't Change Colors

Never alter the signature gradient colors or use unapproved color combinations.

✗ Low-Contrast Backgrounds

Ensure sufficient contrast. Never place the standard logo on busy or similarly colored backgrounds.

✗ Don't Add Outlines

Do not add strokes, outlines, or borders around the logo mark or wordmark.

05 — Color Variations

Logo on Different Backgrounds

Black Monochrome

Print & single-color use

White Monochrome

Dark mode & photography overlay

On Purple

Purple accent background

On Red

Brand red background

On Black

Deep background

On Gradient

Full gradient background

06 — App Icon

Favicon & App Icon

The Slidea favicon isolates the crayon-stylus mark within a circular gradient background, serving as the brand's compact visual identity across all digital touchpoints.

Icon Symbolism

✦

Crayon-Stylus Mark
The central figure represents creativity, education, and the power of visualization — from a child's first crayon stroke to a professional's presentation stylus.

✦

Four-Pointed AI Star
The star at the tip symbolizes AI-powered intelligence and the spark of creative ideas that Slidea ignites in every presentation.

✦

Circular Gradient
The blue-to-pink gradient circle represents unity, completeness, and the seamless flow from ideas to interactive experiences.

✦

Minimum Sizes
16×16px (browser tab) · 32×32px (standard) · 180×180px (Apple Touch) · 512×512px (PWA & Android)

07 — Audience

Character Personas

Slidea serves four primary personas. All brand decisions should consider these audiences.

🎓

The Student

GenZ Learner · 14–24

Digital native, visual thinker. Values fun, speed, shareability. Mobile-first and gamified.

Playful · Vibrant

📚

The Educator

Teacher / Professor · 28–60

Transforms lectures into engagement. Values ease of use, analytics, and real-time insight.

Supportive · Clear

💼

Corporate Presenter

Enterprise · 25–55

Team meetings, all-hands, training. Values professionalism, integrations, and reliability.

Professional · Polished

🎤

The Event Host

Conferences · 25–50

Conferences, workshops, webinars. Values scale, leaderboards, and the "wow factor."

Dynamic · Exciting

08 — Components

UI Components

Button System

Interactive Slide Type Colors

Multiple Choice

#FECDD3

Word Cloud

#CCFBF1

Q&A

#DDD6FE

Guess the Number

#D9F99D

This or That

#FEF9C3

Ranking

#E8E6F0

Open Ended

#FFE4CC

Scale

#D1FAE5

09 — At a Glance

Quick Reference

Brand Name	slidea (lowercase in logo; "Slidea" capitalized in text)
Tagline	Slides that listen, Ideas that lead
Primary Font	Lexend Deca (Google Fonts, free)
Secondary Font	Inter (fallback for dense UI)
Primary Blue	#4D4DFF — RGB(77, 77, 255)
Primary Red	#E61E2A — RGB(230, 30, 42)
Gradient	#4D4DFF → #7B3FE4 → #C02AA7 → #E61E2A
Background	#F0EEFC (Lavender Mist) \| #FFFFFF (White)
Dark Text	#1A1A28 (primary) \| #314259 (secondary)
CSS Variables	--sl-blue: #4D4DFF; --sl-red: #E61E2A;
Button Radius	8px (standard) \| 24px (pill CTA)
Icon Style	Rounded, 2px stroke, 24px grid
Signature Motif	Crayon Curve — gradient sweep with crayon texture
Website	slidea.com