{ "$schema": "https://design-tokens.github.io/community-group/format/", "$description": "Tech Speak'Her design tokens. Source of truth for palette, typography, spacing, components. Published at techspeakher.fr/brand/tokens.json for consumption by site, Canva templates, freelance LLMs, and partner tools.", "$version": "2026-05-12", "brand": { "name": { "$value": "Tech Speak'Her", "$type": "string" }, "slogan": { "long": { "$value": "Une communauté de FEMMES de la tech pour OSER passer de la salle… à la scène !", "$type": "string" }, "short": { "$value": "De la salle… à la scène.", "$type": "string" } }, "homepage": { "$value": "https://techspeakher.fr", "$type": "url" }, "mascot": { "name": { "$value": "Micro Tech Speak'Her", "$type": "string" }, "description": { "$value": "Hand-holding-microphone illustration. Single canonical image, recolored per visual context in Canva (layer recolor). No additional variants commissioned.", "$type": "string" }, "canva_asset_id": { "$value": "DAG4YCqyIUU", "$type": "string" }, "local_path": { "$value": "tsh_mascot.png", "$type": "string" }, "url": { "$value": "https://techspeakher.fr/tsh_mascot.png", "$type": "url" } } }, "assets": { "$description": "Visual assets hosted on techspeakher.fr — free to reference in LLM-generated docs, partner decks, social cards, etc. PNG / WebP, transparent background where applicable.", "logo_full": { "$value": "https://techspeakher.fr/logo-full.webp", "$type": "url", "$description": "Logo cerveau-bulle + wordmark 'Tech Speak'Her' — bloc complet, fond transparent, optimisé WebP. Pour kakémonos, slides de remerciement, covers sobres." }, "logo_icon": { "$value": "https://techspeakher.fr/logo-icon.webp", "$type": "url", "$description": "Logo cerveau-bulle seul (sans wordmark), fond transparent, WebP. Pour coins haut-droit des visuels sociaux, favicons." }, "mascot": { "$value": "https://techspeakher.fr/tsh_mascot.png", "$type": "url", "$description": "Mascot 'main qui tient un microphone' — PNG transparent 1872x1600. Recolorable layer-par-layer en Canva selon le programme. Asset unique, ne pas générer de variante AI." } }, "theme": { "dark": { "$description": "Default theme. Used on web, social, presentations. 100% of digital surfaces.", "color": { "background": { "$value": "#170E47", "$type": "color", "$description": "Deep purple, single background. Covers 70%+ of surface. Never lightened." }, "surface": { "level1": { "$value": "#1F1757", "$type": "color", "$description": "Card surface" }, "level2": { "$value": "#2A2068", "$type": "color", "$description": "Hover, raised surface" } }, "accent": { "cyan": { "$value": "#5FECDE", "$type": "color", "$description": "Eyebrows, accent 1, secondary CTA outline, expertise vertex" }, "magenta": { "$value": "#E631FB", "$type": "color", "$description": "Emphasis 1-3 words UPPERCASE, primary CTA, expérience vertex" }, "coral": { "$value": "#F46F6F", "$type": "color", "$description": "Émotion vertex, warm accent 3" }, "peach": { "$value": "#F6B17A", "$type": "color", "$description": "Italic subtitles, dates, meta, EEE center star" } }, "accent_hover": { "cyan": { "$value": "#8FF3E9", "$type": "color" }, "magenta": { "$value": "#EE6FFF", "$type": "color" } }, "neutral": { "cream": { "$value": "#FFF0DC", "$type": "color", "$description": "Sticky-note background, rotated -6°" }, "white": { "$value": "#FFFFFF", "$type": "color", "$description": "Primary text on dark" }, "muted": { "$value": "#B8B8D0", "$type": "color", "$description": "Secondary text, legends" } } } }, "light": { "$description": "Print variant. ONLY for print/A4 where dark bleed is impractical, attestations, partner docs requesting light background. Web and social ALWAYS use dark. No PowerPoint Light Mode.", "color": { "background": { "primary": { "$value": "#FFFFFF", "$type": "color", "$description": "Pure white" }, "soft": { "$value": "#FFF0DC", "$type": "color", "$description": "Cream — used to soften the print" } }, "accent": { "deep_purple": { "$value": "#170E47", "$type": "color", "$description": "Becomes the primary text color on light bg. 18:1 AAA. Mirror of dark theme." }, "magenta": { "$value": "#E631FB", "$type": "color", "$description": "Emphases UPPERCASE 1-3 words, titles ≥18pt, primary CTA fill. 4.6:1 AA borderline." }, "coral": { "$value": "#F46F6F", "$type": "color", "$description": "Decorative only — 3:1, no body text" }, "peach": { "$value": "#F6B17A", "$type": "color", "$description": "Decorative only — 2.2:1, no body text" }, "cyan": { "$value": "#5FECDE", "$type": "color", "$description": "Fills/illustration ONLY — 1.5:1, never text, never thin outline" } } }, "rules": { "primary_cta": "Solid magenta fill #E631FB + white text. Identical to dark mode.", "secondary_cta": "Magenta outline 2pt + magenta text (cyan outline becomes invisible on white).", "sticky_note": "Replace cream sticky with deep purple #170E47 rotated -6° + magenta text mirror.", "logo": "Use dark-on-light logo variant. Wordmark in deep purple #170E47.", "slogan_emphasis": "FEMMES + OSER in magenta. 'à la scène !' in deep purple bold (cyan unreadable)." } } }, "font": { "family": { "wordmark": { "$value": "Quicksand", "$type": "fontFamily", "$description": "Brand wordmark only" }, "title": { "$value": "Montserrat", "$type": "fontFamily", "$description": "Titles + body" }, "display": { "$value": "Big Shoulders Display", "$type": "fontFamily", "$description": "Program titles outline neon (TREMPLIN, MEET UP, BEHIND THE SCENES)" } }, "weight": { "regular": { "$value": 400, "$type": "fontWeight" }, "bold": { "$value": 700, "$type": "fontWeight" }, "black": { "$value": 900, "$type": "fontWeight" } }, "size": { "eyebrow": { "$value": "10pt", "$type": "fontSize", "$description": "TECH SPEAK'HER tracked uppercase" }, "body": { "$value": "14pt", "$type": "fontSize" }, "subtitle": { "$value": "18pt", "$type": "fontSize", "$description": "Italic, peach color" }, "h3": { "$value": "22pt", "$type": "fontSize" }, "h2": { "$value": "36pt", "$type": "fontSize", "$description": "Title slide" }, "h1": { "$value": "60pt", "$type": "fontSize", "$description": "Cover title" } }, "tracking": { "eyebrow": { "$value": "0.6", "$type": "letterSpacing", "$description": "+6 em" } } }, "radius": { "card": { "$value": "8px", "$type": "borderRadius" }, "pill": { "$value": "9999px","$type": "borderRadius", "$description": "Pastilles durée et hashtag" }, "button": { "$value": "9999px","$type": "borderRadius", "$description": "CTAs très arrondis" }, "sticky": { "$value": "5px", "$type": "borderRadius" } }, "shadow": { "sticky": { "$value": "0 2px 8px rgba(0, 0, 0, 0.35)", "$type": "shadow", "$description": "Soft drop shadow for cream sticky-notes" } }, "rotation": { "sticky": { "$value": "-6deg", "$type": "transform", "$description": "Always -6° for sticky-notes" } }, "component": { "cta_primary": { "background": { "$value": "{theme.dark.color.accent.magenta}", "$type": "color" }, "color": { "$value": "#FFFFFF", "$type": "color" }, "radius": { "$value": "{radius.button}", "$type": "borderRadius" }, "font_weight":{ "$value": "{font.weight.bold}", "$type": "fontWeight" }, "font_size": { "$value": "14pt", "$type": "fontSize" }, "examples": { "$value": ["Découvrir le Tremplin 2026", "Je candidate", "S'inscrire maintenant"], "$type": "array" } }, "cta_secondary": { "background": { "$value": "transparent", "$type": "color" }, "border": { "$value": "2px solid {theme.dark.color.accent.cyan}", "$type": "border" }, "color": { "$value": "{theme.dark.color.accent.cyan}", "$type": "color" }, "radius": { "$value": "{radius.button}", "$type": "borderRadius" }, "examples": { "$value": ["Nous contacter", "Voir l'annuaire", "Voir toutes les actus →"], "$type": "array" } }, "cta_link": { "color": { "$value": "{theme.dark.color.accent.cyan}", "$type": "color" }, "arrow": { "$value": " →", "$type": "string" }, "no_border": { "$value": true, "$type": "boolean" } }, "sticky_note": { "background": { "$value": "{theme.dark.color.neutral.cream}", "$type": "color" }, "color": { "$value": "{theme.dark.color.accent.magenta}", "$type": "color" }, "rotation": { "$value": "{rotation.sticky}", "$type": "transform" }, "shadow": { "$value": "{shadow.sticky}", "$type": "shadow" }, "text_transform": { "$value": "uppercase", "$type": "string" }, "font_weight":{ "$value": "{font.weight.bold}", "$type": "fontWeight" }, "tracking": { "$value": "0.2", "$type": "letterSpacing", "$description": "+2 em" }, "examples": { "$value": ["PRÉNOM NOM", "SAVE THE DATE", "JE CANDIDATE", "CE TREMPLIN EST POUR TOI !"], "$type": "array" } }, "hashtag_pill": { "background_opacity": { "$value": 0.2, "$type": "number" }, "border": { "$value": "1px solid", "$type": "border" }, "radius": { "$value": "{radius.pill}", "$type": "borderRadius" }, "examples": { "$value": ["#women", "#tremplin", "#meetup", "#talks", "#devfest", "#conférences", "#cfp", "#tech"], "$type": "array" } }, "duration_pill": { "background": { "$value": "transparent", "$type": "color" }, "border": { "$value": "2px solid", "$type": "border" }, "radius": { "$value": "{radius.pill}", "$type": "borderRadius" }, "examples": { "$value": ["60 min", "12 participantes", "À distance", "Tour de table"], "$type": "array" } }, "eee_triangle": { "$description": "Pedagogical signature of Tremplin program. Always: Expertise top (cyan), Expérience bottom-left (magenta), Émotion bottom-right (coral), peach star center. Never move positions.", "vertex": { "expertise": { "color": "{theme.dark.color.accent.cyan}", "label": "ce que je sais faire" }, "experience": { "color": "{theme.dark.color.accent.magenta}", "label": "ce que j'ai vécu" }, "emotion": { "color": "{theme.dark.color.accent.coral}", "label": "ce qui me tient à cœur" } }, "center": { "shape": "5-point star", "color": "{theme.dark.color.accent.peach}" } } }, "voice": { "tone": ["bienveillante", "directe", "expressive", "ancrée"], "person": "tutoiement systématique", "emphasis_words": ["FEMMES", "MOI", "SAFE", "FIÈRE", "PEUR", "BANAL", "OSER"], "ok_terms": ["talk", "pitch", "CFP", "meetup", "behind the scenes", "DevFest"], "banned": { "tone": ["vouvoiement", "corporate", "jargon RH"], "terms": ["synergie", "leverage", "pipeline ressources", "super woman", "rockstar"], "punctuation": ["…trop d'exclamations"], "emoji_in_visuals": true }, "signature_phrases": [ "Aucun sujet n'est banal ici", "Bienveillance d'abord", "Plus de sujets = plus de chances qu'un vibre chez toi ET chez le jury", "Et si ton expérience pouvait aider quelqu'un… sans que tu le saches ?" ], "patterns": { "cascade_questions": "Open visual with 3 tutoyée questions. Ex: « Tu n'as jamais été speakeuse ? Tu souhaiterais parler en public ? Tu cherches un cadre bienveillant ? »", "hero_quote_echo": "Big centered quote + small relay question below. Ex: « On t'a prise parce que t'étais la seule fille. » → « Pourquoi cette phrase résonne encore si longtemps après ? »", "slogan_typo_broken": "3-line slogan: ligne 1 setup, ligne 2 verbe OSER, ligne 3 chute « à la scène ! » in magenta" } }, "layout": { "rules": { "portrait_edge_to_edge": "Speaker portraits MUST overflow the card frame (≥ 1/4 cropped). Never fully contained.", "mascot_breaks_frame": "Mascot illustration enters the visual (right: -5% on web, partially off-canvas on social). Never tucked into a corner.", "sticky_overlaps": "Sticky-notes ALWAYS overlap something (portrait, card edge, mascot). Never isolated.", "no_uniform_gap": "Don't align all cards at 0.2\" gap. Use generous whitespace and asymmetry.", "background_dominance": "Deep purple covers ≥ 70% of dark theme surface." }, "anti_patterns": [ "Cards aligned at uniform intervals (Figma library look)", "Rounded-corner pastilles uniformes en bandeau", "3-dot decorative trios under titles", "Decorative line under titles (solid or dotted — looks AI-generated)", "Symmetric grid without intentional breaks" ] }, "format": { "presentation_16_9": { "width": 1920, "height": 1080, "use": "talk, atelier, charte" }, "social_4_5": { "width": 1200, "height": 1500, "use": "carrousel Behind the Scenes, Meet Up, Tremplin" }, "story_9_16": { "width": 1080, "height": 1920, "use": "IG/LK story" }, "linkedin_banner": { "width": 1128, "height": 376, "use": "profile/page header" }, "square_1_1": { "width": 1080, "height": 1080, "use": "avatar, IG single post" }, "kakemono_portrait": { "width": 3213, "height": 7560, "use": "event roll-up" } }, "accessibility": { "$description": "Contrast ratios computed against #170E47 (dark theme) and #FFFFFF (light theme).", "dark_theme": { "white": { "ratio": "17.6:1", "rgaa": "AAA — titles + body" }, "cream": { "ratio": "15.2:1", "rgaa": "AAA — titles + body" }, "cyan": { "ratio": "10.1:1", "rgaa": "AAA — titles + body" }, "peach": { "ratio": "8.9:1", "rgaa": "AAA — titles + body" }, "muted": { "ratio": "8.8:1", "rgaa": "AAA — legends ≥ 12pt" }, "coral": { "ratio": "5.8:1", "rgaa": "AA — body OK ≥ 14pt" }, "magenta": { "ratio": "5.3:1", "rgaa": "AA — UPPERCASE emphasis 1-3 words" } }, "light_theme": { "deep_purple": { "ratio": "18.0:1", "rgaa": "AAA — primary text" }, "magenta": { "ratio": "4.6:1", "rgaa": "AA borderline — large/bold only" }, "coral": { "ratio": "3.0:1", "rgaa": "FAIL — decorative only" }, "peach": { "ratio": "2.2:1", "rgaa": "FAIL — decorative only" }, "cyan": { "ratio": "1.5:1", "rgaa": "FAIL — fills only, never text" } } }, "partners": { "$description": "Co-branding is occasional only — applied to specific event visuals (Meet Up, Tremplin events), NOT to default templates. Templates remain partner-neutral.", "primary": { "GDG Toulouse": { "$value": "Sponsor platinium, co-organizer of Meet Up events", "$type": "string" } }, "secondary": { "Toul'Tech Hub": { "$value": "Community partner, occasional", "$type": "string" } } } }