Duotone UI Kit - Free HTML/CSS UI Kit
A bold, high-contrast UI kit featuring heavy geometric typography, thick solid borders, sharp offset drop shadows, and a strict Vibrant Orange & Deep Indigo color palette.
Download Full Kit (.zip)
Complete kit with all components & styles
Just need one component?
Download base.css and add the following line to your HTML:
<link rel="stylesheet" href="base.css">
Then grab a component below and add it to your HTML.
Color Palette
Deep Indigo
#312E81
Vibrant Orange
#EA580C
Light Background
#F8FAFC
Stark White
#FFFFFF
Slate Text
#0F172A
Typography
Hero Sections
Brutalist Centered Hero
HTML
<section class="dt-hero-centered">
<div class="dt-hero-container">
<div class="dt-badge bg-orange text-white">Version 3.0 Launch</div>
<h1 class="dt-hero-title">
Design Boldly. <span class="dt-highlight bg-indigo text-white">No Apologies.</span>
</h1>
<p class="dt-hero-subtitle">
A high-contrast, brutalist design system engineered to dominate. Perfect for websites, SaaS dashboards, and creative portfolios looking for massive attitude.
</p>
<div class="dt-hero-actions">
<button class="dt-btn dt-btn-accent">Get Started Free</button>
<button class="dt-btn dt-btn-outline">View Docs</button>
</div>
<div class="dt-hero-preview dt-surface">
<div class="dt-preview-header">
<div class="dt-window-dots">
<span></span>
<span></span>
<span></span>
</div>
<div class="dt-window-title">cosmic_dashboard.html</div>
</div>
<div class="dt-preview-body">
<div class="dt-skeleton-grid">
<div class="dt-skeleton-card dt-surface">
<div class="dt-skeleton-line dt-line-short bg-orange"></div>
<div class="dt-skeleton-line dt-line-medium"></div>
</div>
<div class="dt-skeleton-card dt-surface">
<div class="dt-skeleton-line dt-line-short bg-indigo"></div>
<div class="dt-skeleton-line dt-line-medium"></div>
</div>
<div class="dt-skeleton-card dt-surface">
<div class="dt-skeleton-line dt-line-short"></div>
<div class="dt-skeleton-line dt-line-medium"></div>
</div>
</div>
</div>
</div>
</div>
</section>
CSS (Component Only)
/* Component: Brutalist Centered Hero */
/* NOTE: This component requires base.css to be included in your page. */
.dt-hero-centered {
position: relative;
padding: 5rem 1.5rem;
overflow: hidden;
}
.dt-hero-container {
max-width: 900px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.dt-badge {
display: inline-flex;
align-items: center;
padding: 0.35rem 1rem;
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 0.85rem;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: 2px 2px 0px var(--dt-border);
border-radius: var(--dt-radius);
margin-bottom: 2rem;
}
.dt-hero-title {
font-size: 4rem;
line-height: 1.1;
font-weight: 700;
margin-bottom: 1.5rem;
letter-spacing: -0.03em;
color: var(--dt-text);
}
.dt-highlight {
display: inline-block;
padding: 0.1rem 0.75rem;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow);
transform: rotate(-1deg);
margin-left: 0.25rem;
}
.dt-hero-subtitle {
font-size: 1.2rem;
max-width: 650px;
margin-bottom: 2.5rem;
color: var(--dt-text-muted);
}
.dt-hero-actions {
display: flex;
gap: 1rem;
margin-bottom: 3.5rem;
}
/* Brutalist Window Preview */
.dt-hero-preview {
width: 100%;
max-width: 800px;
padding: 0;
overflow: hidden;
box-shadow: var(--dt-shadow-lg);
}
.dt-preview-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
border-bottom: var(--dt-border-width) solid var(--dt-border);
background-color: #F1F5F9;
}
.dt-window-dots {
display: flex;
gap: 0.4rem;
}
.dt-window-dots span {
width: 10px;
height: 10px;
border-radius: 50%;
border: 1.5px solid var(--dt-border);
background-color: #CBD5E1;
}
.dt-window-title {
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 0.8rem;
color: var(--dt-text-muted);
}
.dt-preview-body {
padding: 2rem;
background-color: var(--dt-bg);
}
.dt-skeleton-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.dt-skeleton-card {
padding: 1.25rem;
background-color: #FFFFFF;
box-shadow: var(--dt-shadow-sm);
}
.dt-skeleton-line {
height: 12px;
background-color: #E2E8F0;
border: 1.5px solid var(--dt-border);
border-radius: var(--dt-radius);
margin-bottom: 0.75rem;
}
.dt-skeleton-line:last-child {
margin-bottom: 0;
}
.dt-line-short {
width: 40%;
}
.dt-line-medium {
width: 75%;
}
@media (max-width: 768px) {
.dt-hero-title {
font-size: 2.75rem;
}
.dt-highlight {
display: block;
width: fit-content;
margin: 0.75rem auto 0;
}
.dt-hero-actions {
flex-direction: column;
width: 100%;
max-width: 320px;
}
.dt-skeleton-grid {
grid-template-columns: 1fr;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&display=swap');
/* Base Reset */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--dt-indigo: #312E81;
--dt-indigo-light: #4F46E5;
--dt-orange: #EA580C;
--dt-orange-light: #F97316;
--dt-bg: #F8FAFC;
--dt-surface: #FFFFFF;
--dt-text: #0F172A;
--dt-text-muted: #475569;
--dt-border: #0F172A;
--dt-border-width: 2px;
--dt-radius: 4px;
/* Hard solid shadows */
--dt-shadow: 4px 4px 0px var(--dt-border);
--dt-shadow-sm: 2px 2px 0px var(--dt-border);
--dt-shadow-lg: 8px 8px 0px var(--dt-border);
--dt-shadow-orange: 4px 4px 0px var(--dt-orange);
--dt-shadow-indigo: 4px 4px 0px var(--dt-indigo);
--dt-font-heading: 'Space Grotesk', sans-serif;
--dt-font-body: 'Inter', sans-serif;
}
body {
margin: 0;
font-family: var(--dt-font-body);
color: var(--dt-text);
background-color: var(--dt-bg);
-webkit-font-smoothing: antialiased;
}
/* Duotone / Brutalist Utilities */
.dt-surface {
background-color: var(--dt-surface);
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow);
border-radius: var(--dt-radius);
padding: 1.5rem;
transition: all 0.15s ease;
}
.dt-surface-indigo {
background-color: var(--dt-indigo);
color: #FFFFFF;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow);
border-radius: var(--dt-radius);
padding: 1.5rem;
}
.dt-surface-orange {
background-color: var(--dt-orange);
color: #FFFFFF;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow);
border-radius: var(--dt-radius);
padding: 1.5rem;
}
/* Global Buttons */
.dt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 1rem;
border: var(--dt-border-width) solid var(--dt-border);
border-radius: var(--dt-radius);
cursor: pointer;
text-decoration: none;
transition: all 0.1s ease;
gap: 0.5rem;
position: relative;
}
/* Primary Button (Deep Indigo / White / Orange shadow or custom interaction) */
.dt-btn-primary {
background-color: var(--dt-indigo);
color: #FFFFFF;
box-shadow: var(--dt-shadow);
}
.dt-btn-primary:hover {
background-color: var(--dt-indigo-light);
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px var(--dt-border);
}
.dt-btn-primary:active {
transform: translate(4px, 4px);
box-shadow: 0px 0px 0px var(--dt-border);
}
/* Secondary/Accent Button (Vibrant Orange) */
.dt-btn-accent {
background-color: var(--dt-orange);
color: #FFFFFF;
box-shadow: var(--dt-shadow);
}
.dt-btn-accent:hover {
background-color: var(--dt-orange-light);
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px var(--dt-border);
}
.dt-btn-accent:active {
transform: translate(4px, 4px);
box-shadow: 0px 0px 0px var(--dt-border);
}
/* Outline Button */
.dt-btn-outline {
background-color: var(--dt-surface);
color: var(--dt-text);
box-shadow: var(--dt-shadow);
}
.dt-btn-outline:hover {
background-color: #F1F5F9;
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px var(--dt-border);
}
.dt-btn-outline:active {
transform: translate(4px, 4px);
box-shadow: 0px 0px 0px var(--dt-border);
}
/* Ghost / Plain Button */
.dt-btn-ghost {
background: transparent;
border-color: transparent;
color: var(--dt-text);
}
.dt-btn-ghost:hover {
background-color: rgba(15, 23, 42, 0.05);
border-color: var(--dt-border);
}
.dt-btn-ghost:active {
transform: translate(2px, 2px);
}
.dt-btn-circle {
width: 44px;
height: 44px;
padding: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.dt-btn-block {
width: 100%;
}
/* Global Form Inputs */
.dt-input {
width: 100%;
padding: 0.875rem 1rem;
border: var(--dt-border-width) solid var(--dt-border);
border-radius: var(--dt-radius);
font-family: var(--dt-font-body);
font-size: 0.95rem;
color: var(--dt-text);
background-color: var(--dt-surface);
outline: none;
transition: all 0.15s ease;
}
.dt-input::placeholder {
color: var(--dt-text-muted);
opacity: 0.7;
}
.dt-input:focus {
box-shadow: var(--dt-shadow-indigo);
transform: translate(-2px, -2px);
}
.dt-label {
display: block;
margin-bottom: 0.5rem;
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 0.95rem;
color: var(--dt-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--dt-font-heading);
font-weight: 700;
margin: 0;
color: var(--dt-text);
}
p {
line-height: 1.6;
margin: 0;
color: var(--dt-text-muted);
}
/* Text Colors */
.text-indigo { color: var(--dt-indigo); }
.text-orange { color: var(--dt-orange); }
.text-white { color: #FFFFFF; }
/* Accent background */
.bg-indigo { background-color: var(--dt-indigo); }
.bg-orange { background-color: var(--dt-orange); }
/* --- COMPONENT STYLES --- */
.dt-hero-centered {
position: relative;
padding: 5rem 1.5rem;
overflow: hidden;
}
.dt-hero-container {
max-width: 900px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.dt-badge {
display: inline-flex;
align-items: center;
padding: 0.35rem 1rem;
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 0.85rem;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: 2px 2px 0px var(--dt-border);
border-radius: var(--dt-radius);
margin-bottom: 2rem;
}
.dt-hero-title {
font-size: 4rem;
line-height: 1.1;
font-weight: 700;
margin-bottom: 1.5rem;
letter-spacing: -0.03em;
color: var(--dt-text);
}
.dt-highlight {
display: inline-block;
padding: 0.1rem 0.75rem;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow);
transform: rotate(-1deg);
margin-left: 0.25rem;
}
.dt-hero-subtitle {
font-size: 1.2rem;
max-width: 650px;
margin-bottom: 2.5rem;
color: var(--dt-text-muted);
}
.dt-hero-actions {
display: flex;
gap: 1rem;
margin-bottom: 3.5rem;
}
/* Brutalist Window Preview */
.dt-hero-preview {
width: 100%;
max-width: 800px;
padding: 0;
overflow: hidden;
box-shadow: var(--dt-shadow-lg);
}
.dt-preview-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
border-bottom: var(--dt-border-width) solid var(--dt-border);
background-color: #F1F5F9;
}
.dt-window-dots {
display: flex;
gap: 0.4rem;
}
.dt-window-dots span {
width: 10px;
height: 10px;
border-radius: 50%;
border: 1.5px solid var(--dt-border);
background-color: #CBD5E1;
}
.dt-window-title {
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 0.8rem;
color: var(--dt-text-muted);
}
.dt-preview-body {
padding: 2rem;
background-color: var(--dt-bg);
}
.dt-skeleton-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.dt-skeleton-card {
padding: 1.25rem;
background-color: #FFFFFF;
box-shadow: var(--dt-shadow-sm);
}
.dt-skeleton-line {
height: 12px;
background-color: #E2E8F0;
border: 1.5px solid var(--dt-border);
border-radius: var(--dt-radius);
margin-bottom: 0.75rem;
}
.dt-skeleton-line:last-child {
margin-bottom: 0;
}
.dt-line-short {
width: 40%;
}
.dt-line-medium {
width: 75%;
}
@media (max-width: 768px) {
.dt-hero-title {
font-size: 2.75rem;
}
.dt-highlight {
display: block;
width: fit-content;
margin: 0.75rem auto 0;
}
.dt-hero-actions {
flex-direction: column;
width: 100%;
max-width: 320px;
}
.dt-skeleton-grid {
grid-template-columns: 1fr;
}
}
Heavy Split Hero
HTML
<section class="dt-hero-split">
<div class="dt-hero-content">
<h2 class="dt-hero-title">
Raw Contrast. <span class="dt-highlight bg-orange text-white">Pure Speed.</span>
</h2>
<p class="dt-hero-subtitle">
A radical departure from boring, soft design patterns. This kit pairs absolute clarity with eye-popping layouts to give your UI the edge it deserves.
</p>
<div class="dt-hero-actions">
<a href="#" class="dt-btn dt-btn-primary">Explore Kit</a>
<a href="#" class="dt-btn dt-btn-outline">Watch Demo</a>
</div>
</div>
<div class="dt-hero-visual">
<div class="dt-visual-container">
<div class="dt-visual-card card-1 dt-surface">
<div class="dt-visual-badge bg-indigo text-white">3.4s</div>
<div class="dt-visual-label">Time to Interactive</div>
</div>
<div class="dt-visual-card card-2 dt-surface">
<div class="dt-visual-badge bg-orange text-white">+87%</div>
<div class="dt-visual-label">Performance Boost</div>
</div>
</div>
</div>
</section>
CSS (Component Only)
/* Component: Heavy Split Hero */
/* NOTE: This component requires base.css to be included in your page. */
.dt-hero-split {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 4rem;
align-items: center;
padding: 5rem 2rem;
max-width: 1200px;
margin: 0 auto;
}
.dt-hero-title {
font-size: 3.75rem;
line-height: 1.1;
font-weight: 700;
margin-bottom: 1.5rem;
letter-spacing: -0.02em;
}
.dt-highlight {
display: inline-block;
padding: 0.1rem 0.5rem;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow);
transform: rotate(1deg);
}
.dt-hero-subtitle {
font-size: 1.15rem;
color: var(--dt-text-muted);
margin-bottom: 2.5rem;
max-width: 540px;
}
.dt-hero-actions {
display: flex;
gap: 1rem;
}
/* Brutalist Visual Stack */
.dt-hero-visual {
position: relative;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}
.dt-visual-container {
position: relative;
width: 100%;
height: 100%;
}
.dt-visual-card {
position: absolute;
width: 250px;
padding: 1.5rem;
background-color: #FFFFFF;
transition: transform 0.2s ease;
}
.card-1 {
top: 15%;
left: 5%;
transform: rotate(-3deg);
box-shadow: var(--dt-shadow-lg);
}
.card-2 {
bottom: 15%;
right: 5%;
transform: rotate(4deg);
box-shadow: var(--dt-shadow-lg);
}
.dt-visual-card:hover {
transform: scale(1.05) rotate(0deg);
z-index: 10;
}
.dt-visual-badge {
display: inline-block;
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 1.75rem;
padding: 0.25rem 0.75rem;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow-sm);
border-radius: var(--dt-radius);
margin-bottom: 1rem;
}
.dt-visual-label {
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 0.95rem;
color: var(--dt-text);
}
@media (max-width: 992px) {
.dt-hero-split {
grid-template-columns: 1fr;
text-align: center;
gap: 3rem;
padding: 3rem 1.5rem;
}
.dt-hero-subtitle {
margin-left: auto;
margin-right: auto;
}
.dt-hero-actions {
justify-content: center;
}
.dt-hero-visual {
height: 320px;
}
.dt-visual-card {
position: relative;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
transform: none !important;
margin: 0 0.5rem;
width: 100%;
max-width: 220px;
box-shadow: var(--dt-shadow) !important;
}
.dt-visual-container {
display: flex;
justify-content: center;
gap: 1rem;
height: auto;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&display=swap');
/* Base Reset */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--dt-indigo: #312E81;
--dt-indigo-light: #4F46E5;
--dt-orange: #EA580C;
--dt-orange-light: #F97316;
--dt-bg: #F8FAFC;
--dt-surface: #FFFFFF;
--dt-text: #0F172A;
--dt-text-muted: #475569;
--dt-border: #0F172A;
--dt-border-width: 2px;
--dt-radius: 4px;
/* Hard solid shadows */
--dt-shadow: 4px 4px 0px var(--dt-border);
--dt-shadow-sm: 2px 2px 0px var(--dt-border);
--dt-shadow-lg: 8px 8px 0px var(--dt-border);
--dt-shadow-orange: 4px 4px 0px var(--dt-orange);
--dt-shadow-indigo: 4px 4px 0px var(--dt-indigo);
--dt-font-heading: 'Space Grotesk', sans-serif;
--dt-font-body: 'Inter', sans-serif;
}
body {
margin: 0;
font-family: var(--dt-font-body);
color: var(--dt-text);
background-color: var(--dt-bg);
-webkit-font-smoothing: antialiased;
}
/* Duotone / Brutalist Utilities */
.dt-surface {
background-color: var(--dt-surface);
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow);
border-radius: var(--dt-radius);
padding: 1.5rem;
transition: all 0.15s ease;
}
.dt-surface-indigo {
background-color: var(--dt-indigo);
color: #FFFFFF;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow);
border-radius: var(--dt-radius);
padding: 1.5rem;
}
.dt-surface-orange {
background-color: var(--dt-orange);
color: #FFFFFF;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow);
border-radius: var(--dt-radius);
padding: 1.5rem;
}
/* Global Buttons */
.dt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 1rem;
border: var(--dt-border-width) solid var(--dt-border);
border-radius: var(--dt-radius);
cursor: pointer;
text-decoration: none;
transition: all 0.1s ease;
gap: 0.5rem;
position: relative;
}
/* Primary Button (Deep Indigo / White / Orange shadow or custom interaction) */
.dt-btn-primary {
background-color: var(--dt-indigo);
color: #FFFFFF;
box-shadow: var(--dt-shadow);
}
.dt-btn-primary:hover {
background-color: var(--dt-indigo-light);
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px var(--dt-border);
}
.dt-btn-primary:active {
transform: translate(4px, 4px);
box-shadow: 0px 0px 0px var(--dt-border);
}
/* Secondary/Accent Button (Vibrant Orange) */
.dt-btn-accent {
background-color: var(--dt-orange);
color: #FFFFFF;
box-shadow: var(--dt-shadow);
}
.dt-btn-accent:hover {
background-color: var(--dt-orange-light);
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px var(--dt-border);
}
.dt-btn-accent:active {
transform: translate(4px, 4px);
box-shadow: 0px 0px 0px var(--dt-border);
}
/* Outline Button */
.dt-btn-outline {
background-color: var(--dt-surface);
color: var(--dt-text);
box-shadow: var(--dt-shadow);
}
.dt-btn-outline:hover {
background-color: #F1F5F9;
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px var(--dt-border);
}
.dt-btn-outline:active {
transform: translate(4px, 4px);
box-shadow: 0px 0px 0px var(--dt-border);
}
/* Ghost / Plain Button */
.dt-btn-ghost {
background: transparent;
border-color: transparent;
color: var(--dt-text);
}
.dt-btn-ghost:hover {
background-color: rgba(15, 23, 42, 0.05);
border-color: var(--dt-border);
}
.dt-btn-ghost:active {
transform: translate(2px, 2px);
}
.dt-btn-circle {
width: 44px;
height: 44px;
padding: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.dt-btn-block {
width: 100%;
}
/* Global Form Inputs */
.dt-input {
width: 100%;
padding: 0.875rem 1rem;
border: var(--dt-border-width) solid var(--dt-border);
border-radius: var(--dt-radius);
font-family: var(--dt-font-body);
font-size: 0.95rem;
color: var(--dt-text);
background-color: var(--dt-surface);
outline: none;
transition: all 0.15s ease;
}
.dt-input::placeholder {
color: var(--dt-text-muted);
opacity: 0.7;
}
.dt-input:focus {
box-shadow: var(--dt-shadow-indigo);
transform: translate(-2px, -2px);
}
.dt-label {
display: block;
margin-bottom: 0.5rem;
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 0.95rem;
color: var(--dt-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--dt-font-heading);
font-weight: 700;
margin: 0;
color: var(--dt-text);
}
p {
line-height: 1.6;
margin: 0;
color: var(--dt-text-muted);
}
/* Text Colors */
.text-indigo { color: var(--dt-indigo); }
.text-orange { color: var(--dt-orange); }
.text-white { color: #FFFFFF; }
/* Accent background */
.bg-indigo { background-color: var(--dt-indigo); }
.bg-orange { background-color: var(--dt-orange); }
/* --- COMPONENT STYLES --- */
.dt-hero-split {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 4rem;
align-items: center;
padding: 5rem 2rem;
max-width: 1200px;
margin: 0 auto;
}
.dt-hero-title {
font-size: 3.75rem;
line-height: 1.1;
font-weight: 700;
margin-bottom: 1.5rem;
letter-spacing: -0.02em;
}
.dt-highlight {
display: inline-block;
padding: 0.1rem 0.5rem;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow);
transform: rotate(1deg);
}
.dt-hero-subtitle {
font-size: 1.15rem;
color: var(--dt-text-muted);
margin-bottom: 2.5rem;
max-width: 540px;
}
.dt-hero-actions {
display: flex;
gap: 1rem;
}
/* Brutalist Visual Stack */
.dt-hero-visual {
position: relative;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}
.dt-visual-container {
position: relative;
width: 100%;
height: 100%;
}
.dt-visual-card {
position: absolute;
width: 250px;
padding: 1.5rem;
background-color: #FFFFFF;
transition: transform 0.2s ease;
}
.card-1 {
top: 15%;
left: 5%;
transform: rotate(-3deg);
box-shadow: var(--dt-shadow-lg);
}
.card-2 {
bottom: 15%;
right: 5%;
transform: rotate(4deg);
box-shadow: var(--dt-shadow-lg);
}
.dt-visual-card:hover {
transform: scale(1.05) rotate(0deg);
z-index: 10;
}
.dt-visual-badge {
display: inline-block;
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 1.75rem;
padding: 0.25rem 0.75rem;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow-sm);
border-radius: var(--dt-radius);
margin-bottom: 1rem;
}
.dt-visual-label {
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 0.95rem;
color: var(--dt-text);
}
@media (max-width: 992px) {
.dt-hero-split {
grid-template-columns: 1fr;
text-align: center;
gap: 3rem;
padding: 3rem 1.5rem;
}
.dt-hero-subtitle {
margin-left: auto;
margin-right: auto;
}
.dt-hero-actions {
justify-content: center;
}
.dt-hero-visual {
height: 320px;
}
.dt-visual-card {
position: relative;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
transform: none !important;
margin: 0 0.5rem;
width: 100%;
max-width: 220px;
box-shadow: var(--dt-shadow) !important;
}
.dt-visual-container {
display: flex;
justify-content: center;
gap: 1rem;
height: auto;
}
}
Forms
High-Contrast Login Form
HTML
<div class="dt-login-card dt-surface">
<div class="dt-login-header">
<h3>Welcome Back</h3>
<p>Access your high-contrast console</p>
</div>
<form class="dt-form">
<div class="dt-form-group">
<label for="email" class="dt-label">Email Address</label>
<input type="email" id="email" placeholder="[email protected]" class="dt-input">
</div>
<div class="dt-form-group">
<div class="dt-label-flex">
<label for="password" class="dt-label">Password</label>
<a href="#" class="dt-forgot-link text-indigo">Forgot password?</a>
</div>
<input type="password" id="password" placeholder="••••••••" class="dt-input">
</div>
<div class="dt-form-group dt-checkbox-group">
<div class="dt-checkbox-wrapper">
<input type="checkbox" id="remember">
<div class="dt-checkbox-custom bg-orange">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="white" stroke-width="3" fill="none" class="dt-check-icon"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
</div>
<label for="remember">Remember console session</label>
</div>
<button type="submit" class="dt-btn dt-btn-primary dt-btn-block">Authenticate</button>
</form>
<div class="dt-login-footer">
<p>New to console? <a href="#" class="text-orange">Create account</a></p>
</div>
</div>
CSS (Component Only)
/* Component: High-Contrast Login Form */
/* NOTE: This component requires base.css to be included in your page. */
.dt-login-card {
max-width: 420px;
margin: 0 auto;
padding: 2.5rem;
box-shadow: var(--dt-shadow-lg);
}
.dt-login-header {
text-align: center;
margin-bottom: 2.5rem;
}
.dt-login-header h3 {
font-size: 1.75rem;
margin-bottom: 0.5rem;
}
.dt-form-group {
margin-bottom: 1.5rem;
}
.dt-label-flex {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.dt-label-flex .dt-label {
margin-bottom: 0;
}
.dt-forgot-link {
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 0.85rem;
text-decoration: none;
}
.dt-forgot-link:hover {
text-decoration: underline;
}
.dt-checkbox-group {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 2rem;
}
.dt-checkbox-wrapper {
position: relative;
width: 20px;
height: 20px;
flex-shrink: 0;
}
.dt-checkbox-wrapper input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 100%;
width: 100%;
z-index: 2;
margin: 0;
}
.dt-checkbox-custom {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: var(--dt-border-width) solid var(--dt-border);
border-radius: var(--dt-radius);
display: flex;
align-items: center;
justify-content: center;
background-color: #FFFFFF;
transition: all 0.1s ease;
}
.dt-check-icon {
opacity: 0;
transform: scale(0);
transition: all 0.1s ease;
}
.dt-checkbox-wrapper input[type="checkbox"]:checked ~ .dt-checkbox-custom {
background-color: var(--dt-orange);
color: #FFFFFF;
box-shadow: 2px 2px 0px var(--dt-border);
}
.dt-checkbox-wrapper input[type="checkbox"]:checked ~ .dt-checkbox-custom .dt-check-icon {
opacity: 1;
transform: scale(1);
}
.dt-checkbox-group label {
margin-bottom: 0;
cursor: pointer;
font-size: 0.9rem;
font-weight: 500;
color: var(--dt-text-muted);
}
.dt-login-footer {
margin-top: 2rem;
text-align: center;
font-size: 0.9rem;
color: var(--dt-text-muted);
}
.dt-login-footer a {
text-decoration: none;
font-family: var(--dt-font-heading);
font-weight: 700;
}
.dt-login-footer a:hover {
text-decoration: underline;
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&display=swap');
/* Base Reset */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--dt-indigo: #312E81;
--dt-indigo-light: #4F46E5;
--dt-orange: #EA580C;
--dt-orange-light: #F97316;
--dt-bg: #F8FAFC;
--dt-surface: #FFFFFF;
--dt-text: #0F172A;
--dt-text-muted: #475569;
--dt-border: #0F172A;
--dt-border-width: 2px;
--dt-radius: 4px;
/* Hard solid shadows */
--dt-shadow: 4px 4px 0px var(--dt-border);
--dt-shadow-sm: 2px 2px 0px var(--dt-border);
--dt-shadow-lg: 8px 8px 0px var(--dt-border);
--dt-shadow-orange: 4px 4px 0px var(--dt-orange);
--dt-shadow-indigo: 4px 4px 0px var(--dt-indigo);
--dt-font-heading: 'Space Grotesk', sans-serif;
--dt-font-body: 'Inter', sans-serif;
}
body {
margin: 0;
font-family: var(--dt-font-body);
color: var(--dt-text);
background-color: var(--dt-bg);
-webkit-font-smoothing: antialiased;
}
/* Duotone / Brutalist Utilities */
.dt-surface {
background-color: var(--dt-surface);
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow);
border-radius: var(--dt-radius);
padding: 1.5rem;
transition: all 0.15s ease;
}
.dt-surface-indigo {
background-color: var(--dt-indigo);
color: #FFFFFF;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow);
border-radius: var(--dt-radius);
padding: 1.5rem;
}
.dt-surface-orange {
background-color: var(--dt-orange);
color: #FFFFFF;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow);
border-radius: var(--dt-radius);
padding: 1.5rem;
}
/* Global Buttons */
.dt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 1rem;
border: var(--dt-border-width) solid var(--dt-border);
border-radius: var(--dt-radius);
cursor: pointer;
text-decoration: none;
transition: all 0.1s ease;
gap: 0.5rem;
position: relative;
}
/* Primary Button (Deep Indigo / White / Orange shadow or custom interaction) */
.dt-btn-primary {
background-color: var(--dt-indigo);
color: #FFFFFF;
box-shadow: var(--dt-shadow);
}
.dt-btn-primary:hover {
background-color: var(--dt-indigo-light);
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px var(--dt-border);
}
.dt-btn-primary:active {
transform: translate(4px, 4px);
box-shadow: 0px 0px 0px var(--dt-border);
}
/* Secondary/Accent Button (Vibrant Orange) */
.dt-btn-accent {
background-color: var(--dt-orange);
color: #FFFFFF;
box-shadow: var(--dt-shadow);
}
.dt-btn-accent:hover {
background-color: var(--dt-orange-light);
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px var(--dt-border);
}
.dt-btn-accent:active {
transform: translate(4px, 4px);
box-shadow: 0px 0px 0px var(--dt-border);
}
/* Outline Button */
.dt-btn-outline {
background-color: var(--dt-surface);
color: var(--dt-text);
box-shadow: var(--dt-shadow);
}
.dt-btn-outline:hover {
background-color: #F1F5F9;
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px var(--dt-border);
}
.dt-btn-outline:active {
transform: translate(4px, 4px);
box-shadow: 0px 0px 0px var(--dt-border);
}
/* Ghost / Plain Button */
.dt-btn-ghost {
background: transparent;
border-color: transparent;
color: var(--dt-text);
}
.dt-btn-ghost:hover {
background-color: rgba(15, 23, 42, 0.05);
border-color: var(--dt-border);
}
.dt-btn-ghost:active {
transform: translate(2px, 2px);
}
.dt-btn-circle {
width: 44px;
height: 44px;
padding: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.dt-btn-block {
width: 100%;
}
/* Global Form Inputs */
.dt-input {
width: 100%;
padding: 0.875rem 1rem;
border: var(--dt-border-width) solid var(--dt-border);
border-radius: var(--dt-radius);
font-family: var(--dt-font-body);
font-size: 0.95rem;
color: var(--dt-text);
background-color: var(--dt-surface);
outline: none;
transition: all 0.15s ease;
}
.dt-input::placeholder {
color: var(--dt-text-muted);
opacity: 0.7;
}
.dt-input:focus {
box-shadow: var(--dt-shadow-indigo);
transform: translate(-2px, -2px);
}
.dt-label {
display: block;
margin-bottom: 0.5rem;
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 0.95rem;
color: var(--dt-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--dt-font-heading);
font-weight: 700;
margin: 0;
color: var(--dt-text);
}
p {
line-height: 1.6;
margin: 0;
color: var(--dt-text-muted);
}
/* Text Colors */
.text-indigo { color: var(--dt-indigo); }
.text-orange { color: var(--dt-orange); }
.text-white { color: #FFFFFF; }
/* Accent background */
.bg-indigo { background-color: var(--dt-indigo); }
.bg-orange { background-color: var(--dt-orange); }
/* --- COMPONENT STYLES --- */
.dt-login-card {
max-width: 420px;
margin: 0 auto;
padding: 2.5rem;
box-shadow: var(--dt-shadow-lg);
}
.dt-login-header {
text-align: center;
margin-bottom: 2.5rem;
}
.dt-login-header h3 {
font-size: 1.75rem;
margin-bottom: 0.5rem;
}
.dt-form-group {
margin-bottom: 1.5rem;
}
.dt-label-flex {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.dt-label-flex .dt-label {
margin-bottom: 0;
}
.dt-forgot-link {
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 0.85rem;
text-decoration: none;
}
.dt-forgot-link:hover {
text-decoration: underline;
}
.dt-checkbox-group {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 2rem;
}
.dt-checkbox-wrapper {
position: relative;
width: 20px;
height: 20px;
flex-shrink: 0;
}
.dt-checkbox-wrapper input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 100%;
width: 100%;
z-index: 2;
margin: 0;
}
.dt-checkbox-custom {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: var(--dt-border-width) solid var(--dt-border);
border-radius: var(--dt-radius);
display: flex;
align-items: center;
justify-content: center;
background-color: #FFFFFF;
transition: all 0.1s ease;
}
.dt-check-icon {
opacity: 0;
transform: scale(0);
transition: all 0.1s ease;
}
.dt-checkbox-wrapper input[type="checkbox"]:checked ~ .dt-checkbox-custom {
background-color: var(--dt-orange);
color: #FFFFFF;
box-shadow: 2px 2px 0px var(--dt-border);
}
.dt-checkbox-wrapper input[type="checkbox"]:checked ~ .dt-checkbox-custom .dt-check-icon {
opacity: 1;
transform: scale(1);
}
.dt-checkbox-group label {
margin-bottom: 0;
cursor: pointer;
font-size: 0.9rem;
font-weight: 500;
color: var(--dt-text-muted);
}
.dt-login-footer {
margin-top: 2rem;
text-align: center;
font-size: 0.9rem;
color: var(--dt-text-muted);
}
.dt-login-footer a {
text-decoration: none;
font-family: var(--dt-font-heading);
font-weight: 700;
}
.dt-login-footer a:hover {
text-decoration: underline;
}
Chunky Settings Form
HTML
<div class="dt-settings-panel dt-surface">
<div class="dt-panel-header">
<h3>Console Preferences</h3>
<p>Manage your high-contrast account configurations</p>
</div>
<div class="dt-settings-body">
<div class="dt-avatar-upload">
<div class="dt-avatar-wrapper">
<img src="https://i.pravatar.cc/150?img=32" alt="Profile" class="dt-avatar-lg">
</div>
<div class="dt-upload-actions">
<button class="dt-btn dt-btn-outline">Upload Avatar</button>
<button class="dt-btn dt-btn-ghost">Delete</button>
</div>
</div>
<form class="dt-form-grid">
<div class="dt-form-group">
<label class="dt-label">First Name</label>
<input type="text" class="dt-input" value="Sarah">
</div>
<div class="dt-form-group">
<label class="dt-label">Last Name</label>
<input type="text" class="dt-input" value="Jenkins">
</div>
<div class="dt-form-group full-width">
<label class="dt-label">Linked Email Address</label>
<input type="email" class="dt-input" value="[email protected]">
</div>
<div class="dt-form-group full-width">
<label class="dt-label">Bio Description</label>
<textarea class="dt-input dt-textarea" rows="4">Brutalist interface engineer. Optimizing high-contrast responsive layouts.</textarea>
</div>
<div class="dt-form-group full-width dt-toggle-group">
<div class="dt-toggle-info">
<label class="dt-label">Hardware Acceleration</label>
<p>Enable extreme contrast graphic rendering</p>
</div>
<label class="dt-toggle">
<input type="checkbox" checked>
<span class="dt-slider bg-orange"></span>
</label>
</div>
</form>
</div>
<div class="dt-panel-footer">
<button class="dt-btn dt-btn-ghost">Reset changes</button>
<button class="dt-btn dt-btn-primary">Save Config</button>
</div>
</div>
CSS (Component Only)
/* Component: Chunky Settings Form */
/* NOTE: This component requires base.css to be included in your page. */
.dt-settings-panel {
max-width: 750px;
margin: 0 auto;
padding: 0;
box-shadow: var(--dt-shadow-lg);
overflow: hidden;
}
.dt-panel-header {
padding: 2rem;
border-bottom: var(--dt-border-width) solid var(--dt-border);
background-color: #F8FAFC;
}
.dt-panel-header h3 {
font-size: 1.5rem;
margin-bottom: 0.25rem;
}
.dt-settings-body {
padding: 2rem;
}
.dt-avatar-upload {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 2.5rem;
}
.dt-avatar-wrapper {
width: 80px;
height: 80px;
border-radius: 50%;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: 3px 3px 0px var(--dt-border);
overflow: hidden;
flex-shrink: 0;
}
.dt-avatar-lg {
width: 100%;
height: 100%;
object-fit: cover;
}
.dt-upload-actions {
display: flex;
gap: 0.75rem;
}
.dt-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.dt-form-group.full-width {
grid-column: 1 / -1;
}
.dt-textarea {
resize: vertical;
min-height: 100px;
}
.dt-toggle-group {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1.5rem;
margin-top: 1rem;
border-top: var(--dt-border-width) solid var(--dt-border);
}
.dt-toggle-info .dt-label {
margin-bottom: 0.125rem;
}
.dt-toggle-info p {
font-size: 0.85rem;
color: var(--dt-text-muted);
}
/* Chunky Toggle Switch */
.dt-toggle {
position: relative;
display: inline-block;
width: 54px;
height: 28px;
flex-shrink: 0;
}
.dt-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.dt-slider {
position: absolute;
cursor: pointer;
top: 0; left: 0; right: 0; bottom: 0;
background-color: #FFFFFF;
border: var(--dt-border-width) solid var(--dt-border);
transition: .15s;
border-radius: 30px;
}
.dt-slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: var(--dt-border);
transition: .15s;
border-radius: 50%;
}
input:checked + .dt-slider {
background-color: var(--dt-orange);
}
input:checked + .dt-slider:before {
background-color: #FFFFFF;
transform: translateX(24px);
border: 1px solid var(--dt-border);
}
.dt-panel-footer {
padding: 1.5rem 2rem;
border-top: var(--dt-border-width) solid var(--dt-border);
display: flex;
justify-content: flex-end;
gap: 1rem;
background-color: #F8FAFC;
}
@media (max-width: 600px) {
.dt-form-grid {
grid-template-columns: 1fr;
}
.dt-avatar-upload {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&display=swap');
/* Base Reset */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--dt-indigo: #312E81;
--dt-indigo-light: #4F46E5;
--dt-orange: #EA580C;
--dt-orange-light: #F97316;
--dt-bg: #F8FAFC;
--dt-surface: #FFFFFF;
--dt-text: #0F172A;
--dt-text-muted: #475569;
--dt-border: #0F172A;
--dt-border-width: 2px;
--dt-radius: 4px;
/* Hard solid shadows */
--dt-shadow: 4px 4px 0px var(--dt-border);
--dt-shadow-sm: 2px 2px 0px var(--dt-border);
--dt-shadow-lg: 8px 8px 0px var(--dt-border);
--dt-shadow-orange: 4px 4px 0px var(--dt-orange);
--dt-shadow-indigo: 4px 4px 0px var(--dt-indigo);
--dt-font-heading: 'Space Grotesk', sans-serif;
--dt-font-body: 'Inter', sans-serif;
}
body {
margin: 0;
font-family: var(--dt-font-body);
color: var(--dt-text);
background-color: var(--dt-bg);
-webkit-font-smoothing: antialiased;
}
/* Duotone / Brutalist Utilities */
.dt-surface {
background-color: var(--dt-surface);
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow);
border-radius: var(--dt-radius);
padding: 1.5rem;
transition: all 0.15s ease;
}
.dt-surface-indigo {
background-color: var(--dt-indigo);
color: #FFFFFF;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow);
border-radius: var(--dt-radius);
padding: 1.5rem;
}
.dt-surface-orange {
background-color: var(--dt-orange);
color: #FFFFFF;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow);
border-radius: var(--dt-radius);
padding: 1.5rem;
}
/* Global Buttons */
.dt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 1rem;
border: var(--dt-border-width) solid var(--dt-border);
border-radius: var(--dt-radius);
cursor: pointer;
text-decoration: none;
transition: all 0.1s ease;
gap: 0.5rem;
position: relative;
}
/* Primary Button (Deep Indigo / White / Orange shadow or custom interaction) */
.dt-btn-primary {
background-color: var(--dt-indigo);
color: #FFFFFF;
box-shadow: var(--dt-shadow);
}
.dt-btn-primary:hover {
background-color: var(--dt-indigo-light);
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px var(--dt-border);
}
.dt-btn-primary:active {
transform: translate(4px, 4px);
box-shadow: 0px 0px 0px var(--dt-border);
}
/* Secondary/Accent Button (Vibrant Orange) */
.dt-btn-accent {
background-color: var(--dt-orange);
color: #FFFFFF;
box-shadow: var(--dt-shadow);
}
.dt-btn-accent:hover {
background-color: var(--dt-orange-light);
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px var(--dt-border);
}
.dt-btn-accent:active {
transform: translate(4px, 4px);
box-shadow: 0px 0px 0px var(--dt-border);
}
/* Outline Button */
.dt-btn-outline {
background-color: var(--dt-surface);
color: var(--dt-text);
box-shadow: var(--dt-shadow);
}
.dt-btn-outline:hover {
background-color: #F1F5F9;
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px var(--dt-border);
}
.dt-btn-outline:active {
transform: translate(4px, 4px);
box-shadow: 0px 0px 0px var(--dt-border);
}
/* Ghost / Plain Button */
.dt-btn-ghost {
background: transparent;
border-color: transparent;
color: var(--dt-text);
}
.dt-btn-ghost:hover {
background-color: rgba(15, 23, 42, 0.05);
border-color: var(--dt-border);
}
.dt-btn-ghost:active {
transform: translate(2px, 2px);
}
.dt-btn-circle {
width: 44px;
height: 44px;
padding: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.dt-btn-block {
width: 100%;
}
/* Global Form Inputs */
.dt-input {
width: 100%;
padding: 0.875rem 1rem;
border: var(--dt-border-width) solid var(--dt-border);
border-radius: var(--dt-radius);
font-family: var(--dt-font-body);
font-size: 0.95rem;
color: var(--dt-text);
background-color: var(--dt-surface);
outline: none;
transition: all 0.15s ease;
}
.dt-input::placeholder {
color: var(--dt-text-muted);
opacity: 0.7;
}
.dt-input:focus {
box-shadow: var(--dt-shadow-indigo);
transform: translate(-2px, -2px);
}
.dt-label {
display: block;
margin-bottom: 0.5rem;
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 0.95rem;
color: var(--dt-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--dt-font-heading);
font-weight: 700;
margin: 0;
color: var(--dt-text);
}
p {
line-height: 1.6;
margin: 0;
color: var(--dt-text-muted);
}
/* Text Colors */
.text-indigo { color: var(--dt-indigo); }
.text-orange { color: var(--dt-orange); }
.text-white { color: #FFFFFF; }
/* Accent background */
.bg-indigo { background-color: var(--dt-indigo); }
.bg-orange { background-color: var(--dt-orange); }
/* --- COMPONENT STYLES --- */
.dt-settings-panel {
max-width: 750px;
margin: 0 auto;
padding: 0;
box-shadow: var(--dt-shadow-lg);
overflow: hidden;
}
.dt-panel-header {
padding: 2rem;
border-bottom: var(--dt-border-width) solid var(--dt-border);
background-color: #F8FAFC;
}
.dt-panel-header h3 {
font-size: 1.5rem;
margin-bottom: 0.25rem;
}
.dt-settings-body {
padding: 2rem;
}
.dt-avatar-upload {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 2.5rem;
}
.dt-avatar-wrapper {
width: 80px;
height: 80px;
border-radius: 50%;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: 3px 3px 0px var(--dt-border);
overflow: hidden;
flex-shrink: 0;
}
.dt-avatar-lg {
width: 100%;
height: 100%;
object-fit: cover;
}
.dt-upload-actions {
display: flex;
gap: 0.75rem;
}
.dt-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.dt-form-group.full-width {
grid-column: 1 / -1;
}
.dt-textarea {
resize: vertical;
min-height: 100px;
}
.dt-toggle-group {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1.5rem;
margin-top: 1rem;
border-top: var(--dt-border-width) solid var(--dt-border);
}
.dt-toggle-info .dt-label {
margin-bottom: 0.125rem;
}
.dt-toggle-info p {
font-size: 0.85rem;
color: var(--dt-text-muted);
}
/* Chunky Toggle Switch */
.dt-toggle {
position: relative;
display: inline-block;
width: 54px;
height: 28px;
flex-shrink: 0;
}
.dt-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.dt-slider {
position: absolute;
cursor: pointer;
top: 0; left: 0; right: 0; bottom: 0;
background-color: #FFFFFF;
border: var(--dt-border-width) solid var(--dt-border);
transition: .15s;
border-radius: 30px;
}
.dt-slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: var(--dt-border);
transition: .15s;
border-radius: 50%;
}
input:checked + .dt-slider {
background-color: var(--dt-orange);
}
input:checked + .dt-slider:before {
background-color: #FFFFFF;
transform: translateX(24px);
border: 1px solid var(--dt-border);
}
.dt-panel-footer {
padding: 1.5rem 2rem;
border-top: var(--dt-border-width) solid var(--dt-border);
display: flex;
justify-content: flex-end;
gap: 1rem;
background-color: #F8FAFC;
}
@media (max-width: 600px) {
.dt-form-grid {
grid-template-columns: 1fr;
}
.dt-avatar-upload {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
}
Cards
Chunky Stat Cards
HTML
<div class="dt-stats-grid">
<div class="dt-stat-card dt-surface">
<div class="dt-stat-header">
<span class="dt-stat-title">Console Revenue</span>
<div class="dt-stat-icon bg-orange text-white">
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2.5" fill="none"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
</div>
</div>
<div class="dt-stat-value">$142,850.00</div>
<div class="dt-stat-footer">
<span class="dt-trend dt-trend-up">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
+24%
</span>
<span class="dt-trend-label">vs last month</span>
</div>
</div>
<div class="dt-stat-card dt-surface">
<div class="dt-stat-header">
<span class="dt-stat-title">Active Nodes</span>
<div class="dt-stat-icon bg-indigo text-white">
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2.5" fill="none"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
</div>
</div>
<div class="dt-stat-value">12,490</div>
<div class="dt-stat-footer">
<span class="dt-trend dt-trend-up">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
+8.2%
</span>
<span class="dt-trend-label">vs last month</span>
</div>
</div>
<div class="dt-stat-card dt-surface">
<div class="dt-stat-header">
<span class="dt-stat-title">Error Frequency</span>
<div class="dt-stat-icon bg-orange text-white">
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2.5" fill="none"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
</div>
</div>
<div class="dt-stat-value">1.04%</div>
<div class="dt-stat-footer">
<span class="dt-trend dt-trend-down">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"></polyline><polyline points="17 18 23 18 23 12"></polyline></svg>
-4.5%
</span>
<span class="dt-trend-label">vs last month</span>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Chunky Stat Cards */
/* NOTE: This component requires base.css to be included in your page. */
.dt-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.dt-stat-card {
display: flex;
flex-direction: column;
padding: 1.75rem;
}
.dt-stat-card:hover {
transform: translate(-3px, -3px);
box-shadow: 7px 7px 0px var(--dt-border);
}
.dt-stat-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.dt-stat-title {
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 0.95rem;
color: var(--dt-text-muted);
}
.dt-stat-icon {
width: 42px;
height: 42px;
border-radius: var(--dt-radius);
display: flex;
align-items: center;
justify-content: center;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: 2px 2px 0px var(--dt-border);
flex-shrink: 0;
}
.dt-stat-value {
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 2.25rem;
color: var(--dt-text);
margin-bottom: 1.5rem;
}
.dt-stat-footer {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
}
.dt-trend {
font-family: var(--dt-font-heading);
font-weight: 700;
padding: 0.125rem 0.5rem;
border: var(--dt-border-width) solid var(--dt-border);
border-radius: var(--dt-radius);
display: inline-flex;
align-items: center;
gap: 0.25rem;
box-shadow: 1px 1px 0px var(--dt-border);
}
.dt-trend-up {
background-color: #DCFCE7;
color: #15803D;
}
.dt-trend-down {
background-color: #FEE2E2;
color: #B91C1C;
}
.dt-trend-label {
color: var(--dt-text-muted);
font-weight: 500;
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&display=swap');
/* Base Reset */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--dt-indigo: #312E81;
--dt-indigo-light: #4F46E5;
--dt-orange: #EA580C;
--dt-orange-light: #F97316;
--dt-bg: #F8FAFC;
--dt-surface: #FFFFFF;
--dt-text: #0F172A;
--dt-text-muted: #475569;
--dt-border: #0F172A;
--dt-border-width: 2px;
--dt-radius: 4px;
/* Hard solid shadows */
--dt-shadow: 4px 4px 0px var(--dt-border);
--dt-shadow-sm: 2px 2px 0px var(--dt-border);
--dt-shadow-lg: 8px 8px 0px var(--dt-border);
--dt-shadow-orange: 4px 4px 0px var(--dt-orange);
--dt-shadow-indigo: 4px 4px 0px var(--dt-indigo);
--dt-font-heading: 'Space Grotesk', sans-serif;
--dt-font-body: 'Inter', sans-serif;
}
body {
margin: 0;
font-family: var(--dt-font-body);
color: var(--dt-text);
background-color: var(--dt-bg);
-webkit-font-smoothing: antialiased;
}
/* Duotone / Brutalist Utilities */
.dt-surface {
background-color: var(--dt-surface);
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow);
border-radius: var(--dt-radius);
padding: 1.5rem;
transition: all 0.15s ease;
}
.dt-surface-indigo {
background-color: var(--dt-indigo);
color: #FFFFFF;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow);
border-radius: var(--dt-radius);
padding: 1.5rem;
}
.dt-surface-orange {
background-color: var(--dt-orange);
color: #FFFFFF;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow);
border-radius: var(--dt-radius);
padding: 1.5rem;
}
/* Global Buttons */
.dt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 1rem;
border: var(--dt-border-width) solid var(--dt-border);
border-radius: var(--dt-radius);
cursor: pointer;
text-decoration: none;
transition: all 0.1s ease;
gap: 0.5rem;
position: relative;
}
/* Primary Button (Deep Indigo / White / Orange shadow or custom interaction) */
.dt-btn-primary {
background-color: var(--dt-indigo);
color: #FFFFFF;
box-shadow: var(--dt-shadow);
}
.dt-btn-primary:hover {
background-color: var(--dt-indigo-light);
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px var(--dt-border);
}
.dt-btn-primary:active {
transform: translate(4px, 4px);
box-shadow: 0px 0px 0px var(--dt-border);
}
/* Secondary/Accent Button (Vibrant Orange) */
.dt-btn-accent {
background-color: var(--dt-orange);
color: #FFFFFF;
box-shadow: var(--dt-shadow);
}
.dt-btn-accent:hover {
background-color: var(--dt-orange-light);
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px var(--dt-border);
}
.dt-btn-accent:active {
transform: translate(4px, 4px);
box-shadow: 0px 0px 0px var(--dt-border);
}
/* Outline Button */
.dt-btn-outline {
background-color: var(--dt-surface);
color: var(--dt-text);
box-shadow: var(--dt-shadow);
}
.dt-btn-outline:hover {
background-color: #F1F5F9;
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px var(--dt-border);
}
.dt-btn-outline:active {
transform: translate(4px, 4px);
box-shadow: 0px 0px 0px var(--dt-border);
}
/* Ghost / Plain Button */
.dt-btn-ghost {
background: transparent;
border-color: transparent;
color: var(--dt-text);
}
.dt-btn-ghost:hover {
background-color: rgba(15, 23, 42, 0.05);
border-color: var(--dt-border);
}
.dt-btn-ghost:active {
transform: translate(2px, 2px);
}
.dt-btn-circle {
width: 44px;
height: 44px;
padding: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.dt-btn-block {
width: 100%;
}
/* Global Form Inputs */
.dt-input {
width: 100%;
padding: 0.875rem 1rem;
border: var(--dt-border-width) solid var(--dt-border);
border-radius: var(--dt-radius);
font-family: var(--dt-font-body);
font-size: 0.95rem;
color: var(--dt-text);
background-color: var(--dt-surface);
outline: none;
transition: all 0.15s ease;
}
.dt-input::placeholder {
color: var(--dt-text-muted);
opacity: 0.7;
}
.dt-input:focus {
box-shadow: var(--dt-shadow-indigo);
transform: translate(-2px, -2px);
}
.dt-label {
display: block;
margin-bottom: 0.5rem;
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 0.95rem;
color: var(--dt-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--dt-font-heading);
font-weight: 700;
margin: 0;
color: var(--dt-text);
}
p {
line-height: 1.6;
margin: 0;
color: var(--dt-text-muted);
}
/* Text Colors */
.text-indigo { color: var(--dt-indigo); }
.text-orange { color: var(--dt-orange); }
.text-white { color: #FFFFFF; }
/* Accent background */
.bg-indigo { background-color: var(--dt-indigo); }
.bg-orange { background-color: var(--dt-orange); }
/* --- COMPONENT STYLES --- */
.dt-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.dt-stat-card {
display: flex;
flex-direction: column;
padding: 1.75rem;
}
.dt-stat-card:hover {
transform: translate(-3px, -3px);
box-shadow: 7px 7px 0px var(--dt-border);
}
.dt-stat-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.dt-stat-title {
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 0.95rem;
color: var(--dt-text-muted);
}
.dt-stat-icon {
width: 42px;
height: 42px;
border-radius: var(--dt-radius);
display: flex;
align-items: center;
justify-content: center;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: 2px 2px 0px var(--dt-border);
flex-shrink: 0;
}
.dt-stat-value {
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 2.25rem;
color: var(--dt-text);
margin-bottom: 1.5rem;
}
.dt-stat-footer {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
}
.dt-trend {
font-family: var(--dt-font-heading);
font-weight: 700;
padding: 0.125rem 0.5rem;
border: var(--dt-border-width) solid var(--dt-border);
border-radius: var(--dt-radius);
display: inline-flex;
align-items: center;
gap: 0.25rem;
box-shadow: 1px 1px 0px var(--dt-border);
}
.dt-trend-up {
background-color: #DCFCE7;
color: #15803D;
}
.dt-trend-down {
background-color: #FEE2E2;
color: #B91C1C;
}
.dt-trend-label {
color: var(--dt-text-muted);
font-weight: 500;
}
Bold Pricing Card
HTML
<div class="dt-pricing-card dt-surface">
<div class="dt-pricing-accent-bar bg-orange"></div>
<div class="dt-pricing-header">
<h3 class="dt-pricing-title">Developer Pro</h3>
<p class="dt-pricing-desc">The high-fidelity stack for aggressive builders.</p>
<div class="dt-pricing-price">
<span class="dt-currency">$</span>
<span class="dt-amount">89</span>
<span class="dt-period">/mo</span>
</div>
</div>
<div class="dt-pricing-features">
<ul>
<li>
<div class="dt-check bg-indigo text-white">
<svg viewBox="0 0 24 24" width="12" height="12" stroke="currentColor" stroke-width="3.5" fill="none"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
Unlimited Console Nodes
</li>
<li>
<div class="dt-check bg-indigo text-white">
<svg viewBox="0 0 24 24" width="12" height="12" stroke="currentColor" stroke-width="3.5" fill="none"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
250 GB Hard Storage
</li>
<li>
<div class="dt-check bg-indigo text-white">
<svg viewBox="0 0 24 24" width="12" height="12" stroke="currentColor" stroke-width="3.5" fill="none"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
Custom Duotone Subdomain
</li>
<li class="dt-feature-disabled">
<div class="dt-check-disabled">
<svg viewBox="0 0 24 24" width="12" height="12" stroke="currentColor" stroke-width="3" fill="none"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</div>
24/7 Dedicated Server Team
</li>
</ul>
</div>
<div class="dt-pricing-footer">
<button class="dt-btn dt-btn-accent dt-btn-block">Initialize Stack</button>
</div>
</div>
CSS (Component Only)
/* Component: Bold Pricing Card */
/* NOTE: This component requires base.css to be included in your page. */
.dt-pricing-card {
max-width: 380px;
margin: 0 auto;
padding: 2.5rem 2rem 2rem;
position: relative;
box-shadow: var(--dt-shadow-lg);
overflow: hidden;
}
.dt-pricing-accent-bar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 8px;
border-bottom: var(--dt-border-width) solid var(--dt-border);
}
.dt-pricing-header {
text-align: center;
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: var(--dt-border-width) solid var(--dt-border);
}
.dt-pricing-title {
font-size: 1.75rem;
margin-bottom: 0.5rem;
}
.dt-pricing-desc {
font-size: 0.95rem;
color: var(--dt-text-muted);
margin-bottom: 1.5rem;
}
.dt-pricing-price {
display: flex;
align-items: flex-end;
justify-content: center;
color: var(--dt-text);
}
.dt-currency {
font-family: var(--dt-font-heading);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
margin-right: 0.2rem;
}
.dt-amount {
font-family: var(--dt-font-heading);
font-size: 4rem;
font-weight: 700;
line-height: 1;
}
.dt-period {
font-family: var(--dt-font-heading);
font-weight: 700;
color: var(--dt-text-muted);
margin-bottom: 0.5rem;
margin-left: 0.2rem;
}
.dt-pricing-features ul {
list-style: none;
padding: 0;
margin: 0 0 2rem 0;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.dt-pricing-features li {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.95rem;
color: var(--dt-text);
font-weight: 600;
}
.dt-check {
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: 1px 1px 0px var(--dt-border);
flex-shrink: 0;
}
.dt-check-disabled {
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: #E2E8F0;
color: #94A3B8;
border: var(--dt-border-width) solid #CBD5E1;
flex-shrink: 0;
}
.dt-feature-disabled {
color: var(--dt-text-muted) !important;
text-decoration: line-through;
opacity: 0.6;
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&display=swap');
/* Base Reset */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--dt-indigo: #312E81;
--dt-indigo-light: #4F46E5;
--dt-orange: #EA580C;
--dt-orange-light: #F97316;
--dt-bg: #F8FAFC;
--dt-surface: #FFFFFF;
--dt-text: #0F172A;
--dt-text-muted: #475569;
--dt-border: #0F172A;
--dt-border-width: 2px;
--dt-radius: 4px;
/* Hard solid shadows */
--dt-shadow: 4px 4px 0px var(--dt-border);
--dt-shadow-sm: 2px 2px 0px var(--dt-border);
--dt-shadow-lg: 8px 8px 0px var(--dt-border);
--dt-shadow-orange: 4px 4px 0px var(--dt-orange);
--dt-shadow-indigo: 4px 4px 0px var(--dt-indigo);
--dt-font-heading: 'Space Grotesk', sans-serif;
--dt-font-body: 'Inter', sans-serif;
}
body {
margin: 0;
font-family: var(--dt-font-body);
color: var(--dt-text);
background-color: var(--dt-bg);
-webkit-font-smoothing: antialiased;
}
/* Duotone / Brutalist Utilities */
.dt-surface {
background-color: var(--dt-surface);
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow);
border-radius: var(--dt-radius);
padding: 1.5rem;
transition: all 0.15s ease;
}
.dt-surface-indigo {
background-color: var(--dt-indigo);
color: #FFFFFF;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow);
border-radius: var(--dt-radius);
padding: 1.5rem;
}
.dt-surface-orange {
background-color: var(--dt-orange);
color: #FFFFFF;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow);
border-radius: var(--dt-radius);
padding: 1.5rem;
}
/* Global Buttons */
.dt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 1rem;
border: var(--dt-border-width) solid var(--dt-border);
border-radius: var(--dt-radius);
cursor: pointer;
text-decoration: none;
transition: all 0.1s ease;
gap: 0.5rem;
position: relative;
}
/* Primary Button (Deep Indigo / White / Orange shadow or custom interaction) */
.dt-btn-primary {
background-color: var(--dt-indigo);
color: #FFFFFF;
box-shadow: var(--dt-shadow);
}
.dt-btn-primary:hover {
background-color: var(--dt-indigo-light);
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px var(--dt-border);
}
.dt-btn-primary:active {
transform: translate(4px, 4px);
box-shadow: 0px 0px 0px var(--dt-border);
}
/* Secondary/Accent Button (Vibrant Orange) */
.dt-btn-accent {
background-color: var(--dt-orange);
color: #FFFFFF;
box-shadow: var(--dt-shadow);
}
.dt-btn-accent:hover {
background-color: var(--dt-orange-light);
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px var(--dt-border);
}
.dt-btn-accent:active {
transform: translate(4px, 4px);
box-shadow: 0px 0px 0px var(--dt-border);
}
/* Outline Button */
.dt-btn-outline {
background-color: var(--dt-surface);
color: var(--dt-text);
box-shadow: var(--dt-shadow);
}
.dt-btn-outline:hover {
background-color: #F1F5F9;
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px var(--dt-border);
}
.dt-btn-outline:active {
transform: translate(4px, 4px);
box-shadow: 0px 0px 0px var(--dt-border);
}
/* Ghost / Plain Button */
.dt-btn-ghost {
background: transparent;
border-color: transparent;
color: var(--dt-text);
}
.dt-btn-ghost:hover {
background-color: rgba(15, 23, 42, 0.05);
border-color: var(--dt-border);
}
.dt-btn-ghost:active {
transform: translate(2px, 2px);
}
.dt-btn-circle {
width: 44px;
height: 44px;
padding: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.dt-btn-block {
width: 100%;
}
/* Global Form Inputs */
.dt-input {
width: 100%;
padding: 0.875rem 1rem;
border: var(--dt-border-width) solid var(--dt-border);
border-radius: var(--dt-radius);
font-family: var(--dt-font-body);
font-size: 0.95rem;
color: var(--dt-text);
background-color: var(--dt-surface);
outline: none;
transition: all 0.15s ease;
}
.dt-input::placeholder {
color: var(--dt-text-muted);
opacity: 0.7;
}
.dt-input:focus {
box-shadow: var(--dt-shadow-indigo);
transform: translate(-2px, -2px);
}
.dt-label {
display: block;
margin-bottom: 0.5rem;
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 0.95rem;
color: var(--dt-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--dt-font-heading);
font-weight: 700;
margin: 0;
color: var(--dt-text);
}
p {
line-height: 1.6;
margin: 0;
color: var(--dt-text-muted);
}
/* Text Colors */
.text-indigo { color: var(--dt-indigo); }
.text-orange { color: var(--dt-orange); }
.text-white { color: #FFFFFF; }
/* Accent background */
.bg-indigo { background-color: var(--dt-indigo); }
.bg-orange { background-color: var(--dt-orange); }
/* --- COMPONENT STYLES --- */
.dt-pricing-card {
max-width: 380px;
margin: 0 auto;
padding: 2.5rem 2rem 2rem;
position: relative;
box-shadow: var(--dt-shadow-lg);
overflow: hidden;
}
.dt-pricing-accent-bar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 8px;
border-bottom: var(--dt-border-width) solid var(--dt-border);
}
.dt-pricing-header {
text-align: center;
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: var(--dt-border-width) solid var(--dt-border);
}
.dt-pricing-title {
font-size: 1.75rem;
margin-bottom: 0.5rem;
}
.dt-pricing-desc {
font-size: 0.95rem;
color: var(--dt-text-muted);
margin-bottom: 1.5rem;
}
.dt-pricing-price {
display: flex;
align-items: flex-end;
justify-content: center;
color: var(--dt-text);
}
.dt-currency {
font-family: var(--dt-font-heading);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
margin-right: 0.2rem;
}
.dt-amount {
font-family: var(--dt-font-heading);
font-size: 4rem;
font-weight: 700;
line-height: 1;
}
.dt-period {
font-family: var(--dt-font-heading);
font-weight: 700;
color: var(--dt-text-muted);
margin-bottom: 0.5rem;
margin-left: 0.2rem;
}
.dt-pricing-features ul {
list-style: none;
padding: 0;
margin: 0 0 2rem 0;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.dt-pricing-features li {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.95rem;
color: var(--dt-text);
font-weight: 600;
}
.dt-check {
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: 1px 1px 0px var(--dt-border);
flex-shrink: 0;
}
.dt-check-disabled {
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: #E2E8F0;
color: #94A3B8;
border: var(--dt-border-width) solid #CBD5E1;
flex-shrink: 0;
}
.dt-feature-disabled {
color: var(--dt-text-muted) !important;
text-decoration: line-through;
opacity: 0.6;
}
Tables
Heavy Grid Data Table
HTML
<div class="dt-table-wrapper dt-surface">
<div class="dt-table-header">
<h3>Node Registry</h3>
<button class="dt-btn dt-btn-outline" style="padding: 0.5rem 1rem; font-size: 0.85rem;">Export CSV</button>
</div>
<div class="dt-table-container">
<table class="dt-table">
<thead>
<tr>
<th>Registry ID</th>
<th>Operator</th>
<th>Date Registered</th>
<th>Data Speed</th>
<th>Registry Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>#ND-8492</td>
<td>
<div class="dt-table-user">
<div class="dt-table-avatar">
<img src="https://i.pravatar.cc/150?img=11" alt="Avatar">
</div>
<span>Michael Chen</span>
</div>
</td>
<td>Oct 24, 2026</td>
<td>450.00 MB/s</td>
<td><span class="dt-status dt-status-success">ACTIVE</span></td>
</tr>
<tr>
<td>#ND-8493</td>
<td>
<div class="dt-table-user">
<div class="dt-table-avatar">
<img src="https://i.pravatar.cc/150?img=47" alt="Avatar">
</div>
<span>Sarah Jenkins</span>
</div>
</td>
<td>Oct 24, 2026</td>
<td>120.50 MB/s</td>
<td><span class="dt-status dt-status-pending">PENDING</span></td>
</tr>
<tr>
<td>#ND-8494</td>
<td>
<div class="dt-table-user">
<div class="dt-table-avatar">
<img src="https://i.pravatar.cc/150?img=12" alt="Avatar">
</div>
<span>David Smith</span>
</div>
</td>
<td>Oct 23, 2026</td>
<td>890.00 MB/s</td>
<td><span class="dt-status dt-status-success">ACTIVE</span></td>
</tr>
<tr>
<td>#ND-8495</td>
<td>
<div class="dt-table-user">
<div class="dt-table-avatar">
<img src="https://i.pravatar.cc/150?img=41" alt="Avatar">
</div>
<span>Emily Davis</span>
</div>
</td>
<td>Oct 22, 2026</td>
<td>65.00 MB/s</td>
<td><span class="dt-status dt-status-failed">FAILED</span></td>
</tr>
</tbody>
</table>
</div>
<div class="dt-table-pagination">
<span class="dt-text-muted">Showing 1 to 4 of 24 entries</span>
<div class="dt-pagination-controls">
<button class="dt-btn dt-btn-ghost" disabled style="padding: 0.4rem 0.8rem; font-size: 0.85rem;">Prev</button>
<button class="dt-btn dt-btn-primary" style="padding: 0.4rem 0.8rem; border-radius: var(--dt-radius); font-size: 0.85rem;">1</button>
<button class="dt-btn dt-btn-ghost" style="padding: 0.4rem 0.8rem; border-radius: var(--dt-radius); font-size: 0.85rem;">2</button>
<button class="dt-btn dt-btn-ghost" style="padding: 0.4rem 0.8rem; border-radius: var(--dt-radius); font-size: 0.85rem;">3</button>
<button class="dt-btn dt-btn-ghost" style="padding: 0.4rem 0.8rem; font-size: 0.85rem;">Next</button>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Heavy Grid Data Table */
/* NOTE: This component requires base.css to be included in your page. */
.dt-table-wrapper {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 0;
box-shadow: var(--dt-shadow-lg);
overflow: hidden;
}
.dt-table-header {
padding: 1.5rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: var(--dt-border-width) solid var(--dt-border);
background-color: #F8FAFC;
}
.dt-table-header h3 {
margin: 0;
font-size: 1.25rem;
}
.dt-table-container {
width: 100%;
overflow-x: auto;
}
.dt-table {
width: 100%;
border-collapse: collapse;
min-width: 650px;
}
.dt-table th {
text-align: left;
padding: 1rem 1.5rem;
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 0.85rem;
color: var(--dt-text);
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: var(--dt-border-width) solid var(--dt-border);
border-right: var(--dt-border-width) solid var(--dt-border);
background-color: #F1F5F9;
}
.dt-table th:last-child {
border-right: none;
}
.dt-table td {
padding: 1rem 1.5rem;
font-size: 0.95rem;
border-bottom: var(--dt-border-width) solid var(--dt-border);
border-right: var(--dt-border-width) solid var(--dt-border);
color: var(--dt-text);
vertical-align: middle;
background-color: #FFFFFF;
font-weight: 500;
}
.dt-table td:last-child {
border-right: none;
}
.dt-table tbody tr:last-child td {
border-bottom: none;
}
.dt-table tbody tr {
transition: background 0.1s ease;
}
.dt-table tbody tr:hover td {
background-color: #F8FAFC;
}
.dt-table-user {
display: flex;
align-items: center;
gap: 0.75rem;
}
.dt-table-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: 1px 1px 0px var(--dt-border);
overflow: hidden;
flex-shrink: 0;
}
.dt-table-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.dt-status {
padding: 0.25rem 0.6rem;
border-radius: var(--dt-radius);
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 0.75rem;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: 1px 1px 0px var(--dt-border);
display: inline-block;
}
.dt-status-success {
background-color: #DCFCE7;
color: #166534;
}
.dt-status-pending {
background-color: #FEF3C7;
color: #92400E;
}
.dt-status-failed {
background-color: #FEE2E2;
color: #991B1B;
}
.dt-table-pagination {
padding: 1.5rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
border-top: var(--dt-border-width) solid var(--dt-border);
background-color: #F8FAFC;
}
.dt-pagination-controls {
display: flex;
gap: 0.5rem;
align-items: center;
}
@media (max-width: 768px) {
.dt-table-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
.dt-table-pagination { flex-direction: column; gap: 1rem; text-align: center; }
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&display=swap');
/* Base Reset */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--dt-indigo: #312E81;
--dt-indigo-light: #4F46E5;
--dt-orange: #EA580C;
--dt-orange-light: #F97316;
--dt-bg: #F8FAFC;
--dt-surface: #FFFFFF;
--dt-text: #0F172A;
--dt-text-muted: #475569;
--dt-border: #0F172A;
--dt-border-width: 2px;
--dt-radius: 4px;
/* Hard solid shadows */
--dt-shadow: 4px 4px 0px var(--dt-border);
--dt-shadow-sm: 2px 2px 0px var(--dt-border);
--dt-shadow-lg: 8px 8px 0px var(--dt-border);
--dt-shadow-orange: 4px 4px 0px var(--dt-orange);
--dt-shadow-indigo: 4px 4px 0px var(--dt-indigo);
--dt-font-heading: 'Space Grotesk', sans-serif;
--dt-font-body: 'Inter', sans-serif;
}
body {
margin: 0;
font-family: var(--dt-font-body);
color: var(--dt-text);
background-color: var(--dt-bg);
-webkit-font-smoothing: antialiased;
}
/* Duotone / Brutalist Utilities */
.dt-surface {
background-color: var(--dt-surface);
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow);
border-radius: var(--dt-radius);
padding: 1.5rem;
transition: all 0.15s ease;
}
.dt-surface-indigo {
background-color: var(--dt-indigo);
color: #FFFFFF;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow);
border-radius: var(--dt-radius);
padding: 1.5rem;
}
.dt-surface-orange {
background-color: var(--dt-orange);
color: #FFFFFF;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow);
border-radius: var(--dt-radius);
padding: 1.5rem;
}
/* Global Buttons */
.dt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 1rem;
border: var(--dt-border-width) solid var(--dt-border);
border-radius: var(--dt-radius);
cursor: pointer;
text-decoration: none;
transition: all 0.1s ease;
gap: 0.5rem;
position: relative;
}
/* Primary Button (Deep Indigo / White / Orange shadow or custom interaction) */
.dt-btn-primary {
background-color: var(--dt-indigo);
color: #FFFFFF;
box-shadow: var(--dt-shadow);
}
.dt-btn-primary:hover {
background-color: var(--dt-indigo-light);
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px var(--dt-border);
}
.dt-btn-primary:active {
transform: translate(4px, 4px);
box-shadow: 0px 0px 0px var(--dt-border);
}
/* Secondary/Accent Button (Vibrant Orange) */
.dt-btn-accent {
background-color: var(--dt-orange);
color: #FFFFFF;
box-shadow: var(--dt-shadow);
}
.dt-btn-accent:hover {
background-color: var(--dt-orange-light);
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px var(--dt-border);
}
.dt-btn-accent:active {
transform: translate(4px, 4px);
box-shadow: 0px 0px 0px var(--dt-border);
}
/* Outline Button */
.dt-btn-outline {
background-color: var(--dt-surface);
color: var(--dt-text);
box-shadow: var(--dt-shadow);
}
.dt-btn-outline:hover {
background-color: #F1F5F9;
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px var(--dt-border);
}
.dt-btn-outline:active {
transform: translate(4px, 4px);
box-shadow: 0px 0px 0px var(--dt-border);
}
/* Ghost / Plain Button */
.dt-btn-ghost {
background: transparent;
border-color: transparent;
color: var(--dt-text);
}
.dt-btn-ghost:hover {
background-color: rgba(15, 23, 42, 0.05);
border-color: var(--dt-border);
}
.dt-btn-ghost:active {
transform: translate(2px, 2px);
}
.dt-btn-circle {
width: 44px;
height: 44px;
padding: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.dt-btn-block {
width: 100%;
}
/* Global Form Inputs */
.dt-input {
width: 100%;
padding: 0.875rem 1rem;
border: var(--dt-border-width) solid var(--dt-border);
border-radius: var(--dt-radius);
font-family: var(--dt-font-body);
font-size: 0.95rem;
color: var(--dt-text);
background-color: var(--dt-surface);
outline: none;
transition: all 0.15s ease;
}
.dt-input::placeholder {
color: var(--dt-text-muted);
opacity: 0.7;
}
.dt-input:focus {
box-shadow: var(--dt-shadow-indigo);
transform: translate(-2px, -2px);
}
.dt-label {
display: block;
margin-bottom: 0.5rem;
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 0.95rem;
color: var(--dt-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--dt-font-heading);
font-weight: 700;
margin: 0;
color: var(--dt-text);
}
p {
line-height: 1.6;
margin: 0;
color: var(--dt-text-muted);
}
/* Text Colors */
.text-indigo { color: var(--dt-indigo); }
.text-orange { color: var(--dt-orange); }
.text-white { color: #FFFFFF; }
/* Accent background */
.bg-indigo { background-color: var(--dt-indigo); }
.bg-orange { background-color: var(--dt-orange); }
/* --- COMPONENT STYLES --- */
.dt-table-wrapper {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 0;
box-shadow: var(--dt-shadow-lg);
overflow: hidden;
}
.dt-table-header {
padding: 1.5rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: var(--dt-border-width) solid var(--dt-border);
background-color: #F8FAFC;
}
.dt-table-header h3 {
margin: 0;
font-size: 1.25rem;
}
.dt-table-container {
width: 100%;
overflow-x: auto;
}
.dt-table {
width: 100%;
border-collapse: collapse;
min-width: 650px;
}
.dt-table th {
text-align: left;
padding: 1rem 1.5rem;
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 0.85rem;
color: var(--dt-text);
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: var(--dt-border-width) solid var(--dt-border);
border-right: var(--dt-border-width) solid var(--dt-border);
background-color: #F1F5F9;
}
.dt-table th:last-child {
border-right: none;
}
.dt-table td {
padding: 1rem 1.5rem;
font-size: 0.95rem;
border-bottom: var(--dt-border-width) solid var(--dt-border);
border-right: var(--dt-border-width) solid var(--dt-border);
color: var(--dt-text);
vertical-align: middle;
background-color: #FFFFFF;
font-weight: 500;
}
.dt-table td:last-child {
border-right: none;
}
.dt-table tbody tr:last-child td {
border-bottom: none;
}
.dt-table tbody tr {
transition: background 0.1s ease;
}
.dt-table tbody tr:hover td {
background-color: #F8FAFC;
}
.dt-table-user {
display: flex;
align-items: center;
gap: 0.75rem;
}
.dt-table-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: 1px 1px 0px var(--dt-border);
overflow: hidden;
flex-shrink: 0;
}
.dt-table-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.dt-status {
padding: 0.25rem 0.6rem;
border-radius: var(--dt-radius);
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 0.75rem;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: 1px 1px 0px var(--dt-border);
display: inline-block;
}
.dt-status-success {
background-color: #DCFCE7;
color: #166534;
}
.dt-status-pending {
background-color: #FEF3C7;
color: #92400E;
}
.dt-status-failed {
background-color: #FEE2E2;
color: #991B1B;
}
.dt-table-pagination {
padding: 1.5rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
border-top: var(--dt-border-width) solid var(--dt-border);
background-color: #F8FAFC;
}
.dt-pagination-controls {
display: flex;
gap: 0.5rem;
align-items: center;
}
@media (max-width: 768px) {
.dt-table-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
.dt-table-pagination { flex-direction: column; gap: 1rem; text-align: center; }
}
Lists
Hard-Border Activity Feed
HTML
<div class="dt-activity-feed dt-surface">
<div class="dt-feed-header">
<h3>Node Activity Feed</h3>
<button class="dt-btn dt-btn-outline" style="padding: 0.4rem 0.8rem; font-size: 0.85rem;">Mark Read</button>
</div>
<ul class="dt-feed-list">
<li class="dt-feed-item dt-unread">
<div class="dt-feed-icon bg-indigo text-white">
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2.5" fill="none"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
</div>
<div class="dt-feed-content">
<p><strong class="text-indigo">Sarah Jenkins</strong> requested node synchronization.</p>
<span class="dt-feed-time">2 hours ago</span>
</div>
<div class="dt-unread-dot bg-orange"></div>
</li>
<li class="dt-feed-item dt-unread">
<div class="dt-feed-icon bg-orange text-white">
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2.5" fill="none"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
</div>
<div class="dt-feed-content">
<p><strong>Michael Chen</strong> flagged Operator #TRX-8495.</p>
<span class="dt-feed-time">4 hours ago</span>
</div>
<div class="dt-unread-dot bg-orange"></div>
</li>
<li class="dt-feed-item">
<div class="dt-feed-icon" style="background-color: #E2E8F0; color: var(--dt-text);">
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2.5" fill="none"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
<div class="dt-feed-content">
<p>Console registry successfully compiled version 2.4.0</p>
<span class="dt-feed-time">Yesterday at 4:30 PM</span>
</div>
</li>
<li class="dt-feed-item">
<div class="dt-feed-icon bg-indigo text-white">
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2.5" fill="none"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="23" y1="11" x2="17" y2="11"></svg>
</div>
<div class="dt-feed-content">
<p><strong>Emily Davis</strong> registered new operator stack</p>
<span class="dt-feed-time">Oct 22, 2026</span>
</div>
</li>
</ul>
<div class="dt-feed-footer">
<a href="#" class="dt-btn dt-btn-ghost dt-btn-block">View Full Registry Activity</a>
</div>
</div>
CSS (Component Only)
/* Component: Hard-Border Activity Feed */
/* NOTE: This component requires base.css to be included in your page. */
.dt-activity-feed {
max-width: 500px;
margin: 0 auto;
padding: 0;
box-shadow: var(--dt-shadow-lg);
overflow: hidden;
}
.dt-feed-header {
padding: 1.5rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: var(--dt-border-width) solid var(--dt-border);
background-color: #F8FAFC;
}
.dt-feed-header h3 {
margin: 0;
font-size: 1.25rem;
}
.dt-feed-list {
list-style: none;
padding: 0;
margin: 0;
}
.dt-feed-item {
display: flex;
align-items: flex-start;
gap: 1.25rem;
padding: 1.25rem 2rem;
border-bottom: var(--dt-border-width) solid var(--dt-border);
position: relative;
transition: background 0.1s ease;
background-color: #FFFFFF;
}
.dt-feed-item:last-child {
border-bottom: none;
}
.dt-feed-item:hover {
background-color: #F8FAFC;
}
.dt-feed-item.dt-unread {
background-color: #FFF7ED; /* Soft Orange pastel */
}
.dt-feed-icon {
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: 1px 1px 0px var(--dt-border);
flex-shrink: 0;
}
.dt-feed-content {
flex: 1;
}
.dt-feed-content p {
margin: 0 0 0.25rem 0;
font-size: 0.95rem;
color: var(--dt-text);
font-weight: 500;
}
.dt-feed-content strong {
font-weight: 700;
}
.dt-feed-time {
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 0.8rem;
color: var(--dt-text-muted);
}
.dt-unread-dot {
width: 12px;
height: 12px;
border-radius: 50%;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: 1px 1px 0px var(--dt-border);
margin-top: 0.25rem;
flex-shrink: 0;
}
.dt-feed-footer {
padding: 1.25rem;
border-top: var(--dt-border-width) solid var(--dt-border);
background-color: #F8FAFC;
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&display=swap');
/* Base Reset */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--dt-indigo: #312E81;
--dt-indigo-light: #4F46E5;
--dt-orange: #EA580C;
--dt-orange-light: #F97316;
--dt-bg: #F8FAFC;
--dt-surface: #FFFFFF;
--dt-text: #0F172A;
--dt-text-muted: #475569;
--dt-border: #0F172A;
--dt-border-width: 2px;
--dt-radius: 4px;
/* Hard solid shadows */
--dt-shadow: 4px 4px 0px var(--dt-border);
--dt-shadow-sm: 2px 2px 0px var(--dt-border);
--dt-shadow-lg: 8px 8px 0px var(--dt-border);
--dt-shadow-orange: 4px 4px 0px var(--dt-orange);
--dt-shadow-indigo: 4px 4px 0px var(--dt-indigo);
--dt-font-heading: 'Space Grotesk', sans-serif;
--dt-font-body: 'Inter', sans-serif;
}
body {
margin: 0;
font-family: var(--dt-font-body);
color: var(--dt-text);
background-color: var(--dt-bg);
-webkit-font-smoothing: antialiased;
}
/* Duotone / Brutalist Utilities */
.dt-surface {
background-color: var(--dt-surface);
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow);
border-radius: var(--dt-radius);
padding: 1.5rem;
transition: all 0.15s ease;
}
.dt-surface-indigo {
background-color: var(--dt-indigo);
color: #FFFFFF;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow);
border-radius: var(--dt-radius);
padding: 1.5rem;
}
.dt-surface-orange {
background-color: var(--dt-orange);
color: #FFFFFF;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow);
border-radius: var(--dt-radius);
padding: 1.5rem;
}
/* Global Buttons */
.dt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 1rem;
border: var(--dt-border-width) solid var(--dt-border);
border-radius: var(--dt-radius);
cursor: pointer;
text-decoration: none;
transition: all 0.1s ease;
gap: 0.5rem;
position: relative;
}
/* Primary Button (Deep Indigo / White / Orange shadow or custom interaction) */
.dt-btn-primary {
background-color: var(--dt-indigo);
color: #FFFFFF;
box-shadow: var(--dt-shadow);
}
.dt-btn-primary:hover {
background-color: var(--dt-indigo-light);
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px var(--dt-border);
}
.dt-btn-primary:active {
transform: translate(4px, 4px);
box-shadow: 0px 0px 0px var(--dt-border);
}
/* Secondary/Accent Button (Vibrant Orange) */
.dt-btn-accent {
background-color: var(--dt-orange);
color: #FFFFFF;
box-shadow: var(--dt-shadow);
}
.dt-btn-accent:hover {
background-color: var(--dt-orange-light);
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px var(--dt-border);
}
.dt-btn-accent:active {
transform: translate(4px, 4px);
box-shadow: 0px 0px 0px var(--dt-border);
}
/* Outline Button */
.dt-btn-outline {
background-color: var(--dt-surface);
color: var(--dt-text);
box-shadow: var(--dt-shadow);
}
.dt-btn-outline:hover {
background-color: #F1F5F9;
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px var(--dt-border);
}
.dt-btn-outline:active {
transform: translate(4px, 4px);
box-shadow: 0px 0px 0px var(--dt-border);
}
/* Ghost / Plain Button */
.dt-btn-ghost {
background: transparent;
border-color: transparent;
color: var(--dt-text);
}
.dt-btn-ghost:hover {
background-color: rgba(15, 23, 42, 0.05);
border-color: var(--dt-border);
}
.dt-btn-ghost:active {
transform: translate(2px, 2px);
}
.dt-btn-circle {
width: 44px;
height: 44px;
padding: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.dt-btn-block {
width: 100%;
}
/* Global Form Inputs */
.dt-input {
width: 100%;
padding: 0.875rem 1rem;
border: var(--dt-border-width) solid var(--dt-border);
border-radius: var(--dt-radius);
font-family: var(--dt-font-body);
font-size: 0.95rem;
color: var(--dt-text);
background-color: var(--dt-surface);
outline: none;
transition: all 0.15s ease;
}
.dt-input::placeholder {
color: var(--dt-text-muted);
opacity: 0.7;
}
.dt-input:focus {
box-shadow: var(--dt-shadow-indigo);
transform: translate(-2px, -2px);
}
.dt-label {
display: block;
margin-bottom: 0.5rem;
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 0.95rem;
color: var(--dt-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--dt-font-heading);
font-weight: 700;
margin: 0;
color: var(--dt-text);
}
p {
line-height: 1.6;
margin: 0;
color: var(--dt-text-muted);
}
/* Text Colors */
.text-indigo { color: var(--dt-indigo); }
.text-orange { color: var(--dt-orange); }
.text-white { color: #FFFFFF; }
/* Accent background */
.bg-indigo { background-color: var(--dt-indigo); }
.bg-orange { background-color: var(--dt-orange); }
/* --- COMPONENT STYLES --- */
.dt-activity-feed {
max-width: 500px;
margin: 0 auto;
padding: 0;
box-shadow: var(--dt-shadow-lg);
overflow: hidden;
}
.dt-feed-header {
padding: 1.5rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: var(--dt-border-width) solid var(--dt-border);
background-color: #F8FAFC;
}
.dt-feed-header h3 {
margin: 0;
font-size: 1.25rem;
}
.dt-feed-list {
list-style: none;
padding: 0;
margin: 0;
}
.dt-feed-item {
display: flex;
align-items: flex-start;
gap: 1.25rem;
padding: 1.25rem 2rem;
border-bottom: var(--dt-border-width) solid var(--dt-border);
position: relative;
transition: background 0.1s ease;
background-color: #FFFFFF;
}
.dt-feed-item:last-child {
border-bottom: none;
}
.dt-feed-item:hover {
background-color: #F8FAFC;
}
.dt-feed-item.dt-unread {
background-color: #FFF7ED; /* Soft Orange pastel */
}
.dt-feed-icon {
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: 1px 1px 0px var(--dt-border);
flex-shrink: 0;
}
.dt-feed-content {
flex: 1;
}
.dt-feed-content p {
margin: 0 0 0.25rem 0;
font-size: 0.95rem;
color: var(--dt-text);
font-weight: 500;
}
.dt-feed-content strong {
font-weight: 700;
}
.dt-feed-time {
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 0.8rem;
color: var(--dt-text-muted);
}
.dt-unread-dot {
width: 12px;
height: 12px;
border-radius: 50%;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: 1px 1px 0px var(--dt-border);
margin-top: 0.25rem;
flex-shrink: 0;
}
.dt-feed-footer {
padding: 1.25rem;
border-top: var(--dt-border-width) solid var(--dt-border);
background-color: #F8FAFC;
}
Modals
High-Contrast Dialog Modal
HTML
<!-- Note: For library preview, this modal is shown inline. For production, wrap this container in a fixed overlay. -->
<div class="dt-modal-wrapper">
<div class="dt-modal dt-surface">
<div class="dt-modal-icon bg-orange text-white">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3m0 3h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
<div class="dt-modal-content">
<h3 class="dt-modal-title">Purge Registry Node?</h3>
<p class="dt-modal-desc">You are about to purge this registry block node. All linked operators and node registries will be permanently disconnected. This action cannot be undone.</p>
</div>
<div class="dt-modal-actions">
<button class="dt-btn dt-btn-outline" style="flex: 1;">Cancel</button>
<button class="dt-btn dt-btn-accent" style="flex: 1;">Purge Node</button>
</div>
</div>
</div>
CSS (Component Only)
/* Component: High-Contrast Dialog Modal */
/* NOTE: This component requires base.css to be included in your page. */
.dt-modal-wrapper {
display: flex;
justify-content: center;
align-items: center;
padding: 2rem 1.5rem;
}
.dt-modal {
max-width: 460px;
width: 100%;
padding: 2.5rem 2rem;
text-align: center;
box-shadow: var(--dt-shadow-lg);
background-color: #FFFFFF;
}
.dt-modal-icon {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: 2px 2px 0px var(--dt-border);
flex-shrink: 0;
}
.dt-modal-icon svg {
width: 28px;
height: 28px;
}
.dt-modal-title {
font-size: 1.5rem;
margin-bottom: 0.75rem;
}
.dt-modal-desc {
font-size: 0.95rem;
color: var(--dt-text-muted);
margin-bottom: 2rem;
line-height: 1.6;
}
.dt-modal-actions {
display: flex;
gap: 1rem;
width: 100%;
}
@media (max-width: 480px) {
.dt-modal-actions {
flex-direction: column;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&display=swap');
/* Base Reset */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--dt-indigo: #312E81;
--dt-indigo-light: #4F46E5;
--dt-orange: #EA580C;
--dt-orange-light: #F97316;
--dt-bg: #F8FAFC;
--dt-surface: #FFFFFF;
--dt-text: #0F172A;
--dt-text-muted: #475569;
--dt-border: #0F172A;
--dt-border-width: 2px;
--dt-radius: 4px;
/* Hard solid shadows */
--dt-shadow: 4px 4px 0px var(--dt-border);
--dt-shadow-sm: 2px 2px 0px var(--dt-border);
--dt-shadow-lg: 8px 8px 0px var(--dt-border);
--dt-shadow-orange: 4px 4px 0px var(--dt-orange);
--dt-shadow-indigo: 4px 4px 0px var(--dt-indigo);
--dt-font-heading: 'Space Grotesk', sans-serif;
--dt-font-body: 'Inter', sans-serif;
}
body {
margin: 0;
font-family: var(--dt-font-body);
color: var(--dt-text);
background-color: var(--dt-bg);
-webkit-font-smoothing: antialiased;
}
/* Duotone / Brutalist Utilities */
.dt-surface {
background-color: var(--dt-surface);
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow);
border-radius: var(--dt-radius);
padding: 1.5rem;
transition: all 0.15s ease;
}
.dt-surface-indigo {
background-color: var(--dt-indigo);
color: #FFFFFF;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow);
border-radius: var(--dt-radius);
padding: 1.5rem;
}
.dt-surface-orange {
background-color: var(--dt-orange);
color: #FFFFFF;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: var(--dt-shadow);
border-radius: var(--dt-radius);
padding: 1.5rem;
}
/* Global Buttons */
.dt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 1rem;
border: var(--dt-border-width) solid var(--dt-border);
border-radius: var(--dt-radius);
cursor: pointer;
text-decoration: none;
transition: all 0.1s ease;
gap: 0.5rem;
position: relative;
}
/* Primary Button (Deep Indigo / White / Orange shadow or custom interaction) */
.dt-btn-primary {
background-color: var(--dt-indigo);
color: #FFFFFF;
box-shadow: var(--dt-shadow);
}
.dt-btn-primary:hover {
background-color: var(--dt-indigo-light);
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px var(--dt-border);
}
.dt-btn-primary:active {
transform: translate(4px, 4px);
box-shadow: 0px 0px 0px var(--dt-border);
}
/* Secondary/Accent Button (Vibrant Orange) */
.dt-btn-accent {
background-color: var(--dt-orange);
color: #FFFFFF;
box-shadow: var(--dt-shadow);
}
.dt-btn-accent:hover {
background-color: var(--dt-orange-light);
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px var(--dt-border);
}
.dt-btn-accent:active {
transform: translate(4px, 4px);
box-shadow: 0px 0px 0px var(--dt-border);
}
/* Outline Button */
.dt-btn-outline {
background-color: var(--dt-surface);
color: var(--dt-text);
box-shadow: var(--dt-shadow);
}
.dt-btn-outline:hover {
background-color: #F1F5F9;
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px var(--dt-border);
}
.dt-btn-outline:active {
transform: translate(4px, 4px);
box-shadow: 0px 0px 0px var(--dt-border);
}
/* Ghost / Plain Button */
.dt-btn-ghost {
background: transparent;
border-color: transparent;
color: var(--dt-text);
}
.dt-btn-ghost:hover {
background-color: rgba(15, 23, 42, 0.05);
border-color: var(--dt-border);
}
.dt-btn-ghost:active {
transform: translate(2px, 2px);
}
.dt-btn-circle {
width: 44px;
height: 44px;
padding: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.dt-btn-block {
width: 100%;
}
/* Global Form Inputs */
.dt-input {
width: 100%;
padding: 0.875rem 1rem;
border: var(--dt-border-width) solid var(--dt-border);
border-radius: var(--dt-radius);
font-family: var(--dt-font-body);
font-size: 0.95rem;
color: var(--dt-text);
background-color: var(--dt-surface);
outline: none;
transition: all 0.15s ease;
}
.dt-input::placeholder {
color: var(--dt-text-muted);
opacity: 0.7;
}
.dt-input:focus {
box-shadow: var(--dt-shadow-indigo);
transform: translate(-2px, -2px);
}
.dt-label {
display: block;
margin-bottom: 0.5rem;
font-family: var(--dt-font-heading);
font-weight: 700;
font-size: 0.95rem;
color: var(--dt-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--dt-font-heading);
font-weight: 700;
margin: 0;
color: var(--dt-text);
}
p {
line-height: 1.6;
margin: 0;
color: var(--dt-text-muted);
}
/* Text Colors */
.text-indigo { color: var(--dt-indigo); }
.text-orange { color: var(--dt-orange); }
.text-white { color: #FFFFFF; }
/* Accent background */
.bg-indigo { background-color: var(--dt-indigo); }
.bg-orange { background-color: var(--dt-orange); }
/* --- COMPONENT STYLES --- */
.dt-modal-wrapper {
display: flex;
justify-content: center;
align-items: center;
padding: 2rem 1.5rem;
}
.dt-modal {
max-width: 460px;
width: 100%;
padding: 2.5rem 2rem;
text-align: center;
box-shadow: var(--dt-shadow-lg);
background-color: #FFFFFF;
}
.dt-modal-icon {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
border: var(--dt-border-width) solid var(--dt-border);
box-shadow: 2px 2px 0px var(--dt-border);
flex-shrink: 0;
}
.dt-modal-icon svg {
width: 28px;
height: 28px;
}
.dt-modal-title {
font-size: 1.5rem;
margin-bottom: 0.75rem;
}
.dt-modal-desc {
font-size: 0.95rem;
color: var(--dt-text-muted);
margin-bottom: 2rem;
line-height: 1.6;
}
.dt-modal-actions {
display: flex;
gap: 1rem;
width: 100%;
}
@media (max-width: 480px) {
.dt-modal-actions {
flex-direction: column;
}
}