Design system
Visual language reference for avigailbahat.com
Colours
#0a0a0a
Black
Primary text, hover fill, footer bg
#555555
Gray
All secondary text: nav, labels, years, body copy
#ffffff
White
Page background, text on dark
#f5f5f5
Surface
Sticky title bg, image placeholder
#ebebeb
Border
All hairline borders (--border)
#22c55e
Available
Availability dot only
Typography
1
AI Credits
2
Design system
3
Senior UX designer.
4
Transparent AI usage billing across the platform.
5
Body copy — project content, about, contact, work rows.
6
FEATURED WORK · EXPERIENCE
7
Nav links, years, tags, meta
Spacing
--sp-1
4px
Tight gaps
--sp-2
8px
Icon-text gaps
--sp-3
12px
List row padding
--sp-4
16px
Component internal
--sp-5
24px
Section gaps
--sp-6
32px
Page horizontal padding
--sp-7
48px
Section vertical spacing
--sp-8
64px
Footer padding, large gaps
Components
Work item
01
AI Credits Wallet
End-to-end billing transparency for AI usage across the platform
developer
2026
↗
Filter buttons
Pill button (mobile view)
More CTA link
Hamburger (mobile)
Project nav buttons (prev/next)
Lightbox controls
Nav links
Footer tags
Section label
Section label
CSS variable reference
:root {
/* Accent */
--ac: #0a0a0a;
/* Borders */
--border: #ebebeb;
/* Spacing */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
}
Changelog
2 Jun 2026
Project page images now use site padding (clamp(40px, 20%, 240px)) — content aligned with header
2 Jun 2026
Prev/next project nav buttons changed to blue (#2563eb)
2 Jun 2026
All work section label removed — filters shown directly. All filter renamed All projects
2 Jun 2026
Work nav link added to desktop header
2 Jun 2026
Featured grid no longer bleeds on mobile — negative margins reset to 0 at ≤960px
2 Jun 2026
Type scale numbered (1–12) so styles can be referenced by number
2 Jun 2026
feat-title merged with proj-title: 42px/800 → 64px/700/−0.03em/Plus Jakarta Sans
2 Jun 2026
proj-content h2 merged with inner-content h1: 28px/600 → 32px/700/−0.02em/Inter — type scale consolidated from 14 to 12 steps
2 Jun 2026
Featured card WordArt hover: brighter luminous gradients with 5-step coloured depth shadows — blue (card 1), amber (card 2), violet (card 3), emerald (card 4)
2 Jun 2026
All-work rows: animated gradient title on hover ("Gradient Flow") — category-coloured accent pair flows across the title; number and arrow pick up flat accent; respects prefers-reduced-motion
2 Jun 2026
Row accordion changed from max-height to opacity animation — prevents footer flash on page load
2 Jun 2026
Homepage content padding unified to clamp(40px, 20%, 240px) — aligns header, content, and footer left edges
1 Jun 2026
Design system: colour swatches in 6-column grid; type scale shows where each style appears
1 Jun 2026
feat-title bumped to 42px / weight 800 (Plus Jakarta Sans)
1 Jun 2026
All body and secondary text unified to #555 — removed #444 and #121212
1 Jun 2026
Type scale consolidated: footer-statement 36px → 32px / Inter; row-title 20px/500 → 18px/400; CV text 15px → 16px; proj-subtitle weight 400 → 500, color #555 → #0a0a0a
1 Jun 2026
Design system type scale rows show inline color swatch and hex value
1 Jun 2026
Design system swatches and type scale updated to match actual site tokens
1 Jun 2026
Removed Wix from project page metadata
1 Jun 2026
Project page layout: 3-column grid with sticky gutters for prev/next navigation
1 Jun 2026
Sticky condensing title block on project pages (ptb-inner)
1 Jun 2026
Tabler icons CDN moved to project pages only
1 Jun 2026
Row hover: subtitle fades in, no title movement, overflow fixed
1 Jun 2026
Typography: Plus Jakarta Sans for titles, Inter for all UI and body
1 Jun 2026
Gray token consolidated to #555 (was #888, then #555)
1 Jun 2026
Horizontal padding changed to clamp(40px, 20%, 240px) sitewide
Last built: 2 June 2026