[00] DESIGN SYSTEM

v1.0

Abdenour Benkorich Styleguide

Monochrome design system built strictly with black, white, neutral greys, fluid typography, and the single green availability dot.

Theme:

[01] COLOR TOKENS & CONTRAST

Semantic Color Palette

Tokens adapt automatically via [data-theme] and meet WCAG 2.2 AA contrast standards.

--bg

#0A0A0A / #FAFAFA

--surface

#111111 / #FFFFFF

--surface-2

#171717 / #F2F2F2

--border

#262626 / #E5E5E5

--invert-bg

#F5F5F5 / #0A0A0A

--status

#3DDC84 / #16A34A

Text on Background

Primary Text (14.2:1)

✓ Passes WCAG AAA

Muted on Background

Muted Text (6.8:1)

✓ Passes WCAG AA

Inverted Element

Button Text (14.2:1)

✓ Passes WCAG AAA

[02] TYPOGRAPHY SCALE

Type Scale & Font Families

Display H1 · clamp(2.5rem, 6vw, 5rem) · Geist + Instrument Serif

I build with AI, teach it, and ship products.

Headline H2 · clamp(2rem, 4vw, 3.25rem)

01 Selected work & case studies

Subheadline H3 · clamp(1.5rem, 3vw, 2.25rem)

Virexa — Healthcare Startup Platform

Body Text · 1rem / 1.7 · max 65ch

I'm Abdenour Benkorich: AI instructor, full-stack engineer and creator behind BenCoder (102K+ followers). Lead instructor at Everest Academy, author of the 300+ student Udemy Python course, and architect of JG SupplyNet.

Mono Label · 0.75rem / 0.12em uppercase · Geist Mono

01 // MOSTAGANEM, ALGERIA // UTC+1 // REMOTE-FRIENDLY

[03] BRAND ASSET VECTORIZATION

AB Monogram Logo (currentColor SVG)

Vectorized directly from provided assets into a single SVG file using fill="currentColor". Scales losslessly and conforms instantly to theme transitions.

Nav Size (32px)

Header Size (48px)

Card Size (64px)

Display Size (80px)

[04] BUTTON VARIANTS & SIZES

Interactive Buttons

Button Variants

Button Sizes

Rendered as Links (<a href>)

Explore Work ↓ Download CV (PDF) ↗

[05] STATUS PILL & SECTION LABELS

Metadata Indicators

Status Pill with Pulsing Green Dot

Open to AI teaching, freelance & work

Building @ JG SupplyNet

Section Labels (Numbered Mono Caps)

[01] SELECTED WORK

[02] TEACHING & CONTENT

[03] ABOUT & VALUES

[04] EXPERTISE & TOOLS

[05] EXPERIENCE & EDUCATION

[06] LET'S CONNECT

[06] TAGS & CHIPS

Tech Stack Chips

Individual Tags

Featured Project Teaching 102K+ Followers

Medium TagList

React Next.js Tailwind CSS Node.js Python Django PostgreSQL Generative AI LLMs

Small TagList

Mostaganem, DZ UTC+1 Sonatrach GP1Z Sefrone Everest Academy BenCoder (102K+)

[07] CONTAINERS & CARDS

Card Layouts (14px Radius)

Static Card

Everest Academy

"Build with AI" course on generative AI. Designed and taught a one-month hands-on generative AI course guiding students to deploy real AI-powered products.

Teaching Generative AI Hands-on

Interactive Lift Card Live Project ↗

Virexa Healthcare Platform

Full digital platform aimed at improving patients' lives through tech-driven healthcare solutions. Hover to test the 2px lift and border brighten effect.

Next.js TypeScript Healthcare Startup

[08] MOTION & ACCESSIBILITY

Reveal on Scroll Component

Smooth 12px translate + fade on scroll. Respects prefers-reduced-motion by rendering immediately with zero transition delay.

Stagger 0ms

Reveal 1

Stagger 150ms

Reveal 2

Stagger 300ms

Reveal 3