# Design Language for 가능성.com

## Aesthetics and Tone

가능성.com — Korean for "possibility" — is a **playful tech portal wrapped in warm marble**. The entire visual language asks: what if the cold precision of technology breathed through veined stone? The site feels like holding a warm travertine tile that pulses with circuit light underneath — ancient material meets present-tense energy. Every surface has gentle weight; nothing is harsh or sterile.

The **playful** aesthetic is not infantile. It is the playfulness of a craftsperson who loves their tools — unexpected color pops against earthy stone, typographic moments that grin, interface elements that bounce back when you touch them. The site rewards curiosity: hover anything and something delightful happens.

Tone is **warm-inviting**: the site speaks in the voice of a knowledgeable friend who happens to know exactly how to solve your problem and genuinely wants to show you. Korean warmth (정, *jeong*) is embedded in the pacing — nothing rushes, everything welcomes.

The overall impression: **a duotone postcard from the near future**, printed on creamy Italian marble paper, stamped with circuit-board motifs in ink the color of burning amber.

---

## Layout Motifs and Structure

The page is built on a **split-screen architecture** — the viewport is bisected vertically, and the two halves have different gravitational pulls.

**Left panel (40vw) — the Stone Side:**
A fixed, non-scrolling marble-textured column. It holds the site identity: the wordmark 가능성 in oversized retro display, a slowly pulsing circuit-glyph sigil, and a warm amber status indicator ("열림 / open"). The stone panel has a warm #E8DDD0 base with veining rendered as CSS `background-image: url(svg-veins)` — fine hairline paths in #C4A882 at 30% opacity, offset at irregular angles. The panel gently glows from the bottom-left corner (a radial amber smear at 12% opacity, 400px diameter). On scroll, this panel does NOT scroll — it holds the brand like a plaque.

**Right panel (60vw) — the Circuit Side:**
This panel scrolls. It is #1A1210 (near-black with warm undertone) by default, switching to #F5EDE3 (warm cream) in alt-sections. Content lives here in a single-column narrative flow with intentional whitespace. Each section is introduced by a horizontal rule — not a plain `<hr>` but a thin SVG line where a small circuit-node dot pulses on the line like a running spark.

**Split behavior across breakpoints:**
- Desktop (≥ 1024px): true vertical split, left fixed / right scrolls
- Tablet (768–1023px): left panel collapses to a 64px-tall sticky header bar (wordmark + sigil only)
- Mobile (< 768px): single-column, marble texture as page background overlay at 20% opacity

**Spacing grid:** 8px base, all major spacings multiples of 8. Section padding: 80px top/bottom on right panel. Left panel vertical rhythm: centered-middle with 32px gaps.

---

## Typography and Palette

**Type Stack (Google Fonts only):**

- **Hero Display — `Unbounded`** (weight 900, 800): This ultra-wide, retro-inspired display family has the chunky ink-trap character of 1970s tech branding. Used at 88–120px for the wordmark 가능성 in the left panel. Tracking: -0.02em. It reads "retro-display" immediately: bold blocks, slightly rounded corners, strong personality. Also used for section numerals (§01–§06) at 48px weight 800 on the right panel.

- **Secondary Display — `Syne`** (weight 700, 600): A quirky geometric display with variable optical sizing and a faint brutalist edge softened by playful terminals. Used for section headings (28–40px), subheads, and callout quotes. Tracking: 0.01em. Pairs with Unbounded by contrast — Unbounded is massive and blocky; Syne is precise and animated.

- **Body Text — `Plus Jakarta Sans`** (weight 400, 500): A warm, humanist sans that balances the drama of the display faces. Line-height 1.72. Used at 16–18px for all body paragraphs. The humanist proportions feel Korean-language-friendly (wide letterforms mirror hangul rhythm). Tracking: 0.005em.

