Nicholai/nicholai-work-2026
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
nicholai-work-2026/design.json
Nicholai eaf536ae1f feat(blog): add latest posts section and modernize blog cards 
- add latest blog posts section to homepage displaying 3 most recent
- modernize BlogCard component with rounded corners and clean styling
- update featured post card on blog index with contemporary design
- remove industrial aesthetic (uppercase, mono, accent strips, overlays)
- add design.json documenting design system evolution
- change to normal case titles, hashtag tags, simplified metadata
- replace technical labels with clean badges
- add rounded-full buttons and rounded-lg/xl cards
2026-01-20 08:43:50 -07:00

262 lines
11 KiB
JSON
Raw Permalink Blame History

{
"design_system": {
"version": "2.0",
"last_updated": "2026-01-20",
"description": "nicholai.work design language - evolved from industrial/technical to clean modern with selective technical accents"
},
"design_philosophy": {
"core_principles": [
"clean and modern with selective technical accents",
"rounded corners for contemporary feel",
"minimal decorative elements",
"readable typography over stylized text",
"intentional whitespace",
"smooth, refined interactions"
],
"when_to_use_industrial": [
"hero section only - establishes initial technical vibe",
"experience/work history - professional credibility",
"featured projects - showcasing technical work"
],
"when_to_use_modern": [
"navigation - clean, accessible",
"blog content - readable, focused",
"general UI elements - buttons, cards, badges",
"any new sections added to the site"
]
},
"typography": {
"headings": {
"modern_style": {
"size": "text-3xl to text-5xl",
"weight": "font-bold",
"case": "normal case (not uppercase)",
"tracking": "normal or tracking-tight",
"line_height": "leading-tight",
"usage": "blog posts, new sections, readable content"
},
"industrial_style": {
"size": "text-5xl to text-9xl",
"weight": "font-bold",
"case": "uppercase",
"tracking": "tracking-tighter",
"line_height": "leading-[0.85]",
"usage": "hero, experience, featured projects only"
}
},
"body": {
"size": "text-base to text-lg",
"weight": "font-normal or font-light",
"line_height": "leading-relaxed",
"color": "text-[var(--theme-text-secondary)]"
},
"labels": {
"modern": {
"size": "text-xs to text-sm",
"weight": "font-medium",
"case": "normal case",
"usage": "badges, metadata, general labels"
},
"technical": {
"size": "text-[9px] to text-[10px]",
"weight": "font-mono",
"case": "uppercase",
"tracking": "tracking-[0.2em] to tracking-[0.3em]",
"usage": "hero and work sections only"
}
}
},
"spacing": {
"sections": {
"vertical_padding": "py-20 to py-32",
"section_gap": "mb-20 to mb-24",
"content_gap": "gap-8 to gap-12"
},
"containers": {
"max_width": "container mx-auto",
"horizontal_padding": "px-6 lg:px-8 or px-6 lg:px-12",
"note": "use px-6 lg:px-8 for tighter layouts, px-6 lg:px-12 for wider"
}
},
"borders_and_corners": {
"modern_corners": {
"cards": "rounded-lg",
"buttons": "rounded-full",
"badges": "rounded-full",
"images": "rounded-lg",
"containers": "rounded-xl to rounded-2xl"
},
"industrial_corners": {
"usage": "none - use sharp corners only in hero/experience/featured",
"buttons": "no rounded corners",
"containers": "no rounded corners"
},
"borders": {
"default": "border border-[var(--theme-border-primary)]",
"subtle": "border-[var(--theme-border-secondary)]",
"accent": "border-brand-accent",
"dividers": "border-t or border-b"
}
},
"components": {
"buttons": {
"primary_modern": {
"base": "px-6 py-3 rounded-full",
"border": "border border-[var(--theme-border-primary)]",
"background": "bg-[var(--theme-hover-bg)]",
"hover": "hover:border-brand-accent hover:bg-brand-accent/5",
"text": "text-sm font-medium",
"transition": "transition-all duration-300"
},
"secondary_modern": {
"base": "px-4 py-2 rounded-full",
"background": "bg-brand-accent/10",
"text": "text-sm text-brand-accent",
"hover": "hover:bg-brand-accent/20"
},
"industrial": {
"note": "only use in hero/experience/featured sections",
"base": "px-8 py-4 border",
"corners": "no rounded corners",
"text": "font-mono text-xs uppercase tracking-widest"
}
},
"badges": {
"modern": {
"base": "px-3 py-1 rounded-full",
"background": "bg-brand-accent/10",
"text": "text-xs text-brand-accent",
"usage": "categories, tags, status indicators"
},
"minimal": {
"base": "px-2 py-1",
"text": "text-xs text-[var(--theme-text-muted)]",
"usage": "hashtags, minimal labels"
}
},
"cards": {
"modern": {
"base": "rounded-lg border border-[var(--theme-border-primary)]",
"background": "bg-[var(--theme-bg-secondary)]",
"hover": "hover:border-brand-accent hover:bg-[var(--theme-hover-bg)]",
"padding": "p-6",
"transition": "transition-all duration-300"
},
"images": {
"corners": "rounded-lg",
"aspect_ratios": "aspect-video, aspect-square, aspect-[4/3]",
"object_fit": "object-cover"
}
},
"section_headers": {
"modern_style": {
"layout": "simple, no grid",
"title": "text-3xl to text-5xl font-bold normal-case leading-tight",
"subtitle": "text-base to text-lg text-[var(--theme-text-secondary)]",
"spacing": "mb-12 to mb-16",
"decorative_elements": "none or minimal",
"usage": "new sections, blog, modern areas"
},
"industrial_style": {
"layout": "grid grid-cols-1 lg:grid-cols-12 gap-12",
"title_col": "lg:col-span-8",
"meta_col": "lg:col-span-4",
"title": "text-5xl to text-8xl uppercase tracking-tighter leading-[0.85]",
"decorative": {
"pulsing_dot": "w-2 h-2 bg-brand-accent animate-pulse",
"system_label": "font-mono text-[10px] uppercase tracking-[0.3em]",
"format": "SYS.LABEL /// DESCRIPTION"
},
"usage": "hero, experience, featured projects only"
}
},
"navigation": {
"container": "rounded-2xl backdrop-blur-md",
"items": "rounded-xl hover:bg-[var(--theme-hover-bg-strong)]",
"active_state": "bg-brand-accent/10 text-brand-accent",
"icons": "w-5 h-5 stroke-width-1.5"
},
"animations": {
"scroll_animations": {
"classes": "animate-on-scroll fade-in, slide-up, slide-left, slide-right",
"stagger": "stagger-1 through stagger-8",
"usage": "applies to all sections, triggered by IntersectionObserver"
},
"hover_effects": {
"duration": "duration-300",
"ease": "ease-out or ease-in-out",
"transitions": "transition-all, transition-colors, transition-transform"
},
"reduced_motion": {
"respect": "always check prefers-reduced-motion",
"fallback": "instant state changes"
}
}
},
"color_usage": {
"backgrounds": {
"primary": "bg-[var(--theme-bg-primary)]",
"secondary": "bg-[var(--theme-bg-secondary)]",
"overlay": "bg-[var(--theme-overlay)]",
"hover": "bg-[var(--theme-hover-bg)]"
},
"text": {
"primary": "text-[var(--theme-text-primary)]",
"secondary": "text-[var(--theme-text-secondary)]",
"muted": "text-[var(--theme-text-muted)]",
"subtle": "text-[var(--theme-text-subtle)]"
},
"accent": {
"solid": "bg-brand-accent, text-brand-accent, border-brand-accent",
"transparent": "bg-brand-accent/10, bg-brand-accent/5",
"usage": "highlights, active states, CTAs, hover effects"
}
},
"grid_layouts": {
"blog_cards": {
"mobile": "grid-cols-1",
"tablet": "md:grid-cols-2",
"desktop": "lg:grid-cols-3",
"gap": "gap-6 to gap-8"
},
"content_layout": {
"columns": "grid-cols-1 lg:grid-cols-12",
"main_content": "lg:col-span-8 to lg:col-span-10",
"sidebar": "lg:col-span-4 to lg:col-span-2"
}
},
"examples": {
"modern_section_header": {
"html": "<div class=\"mb-16\">\n <div class=\"mb-4\">\n <span class=\"px-3 py-1 rounded-full bg-brand-accent/10 text-xs text-brand-accent\">Section Label</span>\n </div>\n <h2 class=\"text-4xl lg:text-5xl font-bold text-[var(--theme-text-primary)] mb-4\">\n Section Title\n </h2>\n <p class=\"text-lg text-[var(--theme-text-secondary)] max-w-2xl\">\n Description text\n </p>\n</div>"
},
"modern_button": {
"html": "<a href=\"#\" class=\"inline-flex items-center gap-2 px-6 py-3 rounded-full border border-[var(--theme-border-primary)] bg-[var(--theme-hover-bg)] hover:border-brand-accent hover:bg-brand-accent/5 text-sm font-medium transition-all duration-300\">\n <span>Button Text</span>\n <svg>...</svg>\n</a>"
},
"modern_card": {
"html": "<div class=\"rounded-lg border border-[var(--theme-border-primary)] bg-[var(--theme-bg-secondary)] hover:border-brand-accent hover:bg-[var(--theme-hover-bg)] p-6 transition-all duration-300\">\n <div class=\"aspect-video rounded-lg overflow-hidden mb-4\">\n <img src=\"...\" class=\"w-full h-full object-cover\" />\n </div>\n <div class=\"mb-2\">\n <span class=\"px-3 py-1 rounded-full bg-brand-accent/10 text-xs text-brand-accent\">Category</span>\n </div>\n <h3 class=\"text-xl font-bold mb-2\">Card Title</h3>\n <p class=\"text-[var(--theme-text-secondary)]\">Description</p>\n</div>"
}
},
"implementation_notes": {
"new_sections": [
"use modern design language by default",
"rounded corners on all interactive elements",
"clean typography (no excessive uppercase)",
"simple, readable headers",
"badges and pills with rounded-full",
"smooth transitions and hover states"
],
"existing_sections": [
"hero: keep industrial (establishes vibe)",
"experience: keep industrial (professional credibility)",
"featured project: keep industrial (showcases technical work)",
"everything else: modernize as needed"
],
"progressive_enhancement": [
"start with accessible, readable defaults",
"add animations for users without prefers-reduced-motion",
"ensure keyboard navigation works",
"maintain high contrast ratios"
]
}
}
Reference in New Issue View Git Blame Copy Permalink