# Design Language for desca.work ## Aesthetics and Tone A Bauhaus workshop where work descends through systematic levels of craft -- desca.work presents as a functional design studio where geometric precision, primary-color restraint, and the honesty of exposed structure create an interface that treats work itself as an art form. The Bauhaus aesthetic demands that every element justify its presence: decorative flourishes are eliminated, proportions are mathematical, and the grid is sacred. Form follows function, and the function is clarity. The tone is workshop-practical: direct, instructional, and free of pretension. The site speaks as a master craftsperson to apprentices -- with respect for the work and impatience for unnecessary complexity. Visual references: the typography experiments of Herbert Bayer; the furniture design of Marcel Breuer translated to CSS; a Bauhaus poster with its strict geometric composition; the workshop floor of the Dessau school. ## Layout Motifs and Structure The layout uses a **modular grid** architecture -- a strict 4-column grid with mathematical spacing where every element aligns to the system. **Grid System:** - 4 columns at 25% width each, 24px gutters - Content blocks span 1-4 columns with strict alignment - Vertical rhythm enforced: all spacing is multiples of 8px - Headlines align to the left edge of column 1; body text starts at column 2 **Section Flow:** 1. **The Manifesto:** Hero with the domain name in geometric sans-serif, positioned at the intersection of columns 1-2 and the upper third grid line. 2. **The Workshop:** Content sections using the 4-column grid, with a primary-color accent block (solid red, blue, or yellow background) anchoring each section's top-left. 3. **The Grid:** A section that exposes the underlying grid itself -- visible column lines and row markers -- with content placed demonstratively on the grid. 4. **The Mark:** A closing geometric composition -- a circle, triangle, and square in primary colors, centered. ## Typography and Palette **Typography:** - **Headlines:** "DM Sans" (Google Fonts) -- a geometric sans-serif with clean circular forms echoing Bauhaus typography. Used at 2rem-4.5rem, weight 700, line-height 1.1. - **Body:** "DM Sans" at 1rem, weight 400, line-height 1.7. Single-family system for unity. - **Labels:** "DM Mono" (Google Fonts) -- for grid coordinates, metadata. Used at 0.75rem, weight 400. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Canvas White | Background | #fafaf5 | Primary background | | Structure Black | Primary | #1a1a1a | Text, borders, structure | | Bauhaus Red | Accent 1 | #d42020 | Section markers, emphasis | | Bauhaus Blue | Accent 2 | #2050b0 | Links, secondary accent | | Bauhaus Yellow | Accent 3 | #e8c820 | Highlights, tertiary accent | | Grid Grey | Subtle | #d0d0c8 | Grid lines, borders | | Workshop Grey | Mid-tone | #6a6a60 | Secondary text | ## Imagery and Motifs **Primary-Color Accent Blocks:** Each content section begins with a small solid-color square (32px) in Bauhaus Red, Blue, or Yellow, positioned at the section's top-left corner. This color block functions as both decoration and section identifier. **Exposed Grid Lines:** Faint vertical column dividers (1px dashed #d0d0c8) are visible throughout the page, making the grid system itself a visual element. **Geometric Primitives:** Circle, triangle, and square shapes in primary colors appear as section decorations, sized at 24-64px, always positioned at grid intersections. **Mathematical Spacing:** All vertical spacing follows an 8px baseline grid, with major sections separated by exactly 96px (12 units) and sub-sections by 48px (6 units). ## Prompts for Implementation Build this as a Bauhaus workshop manifesto. The hero loads with the title positioned precisely at grid coordinates -- no animation, just exact placement. Content sections appear on scroll with no decorative transitions, only clean visibility changes (opacity 0 to 1, 300ms). The primary-color accent blocks are the only color on an otherwise monochrome page, making each one visually significant. The exposed grid section should reveal the underlying column structure explicitly, teaching the viewer about the system. The closing geometric composition (circle, triangle, square in primary colors) centers as a visual signature. Avoid all decorative excess: no gradients, no shadows, no rounded corners, no animations longer than 300ms. Every pixel must justify its existence. No CTAs, testimonials, or marketing language. ## Uniqueness Notes 1. **Bauhaus modular grid as visible design system:** Exposing the grid structure as visual content is a self-referential design approach unique in the collection. 2. **Primary-color accent blocks as section markers:** Using small solid-color squares (not backgrounds) as section identifiers creates a distinctive wayfinding system. 3. **Mathematical spacing rigor:** The strict 8px baseline grid applied without exception creates a visual precision rarely maintained across an entire site. 4. **Geometric primitive signature:** The closing circle-triangle-square composition is a direct Bauhaus reference functioning as a visual colophon. Document chosen seed/style: aesthetic: bauhaus, layout: modular-grid, typography: geometric-sans, palette: primary-minimal, patterns: exposed-grid, imagery: color-blocks, motifs: geometric-primitives, tone: workshop-practical Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), warm palette (100%), parallax patterns (98%), tech motifs (97%), friendly tone (77%), minimal imagery (96%)