Brand Guidelines

Slides that listen,

Ideas that lead

A comprehensive design system rooted in the Crayon Curve motif — where childhood creativity meets professional presentation.

Version 3.0 — March 2026

01 — Signature Element

The Crayon Curve Motif

The Crayon Curve is Slidea's signature design element — a flowing, organic curve inspired by the free-form strokes of a crayon. It embodies our belief that great ideas start with the simple, uninhibited act of drawing.

Interactive: Move your mouse over the curve ↑

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

Protect the Slidea brand by following these logo usage guidelines strictly across all applications.

✗ Don't Stretch or Distort

Never squash, stretch, or disproportionally scale the logo.

✓ Use White on Dark Backgrounds

The white reversed version maintains visibility on dark surfaces.

✗ Don't Recolor the Logo

Never alter the gradient colors. The blue-to-red gradient is sacred.

✓ Maintain Clear Space

min: height of "e"

Keep clear space equal to the height of the letter "e" on all sides.

✗ Don't Add Effects or Rotate

No drop shadows, glows, 3D effects, rotation, or any distortion.

05 — Visual Identity

Logo Variants Gallery

The Slidea logo is available in multiple color variants for different background contexts. Always select the variant that ensures maximum contrast and brand consistency.

Gradient (Primary)

On light backgrounds

Black Monochrome

Print & single-color use

White (Reversed)

On dark backgrounds

On Blue

Brand blue background

On Purple

Purple accent background

On Red

Red accent 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

Review us & get rewarded Claim