Design System · May 2026

savoietech.fr

Automatically extracted design tokens — colors, typography, spacing, and more.

⏱ 11:31 UTC 📐 W3C DTCG Format ⚡ dembrandt
10
Colors
7
Type Styles
11
Spacing Units
18
Breakpoints
2
Font Families
1
Favicon
🎨

Colors

CSS Custom Properties & Palette

A warm editorial palette with a bold red accent. The site uses CSS custom properties for consistent theming across components.

#c93b3b
Accent Red
primary brand accent
#fecd35
Yellow
highlight, badge
#a4d037
Green
success, positive
#f05230
Red
error, destructive
#e5eff5
Wash
background tint
#f1f1f1
Light Grey
subtle background
#e1e1e1
Border
divider, border
#979797
Mid Grey
secondary text
#15171a
Dark
primary text
#ffffff
White
background
Aa

Typography

2 families · 7 styles

System-native primary stack (-apple-system) with a custom display face for brand applications. Strong hierarchy via extreme weight and size contrast.

Font Families
Primary
-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif
Display
Crisp Noto Sans Regular, Helvetica Neue, Helvetica, Arial, sans-serif
Heading 1 · Page Title 60px · 800 · 1.15
Welcome to Savoietech
Heading 2 · Section Title 44px · 800 · 1.05
Our Services & Capabilities
Display · Lead / Subtitle 24px · 400 · 1.4
We deliver innovative technology solutions for modern businesses.
Body · Paragraph 16px · 400 · 1.6
Savoietech is a forward-thinking technology company specializing in web development, cloud infrastructure, and digital transformation. Our team of experts works closely with clients to deliver scalable, maintainable solutions that drive real business value.
Link · Inline 13px · 400 · 2.0
Learn more about our approach and get in touch with our team.
Caption · Meta 13px · 400 · 1.97
Posted on May 15, 2026 · 3 min read · Updated 2 hours ago
Button · Label 11px · 400 · 1.0
Get Started

Spacing

11 values

A modular scale with 8px base system. Values range from hairline 1px to generous 249px for large section padding.

1px
hairline
12px
tight
16px
base
20px
comfortable
48px
section
52px
section+
86px
container
130px
container+
140px
hero
205px
hero+
249px
max section

Breakpoints

18 breakpoints · 1280px → 300px

Responsive design grid with tight granularity. The layout adapts at 18 distinct viewport widths, maintaining readability across all devices.

300px
400px
480px
540px
600px
680px
740px
800px
880px
960px
1040px
1120px
1200px
1280px
+ 4 intermediate breakpoints between ranges
📁

Brand Assets

Favicon
🔖
Favicon
savoietech.fr/favicon.ico
📋

Design Summary

savoietech.fr uses a warm editorial design language built around a bold red accent (#c93b3b) against a neutral dark (#15171a) and light (#ffffff) backdrop.

Typography relies on the system-native -apple-system stack for performance and native feel, paired with a custom Crisp Noto Sans Regular display face for brand moments. The type scale uses extreme contrast — 60px headings at weight 800 versus 11px button labels — creating clear visual hierarchy.

Spacing follows a modular scale with 8px base, expanding generously to 249px for hero sections. The 18 breakpoints indicate careful responsive consideration across the full device spectrum from 300px to 1280px+.