style guide draft

app/template/style-guide/README.md

@@ -0,0 +1,106 @@
+<p align="center">  
+  <a href="https://github.com/gigamaster/codemo">
+  <img src="https://github.com/gigamaster/codemo/html-css-javascript.svg" width="auto" alt="Codemo Digital Nomad Style Guide"></a>
+  <img src="http://ForTheBadge.com/images/badges/powered-by-electricity.svg">
+</p>
+
+<h2 align="center">
+<br />
+///// — CODEMO DIGITAL NOMAD — \\\\\
+<br /><br />
+</h1>
+
+
+<p align="center">Codemo Digital Nomad Style Guide<br>  
+The purpose of this style guide is to provide a set of rules for website.</p>
+
+--- 
+
+[![Codemo Digital Nomad Style Guide](style-guide-cover.webp)](https://gigamaster.github.io/codemo/)
+
+--- 
+
+<h2 align="center">
+<br />
+<br />
+///// — Style Guide — \\\\\
+<br /><br />
+</h2>
+
+### Color Palette
+Logo and brand colors
+
+| | `square` | `round` | `circle` | | `square` | `round` | `circle` |
+|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|
+|`#9e8e61`|<a href='#'><img valign='middle' src='https://readme-swatches.vercel.app/9e8e61'/></a>|<a href='#'><img valign='middle' src='https://readme-swatches.vercel.app/9e8e61?style=round'/></a>|<a href='#'><img valign='middle' src='https://readme-swatches.vercel.app/9e8e61?style=circle'/></a>|`#3e6598`|<a href='#'><img valign='middle' src='https://readme-swatches.vercel.app/3e6598'/></a>|<a href='#'><img valign='middle' src='https://readme-swatches.vercel.app/3e6598?style=round'/></a>|<a href='#'><img valign='middle' src='https://readme-swatches.vercel.app/3e6598?style=circle'/></a>|
+|`#2f4d74`|<a href='#'><img valign='middle' src='https://readme-swatches.vercel.app/2f4d74'/></a>|<a href='#'><img valign='middle' src='https://readme-swatches.vercel.app/2f4d74?style=round'/></a>|<a href='#'><img valign='middle' src='https://readme-swatches.vercel.app/2f4d74?style=circle'/></a>|`#213550`|<a href='#'><img valign='middle' src='https://readme-swatches.vercel.app/213550'/></a>|<a href='#'><img valign='middle' src='https://readme-swatches.vercel.app/213550?style=round'/></a>|<a href='#'><img valign='middle' src='https://readme-swatches.vercel.app/213550?style=circle'/></a>|
+|`#121d2b`|<a href='#'><img valign='middle' src='https://readme-swatches.vercel.app/121d2b'/></a>|<a href='#'><img valign='middle' src='https://readme-swatches.vercel.app/121d2b?style=round'/></a>|<a href='#'><img valign='middle' src='https://readme-swatches.vercel.app/121d2b?style=circle'/></a>|`#f1f1f1`|<a href='#'><img valign='middle' src='https://readme-swatches.vercel.app/f1f1f1'/></a>|<a href='#'><img valign='middle' src='https://readme-swatches.vercel.app/f1f1f1?style=round'/></a>|<a href='#'><img valign='middle' src='https://readme-swatches.vercel.app/f1f1f1?style=circle'/></a>|
+
+
+### Gradients
+CSS gradients, linear and radial
+
+### Textures
+CSS background patterns
+
+### Layouts
+Responsive grid layout sections
+
+### Components
+Modular elements
+
+### Iconography
+Scalable vectors Icons
+
+### Typography
+Fonts
+HTML Text Formatting
+Highlight source code
+
+### Form elements
+Forms and control elements
+
+> [!NOTE]
+> Highlights information that users should take into account, even when skimming.
+
+> [!TIP]
+> Optional information to help a user be more successful.
+
+> [!IMPORTANT]
+> Crucial information necessary for users to succeed.
+
+> [!WARNING]
+> Critical content demanding immediate user attention due to potential risks.
+
+> [!CAUTION]
+> Negative potential consequences of an action.
+
+---
+
+### License
+
+MIT License
+
+Copyright (c) 2024
+
+Permission is hereby granted, free of charge, to any person obtaining a copy   
+of this software and associated documentation files (the "Software"), to deal   
+in the Software without restriction, including without limitation the rights   
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell   
+copies of the Software, and to permit persons to whom the Software is   
+furnished to do so, subject to the following conditions:   
+
+The above copyright notice and this permission notice shall be included in all   
+copies or substantial portions of the Software.   
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR   
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,   
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE   
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER   
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,   
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE   
+SOFTWARE.   
+
+[web]: https://gigamaster.github.io/codemo/web-app/
+[dpaint]: https://gigamaster.github.io/codemo/web-app/dpaint/
+[drawio]: https://gigamaster.github.io/codemo/web-app/drawio/