obsidianstudio/deathwings.html at main · DragonFireDesign/obsidianstudio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Deathwings — Case Study — Obsidian Studio</title>
<meta name="description" content="How Obsidian Studio designed Deathwings — a live counter-culture lifestyle brand that refused to look like anything else in the market.">
<meta property="og:title" content="Deathwings — Case Study — Obsidian Studio">
<meta property="og:description" content="How Obsidian Studio designed Deathwings — a live counter-culture lifestyle brand that refused to look like anything else in the market.">
<meta property="og:image" content="https://res.cloudinary.com/dragon-fire-design-studio/image/upload/f_auto,q_90/v1774351851/Obsidian/hero-img_zlbp1b.png">
<meta property="og:url" content="https://obsidianstudio.co/deathwings.html">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
  <script src="https://cdn.tailwindcss.com"></script>
<script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            cream: '#ffffff',
            ink: '#111111',
            sand: '#f4f4f4',
            sand2: '#f4f4f4',
            sand3: '#e8e8e8',
            sand4: '#e8e8e8',
            sand5: '#f4f4f4',
            sand6: '#e8e8e8',
          },
          fontFamily: {
            serif: ['Georgia', 'Times New Roman', 'serif'],
            sans: ['Inter', 'system-ui', 'sans-serif']
          },
          letterSpacing: {
            editorial: '0.24em'
          }
        }
      }
    }
  </script>
  <style>
    html { scroll-behavior: smooth; }
    body { background: #ffffff; color: #111111; }
    summary::-webkit-details-marker { display: none; }
  </style>
</head>
<body class="bg-cream text-ink font-sans selection:bg-[#e8e8e8] selection:text-ink">
  <div class="mx-auto max-w-7xl px-4 py-4 md:px-6 lg:px-8">

    <header class="border-b border-black/10 pb-4">
      <div class="flex items-center justify-between gap-6">
        <a href="index.html" class="font-serif text-lg uppercase tracking-[-0.02em] md:text-xl">
          Obsidian Studio
        </a>
        <nav class="hidden items-center gap-6 text-[11px] uppercase tracking-[0.22em] md:flex lg:gap-8">
          <a href="project-index.html" class="text-black/55 transition hover:text-black">Project Index</a>
          <a href="start-project.html" class="text-black/55 transition hover:text-black">Contact</a>
        </nav>
        <details class="relative md:hidden">
          <summary class="list-none cursor-pointer text-[11px] uppercase tracking-[0.22em] text-black/55 transition hover:text-black">
            Menu
          </summary>
          <div class="absolute right-0 top-full z-20 mt-3 min-w-[220px] border border-black/10 bg-sand2 p-4 shadow-[0_10px_30px_rgba(0,0,0,0.06)]">
            <nav class="flex flex-col gap-3 text-[11px] uppercase tracking-[0.22em]">
              <a href="project-index.html" class="text-black/55 transition hover:text-black">Project Index</a>
              <a href="start-project.html" class="text-black/55 transition hover:text-black">Contact</a>
            </nav>
          </div>
        </details>
      </div>
    </header>

    <main class="space-y-5 py-5 md:space-y-6 md:py-6">

      <!-- Opening Panel -->
      <section class="overflow-hidden border border-black/10 bg-sand3 p-6 md:p-8 lg:p-12">
        <div class="mb-8 flex flex-wrap items-center gap-3 text-[11px] uppercase tracking-editorial text-black/50">
          <span>Case Study — 06</span>
          <span class="h-px w-10 bg-black/15"></span>
          <span>Live Brand</span>
        </div>
        <div class="grid gap-8 lg:grid-cols-12 lg:items-end">
          <div class="lg:col-span-8">
            <h1 class="font-serif text-5xl leading-[0.92] tracking-[-0.05em] text-[#1f1c19] md:text-7xl lg:text-[6rem]">
              Deathwings
            </h1>
            <p class="mt-5 text-[11px] uppercase tracking-[0.22em] text-black/50 md:text-[12px]">
              Metal Lifestyle Brand / Birmingham, UK
            </p>
          </div>
          <div class="lg:col-span-4">
<div class="overflow-hidden">
  <img
    src="https://res.cloudinary.com/dragon-fire-design-studio/image/upload/f_auto,q_90/v1774351857/Obsidian/dw-hero_hrh6at.png"
    alt="Deathwings homepage hero"
    class="w-full object-cover"
  />
</div>      </div>
          </div>
      </section>

      <!-- The Brief -->
      <section class="overflow-hidden border border-black/10 bg-white/30 p-6 md:p-8 lg:p-12">
        <div class="grid gap-6 lg:grid-cols-12">
          <div class="lg:col-span-3">
            <div class="text-[11px] uppercase tracking-editorial text-black/50">The Brief</div>
          </div>
          <div class="lg:col-span-9">
            <p class="max-w-4xl font-serif text-[1.8rem] leading-[1.1] tracking-[-0.03em] text-[#1f1c19] md:text-[2.4rem]">
              Deathwings needed a website that felt as uncompromising as the culture it represents — a digital home for a counter-culture lifestyle brand that refused to look like anything else in the market.
            </p>
            <p class="mt-6 max-w-3xl text-base leading-8 text-black/66">
              The challenge was to build something bold and disruptive without losing the structural integrity that makes a site actually work. The design had to feel dangerous without being chaotic — every element placed with intention, every decision rooted in the brand's core philosophy: Refuse To Fade.
            </p>
          </div>
        </div>
      </section>

      <!-- Pull Quote -->
      <section class="overflow-hidden border border-black/10 bg-[#e8e8e8] p-8 md:p-10 lg:p-14">
        <blockquote class="mx-auto max-w-5xl text-center font-serif text-[2rem] italic leading-[1.05] tracking-[-0.04em] text-[#1f1c19] md:text-[3.5rem] lg:text-[4.4rem]">
          "Society has an expiration date. Your style doesn't."
        </blockquote>
      </section>

      <!-- Visual Language -->
      <section class="overflow-hidden border border-black/10 bg-white/30 p-6 md:p-8 lg:p-12">
        <div class="mb-8 text-[11px] uppercase tracking-editorial text-black/50">Visual Language</div>
        <div class="grid gap-5 lg:grid-cols-12">
          <div class="border border-black/10 bg-sand2 p-6 lg:col-span-4">
            <h2 class="font-serif text-[2rem] leading-[0.98] tracking-[-0.04em]">Typography</h2>
            <p class="mt-4 text-sm leading-7 text-black/66">
              Custom display type that hits like a magazine cover from another dimension. Every headline demands attention — bold, unapologetic, and completely ownable.
            </p>
          </div>
          <div class="border border-black/10 bg-sand2 p-6 lg:col-span-4">
            <h2 class="font-serif text-[2rem] leading-[0.98] tracking-[-0.04em]">Colour</h2>
            <p class="mt-4 text-sm leading-7 text-black/66">
              Near-black backgrounds, #39FF14 neon green. The most confrontational colour combination in the palette — and the most memorable. It signals immediately that this is not a brand that asks permission.
            </p>
          </div>
          <div class="border border-black/10 bg-sand2 p-6 lg:col-span-4">
            <h2 class="font-serif text-[2rem] leading-[0.98] tracking-[-0.04em]">Layout</h2>
            <p class="mt-4 text-sm leading-7 text-black/66">
              An A4 magazine format structure underlying everything. The chaos is controlled — editorial discipline applied at full intensity, proving that structure and disruption are not opposites.
            </p>
          </div>
        </div>
      </section>

      <!-- The Work -->
<section class="overflow-hidden border border-black/10 bg-white/30 p-6 md:p-8 lg:p-12">
  <div class="mb-8 text-[11px] uppercase tracking-editorial text-black/50">The Work</div>
  <div class="grid gap-5 lg:grid-cols-12">
    <div class="overflow-hidden lg:col-span-7">
      <img
        src="https://res.cloudinary.com/dragon-fire-design-studio/image/upload/f_auto,q_90/v1774351841/Obsidian/dw-catalog_f96syj.png"
        alt="Deathwings catalog"
        class="w-full h-full object-cover object-top"
      />
    </div>
    <div class="grid gap-5 lg:col-span-5">
      <div class="overflow-hidden">
        <img
          src="https://res.cloudinary.com/dragon-fire-design-studio/image/upload/f_auto,q_90/v1774351851/Obsidian/dw-unleashed_lmwhhd.png"
          alt="Deathwings Unleashed product page"
          class="w-full object-cover object-top"
        />
      </div>
      <div class="overflow-hidden">
        <img
          src="https://res.cloudinary.com/dragon-fire-design-studio/image/upload/f_auto,q_90/v1774351845/Obsidian/dw-faceless_qpegxg.png"
          alt="Deathwings order form"
          class="w-full object-cover object-top"
        />
      </div>
    </div>
  </div>
</section>
      <!-- The Result -->
      <section class="overflow-hidden border border-black/10 bg-ink p-6 text-cream md:p-8 lg:p-12">
        <div class="grid gap-6 lg:grid-cols-12">
          <div class="lg:col-span-3">
            <div class="text-[11px] uppercase tracking-editorial text-white/45">The Result</div>
          </div>
          <div class="lg:col-span-9">
            <p class="max-w-4xl font-serif text-[1.8rem] leading-[1.08] tracking-[-0.03em] md:text-[2.6rem]">
              A live brand with a genuine community behind it. Launched February 14th 2026, Deathwings is proof that editorial magazine thinking works at full intensity.
            </p>
            <p class="mt-6 max-w-3xl text-base leading-8 text-white/68">
              The Refuse To Fade philosophy runs through every design decision — from the A4 magazine grid to the neon green accent. A brand built to last, for people who refuse to disappear.
            </p>
            <div class="mt-8 border-t border-white/12 pt-6">
              <a href="https://wearedeathwings.com" target="_blank" rel="noopener noreferrer" class="inline-block rounded-none border border-white/30 px-6 py-3 text-[11px] uppercase tracking-[0.22em] text-white/70 transition hover:border-white hover:text-white">
                View Live Site →
              </a>
            </div>
          </div>
        </div>
      </section>

      <!-- Next Project -->
      <section class="border border-black/10 bg-sand3 p-6 md:p-8 lg:p-12">
        <div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
          <div>
            <div class="text-[11px] uppercase tracking-editorial text-black/50">Next Project</div>
            <p class="mt-4 font-serif text-[2rem] leading-[0.98] tracking-[-0.04em] md:text-[3rem]">
              Spectral
            </p>
          </div>
          <a href="spectral.html" class="text-sm uppercase tracking-[0.22em] text-black/45 transition hover:text-ink">View next →</a>
        </div>
      </section>

    </main>

 <footer class="border-t border-black/10 py-5">
  <div class="flex flex-col gap-3 text-[11px] uppercase tracking-[0.22em] text-black/45 md:flex-row md:items-end md:justify-between">
    <div class="flex flex-col gap-2">
      <span>Obsidian Studio</span>
      <div class="flex gap-4">
        <a href="privacy-notice.html" class="transition hover:text-black">Privacy Notice</a>
        <a href="terms.html" class="transition hover:text-black">Terms</a>
      </div>
    </div>
    <span>Web Design With An Editorial Eye</span>
  </div>
</footer>

  </div>
</body>
</html>