# Design Language for desca.works

## Aesthetics and Tone

desca.works is an **authoritative consultancy presence for high-stakes practitioners** — think the physical interior of a bespoke strategy firm in a renovated industrial building: concrete floors, a single candle burning on a black stone table, neon-lit whiteboards visible through frosted glass panels behind the reception desk. The site treats that scene as its operating metaphor. The aesthetic is **minimalist in discipline, not in ambition** — every surface earns its place, but the surfaces that remain are charged with presence.

The palette refuses warmth. The primary dark ground is `#0a0a0f` — nearly-black with a violet undertone that makes it feel like the inside of a graphite crucible rather than a simple dark background. Against that ground, a single neon accent — `#b8f72e` (acid chartreuse-lime) — cuts through with the precision of a laser level. Secondary neon: `#ff2d78` (electric crimson-rose) used sparingly for tension, never decoration. Neutral surface: `#1c1c26` for elevated panels. Type ground: `#e8e8f0` — ice white with the same violet undertone as the base, creating tonal coherence. Supporting utility: `#4a4a5e` for secondary text and dividers.

The candle motif is architectural, not decorative: every section transition uses a candle-flame geometry — a single elongated ellipse that tapers to a point at the top, rendered in SVG, glowing with a radial gradient from `#b8f72e` core to transparent. As the user scrolls, the flame breathes (slow opacity pulse, 3.2s cycle). The flame is the only element on the page that moves continuously; everything else is triggered by scroll.

The tone is **authoritative without condescension** — declarative sentences, zero hedging, no exclamation points. Copy reads like a brief from a senior partner: precise, dense, complete.

## Layout Motifs and Structure

The page is built on **diagonal-sections**: each content block sits on a plane angled at exactly 4 degrees from horizontal. This is not a CSS skew applied uniformly — each section's top and bottom edges are true diagonal cuts created via `clip-path: polygon()` coordinates, so the angles are consistent across viewport widths. The diagonal direction alternates: section 1 descends left-to-right, section 2 descends right-to-left, creating a zigzag plane geometry when scrolled.

**Structural rhythm:**

1. **Landing plane** — Full-viewport, black ground. Oversized display type anchored to the lower-left third (not centered, not upper-left). The domain name `desca.works` rendered at 18vw, tracking tightened to -0.04em, line-height 0.88. A candle-flame SVG floats at upper-right, 120px tall, pulsing. No navigation visible — a single hairline `↓` glyph at bottom center, 14px, uppercase tracked label: `ENTER`.

