Design System Inspiration of Malt
1. Visual Theme & Atmosphere
Malt is a marketplace that connects companies with freelancers. Its careers site says it was founded
in 2013 by Vincent Huguet and Hugo Lassiège, counts 700,000 freelancers in the Malt community, and
lists offices from Paris and Lyon to Berlin, Munich, Madrid, Amsterdam, Brussels, London and Zurich.
Among the company's stated values: "Joy is our secret sauce" — and Joy is also the name of its
design system.
The French site is warm and upbeat: white and warm off-white #f7f7f5 surfaces, grey text
#4b4b4b, a coral #fc5757 for the main action and a deep teal #0f6378 for links and
interaction states, with pink, cyan and yellow accents. Headings are set in Agrandir Tight, body
in Moderat.
What makes it worth reading:
- A named system with public docs. Joy is documented on zeroheight at joy.malt.com, and its
tokens ship as
--joy-* on the live site.
- Two scales for two jobs. Coral (
--joy-color-primary-*) for the call to action; teal
(--joy-color-secondary-*) for links, hover, focus and selected states.
- A colour for AI.
--joy-color-ai-* adds a purple scale and purple-to-coral gradients for AI
features.
Primary tasks
- Find a freelancer by skill and location; sign up.
- Freelancers: create a profile; sign in.
2. Color Palette & Roles
Measured with getComputedStyle on malt.fr: 720 root custom properties — --p-* 542 (component
properties), --joy-* 158, and 12 --mui-* (MUI, excluded).
Coral
- Primary (
#fc5757) — --joy-color-primary-50; the sign-up button.
- Primary hover (
#d4524f) — --joy-color-primary-70.
--joy-color-primary-90 #a63633 · -10 #fff4f4.
Teal (interaction)
- Secondary (
#0f6378) — --joy-color-secondary-30, --joy-color-state-hover,
--joy-color-border-hover.
- Secondary strong (
#035266) — --joy-color-state-focus, --joy-color-border-focus.
- Secondary deep (
#014554) — --joy-color-border-selected.
Text and neutrals
- Foreground (
#4b4b4b) — --joy-color-text-body; 129 <p> elements.
- Heading (
#333330) — --joy-color-text-heading.
- Text support (
#737370) · Border (#e0ded9) · Surface (#f7f7f5) · Canvas
(#ffffff).
Brand accents and status
Brand pink #ff91f0 · Brand blue #0529fc · AI purple #9035a2 · Tertiary
#00c0db · Quaternary #ffc200 · Error #e02d2d · Success #81b928.
3. Typography Rules
Font family
Agrandir Tight (500, 700) for headings and Moderat (400, 700) for body — Moderat, Arial, Helvetica, sans-serif — both loaded (document.fonts), with an icon font, joy-icons. Source Sans 3
also loads, from an embedded widget.
Scale
Header controls are 14px; the login link 14px/700.
4. Component Stylings
Measured on the home page, focus read under a real Tab key, and a hover counted only when :hover
matched; background-image, text-decoration and pseudo-elements were compared too.
- Primary — Créer mon compte:
#fc5757, white 14px, a 30px radius, 42px. Hover and press
#d4524f. Keyboard focus draws no indicator.
- Login link — Me connecter: teal
#0f6378, 14px/700; hover and press #035266.
- Header menu — Platforme, Entreprises, Freelances, Ressources:
#333330, turning #0f6378 on
hover and press.
Radius
Pill-like 30px on the header button, 24px on the search field, 12px on the language switch.
5. Layout Principles
- A search-led hero (skill and location) on white; warm off-white panels.
6. Depth & Elevation
--joy-color-shadow-base rgba(24,24,24,.16); overlays --joy-color-overlay rgba(51,51,48,.4).
7. Do's and Don'ts
Do
- Use coral
#fc5757 for the main action; deepen to #d4524f.
- Use teal
#0f6378 for links and interaction states.
- Set headings in Agrandir Tight and body in Moderat.
Don't
- Don't use coral for links; links are teal.
- Don't leave controls without a visible focus state — the live header lacks one.
- Don't count
--mui-* as Joy tokens.
8. Responsive Behavior
Not measured. Desktop 1440×1000 only.
9. Agent Prompt Guide
Quick Color Reference
#fc5757 coral · #d4524f coral hover · #0f6378 teal · #035266 teal strong · #4b4b4b body ·
#333330 heading · #f7f7f5 surface · #e0ded9 border · #ff91f0 pink
Example Component Prompts
- "A 42px coral
#fc5757 pill, white 14px Moderat label; hover #d4524f."
- "A teal
#0f6378 bold link that deepens to #035266 on hover."
10. Voice & Tone
Not assessed as authored voice.
11. Brand Narrative
Malt was founded in 2013 to connect freelancers and companies, and it names "joy" among its values
and as its design system. The interface matches: warm neutrals, a friendly coral for the step that
matters, teal for everything interactive, and a display face with character.
12. Principles
- Coral to act. One warm colour for the call to action.
- Teal to interact. Links, hover, focus and selection share one scale.
- Joy. A named, documented system.
13. Personas
Not researched. No persona claim is made from a UI capture.
14. States
Hover and press: the primary to #d4524f, links and menu items to teal. Focus: nothing drawn on the
measured header controls, although Joy defines focus colours (--joy-color-state-focus #035266).
15. Motion & Easing
Not measured.
Tier 1 sources: https://www.malt.fr/ (live homepage — 720 root custom properties read via getComputedStyle; Agrandir Tight and Moderat loaded; three components measured at rest, hover, pressed and focus, captured 2026-09-26); https://joy.malt.com/ (Joy design system on zeroheight, team "Malt" — nonsense path returns 404, read 2026-09-26); https://careers.malt.com/ (Malt careers — founded 2013 by Vincent Huguet and Hugo Lassiège, 700,000 freelancers, offices, "Joy is our secret sauce", read 2026-09-26)