osukaru.es Design System

Sistema de diseño para la web personal de Óscar López Carazo (Osukaru), una recreación fiel de la interfaz del Sinclair ZX Spectrum 128K +2A.

Los componentes de esta guía están escritos en Astro y son los mismos que se sirven en producción. No se usa React en la web final: todo el comportamiento interactivo se implementa con JavaScript vanilla.

Principios: 8×8 píxeles por glifo, paleta BRIGHT del Spectrum, relación de aspecto 4:3, bordes negros de 2–4 px, esquinas cuadradas, animaciones con steps() y una única unidad proporcional --u.

Colors

Spectrum BRIGHT palette. 8 canonical hues. No tints, no opacity mid-tones. --spectrum-*

BRIGHT set — primary palette
Astro
#000000
black
#0000FF
blue
#FF0000
red
#FF00FF
magenta
#00FF00
green
#00FFFF
cyan
#FFFF00
yellow
#FFFFFF
white
DIM set — secondary (#CD variants)
Astro
#0000CD
blue-dim
#CD0000
red-dim
#CD00CD
magenta-dim
#00CD00
green-dim
#00CDCD
cyan-dim
#CDCD00
yellow-dim
#CDCDCD
white-dim
Chassis neutrals
Astro
#C0C0C0
chassis-silver
#1A1A1A
chassis-bezel
#4A4A4A
chassis-key

Typography

ZX Spectrum Expanded. 8×8 pixel glyphs. Three CSS font-family variants.

Type scale — 8px multiples
Astro
48px XL
32px LG · menu option
24px MD · body
20px SM
16px XS · footer
--fs-xl: 48px --fs-lg: 32px /* menu option */ --fs-md: 24px /* body */ --fs-sm: 20px --fs-xs: 16px /* footer / copyright */

Spacing & Grid

8px atomic grid. Borders: 2px or 4px solid black only.

Spacing scale
Astro
96px
64px
48px
32px
24px
16px
8px

Motion

steps(N, end) only. No cubic-bezier. --dur-blink: 0.5s --dur-load: 2.4s

Blink cursor
Astro
CARGANDO_

Iconography

Pixelart PNGs for identity, Icons8 SVGs for utility, Unicode for keyboard hints.

Pixelart PNGs
Astro
star-pixelart.png
favicon.png
Icons8 SVGs
Astro
github.svg
gmail.svg
linkedin.svg
web.svg
x.svg
Unicode keyboard glyphs
Astro
↑ ↓ ← → ©

Page Title Bar

Inverted black bar + white text + color bar PNG. Positioned at the bottom of the 4:3 viewport.

PageTitleBar — Experiencia
Astro
Experiencia
<PageTitleBar>Experiencia</PageTitleBar>
PageTitleBar — Conocimientos
Astro
Conocimientos
Prop Type Default Description
children required any — Page title text.

Experience Card Carousel

Two-column card with company logo. Grid: 0.9fr | 2.1fr. Fixed height for carousel uniformity.

ExperienceCarouselCard — Dokify
Astro
Dokify
2014 — Act.
PHP Backend Developer

Desarrollo de una plataforma web que ofrece soluciones para la coordinación de actividades empresariales, homologación de proveedores, mantenimientos preventivos, etc.

<ExperienceCarouselCard company="Dokify" position="PHP Backend Developer" startDate="2014" endDate="Act." description="..." />
ExperienceCarouselCard — Acilia
Astro
Acilia
2012 — 2014
PHP Backend Developer

Desarrollo de las webs de FOX y National Geographic de más de 30 países.

Interactive carousel — keyboard & arrows
Astro
Dokify
2014 — Act.
PHP Backend Developer

Desarrollo de una plataforma web que ofrece soluciones para la coordinación de actividades empresariales, homologación de proveedores, mantenimientos preventivos, etc.

Acilia
2012 — 2014
PHP Backend Developer

Desarrollo de las webs de FOX y National Geographic de más de 30 países.

Blaffin
2012 — 2012
PHP Backend Developer

Desarrollo de red social para compartir vídeos e imágenes con retos, competiciones, rankings, etc.

Usa ← →, arrastra o los triángulos
/* Focus the carousel and use ← →, or click the triangle arrows. */
Prop Type Default Description
company required string — Company name.
logo required string — Logo image URL.
position required string — Job position.
startDate required string — Start year.
endDate required string — End year or "Act.".
description required string — Role description.

Knowledge Card Carousel

Centered card: category name, technologies, pixelart star rating (1-10).

KnowledgeCarouselCard — BACKEND
Astro
BACKEND
PHP, Symfony, TypeScript
<KnowledgeCarouselCard category="BACKEND" technologies={['PHP','Symfony','Typescript']} rating={10} />
KnowledgeCarouselCard — FRONTEND
Astro
FRONTEND
Astro, React, CSS
Prop Type Default Description
category required string — Skill category, e.g. "BACKEND".
technologies required string[] — List of technologies.
rating required number — Star rating out of 10.

Project Card Carousel

Two-column card with logo + link buttons (WEB, GITHUB, STORYBOOK). Blue bordered buttons. No rounded corners.

ProjectCarouselCard — con enlaces
Astro
Osukaru.es
WEB GITHUB STORYBOOK

Mi web personal con diseño retro inspirado en el Sinclair Spectrum ZX 128K +2A. Desarrollada con Astro, TypeScript y CSS personalizado.

<ProjectCarouselCard name="Osukaru.es" url="https://www.osukaru.es" githubUrl="https://github.com/Osukaru" storybookUrl="https://www.osukaru.es/storybook" />
ProjectCarouselCard — sin enlaces
Astro
Osukaru.es

Mi web personal con diseño retro inspirado en el Sinclair Spectrum ZX 128K +2A.

Prop Type Default Description
name required string — Project name.
logo required string — Project logo URL.
description required string — Project description.
url string — Live site URL.
storeUrl string — App store URL (TIENDA).
playUrl string — Internal link to play it, same tab (JUGAR).
githubUrl string — Repository URL.
storybookUrl string — Storybook URL.

Contact

Grid rows: icon | label | value. Cyan hover. Used in contact page alongside avatar + QR.

ContactList
Astro
Email zepolracso@gmail.com LinkedIn linkedin.com/in/osukaru GitHub github.com/Osukaru X @Osukaru80
<ContactList items={contactItems} />
Prop Type Default Description
items required { icon, label, value, href }[] — Contact rows.

Viewport (4:3)

All content lives inside a 4:3 viewport with black letterbox. 3-row CSS grid; content in middle row. --u unit for proportional scaling.

Viewport — loading default
Astro
CARGANDO _
<Viewport loading variant="default" />
Prop Type Default Description
loading boolean false Show the loading screen overlay.
label string "CARGANDO" Loading label text.
variant "default" | "alt" "default" Stripe color variant.

Button

4 states: default, inverse, selected, disabled. Cyan focus ring (3px). No rounded corners.

Button states
Astro
<Button inverse selected disabled/>
Prop Type Default Description
type "button" | "submit" "button" Button type attribute.
inverse boolean false Black background, white text.
selected boolean false Cyan background.
disabled boolean false Reduced opacity, not interactive.

Star Rating

Pixelart star PNGs. 1-10 scale. Dim stars: filter: brightness(.25) saturate(0).

StarRating — values 3 · 6 · 10
Astro
3/10
6/10
10/10
<StarRating value={8} max={10} />
Prop Type Default Description
value required number — Number of active stars.
max number 10 Total number of stars.

Chips

Technology labels. .zx-chip: default. .zx-chip.k: keyword (black bg, yellow text).

Default chips
Astro
ReactAstroDocker
Keyword chips .k
Astro
PHPSymfonyTypeScript

Color Bar

Authentic 380×72 PNG. Stepped diagonal. Rendered image-rendering: pixelated. Sized by height.

ColorBar — default height
Astro
<ColorBar height="36px" />
ColorBar — small and large
Astro
Prop Type Default Description
height string — Optional inline height override. Default fills wrapper via CSS.
src string "/assets/color-bar.png" Path to the color bar PNG.

Loading Screens

Two variants with oscillating linear stripe animation + "CARGANDO_" blink cursor. Audio synced.

LoadingScreen — red/cyan
Astro
CARGANDO_
<LoadingScreen label="CARGANDO" />
LoadingScreenAlt — blue/yellow
Astro
CARGANDO_
<LoadingScreenAlt />
Prop Type Default Description
label string "CARGANDO" Loading label text.
audioSrc string "/assets/spectrum-loading.mp3" Audio file path.
variant "default" | "alt" "default" Stripe color variant.

Keyboard Hints

Inline keyboard instruction row.

KeyboardHints
Astro
↑↓ desplazar ENTER seleccionar
<KeyboardHints hints={hints} />
Prop Type Default Description
hints required { keys: string[]; label: string }[] — Keyboard hint groups.

Skill Row

Category + technology chips + star rating. Used in compact knowledge lists.

SkillRow
Astro
FRONTEND
AstroReactTypeScript
8/10
BACKEND
PHPSymfony
9/10
<SkillRow category="FRONTEND" technologies={['Astro','React']} rating={8} />
Prop Type Default Description
category required string — Category label.
technologies required string[] — Technology chips.
rating required number — Rating out of 10.

Carousel Arrows

Triangle arrows for carousels. Disabled state dims the arrow.

CarouselArrows
Astro
<CarouselArrows canPrev canNext />
Prop Type Default Description
canPrev boolean true Enable previous arrow.
canNext boolean true Enable next arrow.
target string — CSS selector of carousel to dispatch events to.