2. **Diagonal Proposition plane** — The first diagonal cut introduces `#1c1c26` as a raised surface. The cut is clean at 4 degrees. This plane holds a single sentence (the site's core proposition), set at 5.2vw in the display face, left-aligned to a 68% column width, with the remaining 32% holding a vertical rule and a candle-atmospheric detail (a blurred radial glow in `#b8f72e` at 12% opacity that looks like candlelight diffusing against a wall).

3. **Progressive Disclosure accordion** — Three to five domain areas, each collapsed to a single line (title + category tag). On hover, the line expands vertically over 400ms (ease-out-quart) to reveal a 2–4 sentence description and a diagonal border-left accent in `#b8f72e`. Only one item can be open at a time. The accordion sits inside a diagonal-cut section so its container edges are angled.

4. **Manifesto plane** — Returns to pure black ground. A block of body copy (4–6 short paragraphs) set in the secondary face at 18px/1.75 line-height, maximum 54 characters per line, left-aligned. This is the site's philosophical statement — no headings, no bullets, no structure. Just words. The `#ff2d78` accent appears here exactly once: a single horizontal rule 1px thick, 40px wide, above the first paragraph.

5. **Contact plane** — Final diagonal cut, back to `#1c1c26`. A single email address rendered at 3.8vw in the display face. Below it, three one-line items (role, city, response window) in the secondary face at 14px. No form. No social links. No map. The candle-flame SVG reappears here, inverted (pointing down), at 80px.

**Grid:** An 8-column grid underlies the layout, but content respects only two zones — a primary column (columns 1–5, left edge flush with 6vw left margin) and a secondary zone (columns 6–8, used for atmospheric details and ruled accents). The diagonal cuts ignore the grid and operate on full viewport width.

**Navigation:** None on initial load. After the user scrolls past the landing plane, a minimal fixed header fades in: `desca.works` in the secondary face at 13px, left-aligned, and a single right-aligned text link `contact ↓` that smooth-scrolls to the contact plane. No hamburger, no menu drawer.

## Typography and Palette

**Display face — `Bebas Neue`** (Google Fonts, weight 400, the only weight available). Used for all oversized headlines, the domain name rendering, the proposition sentence, the email address in the contact plane. Set without tracking adjustments at small sizes — at display scale (10vw+), tracking is tightened to -0.03em. The face's industrial condensed geometry pairs exactly with the diagonal-sections layout: both are architectural, structural, uncomprising. `Bebas Neue` has zero decorative curvature — every letterform is rectilinear or minimally curved, matching the geometric-abstract imagery vocabulary.

**Body face — `DM Mono`** (Google Fonts, weights 300 and 500). Used for all body copy, captions, navigation labels, category tags, and the three one-line items in the contact plane. The monospaced face creates a deliberate tension with the oversized display: one face shouts in compressed industrial sans, the other whispers in precision-engineered monospace. The combination signals a firm that thinks in systems but speaks in declarations.

**Type scale:**
- Display / Domain: `Bebas Neue`, 18vw (landing), 5.2vw (proposition), 3.8vw (contact email)
- H2 section labels: `Bebas Neue`, 2.4vw, `#b8f72e`, letter-spacing -0.02em
- Body copy: `DM Mono` 300, 18px / 1.75, `#e8e8f0`
- Captions / tags: `DM Mono` 500, 11px, uppercase, letter-spacing 0.12em, `#4a4a5e`
- Navigation: `DM Mono` 300, 13px, `#4a4a5e`

**Full palette (hex):**
- `#0a0a0f` — Primary background (graphite-violet near-black)
- `#1c1c26` — Elevated surface (diagonal section panels)
- `#b8f72e` — Primary neon accent (acid chartreuse-lime): candle flame, section headings, accordion border
- `#ff2d78` — Secondary neon accent (electric crimson-rose): single decorative rule in manifesto, tension moments only
- `#e8e8f0` — Primary type (ice white with violet undertone)
- `#4a4a5e` — Secondary type / dividers (mid-dark violet-gray)
- `#b8f72e` at 12% opacity — Atmospheric candlelight glow (radial gradient diffusion)

## Imagery and Motifs

**No photography.** The frequency analysis shows photography at 92% across the corpus — desca.works opts out entirely. All visual interest is generated via SVG geometry, CSS gradients, and typographic mass.

**Candle-atmospheric motif — the primary visual identity marker:**
The candle flame is a hand-drawn SVG path: a tapered ellipse with a slight asymmetric lean (3 degrees left), rendered without a wick or base — just the flame shape, pure abstraction. It uses a radial gradient:
- Center stop: `#b8f72e` at 100% opacity
- Mid stop at 40% radius: `#b8f72e` at 60% opacity
- Outer stop: transparent

Around the flame, a `feGaussianBlur` filter (stdDeviation 18) is applied to a duplicate of the flame at 8% opacity and 130% scale, creating a soft atmospheric halo. The result reads as candlelight diffused in a dark room — ambient, warm-edge-cold-center in reverse (since the color is lime not orange), architecturally strange.

**Geometric-abstract structural marks:**
- Section dividers use the diagonal cut geometry itself as a visual element — the cut edge is visible as a `#b8f72e` hairline (0.5px) that runs the full viewport width at the exact angle of the section boundary.
- A subtle `repeating-linear-gradient` pattern at 4% opacity tiles across all dark-ground sections: 1px-wide lines at 45 degrees, spaced 40px apart, color `#b8f72e`. This is nearly invisible but adds a fine texture that reads as engineered rather than organic.
- The accordion items, when expanded, reveal a left border: a 2px solid line in `#b8f72e` with a `box-shadow: 0 0 8px #b8f72e` glow, making the active item feel lit from within.

**No illustrations, no 3D renders, no stock imagery.** The site's visual richness comes entirely from the interaction between oversized type, diagonal geometry, and two neon colors against deep black.

## Prompts for Implementation

Build desca.works as **a single unbroken vertical scroll through five planar environments**, each separated by a diagonal cut. The implementation must resist every conventional agency-site impulse (no hero slider, no grid of services cards, no team photos, no client logos, no testimonials).

**Plane construction:**

Each section uses `clip-path: polygon(0 0, 100% 4vw, 100% 100%, 0 calc(100% - 4vw))` for the default cut, alternating with `clip-path: polygon(0 4vw, 100% 0, 100% calc(100% - 4vw), 0 100%)` for the reverse cut. The cuts overlap by ~2vw to eliminate gaps — the second section's top reaches behind the first section's bottom.

**Progressive-disclosure accordion:**

```
- Each item: display:flex, height 52px collapsed, overflow hidden
- Transition: height over 400ms cubic-bezier(0.22, 1, 0.36, 1) (ease-out-quart)
- On expand: height auto (measured via JS before transition)
- Active state: border-left 2px solid #b8f72e, box-shadow 0 0 8px #b8f72e inset
- Aria: aria-expanded, role=button on trigger, controlled panel id
- Only one open at a time: close previous before opening new (same 400ms transition)
```

**Candle flame animation:**

```css
@keyframes flame-breathe {
  0%, 100% { opacity: 0.85; transform: scaleY(1) scaleX(1); }
  50% { opacity: 1; transform: scaleY(1.04) scaleX(0.97); }
}
.candle-flame {
  animation: flame-breathe 3.2s ease-in-out infinite;
  transform-origin: bottom center;
}
```

**Scroll-triggered section reveal:**

Use `IntersectionObserver` with threshold 0.15. When a section enters viewport:
- The section's `clip-path` animates from its collapsed state (both vertical edges meeting at the center diagonal line, creating a thin parallelogram) to its full display state.
- Duration: 600ms, `cubic-bezier(0.16, 1, 0.3, 1)` (snappy expo-out).
- Text within the section fades from `opacity: 0, translateY(20px)` to final state with a 120ms delay after the clip-path animation begins.

**Hairline diagonal dividers:**

After each `clip-path` section, insert an absolutely positioned SVG element (full viewport width, 6px tall) containing a single `<line>` element drawn at the matching 4-degree angle, stroked `#b8f72e` at 0.5px. This makes the section boundary tangible without adding visual weight.

**Fixed header:**

Initially `opacity: 0, pointer-events: none`. After scrolling past 100vh, transition to `opacity: 1` over 300ms. The header is `position: fixed`, `height: 48px`, `background: #0a0a0f`, `border-bottom: 1px solid #1c1c26`. No backdrop blur — the border is the only separator.

**Avoid:** hero carousel, pricing table, stat counters, client logo grid, testimonial blocks, parallax-scroll illusions (the diagonal cuts provide all depth), any animation that runs continuously except the candle flame.

**Type rendering:** Set `font-smooth: always`, `-webkit-font-smoothing: antialiased` across all type. `Bebas Neue` at display sizes should have `text-rendering: optimizeLegibility`. Load only the necessary font weights via Google Fonts: `Bebas+Neue` (400 only), `DM+Mono:ital,wght@0,300;0,500`.

## Uniqueness Notes

**Chosen seed:** aesthetic: minimalist, layout: diagonal-sections, typography: oversized-display, palette: dark-neon, patterns: progressive-disclosure, imagery: geometric-abstract, motifs: candle-atmospheric, tone: authoritative

**Differentiators from the 84-design corpus:**

1. **Diagonal-sections at 3% corpus frequency, deployed architecturally not decoratively.** Most uses of diagonal in web design are cosmetic (a skewed hero band). desca.works makes the diagonal cut the primary structural grammar of every section boundary — five cuts, alternating direction, each cut's geometry also serving as the source of the hairline SVG divider. The diagonal is not a flourish; it is the building's floor plan.

2. **Candle-atmospheric motif in a dark-neon palette — an intentional chromatic contradiction.** Candles connote warmth, amber, wax, organic light. desca.works keeps the candle geometry (flame shape, atmospheric diffusion, breath-pulse animation) but replaces the thermal palette with acid chartreuse-lime (`#b8f72e`). The result is a candle that reads as both ancient (the form) and industrial (the color) — like a flame inside a chemistry flask. This combination does not appear in the corpus.

3. **Progressive-disclosure as the sole navigation paradigm — no menu, no page links.** The corpus shows 92% use of parallax and 69% use of stagger as primary interactive patterns. desca.works commits fully to progressive-disclosure: the accordion is not supplemental to a navigation system; it *is* the navigation. The user's entire understanding of what the firm does is controlled by what they choose to expand. This creates information authority — the firm decides the order of revelation.

4. **Photography at 0% in a corpus where photography runs at 92%.** All visual richness generated from type mass, diagonal geometry, neon color, and one animated SVG flame. This is the hardest constraint to maintain — no temptation to add a "team photo" or "office interior." The candle flame SVG must carry all the atmospheric weight that photography would normally provide.

5. **`Bebas Neue` + `DM Mono` as a typographic system built on opposition, not harmony.** The corpus shows mono at 94% (often paired with humanist or sans for contrast). desca.works pairs mono with the most extreme condensed industrial display face available on Google Fonts — maximum compression against maximum precision — creating a system where the two faces never overlap in role, weight, or rhythm.

**Avoided overused patterns (from frequency analysis):**
- No parallax (92% corpus) — diagonal cuts provide depth without scroll illusions
- No stagger (69% corpus) — single-item progressive disclosure replaces stagger grids
- No centered layout (94% corpus) — all content left-aligned within 68% column
- No photography (92% corpus) — geometric-abstract and candle-atmospheric only
- No warm palette — dark-neon directly counters the corpus's dominant warm direction
- No hand-drawn aesthetic (80% corpus) — pure geometric, industrial, constructed
<!-- DESIGN STAMP
  timestamp: 2026-05-07T11:45:49
  domain: desca.works
  seed: seed:
  aesthetic: desca.works is an **authoritative consultancy presence for high-stakes practitio...
  content_hash: 34dae2ad0f72
-->