abjt.dev — Design System

1. Visual Theme & Atmosphere

abjt.dev is a developer portfolio built on Next.js and Tailwind CSS that achieves something rare: a dark theme that feels warm rather than cold. The background is not pure black but a dark warm brown-black (rgb(19, 18, 16)) — barely perceptible, but it shifts the entire mood from the sterile “dark mode default” toward something more like aged paper or studio leather. The typography pairing — GeistSans for structure, GeistMono for content — signals that this is a developer’s space, not a designer’s. Code and prose coexist deliberately. Surface elevations are shallow and warm, and the only decorative flourish is a whisper-thin translucent overlay (rgba(255,255,255,0.024)) that suggests a glass-morphism hint without fully committing. The design is confident in what it omits: no accent colour, no gradients, no imagery-based depth.

2. Color Palette & Roles

The palette is a study in near-neutrals: background, text, and surfaces are all within a narrow warm-grey band. No accent colour exists — hierarchy comes entirely from opacity and luminance steps. The warm off-white text (#FAF9F7) against the warm black background avoids the harshness of pure #FFFFFF on #000000.

3. Typography Rules

The dual-font system is the defining typographic statement: GeistSans handles structural and navigational text, while GeistMono is used for body paragraphs and content — inverting the conventional hierarchy where monospace is reserved for code snippets.

Using monospace for prose is a deliberate identity choice — it signals technical literacy, suggests terminal-adjacent aesthetics, and creates a consistent reading texture across code and copy. The slightly heavier weight (500) on GeistMono paragraphs compensates for monospace’s lower apparent weight at small sizes.

4. Component Styling

Buttons: Transparent background with rgba(0,0,0,0), warm off-white text. Styled via a bg-gradient-to-tl class — a gradient is likely applied in Tailwind utilities even if the computed value shows transparent. Border radius: 9999px (fully pill-shaped). Focus ring is a 1px rgb(250, 249, 247) solid outline — matching the text colour, not a browser default blue.

Nav links: Default state in muted warm grey (rgb(163,162,160)), transitioning to full warm white (rgb(250,249,247)) on hover and focus. No background change, no underline — opacity and colour shift only. Clean and non-disruptive.

Cards / panels: Two surface levels separated by ~0.075 luminance — barely distinguishable in isolation but perceptible in context. Border radius 11px for panels; 9999px reserved for pill buttons only.

Ghost layer: The rgba(255,255,255,0.024) surface — 2.4% white — likely a subtle highlight on an absolute-positioned element, possibly a hero image overlay or card shimmer effect.

5. Layout Principles

Standard Tailwind breakpoint ladder: 640 / 768 / 1024 / 1280 / 1536px. The main element carries a top padding of 108px — a fixed-height nav offset, suggesting a sticky navigation bar approximately 64–72px tall with additional breathing room. This generous top offset anchors the hero section well below the fold-fold, giving navigation visual clarity. Content is left-flush within a constrained max-width container. The design is clearly single-column on mobile, expanding to a wider reading column at 768px+.

6. Depth & Elevation

Depth is minimal and warm. Three functional layers:

• rgb(19, 18, 16) — luminance 0.071 — base canvas
• rgb(38, 37, 36) — luminance 0.146 — elevated panels (+0.075)
• rgba(255,255,255,0.024) — luminance ~1.0 at near-zero opacity — ghost shimmer

One actual shadow: rgb(0,0,0) 0px 1px 2px 0px — a hairline bottom shadow, barely 2px, used for micro-separation on small interactive elements. No spread, no blur radius — essentially the thinnest possible elevation signal. This restraint keeps the interface flat while still providing tactile separation where needed.

7. Do’s and Don’ts

Do:

• Use rgb(19, 18, 16) (not #000) for dark backgrounds — the warmth is the differentiator
• Reserve GeistMono for prose content to maintain the developer-identity aesthetic
• Use the muted-to-active colour transition (#A3A2A0 → #FAF9F7) for all interactive state changes
• Keep border radii binary: 11px for panels, 9999px for pill buttons — no mixing
• Maintain the 108px main top-padding for sticky nav clearance

Don’t:

• Introduce an accent colour — the monochrome warmth is the brand
• Use pure black (#000000) or pure white (#FFFFFF) — the warmth of the near-neutrals is deliberate
• Apply shadows larger than 2px — the near-flat system would be violated
• Use GeistSans for body paragraphs — the mono/sans inversion is intentional
• Add hover background fills on nav items — colour-only transitions keep the nav weightless

8. Responsive Behavior

Standard Tailwind five-point breakpoint system (640 / 768 / 1024 / 1280 / 1536px). Mobile-first with the critical layout shift at 768px where two-column or wider reading widths likely activate. The 108px main padding is fixed regardless of viewport — on mobile this could feel heavy; a responsive pt-16 md:pt-[108px] pattern would be appropriate. The nav is likely sticky/fixed given the offset, collapsing to a hamburger or minimal icon at small viewports.

9. Agent Prompt Guide

“Design in the style of abjt.dev: warm near-black background rgb(19,18,16), warm off-white text rgb(250,249,247), GeistSans for UI/navigation, GeistMono at weight 500 for body paragraphs, no accent colour, muted grey rgb(163,162,160) for secondary nav that transitions to full white on hover, pill buttons (9999px radius) with transparent backgrounds, card panels at rgb(38,37,36) with 11px radius, hairline 2px shadows only, 108px main content offset for sticky nav, standard Tailwind breakpoints. Warm, developer-coded, monochromatic.”

Generated by Sparkbites — extracted from live CSS analysis