Sardio Corporate Guidelines

Brand colors, components, and development standards for building Sardio products.

ℹ️ About Sardio

Sardio is a collective of agencies under one banner with a team to manage e-commerce for growth. From strategy and business planning, design and all other areas of online business. We are e-commerce problem solvers.

Our promise is simple: to create a plan for success and provide the team to help you do it. We combine strategy, creativity, and operational excellence to deliver measurable results for e-commerce brands ready to scale.

What We Do

E-commerce growth, strategy, design, paid media, SEO, and full-service online business management.

Our Promise

Create a plan for success and provide the dedicated team to help you execute it.

Our Approach

Data-driven decisions combined with creative expertise.

🖼️ Logo

The Sardio logo features a geometric S shape with the signature glint animation.

File Locations

• Animated SVG: /public/sardio-logo.svg
• Favicon (ICO): /app/favicon.ico

🎨 Core Colors — Dark Mode

Click any color to copy the hex code. Toggle theme above to see both palettes.

Background

#0D1117

Main page background

Click to copy

Surface

#161B22

Cards, panels, modals

Click to copy

Surface Tertiary

#21262D

Nested surfaces

Click to copy

Border

#30363D

Dividers, card borders

Click to copy

Text Primary

#E8ECEF

Headings, body text

Click to copy

Text Secondary

#9CA3AF

Muted text, labels

Click to copy

Text Muted

#6B7280

Placeholders, hints

Click to copy

✨ Accent Colors

Sardio Teal

#4ECDC4

Primary CTAs, links, highlights

Click to copy

Purple

#9B59B6

AI/bot features

Click to copy

Blue

#3498DB

Trust, technology

Click to copy

Orange

#E67E22

Energy, warnings

Click to copy

Pink

#E91E63

Human elements

Click to copy

Green

#22C55E

Success states

Click to copy

Red

#EF4444

Errors, destructive

Click to copy

✍️ Typography — Jakarta Sans

All Sardio products use Plus Jakarta Sans. It is free under SIL Open Font License.

Font Family

Plus Jakarta Sans

Source

Google Fonts

License

SIL Open Font License (OFL) — free for commercial use

Weights

400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold)

💠 Tabler Icons

We use Tabler Icons for all iconography. Installation: npm install @tabler/icons-react

🏠IconHome

📚IconBook

🚀IconRocket

⚙️IconSettings

👤IconUser

📊IconChartBar

➕IconPlus

🔍IconSearch

Browse all icons → tabler.io/icons

✅ Do's and Don'ts

✅ Do

• Use Sardio Teal (#4ECDC4) for primary actions
• Keep 16px base font size for readability
• Use cards with #161B22 (dark) or #F8F9FA (light) background
• Test on mobile first, then scale up
• Use border #30363D (dark) or #E5E7EB (light)

❌ Don't

• Use bright colors on dark backgrounds
• Use font sizes below 14px for body text
• Skip touch targets (min 44px on mobile)
• Design desktop-only and try to scale down
• Use hard black (#000) or pure white (#FFF)