Theming and Design Tokens
Relevant source files
The following files were used as context for generating this wiki page:
The project implements a playful and interactive visual theme characterized by high-contrast colors, stylized typography, and dynamic animations. The design system relies on a combination of static CSS definitions and runtime JavaScript injections to manage the user interface state and visual transitions.
The theming architecture prioritizes a mobile-first approach, using media queries and absolute positioning to handle interactive elements like buttons that move dynamically across the viewport.
Global Design Tokens
The application defines its visual identity through a set of color and typographic tokens distributed across CSS files and JavaScript configurations.
Typography and Color Palette
The project uses the "Pacifico" cursive font for headers to establish an informal, friendly tone. Colors are primarily driven by Bootstrap classes and custom hex codes for the loading state and popup dialogs.
| Token Type | Value | Context |
|---|---|---|
| Font Family | 'Pacifico', cursive | Headers (H2, H4) |
| Primary Color | #ef6a8a | Preloader background |
| Accent Color 1 | #fe8a71 | SweetAlert2 Confirm Button |
| Accent Color 2 | #f6cd61 | SweetAlert2 Cancel Button |
| Text Color | azure | SweetAlert2 Title and Content |
| Background | #fff | SweetAlert2 dialog base |
Sources: css/style.css:32-40, css/spinload.css:7, js/myJs.js:115-116, index.html:17
Background and Filtering
The main application background uses a full-screen image with a blur effect to maintain readability of the foreground content.
- Source Image:
img/puung3.jpg - Blur Strength: 4px
- Opacity: 0.8
Sources: css/style.css:16-29
Preloader Component
The preloader system manages the initial visual state of the application. It consists of a full-screen mask that obscures content until the application is ready.
The flowchart describes the visual sequence from initial load to the revealing of the main application content.
Loading Animation Details
The spinner utilizes five white rectangular elements (.rect1 to .rect5) that animate using a stretchdelay keyframe.
- The system centers the animation horizontally and vertically at 50% of the screen.
- Each rectangle has a staggered animation delay (from -1.1s to -0.8s) to create a wave effect.
- The preloader background color is fixed to
#ef6a8a.
Sources: css/spinload.css:1-68, js/myJs.js:18-24
Interactive Element Styling
The design system incorporates dynamic positioning for interaction buttons (#yes and #no).
Button Layout
Buttons use absolute positioning to facilitate movement during user interaction.
- Standard Viewport: The "Yes" button is positioned at
left: 70%, while the "No" button starts atleft: 35%. - Mobile Viewport (max-width: 500px): The layout adjusts, placing "Yes" at
left: 58%and "No" atleft: 7%, with reduced padding and font sizes. - Transitions: The "No" button uses a
0.1s ease-outtransition for rapid movement, whereas the "Yes" button uses a slower0.3s ease-outtransition.
Sources: css/style.css:4-15, css/style.css:54-75
Dialog and Popup Theming
The application utilizes SweetAlert2 for modal interactions. These modals are styled dynamically via JavaScript to match the project's aesthetic.
Popup Configuration
The system injects custom backgrounds and dimensions into the SweetAlert2 instances.
// Example of dynamic theming for the reason popup
Swal.fire({
title: textConfig.text7,
width: 900,
padding: "3em",
background: '#fff url("img/iput-bg.jpg")',
backdrop: `
rgba(0,0,123,0.4)
url("img/giphy2.gif")
left top
no-repeat
`,
confirmButtonColor: "#fe8a71",
cancelButtonColor: "#f6cd61",
});
Sources: js/myJs.js:103-120
The modals use a specific border radius of 15px defined in the global CSS to soften the UI edges.
Sources: css/style.css:33-35
Conclusion
The design system of yeuems.io leverages a pink-centric color palette and cursive typography to create a casual user experience. By combining standard Bootstrap components with custom CSS transitions and dynamic SweetAlert2 configurations, the project achieves a cohesive interactive theme that adapts across various device resolutions.