The CreativeVerse SL — Design System

01

Brand Identity

The logo mark is a bold geometric chevron "C" — two parallelogram shapes in brand green and blue — symbolising innovation, forward motion, and duality of technology and creativity.

Primary — dark background

Secondary — white background

Brand green — special use only

Logo usage rules

Always maintain minimum clear space of 1× the height of the mark around all sides. Never recolour individual elements. Never rotate or stretch the mark. Minimum digital size: 24px height. Never place on busy photographic backgrounds.

02

Color System

Three-pillar palette: brand green (energy, growth, innovation), electric blue (trust, technology), and near-black (authority, editorial weight). White is the foundation.

Primary — Brand Green

50#F0FDF6

100#E0F9EC

200#A5EFC7

300#69F0AE

400#00E676Hover

500#00C853Primary

600#00922E

Secondary — Electric Blue

50#F0F5FF

100#E3EEFF

200#BBDEFB

300#82B1FF

400#2979FFHover

500#1E88E5Primary

600#1565C0

Neutral — Near Black to White

50#F5F5F5

100#E0E0E0

200#BBBBB

300#888888

400#555555

700#1E1E1E

900#0A0A0ANav

Semantic Colors

Success / Published

#00C853

Info / Links

#1E88E5

Warning / Draft

#F59E0B

Error / Unpublished

#E53935

03

Typography

Two complementary typefaces create editorial authority. Syne for display and headings — geometric, powerful. DM Sans for body — humanist, readable. DM Mono for labels and metadata.

Display / Hero

Syne 800
52–64px / −0.03em

Innovation
Starts Here

Heading 1

Syne 800
32–36px / −0.02em

Sierra Leone's Tech Ecosystem in 2026

Heading 2

Syne 700
22–24px / −0.01em

Startup Funding Opportunities in West Africa

Body Large

DM Sans 300
16px / 1.75

A new wave of entrepreneurs and creatives are building solutions that transform communities across Africa, powered by technology, imagination, and relentless ambition.

Body Regular

DM Sans 400
15px / 1.6

This platform connects students, professionals, and innovators with content that informs, inspires, and opens doors to global opportunities.

Caption / Label

DM Mono 500
11–12px / UC

Innovation · Sierra Leone · Africa Published 12 April 2026 · 5 min read

Code / Mono

DM Mono 400
13px

npm install @thecreativersesl/ui

04

UI Components

Every component is built with Tailwind CSS and follows the three-color palette. Components are accessible, responsive, and consistent across all pages.

Buttons

Badges & category tags

STEM Innovation Entrepreneurship Design

Arts STEM Technology Funding Sierra Leone Africa Innovation

Navigation bar

Article card

Innovation

How Freetown's Startups are Reshaping West Africa's Digital Economy

A new generation of founders is building fintech, agritech, and edtech companies that are making global impact from Sierra Leone.

ML

Moses Lappia

8 min read

Form inputs

Full name Looks great!

Email address Please enter a valid email address.

Category Choose one or more categories.

Newsletter subscribe component

Stats / metrics row

12.4K

Newsletter subscribers

340+

Articles published

84

Podcast episodes

18

Events covered

05

Spacing Scale

An 8-point base grid. All spacing values are multiples of 4px — consistent rhythm throughout the interface.

4px

8px

12px

16px

24px

32px

48px

64px

80px

96px

sm

border-radius: 4px

Badges, tags, small inputs

md

border-radius: 8px

Buttons, inputs, small cards

lg

border-radius: 14px

Cards, panels, modals

xl

border-radius: 24px

Hero sections, page containers

06

Advertising Formats

Seven IAB-standard ad formats adapted to The CreativeVerse SL brand. A 3px green accent line and the "Sponsored" mono label appear on every placement — maintaining editorial trust while clearly distinguishing paid content.

Format 1

Billboard

970 × 250 px

Above the fold, homepage top

Format 2

MPU

300 × 250 px

Sidebar, article right rail

Format 3

Double MPU

300 × 600 px

Sticky sidebar, high impact

Format 4

Large Leaderboard

728 × 250 px

Below article, above footer

Format 1

Billboard

970 × 250 px · Above the fold, homepage top

Motion & Animation Tokens

Precise timing creates a platform that feels responsive without being distracting. These token values map to Tailwind transition utilities.

duration-fast

Hover states, colour changes, border highlights

150ms ease-out

duration-base

Card reveal, button feedback, drawer open

200ms ease-in-out

duration-enter

Modal, toast notification, page section fade-in

300ms cubic-bezier(0.22, 1, 0.36, 1)

duration-hero

Homepage hero stagger, full-page transitions

500ms cubic-bezier(0.22, 1, 0.36, 1)

stagger-children

Article card grid entry (delay each card)

60ms per child, delay from 0ms

hover-lift

Card hover — upward micro-translation

translateY(−2px) + border-color change

08

Do's & Don'ts

Design guidelines to keep the platform consistent and on-brand as the team grows.

Do

Use green (#00C853) as the primary CTA colour — buttons, active states, highlights

Use blue (#1E88E5) for links, informational states, and secondary actions

Use Syne for all headings and display text

Keep dark nav (#0A0A0A) and white content areas consistent on every page

Use the 3px top border accent (green or blue) to add colour to cards and banners

Label all sponsored content clearly with "Sponsored" in DM Mono uppercase

Maintain at least 4.5:1 contrast ratio for all body text

Use DM Mono for metadata: dates, read time, category codes, hex values

Don't

Don't use gradients on brand elements — use flat fills only

Don't place the logo on busy photographic backgrounds

Don't mix green and blue as equal-weight backgrounds — one must dominate

Don't use red as anything other than an error state

Don't use font-weight 600 or 700 for DM Sans body text — use 400 or 500 only

Don't change the chevron shape or colour split of the logo mark

Don't embed ads without the green accent line and "Sponsored" label

Don't use system fonts (Arial, Helvetica) — always load Syne and DM Sans