Hover me
This card uses .glass-hover — the background becomes translucent with a 12px backdrop blur on hover.
Design System
Design System
The visual grammar of the site: tokens, components, and motion.
This page documents every design decision used on eldev.fr. Each token is click-to-copy.
Foundations
The CSS tokens that define color, typography, and spacing.
Palette
Typography
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
LABEL UPPERCASE
Spacing & breakpoints
Texture
A 200×200 SVG fractalNoise grain is layered on body::before with mix-blend-mode: overlay and opacity: 0.06. Adapts to dark/light, neutralized on interactive elements via pointer-events: none.
Components
The interface elements reused across the site.
Buttons
Classes: .btn.btn-primary, .btn.btn-outline. Both carry a glow that follows the cursor inside the button. The primary variant is also magnetic: it shifts slightly toward the cursor on hover.
CTA link
Class: .cta-link. Underline slides in, the icon translates, and the link is magnetic: it leans toward the cursor on hover.
Labels & numbering
Section label
01 02 03 10
Classes: .label (tracked uppercase), .num (accent tabular digits), .card-line (30% accent bar).
Cards & glass-hover
Static card
Same layout, no glass effect — for comparison.
Class: .glass-hover. Pairs with .num + .card-line.
Toasts
Copied — --accent
Validation error
Class: .toast.visible with a .success or .error modifier. Rendered statically here for reference — in production they animate in from the right.
Responsive grids
.grid-2
01
02
.grid-3
01
02
03
.grid-4
01
02
03
04
.grid-5
01
02
03
04
05
.grid combined with .grid-2 through .grid-5. Above 1100px, .grid-5 collapses to 4 columns; under 900px everything drops to 2 columns; under 640px everything stacks to 1 column.
Inline text links
Here is a paragraph with an inline link. Used in FAQ answers, the Contact page intro, and the legal notices. On hover the underline grows more opaque — another example to show the effect.
Class: .rich-text. Adds a semi-transparent accent underline on <a> elements with text-underline-offset: 2px.
Social links
Class: .social-link. 32×32px, --text-muted at rest, --accent on hover. The --codeur and --malt variants use fill: var(--bg) for the inner glyph.
Highlight
A thoughtful craft, tangible results.
Class: .highlight. Applies color: var(--accent) and font-family: var(--font-serif) in italic, to emphasize a word inside a title.
Accordion
What services does ELDEV provide?
10 areas of expertise: web development, e-commerce, mobile apps, AI, UI/UX design, WordPress, desktop apps, hosting, maintenance, ERP consulting.
What are typical timelines?
A marketing site: 2–4 weeks. A custom application: 6–12 weeks depending on scope.
Is the source code delivered?
Yes, all source code is versioned in Git and handed over at delivery. No proprietary lock-in.
Uses native <details> / <summary>. The aria-expanded attribute is synced in JS on toggle. Icon rotates 45° when open. In production in FaqSection.astro under .faq-item / .faq-question.
Forms
Input fields used on the Contact page.
The live form uses the same styles in src/components/ContactPage.astro. Animated validation: accent check on valid (.field-valid), red pulse on error (.field-invalid). Textarea auto-resizes up to 12 lines. A pre-filled service via ?service= triggers an accent flash (.field-prefilled-flash).
Error state .field-invalid
The field gets .field-invalid and aria-invalid="true". The .field-error message is rendered below the field via aria-live="polite".
Motion
Entrance and reveal animations. Respects `prefers-reduced-motion`.
Stagger entrance .stagger
01
02
03
04
Reveal text .reveal-text
Reveal animation
Fade up fadeUp keyframes
Fade up block
Navigation
Header, footer and language switcher, present on every page. All use --glass-bg for their translucent background effect.
Header .header
Fixed at the top, translucent blurred. The hamburger menu kicks in below 768px with focus trap and keyboard close (Escape).
Footer .footer
Sticky at the bottom, exposes theme / splash cursor toggles and the language switcher.