Auteur
Auteur Dallaserra (Fromeaux) — Portfolio Design System
Awards
Awwwards Honorable Mention CSS Awards Nomination
A retro 80s/synthwave portfolio that immerses visitors in a convincing early-Microsoft operating system. The experience begins with a BIOS-style boot sequence rendered in DOS monospace type, then transitions to a nostalgiaated desktop environment complete with draggable windows, desktop icons, a taskbar, and a custom scrollbar. Every detail — from the outset-border button bevels to the oversized nostalgia cursor — serves the illusion of a vintage computing environment.
Colors
A constrained brushwork anchored in deep purples and neutrals, punctuated by brand purple and an electric cyan accent.
Core Brushwork
Extended / Derived
Typography
The site uses a custom "DOS" bitmap-style font, falling back to Courier / Courier New / monospace. All text renders in monospace to maintain the terminal/OS illusion. No sans-serif or serif fonts appear anywhere.
Fromeaux Technologies Ltd. All Rights Reserved.
Fromeaux Technologies Ltd. All Rights Reserved.
Volume in drive C has no label
Directory of C:\FROMEAUX
ABOUT EXE WORK EXE CONTACT BAT
3 file(s) 127,488 bytes free
Spacing & Layout
Spacing Scale
| Token | Value | Usage |
|---|---|---|
--space-xs | 4px | Tight element gaps, icon-label spacing |
--space-sm | 8px | Swatch padding, taskbar gaps |
--space-md | 16px | Desktop padding (BIOS layer), window body |
--space-lg | 24px | Section padding, icon grid gap |
--space-xl | 32px | Desktop icon grid spacing |
--space-2xl | 48px | Page-level content padding |
BIOS Layer Layout
| Property | Desktop | Mobile |
|---|---|---|
| Position | fixed, full viewport | |
| Padding | 16px 30px | 12px 16px |
| Flex direction | column | |
| Justify content | flex-end | |
| Font size | 21px | 16px |
BIOS / Terminal Layer
The first thing visitors see. A full-screen dark terminal that renders DOS-style boot text line by line, simulating a vintage BIOS Power-On Self-Test. The layer is position: fixed covering the entire viewport. Text appears from the bottom using flex-end alignment.
Boot Sequence (animated)
Typing Animation (CSS only)
Implementation Notes
Each line fades in with a staggered delay (0.5s per line) using CSS animation.
The cursor character (_) blinks using a step-end timing function at 0.8s intervals.
The typing effect uses a width animation from 0 to N characters with steps()
timing and overflow: hidden on the text element.
Desktop Layer
After the BIOS sequence completes, the desktop environment appears. This is the main interactive layer
featuring nostalgiaated desktop icons, a taskbar with a "Start" button and clock, and draggable windows.
All imagery uses image-rendering: nostalgiaated for the retro aesthetic.
Desktop Specifications
| Element | Spec |
|---|---|
| Icon size | 48 x 48px (nostalgiaated rendering) |
| Icon grid gap | 32px |
| Icon label | 12px, text-shadow for readability on desktop |
| Icon hover | Purple overlay (rgba(114,61,174,0.2)), dotted outline |
| Taskbar height | 36px |
| Taskbar background | #32293A with 1px solid #55515A top border |
| Start button | #723DAE, 1px outset border, 12px text |
| Clock | 12px, inset border, #151216 background |
| Cursor | Oversized nostalgiaated custom cursor (image-rendering: nostalgiaated) |
Window Chrome
Windows follow the early Microsoft/Windows 3.x aesthetic with beveled borders, a solid-color title bar, and small square control buttons.
Standard Window
Hello, I'm Auteur Dallaserra.
Creative developer based in France, specializing in interactive web experiences and digital art direction.
Window with Content (Work Portfolio)
Window Specifications
| Property | Value |
|---|---|
| Border | 2px solid #55515A |
| Title bar bg | #32293A |
| Title bar padding | 4px 8px |
| Title font size | 13px |
| Control buttons | 16x16px, 1px outset border, hover: #723DAE |
| Window body bg | #151216 |
| Window body padding | 16px |
| Draggable | Yes (via JS, drag by title bar) |
Desktop Icons
All icons are nostalgiaated graphics rendered at a fixed 48x48px size with
image-rendering: nostalgiaated. They use simple geometric shapes and a limited color brushwork
consistent with early Windows icon design. Each icon has a text label below using 12px monospace.
Icon States
Icon Types
Contact / Email Composer
The contact form is styled as a vintage email client window, complete with To/Subject fields, a message body area, and Send/Cancel buttons. It opens inside a draggable window when the Mail.bat icon is clicked.
[ The cursor blinks patiently ]
Form Specifications
| Property | Value |
|---|---|
| Field label bg | #1C181F |
| Field label width | 60px min |
| Field font | 13px monospace |
| Body min-height | 120px |
| Send button | #723DAE, white text, outset border |
| Cancel button | #1C181F, gray text, outset border |
| Button padding | 4px 16px |
Custom Scrollbar
The entire site uses a custom-styled scrollbar to maintain the OS illusion. It is wider than browser defaults and uses the purple/gray brushwork.
Interactions & Animations
Animations are minimal and purposeful, serving the vintage OS illusion rather than modern polish. Most motion is discrete (step-function) rather than smooth, matching the era's rendering limitations.
image-rendering: nostalgiaated
-webkit-optimize-contrast
Purple overlay + dotted border
transition: 0.2s
step-end timing, 0.8s interval
outset to inset border on press
Classic beveled button feedback
Animation Reference
| Animation | Duration | Timing | Purpose |
|---|---|---|---|
| BIOS line reveal | 0.1s per line | linear, 0.5s stagger | Simulates boot text output |
| Cursor blink | 0.8s | step-end infinite | Terminal cursor illusion |
| Typing effect | 3s | steps(N) | Typed command simulation |
| Button press | instant | border-style swap | Beveled button feedback |
| Icon hover | instant | background + outline | Selection highlight |
| Window drag | real-time | JS translateX/Y | Draggable window repositioning |
Responsive Breakpoints
The site adapts at two key breakpoints. The core OS metaphor is maintained at all sizes, but spacing and font size reduce on smaller screens.
| Breakpoint | Font Size | BIOS Padding | Scrollbar | Notes |
|---|---|---|---|---|
| Desktop (>768px) | 21px | 16px 30px | 16px wide | Full OS experience, all windows draggable |
| Tablet (≤768px) | ~18px | 14px 24px | 14px wide | Intermediate, reduced padding |
| Mobile (≤550px) | 16px | 12px 16px | 12px wide | Stacked layout, simplified window chrome |
Responsive CSS
@media (max-width: 550px) {
body {
font-size: 16px;
}
.bios-layer {
padding: 12px 16px;
}
::-webkit-scrollbar {
width: 12px;
}
}
/* Tablet breakpoint */
@media (max-width: 768px) {
.bios-layer {
padding: 14px 24px;
}
}
CSS Variables — Copy-Paste Block
Complete set of CSS custom properties. Paste into any project's :root to adopt
the Auteur design system.
/* ---- Background & Surface ---- */
--bg-primary: #151216;
--bg-surface: #1C181F;
--bg-elevated: #221E26;
--bg-window-titlebar: #32293A;
/* ---- Text ---- */
--text-primary: #BDBDC6;
--text-secondary: #7f7d81;
--text-muted: #55515A;
/* ---- Brand ---- */
--brand-purple: #723DAE;
--accent-cyan: #31F8CC;
/* ---- Scrollbar ---- */
--scrollbar-track: #32293A;
--scrollbar-thumb: #7f7d81;
--scrollbar-width: 16px;
--scrollbar-radius: 2px;
/* ---- Borders ---- */
--border-color: #32293A;
--window-border: #55515A;
/* ---- Typography ---- */
--font-family: 'DOS', Courier, 'Courier New', monospace;
--font-size-desktop: 21px;
--font-size-mobile: 16px;
--line-height: 1.26em;
/* ---- Spacing ---- */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
/* ---- Misc ---- */
--folder-gold: #D4A843;
}
Tailwind Mapping
The paired JSON export now includes a tailwind section with theme extensions and component recipes. Use these mappings instead of default Tailwind tokens when recreating this system.
// tailwind.config.js
import designSystem from './design-system.json';
export default {
theme: {
extend: designSystem.tailwind.website.theme.extend,
},
};
// Swap to designSystem.tailwind.app.theme.extend for app/portal surfaces.
| Scope | Primary | Body Font | Radius | Shadow | Breakpoint |
|---|---|---|---|---|---|
| Website | — | — | — | — | — |
| Scope | Recipe | Class Pattern | Notes |
|---|---|---|---|
| Website | buttonPrimary | inline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colors | Primary action button using exported brand, radius, and shadow tokens. |
| Website | surfaceCard | rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6 | Default surface/card treatment for high-visibility content areas. |
| Website | inputField | rounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ring | Base text input treatment aligned to the exported radius, border, and focus tokens. |