StudioDDC Web Design System

A minimal, accessible, performance-conscious Web Design System built with plain HTML, CSS, and Vanilla JavaScript. No build process, no frameworks, no external dependencies.

Professional Description

This repository documents and demonstrates the Visual Identity and Frontend component standards used across StudioDDC projects: Design Tokens, Typography, Layout, Responsive Components, and Accessibility patterns, implemented as working code rather than static mockups.

Purpose

Graphic Design and Frontend Development are treated as a single, connected discipline in this system. Every visual decision — color, spacing, type scale, radius, elevation — is expressed as a reusable Design Token, and every component is built on Semantic HTML with Accessibility considered from the start rather than added afterward.

Key Features

• Token-based Design System (Color, Typography, Spacing, Radius, Shadow, Motion)
• Responsive Grid and Layout utilities
• Accessible Components: Navigation, Buttons, Forms, Cards
• Visible Focus States for keyboard navigation
• Semantic HTML throughout, including a Skip Link and landmark regions
• Reduced-motion support via prefers-reduced-motion
• Neutral, non-copyrighted placeholder graphics
• Zero external dependencies and zero build step

Technical Approach

• Design Tokens are defined once as CSS Custom Properties in css/tokens.css and consumed everywhere else, so visual changes propagate from a single source.
• Base Styles in css/base.css establish resets, typographic defaults, and accessibility foundations such as focus rings and a skip link.
• Components in css/components.css follow a consistent, low-specificity naming convention (.block__element, .block--modifier).
• JavaScript in js/main.js is intentionally minimal: navigation state on scroll and a small accessible form-validation demonstration, with no external libraries.
• Performance is treated as a design constraint: no icon fonts, no unused CSS frameworks, and no client-side dependencies to download or parse.

Requirements

No build tools, package manager, or server-side dependencies are required. A modern browser is sufficient.

Usage

Open index.html directly in a browser, or serve the directory with any static file server, for example:

npx serve .

or, using Python:

python -m http.server 8000

Then visit http://localhost:8000.

Project Structure

studioddc-web-design-system/
  index.html          Component showcase and living documentation
  css/
    tokens.css         Design Tokens (color, type, spacing, radius, shadow, motion)
    base.css           Reset and accessibility foundations
    components.css     Reusable component styles
  js/
    main.js             Navigation state and form validation demo
  assets/
    placeholder.svg     Neutral, original placeholder graphic
  docs/
    design-tokens.md    Design Token reference and extension guidelines
  LICENSE
  .gitignore

Security / Safety Notes

This is a static, dependency-free front end. It loads no third-party scripts, sets no cookies, and includes no analytics or tracking of any kind. The demonstration form performs client-side validation only and does not transmit or store data.

Professional Context

This Design System reflects the visual and Frontend standards applied by StudioDDC (https://studioddc.com) across client projects, and reflects the Web Development and Graphic Design approach of Didac Soria (https://didacsoria.com): technical implementation and visual design treated as one connected discipline rather than separate concerns.

License

Released under the MIT License. See LICENSE for details.