// MATILHA
Style guide and elements
A Matilha case for SYX
Brand &Style guide
2020 - 2021
Marketplace focused on relocating used machinery and equipment
- Service Design
- Branding & Naming
- UI | UX Design
Challenge
Translate the company's new moment into a new brand and redesign the existing platform for a functional, enjoyable user experience.
Solution
Discovery, rebranding and renaming from Central de Materiais, redesign and prototyping of the SYX marketplace focused on market expansion.
// MATILHA
The brand had to become a platform.
Matilha started from Central de Materiais and built the name, the visual system and the marketplace. Sober Blue leads. Magic Green sparks. IBM Plex holds the type.
// DELIVERY
Naming and brand
Renaming Central de Materiais to SYX, with wordmark and color rules.
Style guide
Palette, typography, shapes and components for product and communication.
Marketplace
Redesign and prototyping of the platform for relocating machinery and equipment.
// BRAND
Wordmark
syx signs in black, white, Sober Blue and Magic Green. Four readings, one mark.
// COLOR
Color
Sober Blue is primary. Magic Green is the accent. Dark Syx and Grey Syx hold the product.
Primary
- Sober Blue Darker#063C3B
- Sober Blue Dark#0B6868
- Sober Blue Regular#0F9594
- Sober Blue Light#57B5B4
- Sober Blue Lightest#9FD5D4
Secondary
- Magic Green Darker#536501
- Magic Green Dark#92B001
- Magic Green Regular#D0FC02
- Magic Green Light#E8FE81
- Magic Green Lightest#F6FECC
Neutrals
- Dark Syx#1A1A1A
- Grey Darkest#363636
- Grey Darker#666666
- Grey Regular#C7C7C7
- Grey Lightest#F2F2F2
// TYPE
IBM Plex Sans
The family for titles and interface. Work Sans carries product body copy.
- Big72px
- Hero56px
- H140px
- H232px
- H328px
- H424px
Work Sans in product copy
// SHAPES
Shapes and curves
Symmetric radii of 2, 4 and 8. Asymmetric 4, 8, 16 and 24. The cover cut comes from there.
Symmetric
Asymmetric
// SYSTEM
The interface system
From spacing to the card. Buttons, fields, selection and tags share one grid. The marketplace uses the guide. It does not invent again.
Guide map
Foundation
- Brand
- Color
- Type
- Spacing
- Shapes
- Icons
Action
- Buttons
- Fields
- Selection
- Tags
Structure
- Header
- Nav
- Footer
- Title
Product
- Cards
- List
- Filters
- Banner
- Search
Flow
- Modal
- Dialog
- Dropdown
- Upload
- Accordion
Spacing
- 4
- 8
- 12
- 16
- 24
- 32
- 40
- 48
- 56
- 64
- 80
- 104
Icons
Buttons
Fields
Selection
Tags
Cards
Reach truck
Curitiba · PR
R$ 86,000// APPLICATIONS
From the board to the marketplace
The brand has to trade: home, listing, detail and the fixed-asset flow.
// MATILHA
Brand & Style guide
Brand and product case · Matilha Estúdio for SYX
