Design System
Style Guide
One reference for every colour, typeface, size, component, and interaction that makes up siddik.pro. Tap any colour to copy its value — and to hear the interface sound.
Colour
A warm, editorial palette: a cream page, near-black ink, a sage-green accent, and a soft gold. The dark hero tones anchor the top and bottom of the page.
Brand accents
Surfaces & ink
Hero — dark tones
Feedback
Skill accents
Typography
Three families with clear jobs: Fraunces for expressive serif headlines, Manrope for readable body copy, and Inconsolata for the monospaced display and technical labels.
Design & Build
Aa Bb Cc 0123456789
- Family
- Fraunces
- Weights
- 400 · 500 · 600 + italic
- Token
- --font-serif
- Utility
- font-serif
- Usage
- Page titles, section headings
Clear, modern text
Aa Bb Cc 0123456789
- Family
- Manrope
- Weights
- 500 · 600 · 700
- Token
- --font-manrope
- Utility
- font-sans (default)
- Usage
- Body copy, UI labels
CREATIVE_DEV
Aa Bb Cc 0123456789
- Family
- Inconsolata
- Weights
- 700
- Token
- --font-display
- Utility
- font-display
- Usage
- Hero heading, mono values
Type Scale
The root font size is fluid — it scales with the viewport — so every rem-based step below flexes between mobile and desktop while keeping the same rhythm.
Creative developer
Services & work
A supporting paragraph that introduces a section with a calm, readable rhythm.
Standard body copy used across cards, case studies, and the blog for comfortable reading.
Section label
Materials & Radii
Frosted-glass surfaces and elevated cards give depth on the flat cream background. Corners share three consistent radii.
Surfaces
Radii
Control
4px
Card
8px
Pill
full
Motion & Sound
Motion runs on one signature easing curve for a consistent feel, and honours reduced-motion. Subtle interface sounds confirm key actions — try them below, and toggle them any time from the footer.
Signature easing
Interface sounds