Techno design system
The UI kit behind the Techno electronics store: Inter type scale, electric-blue actions, product and deal cards, and light and dark themes from one token set.
- Role
- UX/UI designer
- Year
- 2025
Overview
Techno's system is built for a catalogue: hundreds of products that must look consistent, with just enough colour for badges and deals to stand out. One electric blue does all the work for actions; red, green and amber are reserved for product badges.
Everything on this page is rebuilt in code from the original Techno screens: the colours and font sizes were taken from the exported Figma files.
Colour
Brand and actions
Electric blue
#2563EB
Primary buttons, badges, links, Join
Sky blue
#60A5FA
Start of the hero headline gradient
Cyan
#22D3EE
End of the hero headline gradient
Sale red
#EF4444
Sale and Hot badges, stock bars
New green
#10B981
New badges, in-stock states
Star amber
#F59E0B
Ratings, Best Seller badge
Surfaces and text
Midnight
#0F172A
Hero banners, footer, dark page
Slate 800
#1E293B
Cards in dark
Slate 700
#334155
Borders in dark
Gray 50
#F9FAFB
Page background in light
Gray 100
#F3F4F6
Product image wells
Ink
#111827
Headings and dark buttons
Gray 500
#6B7280
Secondary text
Typography
Typeface
Inter
- Display
60px · ExtraBoldNext Gen Performance
- Banner
48px · ExtraBoldSummer Tech Week
- Heading 1
36px · BoldImmerse yourself
- Heading 2
30px · BoldDeal of the Day
- Heading 3
24px · BoldShop by Category
- Price
18px · Bold$1,099
- Body large
16px · MediumMacBook Air M2 13-inch
- Body
14px · RegularUpgrade your gear with up to 40% off top brands.
- Label
12px · BoldNew release
Buttons
Light theme
Primary, secondary and text
States
Dark theme
Primary, secondary and text
States
Inputs and controls
Light theme
Search
Text field
Focused
Select
Sort by
Segmented control
Chips, toggle and selection
Dark theme
Search
Text field
Focused
Select
Sort by
Segmented control
Chips, toggle and selection
Cards
Light theme
MacBook Air M2 13-inch
$1,099
Sony WH-1000XM5
$348.00 $399.99
Available: 15 · Sold: 65%
Free Shipping
On all orders over $50
Dark theme
MacBook Air M2 13-inch
$1,099
Sony WH-1000XM5
$348.00 $399.99
Available: 15 · Sold: 65%
Free Shipping
On all orders over $50
Icons
Light theme
- Search
- Account
- Wishlist
- Cart
- Shipping
- Warranty
- Secure pay
- Support
- Phones
- Laptops
- Watches
- Cameras
Outline icons, 1.5–2px stroke on a 24px grid, set in a soft tinted well when they label a row or action.
Dark theme
- Search
- Account
- Wishlist
- Cart
- Shipping
- Warranty
- Secure pay
- Support
- Phones
- Laptops
- Watches
- Cameras
Outline icons, 1.5–2px stroke on a 24px grid, set in a soft tinted well when they label a row or action.
Radius, spacing and badges
Corner radius
- Badge Full
- Button 8px
- Card 12px
- Banner 16px
Spacing scale
- 4px
- 8px
- 12px
- 16px
- 24px
- 32px
- 48px
Badges and status