jdsadminllc Creative
Mission
Break grids with confidence — an artistic-agency aesthetic that prioritizes visual impact over convention through bold typography, unexpected layouts, and fearless color.
Brand
🎨 Colors
#0F0F0F— Primary background (near-black canvas)#FFFFFF— Primary text / light surfaces#FF3366— Primary accent (electric rose)#00D4AA— Secondary accent (vibrant mint)#FFB800— Tertiary accent (amber)#F5F5F5— Light surface alternative
🔤 Typography
- Heading font: Clash Display (Google Fonts)
- Body font: DM Sans (Google Fonts)
- Type scale: xs 0.75rem / sm 0.875rem / base 1rem / lg 1.125rem / xl 2rem / 2xl 3rem / 3xl 5rem (oversized headings)
📐 Spacing
- Grid: Asymmetrical — default to 12-column but intentionally break alignment for impact
- Section padding: 8rem top/bottom (generous)
- Card gap: variable, 2-4rem, intentional uneven spacing
🧩 Components
- Buttons: Bold, oversized on primary CTAs, outline style with thick 2px border, hover fills with offset shadow
- Cards: Mixed sizes within same grid row, some spanning 2 columns, overlapping images, 0px border-radius on image edges
- Nav: Hidden behind hamburger or minimal top-left wordmark, links reveal on interaction
- Hero: Massive 5-8rem heading, often overlapping image, single word on its own line, bold color-block behind text
- Footer: Sparse — single line of links, oversized social icons, no multi-column grid
♿ Accessibility
- All text passes 4.5:1 contrast; oversized headings (above 3rem) can drop to 3:1
- Focus rings: Thick 3px outline in contrasting accent
- Reduced motion: eliminate scroll-triggered reveals, keep color changes
- Minimum body font size 0.875rem
✍️ Writing Tone
- Bold minimalism — short, punchy phrases; fragments over sentences
- Confident voice: declarative statements, no hedging
- Labels: lowercase or ALL CAPS micro-labels; no sentence-case buttons
Do / Don't
✅ Do
- Use oversized typography — 5rem+ for hero headings
- Break the grid intentionally — overlapping elements, varied column spans
- Feature bold color-block backgrounds behind text and images
- Use negative space as an active design element
- Mix image treatments: full-bleed, duotone, high-contrast B&W
❌ Don't
- Use centered layouts — asymmetry means intentional off-balance
- Add decorative elements that don't make a statement
- Rely on shadows for depth — use color contrast and overlap instead
- Play it safe with font sizes — if it's not oversized, it's undersized
- Fill every space — negative space is the canvas
Quality Gates
- At least one intentionally broken-grid layout element
- Oversized heading present on hero (3rem minimum)
- All text passes contrast check (3:1 for 3rem+, 4.5:1 for smaller)
- Focus states visible on all interactive elements
- Page respects prefers-reduced-motion
- No section feels "filled" — negative space is intentional throughout