Design system · 23 avril 2026

Atrakt Bold Digital

Confident, modern, approachable, tech-forward, vibrant

LinkedInGrowthSaaSPurple energyBold typographyClean UI
typedesign.md

Aperçu live

atrakt-bold-digital.com

8 couleurs · Inter · pill

Live

Palette

#6B4EFF

--color-primary · primary

#FFFFFF

--color-on-primary · on primary

#1E1B4B

--color-secondary · secondary

#F4F3FF

--color-surface-container · surface container

#1A1A2E

--color-on-surface · on surface

#6B7280

--color-on-surface-variant · on surface variant

#E2E0F0

--color-outline · outline

#EAE8F8

--color-background · background

Typographie

Titres · Display

Inter

Aa Bb Cc 123 — Bold · SemiBold · Regular

Corps · Body

Inter

Le design parle avant les mots. Une palette bien choisie transmet une émotion, une promesse, une identité — avant même qu'on lise la première ligne.

Regular · 16px / 1.7 — Small · 13px / 1.5

Chargement des fonts depuis Google Fonts…

Border radius

sharp
rounded
pill

Vibe général

Keywords: LinkedIn · Growth · SaaS · Purple energy · Bold typography · Clean UI · Professional

"

Note du directeur artistique

Atrakt is a B2B SaaS brand operating in the personal branding and LinkedIn ghostwriting space — an audience of ambitious professionals who want to appear polished and credible online without spending hours crafting content. The visual system must therefore balance the slick confidence of a tech product with the human warmth of a personal service. The soft lavender background and rounded geometry soften what could otherwise be an aggressively corporate identity. The design system speaks in two registers at once: the boldness of the deep-indigo wordmark and geometric logo mark signals authority and precision, while the airy lavender surface and pill-shaped buttons whisper accessibility and ease. This duality is intentional — it mirrors the brand promise itself: serious results, effortless experience. The UI mockup embedded in the composition acts as social proof delivered through design, anchoring the digital product in recognizable LinkedIn UX patterns to reduce cognitive friction for the target audience.

Export

Tokens prêts à coller

/* ── Atrakt Bold Digital — Design Tokens ── */
/* Généré par Moodcast */
:root {
/* ── Colors ── */
--color-primary: #6B4EFF;
--color-on-primary: #FFFFFF;
--color-secondary: #1E1B4B;
--color-surface-container: #F4F3FF;
--color-on-surface: #1A1A2E;
--color-on-surface-variant: #6B7280;
--color-outline: #E2E0F0;
--color-background: #EAE8F8;
/* ── Typography ── */
--font-display: 'Inter', sans-serif;
--font-body: 'Inter', sans-serif;
/* ── Border radius ── */
--radius-sm: 100px;
--radius-md: 100px;
--radius-lg: 100px;
--radius-xl: 100px;
}
atrakt-bold-digital.md
1
1 lignes · 0.0 Ko · Markdown

Made with Moodcast

Ton moodboard → un design system complet.

Importe tes images d'inspiration. Claude analyse, extrait la palette, les typos et le vibe — et génère un fichier design.md prêt à coller dans ton projet.

Créer le mien gratuitement →