DismonComponent / Dismon.me Design System & Components Library

This project is a premium, flat matte UI components library consisting of 150 prebuilt components. It is designed strictly around the visual guidelines of the DismonComponent/UX Manual and the minimalist, high-end Swiss technical dossier aesthetic of dismon.me.

All components are self-contained and ready to use in any web project by simply copying the HTML/CSS/JS snippets. A live interactive showcase page is included and is fully configured to be deployed on GitHub Pages.

🎨 Visual Tone & Aesthetic Pillars

• The Slate-Ink Palette: Deep charcoal background colors (#0A0B0D, #111317, #0C0D10) that reduce eye strain, paired with high-contrast off-white typography (#F3F4F6).
• Flat Matte Surfaces: No saturated gradients, neumorphic shadows, or neon highlights. Transitions are clean and driven by solid background shifts and border-color states.
• Card-Less Layouts (No "Card Soup"): Nesting border containers inside each other is avoided. Instead, sections sit flat and rely on spacing, headers, or thin dividers.
• Subtle Noise Grain Overlay: A microscopic CSS background noise texture overlay is applied to give a technical, paper-like feel.
• Outline Status Iconography: Outline indicators are used for system statuses (Success: CheckCircle, Warning: Info, Danger: XCircle, Loading: Spinner).
• Font Pairing:
  • Headings/Interface: Plus Jakarta Sans
  • Accents/Quotes: Playfair Display (Italic)
  • Console/Code: Geist Mono

📂 Project Structure

├── index.html            # Main showcase landing page (compatible with GitHub Pages)
├── components.json       # Generated metadata JSON describing all 150 components
├── generate_json.py      # Python script to regenerate components.json metadata
├── generate_all.py       # Python script containing base component layout template
├── generate_*.py         # Python category generator scripts (buttons, inputs, etc.)
└── html/                 # 150 components separated into category directories
    ├── buttons/          # 20 Button & Link components
    ├── inputs/           # 20 Form & Input components
    ├── containers/       # 20 Container & Layout components
    ├── navigation/       # 20 Navigation & Tab components
    ├── feedback/         # 20 Alert, Toast & Indicator components
    ├── data-display/     # 25 Table, List, Code & Statistic components
    └── overlays/         # 25 Dialog, Modal, Tooltip & Popover components

Each component file inside html/ is fully self-contained, meaning it contains:

1. HTML markup for structure.
2. Embedded CSS scoped to that component (utilizing the central design system variables).
3. JavaScript (if any) required for interactive behaviors (toggles, accordions, dynamic updates).

🚀 Running Locally & Deploying

1. Preview Locally

Since the showcase page fetches component contents asynchronously via the browser's fetch() API, opening index.html directly from your local filesystem (file://) will trigger CORS errors.

To run it locally, start a local HTTP server:

# Using Python
python3 -m http.server 8000

Then visit http://localhost:8000 in your web browser.

2. Deploy to GitHub Pages

To host this library on GitHub Pages:

1. Initialize a Git repository:

   git init
   git add .
   git commit -m "feat: initial commit of 150 DismonComponent components"

2. Push it to your GitHub repository.
3. Navigate to your repository Settings -> Pages.
4. Select main (or master) branch as the source and click Save.
5. Your showcase page will be live at https://<your-username>.github.io/<your-repo-name>/.

🔧 Component Category Breakdown (150 Total)

1. Buttons & Links (html/buttons/ - 20 items): Primary, Secondary, Outline, Muted, Icons, Loading, Pill, Toggle, Groups, Underlined, and Custom Arrow Links.
2. Inputs & Forms (html/inputs/ - 20 items): Inputs, Textareas, Custom Selects, Checkboxes, Radios, Switch Toggles, Sliders, OTP fields, Combobox Tags, Password visibility toggles, and Error states.
3. Containers & Layout (html/containers/ - 20 items): Panels, Headers, Footers, Split views, Dossiers, Grids, Custom scrollable areas, Accordions, and responsive layout wrappers.
4. Navigation (html/navigation/ - 20 items): Sidebar lists, Tabs, Breadcrumbs, Pagination, Steppers, Trees, Segmented controls, Command palettes, and Floating docks.
5. Feedback & Indicators (html/feedback/ - 20 items): Outline Status indicators, Progress bars, Alerts (Success, Info, Warning, Danger), Toast notifications, Skeleton loaders, and Empty states.
6. Data Display & Lists (html/data-display/ - 25 items): Syntax code blocks, Inline blocks, Key-Value tables, Sortable tables, Timelines, Metrics, Tag lists, Price cards, and Activity feeds.
7. Overlays & Modals (html/overlays/ - 25 items): Centered dialogs, confirmation dialogs, Side Drawers, Tooltips (Top, Right, Bottom, Left), Dropdowns, Context menus, Banners, and Command palettes.

🛠️ How to Use Components in Your Project

We have compiled all 150 components into browser-native Web Components using custom elements and Shadow DOM. This allows you to use them like tags in React, Vue, or plain HTML without any build steps.

Step 1: Install Locally (via CLI)

Run the CLI installer from the terminal to copy the static library files and theme styles directly into your project:

1. Interactive Mode (Choose your folder path interactively):

   npx dcjscpt

2. Direct Mode (Installs to ./dismon-component by default or your target path):

   npx dcjscpt install ./your-target-directory

This will copy:

• dc-ui.js: Unified Custom Elements library.
• dc-theme.css: Theme stylesheet containing the matte graphite colors, Outfit fonts, and default 6px/12px border-radius values.

Step 2: Integration

1. Include the CSS and JS in your project's HTML:

   <link rel="stylesheet" href="dismon-component/dc-theme.css">
   <script src="dismon-component/dc-ui.js"></script>

2. Use the custom elements directly as HTML tags:

   <dc-btn-primary>Deploy Instance</dc-btn-primary>
   <dc-input-text placeholder="Enter server name..."></dc-input-text>
   <dc-status-success>Connection Active</dc-status-success>

3. Web components inherit style values from your global CSS variables. Define the visual tokens in your stylesheet:

   :root {
       --bg-primary: #0a0b0d;
       --bg-panel: #111317;
       --bg-hover: #1b1e24;
       --bg-tertiary: #181b20;
       --bg-input: #0c0d10;
       --border-muted: rgba(255, 255, 255, 0.05);
       --border-strong: rgba(255, 255, 255, 0.12);
       --text-primary: #f3f4f6;
       --text-secondary: #9ca3af;
       --text-muted: #6b7280;
       --success: #10b981;
       --warning: #f59e0b;
       --danger: #ef4444;
       --font-sans: 'Outfit', 'Plus Jakarta Sans', sans-serif;
       --font-mono: 'Geist Mono', monospace;
   }