This style guide documents the design system for the Layout Optimizer project. It serves as a central reference for designers and developers to ensure consistency and coherence across the application.
The design adopts a functional, dark-themed aesthetic prioritizing clarity, utility, and information hierarchy. This approach is well-suited for technical tools and applications where task efficiency and data visibility are paramount. While not strictly adhering to a specific design movement (like Material Design or Fluent), it follows modern usability principles with a custom, practical implementation.
The color system uses CSS variables for easy management and consistency. The palette is designed for a dark theme, emphasizing contrast and using accent colors purposefully.
foreground-brighter
foreground
foreground-darker
background-brighter
background
background-darker
accent-01-brighter
accent-01
accent-01-darker
accent-02-brighter
accent-02
accent-02-darker
accent-03-brighter
accent-03
accent-03-darker
Typography plays a crucial role in establishing hierarchy and readability. The system uses standard web fonts and a clear scale.
var(--font-family-01) (Arial, Helvetica,
sans-serif) - Used for headings and body text.var(--font-family-02) (monospace) -
Used for code examples.Below are examples of different heading levels:
This is standard paragraph text. It uses var(--font-family-01) and
var(--color-foreground). You can use strong text
(--color-foreground-brighter) for emphasis or italicized text
for subtle highlights. Here's a link example
demonstrating the standard link style with an underline.
This is a blockquote. Use it to highlight important quotes or callouts. It features
a distinct background (--color-background-darker) and border style.
Common interface elements are styled consistently.
Used for selecting one option from a list.
Standard inputs for user data collection.
Used to convey important status information to the user.
--color-foreground.
--color-accent-01 (rgba(150, 222, 162, 0.75)).
--color-accent-03 (rgb(198, 170, 86)).
--color-accent-02 (rgb(228, 105, 105)).
Standard HTML lists are styled for readability.
Code is displayed using monospace font and distinct background colors.
Inline code, such as const variable = true;, uses the code
element and --color-background-brighter.
Multi-line code blocks use the pre and code elements with
--color-background-darker.
function greet(name) {
// Check if a name was provided
if (name) {
console.log(`Hello, ${name}!`);
} else {
console.log("Hello there!");
}
}
greet("Style Guide User");Keyboard commands like Ctrl + S are styled using the
kbd tag for clarity.
The Job Manager is a web-based application for managing job cards, primarily focused on fabric cutting and layout optimization. It provides a split-panel interface with a job list on the left and detailed job information on the right.
Main controller class that:
Handles all job data operations:
Manages the job list interface:
Handles the detailed job view:
{
job_id: string,
project_name: string,
client_name: string,
job_description: string,
start_date: string,
due_date: string,
base_material: string,
bm_stripe_grain: string,
bm_width: string,
bm_length: string,
bm_kerf: string,
notes: string,
panels: {
default: Array,
'Box Cushions': Array
}
}localStorage.setItem('job_${jobId}', JSON.stringify(jobData))localStorage.setItem('jobListCSV', csvData)localStorage.setItem('selectedJobId', jobId)