{"id":26714270,"url":"https://github.com/layogtima/mono","last_synced_at":"2025-06-25T02:33:37.008Z","repository":{"id":284441359,"uuid":"954952518","full_name":"layogtima/mono","owner":"layogtima","description":"Exploring the boundaries of web design with only typography, black, white, and shades of gray in between.","archived":false,"fork":false,"pushed_at":"2025-03-25T22:51:34.000Z","size":107,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-25T23:25:35.507Z","etag":null,"topics":["black","clean","css","design","design-system","html","minimal","tailwind","tailwind-css-template","tailwindcss","typography","white"],"latest_commit_sha":null,"homepage":"https://mono.layogtima.com/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/layogtima.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-25T21:51:47.000Z","updated_at":"2025-03-25T22:51:38.000Z","dependencies_parsed_at":"2025-03-25T23:25:41.761Z","dependency_job_id":"544b7b6b-bd93-469f-bf16-7be9168b39bf","html_url":"https://github.com/layogtima/mono","commit_stats":null,"previous_names":["layogtima/mono"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/layogtima%2Fmono","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/layogtima%2Fmono/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/layogtima%2Fmono/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/layogtima%2Fmono/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/layogtima","download_url":"https://codeload.github.com/layogtima/mono/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245850358,"owners_count":20682647,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["black","clean","css","design","design-system","html","minimal","tailwind","tailwind-css-template","tailwindcss","typography","white"],"created_at":"2025-03-27T13:18:58.737Z","updated_at":"2025-03-27T13:18:59.216Z","avatar_url":"https://github.com/layogtima.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MONO\n\n![Minimalist design system](https://mono.layogtima.com/images/screenshot.png)\n\n## What is MONO?\n\nMONO is a stripped-down design system that embraces the power of black, white, and the shades between. It's about removing color as a distraction to focus on what really matters: solid design fundamentals.\n\nThink of it as design on hard mode—if it works in monochrome, it'll work anywhere.\n\n\u003e \"Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.\" — Antoine de Saint-Exupéry\n\n## Core Principles\n\n### Reduction\n\nStrip away the non-essential. Color, decoration, complexity—gone.\n\n### Refinement\n\nPerfect what remains: typography, spacing, and proportion.\n\n### Rhythm\n\nCreate patterns and relationships with limited elements.\n\n### Reaction\n\nTest how users respond. Does it communicate? Does it connect?\n\n## Key Components\n\n- **Typography**: One font (Space Mono) expressing everything from whispers to shouts\n- **Layout**: Grid systems that prove constraints breed creativity\n- **Gallery**: Monochromatic marvels showing the system in action\n- **Philosophy**: The thinking behind this deliberate limitation\n\n## Quick Start\n\n```bash\ngit clone https://github.com/layogtima/mono.git\ncd mono\n# Open any HTML file in your browser\n```\n\n### Basic Template\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003ctitle\u003eMONO Project\u003c/title\u003e\n\n    \u003cscript src=\"https://cdn.tailwindcss.com\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n      tailwind.config = {\n        theme: {\n          extend: {\n            fontFamily: {\n              mono: [\"Space Mono\", \"monospace\"],\n            },\n          },\n        },\n      };\n    \u003c/script\u003e\n    \u003cstyle\u003e\n      @import url(\"https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700\u0026display=swap\");\n      * {\n        font-family: \"Space Mono\", monospace;\n      }\n    \u003c/style\u003e\n  \u003c/head\u003e\n  \u003cbody class=\"bg-white text-black min-h-screen\"\u003e\n    \u003c!-- Your design genius goes here --\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Design Elements\n\n### Typography\n\nSpace Mono used in varying:\n\n- Sizes (from microscopic to massive)\n- Weights (light to bold)\n- Spacing (tight to expansive)\n- Styles (normal, italic, underlined)\n- Effects (shadows, outlines, gradients)\n\n### Layout\n\n- Deliberate grid systems\n- Asymmetrical compositions\n- Rotated elements\n- Pattern-based designs\n\n### Visual Techniques\n\n- Monochromatic palettes\n- Strategic negative space\n- Text as visual element\n- Geometric compositions\n\n## Examples Included\n\n- `index.html` - Home page\n- `typography.html` - Font explorations\n- `layout.html` - Spatial compositions\n- `gallery.html` - System in action\n- `about.html` - Design philosophy\n\n## MONO in the Wild\n\nCheck out these projects already embracing the monochromatic revolution:\n\n### [layogtima.com](https://layogtima.com)\n\nAmit's portfolio showcasing UI/UX design, hardware consulting, and flow artistry. Minimal and focused, just like its creator's attention span.\n\n### [sm0.dev](https://www.sm0.dev/)\n\nShreshth's corner of the internet—web development, visualizations, and philosophical musings, all without the distraction of color.\n\n### [seeds.layogtima.com](https://seeds.layogtima.com/)\n\nA personal guide to growing food in Bengaluru. Proving that even plants, which literally exist to provide color in nature, can be documented in black and white.\n\n## Contribute\n\nGot MONOCHROME magic to share?\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/monochrome-magic`)\n3. Commit your changes (`git commit -m 'Add my B\u0026W brilliance'`)\n4. Push to the branch (`git push origin feature/monochrome-magic`)\n5. Open a Pull Request\n\n## License\n\nGPL v3. Share it, improve it, build with it.\n\n## Credits\n\n- Created by [Amit](https://layogtima.com)\n- Inspired by minimalism and constraint-driven design\n- Built with [Tailwind CSS](https://tailwindcss.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flayogtima%2Fmono","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flayogtima%2Fmono","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flayogtima%2Fmono/lists"}