- **Mono / Code — `JetBrains Mono`** (weight 400): Amber (#D4821A) on the dark right panel. Used for technical labels, URL hints, timestamps, and circuit-node annotations.

**Palette — Duotone Warm Amber × Stone:**

The entire site runs on two main chromatic anchors:

| Role | Hex | Name |
|---|---|---|
| Stone Light | `#F5EDE3` | Warm cream — right panel alt-section BG, body text on dark |
| Stone Mid | `#E8DDD0` | Travertine — left panel base |
| Stone Vein | `#C4A882` | Antique gold — marble veining, divider rules |
| Amber Core | `#D4821A` | Burning amber — primary accent, circuit traces, CTAs |
| Amber Deep | `#8C4A0F` | Mahogany amber — hover states, active states |
| Dark Ground | `#1A1210` | Warm near-black — right panel main BG |
| Dark Mid | `#2D1F18` | Dark espresso — card backgrounds, code blocks |
| Text Light | `#FAF6F1` | Off-white — headlines on dark sections |

**Duotone application:** Every photographic or textured element uses a CSS duotone filter — `sepia()` + `hue-rotate()` — that shifts all imagery into the amber/stone range. Images become warm-toned silhouettes; no photograph retains its original colors.

---

## Imagery and Motifs

**Marble Texture System:**

The marble is not decorative wallpaper — it is structural. Three tiers of marble expression:

1. **Full surface (left panel):** The 40vw stone column has a base SVG marble pattern. Veins are generated as organic Bezier paths — 4–7 primary veins radiating from upper-right, each path has `stroke-width: 0.5–1.2`, `stroke: #C4A882`, `opacity: 0.25–0.45`. A secondary network of micro-fissures crosses at 15–45° angles at `opacity: 0.12`. The overall effect reads as real travertine. An ambient noise layer (CSS `filter: url(#feTurbulence)` SVG filter) gives micro-grain at 2% intensity.

2. **Texture overlays (right panel alt sections):** When the right panel switches to cream (#F5EDE3), a marble overlay SVG sits at `opacity: 0.08`, `mix-blend-mode: multiply`. Barely perceptible — the cream breathes.

3. **Edge vignette:** A marble-inked vignette at the bottom of the left panel fades into #1A1210 via a `mask-image: linear-gradient(to bottom, transparent 70%, #1A1210 100%)`.

**Tech Circuit Motifs:**

The circuit language is minimal and precise — not cyberpunk overload, but the quiet elegance of a PCB schematic:

- **Circuit sigil:** A 120×120px SVG in the left panel center. It depicts an abstract IC package outline — 8 legs per side, a central die, with trace lines that end in the 가능성 characters. The sigil slowly "breathes" via a CSS `@keyframes` animation that pulses the amber trace opacity from 0.4 to 1.0 over 3.2s ease-in-out.

- **Section separators:** Each section on the right panel opens with a horizontal circuit trace — a 2px `#D4821A` SVG line with three small junction dots and a running `stroke-dashoffset` animation that makes a spark appear to travel the full width (triggered by IntersectionObserver when the section enters view at 30%).

- **Corner brackets:** Section content blocks have subtle corner brackets — 12px `×` 12px L-shaped SVG marks in `#C4A882` at the four corners, recalling PCB test-point annotations.

- **Background grid on dark sections:** The dark right panel sections show a subtle dot-grid (`radial-gradient` CSS pattern) at `opacity: 0.04` — a 24px pitch, dot radius 1px in `#D4821A`. Invisible until you look for it.

**Pulse-Attention Pattern:**

The primary interactive pattern is `pulse-attention` — elements that want to be noticed emit a slow amber radial pulse. Implementation:

```css
@keyframes pulseAmber {
  0%   { box-shadow: 0 0 0 0px rgba(212, 130, 26, 0.4); }
  70%  { box-shadow: 0 0 0 12px rgba(212, 130, 26, 0); }
  100% { box-shadow: 0 0 0 0px rgba(212, 130, 26, 0); }
}
```

Applied to: the primary CTA button, the sigil in the left panel (every 8s), any form input that gains focus, and newly revealed content blocks (one pulse on entry, then stops).

---

## Prompts for Implementation

Build 가능성.com as a **split-screen immersive portal** — a two-panel narrative where the left stone wall holds identity and the right circuit space tells the story.

**HTML architecture:**
```html
<body>
  <div class="split-layout">
    <aside class="stone-panel">   <!-- position: fixed; width: 40vw -->
      <div class="wordmark">가능성</div>
      <svg class="circuit-sigil">…</svg>
      <div class="status-indicator">열림</div>
    </aside>
    <main class="circuit-panel">  <!-- margin-left: 40vw; scroll normally -->
      <section class="hero-section">…</section>
      <section class="section-02">…</section>
      <!-- ... -->
    </main>
  </div>
</body>
```

**Left panel (stone-panel) CSS:**
- `position: fixed; top: 0; left: 0; width: 40vw; height: 100vh; overflow: hidden`
- Background: `#E8DDD0` with SVG marble veins as `background-image`
- Display: `flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px`
- Bottom fade: `mask-image: linear-gradient(to bottom, #E8DDD0 75%, transparent 100%)`

**Right panel narrative flow (6 sections):**

§01 **도입 (Introduction)** — dark (#1A1210) background. Hero text in Unbounded 88px: "가능성은 지금 여기 있습니다" (Possibility is here, now). Below, 3 short lines in Plus Jakarta Sans 18px. Circuit separator activates on load. Pulse-attention fires on the scroll-down arrow.

§02 **기능 (Capability)** — cream (#F5EDE3) background, marble overlay. Three capability cards in a 3-column grid, each with a corner-bracket border, amber numbering (Unbounded §01/§02/§03), and body text. Cards lift 4px on hover (`transform: translateY(-4px); transition: 0.25s ease`).

§03 **방법 (Method)** — dark background. A step-by-step process told as a vertical timeline. Each step marker is a circuit-node dot (amber, 10px diameter) with a vertical trace connecting downward. Text reveals with `opacity: 0 → 1; translateX(-16px → 0)` on IntersectionObserver.

§04 **작품 (Work)** — alternating dark/cream rows. Project showcase in a staggered 2-column layout (asymmetric: 58%/42%). Each project block has a duotone-filtered placeholder image (CSS filter: `sepia(1) hue-rotate(-15deg) saturate(1.4)`), a title in Syne 32px, and a short description.

§05 **연결 (Connect)** — dark background. A minimal contact form. Inputs have amber focus rings (2px solid #D4821A, 0 0 0 4px rgba(212,130,26,0.2)) and pulse-attention on focus. Submit button: full amber (#D4821A) background, #1A1210 text, Unbounded 16px weight 800, 8px border-radius, pulses once after click.

§06 **마무리 (Close)** — cream background, marble texture visible. Wordmark 가능성 echoed large (Unbounded 240px, #C4A882 at 15% opacity) behind the footer text. Copyright, contact link, a returning circuit separator.

**Animation budget:**
- `prefers-reduced-motion: reduce` → all transforms off, pulse stays but as static glow
- Sigil pulse: CSS only (no JS)
- Circuit spark: CSS `stroke-dashoffset` animation, triggered by IntersectionObserver
- Section reveals: `IntersectionObserver` at threshold 0.15, `rootMargin: "0px 0px -80px 0px"`

**JavaScript (minimal):**
- IntersectionObserver for section reveals and circuit sparks
- Split-panel collapse at tablet/mobile (matchMedia listener)
- Pulse-attention: CSS handles most; JS adds class `pulse-entry` once on IntersectionObserver trigger

---

## Uniqueness Notes

**Differentiators from the existing 557-site catalog:**

1. **Vertical split-screen as primary architecture.** Frequency analysis shows `centered` (83%) and `full-bleed` (63%) dominate; `split-screen` is effectively absent from the catalog. This site breaks the full-bleed mono-column dominance with a fixed/scroll two-panel structure — something no current site in the directory uses.

2. **Marble texture as a tech material.** `marble-texture` imagery appears at only 4% in the catalog. Here marble is not decorative but structural — the left panel IS marble. The juxtaposition of veined stone with PCB circuit motifs and amber tech accents creates a material tension that no other site exploits.

3. **Korean cultural warmth embedded in pacing.** The `warm-inviting` tone registers at only 2% in the catalog. The site uses Korean section headings, treats 정 (*jeong*) as a design principle (no rushes, everything reveals gently), and the domain name itself in hangul makes this the only site in the catalog with an internationally-registered Korean-script domain as its identity anchor.

4. **Pulse-attention as primary interaction pattern.** At 3% frequency in the catalog, `pulse-attention` is highly underused. This site makes it the signature interactive language — amber radial pulses — rather than the dominant `parallax` (73%) or `stagger` (49%).

5. **Duotone through amber/stone rather than blue/purple.** `duotone` palette sits at 10%; where it exists in the catalog it typically means blue+magenta or dark+neon. The amber+travertine duotone here is entirely unique in the set — warm instead of cold, geological instead of synthetic.

**Chosen seed:** `aesthetic: playful, layout: split-screen, typography: retro-display, palette: duotone, patterns: pulse-attention, imagery: marble-texture, motifs: tech, tone: warm-inviting`

**Avoided overused patterns:** centered layout, full-bleed sections, parallax scrolling, photography imagery, hand-drawn aesthetic, editorial aesthetic, gradient palette, mono typography.
<!-- DESIGN STAMP
  timestamp: 2026-05-12T08:53:43
  domain: 가능성.com
  seed: seed:
  aesthetic: 가능성.com — Korean for "possibility" — is a **playful tech portal wrapped in warm ...
  content_hash: 1bd7ae346c7e
-->