Switch between the rendered Visual preview and the Raw DESIGN.md.
Jopecuro's design system embodies bold minimalism with a sophisticated creative edge. The aesthetic is defined by stark contrast—predominantly deep black backgrounds paired with crisp white typography and selective use of a vibrant red accent. This high-contrast approach creates an immersive, gallery-like experience that puts the work and message front and center. The typography is intentionally large and commanding, using serif and sans-serif combinations to convey both elegance and contemporary professionalism. The overall mood is premium, confident, and uncompromising—a visual language that respects the viewer's intelligence while establishing Jopecuro as a seasoned creative director and designer.
Key Characteristics
#FF5733): Bold, energetic red used to highlight key CTAs, accent text, and draw attention to critical interactive elements. Creates visual pop against the neutral palette.#FF5733): Used for button states, link highlights, and active navigation elements to signal interactivity.#FFFFFF): Primary text color on dark backgrounds; body copy, headings, and all foreground content. Ensures maximum contrast and readability.#000000): Primary background color for full-bleed sections; creates the dominant visual container and gallery-like aesthetic.#383838): Secondary background tones and subtle dividers; used for layered depth within dark sections.#333333): Tertiary neutral for borders and subtle UI boundaries.#808080): Disabled states and de-emphasized content.#969696): Secondary disabled states and very subtle visual layers.#000000): Primary surface for all major containers and full-page backgrounds.#383838): Secondary surface layers for card containers and nested sections.#D13131): Used exclusively for error messaging and warning states; conveyed with subtle intensity below the primary accent.Italiana, Georgia, serifManrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | Italiana | 240px | 400 | 264px | 0px | Hero headlines; dominant visual statement |
| Hero / H2 | Manrope | 230px | 800 | 207px | 0px | Large section headings; bold brand statements |
| Large Span / Callout | Manrope | 115px | 400 | 138px | 0px | Featured quotes or emphasis text; gallery-style callouts |
| Heading / H3 | Manrope | 45px | 400 | 54px | 0px | Section headers; prominent subsections |
| Subheading / H4 | Manrope | 20px | 400 | 28px | 0px | Minor headers and card titles |
| Body | Manrope | 18px | 400 | 27px | 0px | Default paragraph text and descriptions |
| Link | Manrope | 16px | 400 | 24px | 0px | Inline links and navigation text |
| Caption | Manrope | 14px | 400 | 21px | 0px | Small metadata, timestamps, or footer text |
Primary Button
rgba(0, 0, 0, 0) (transparent)#FFFFFF0px (no padding; text-only style)0px none0px28pxnone#FF5733#FF5733 with subtle underline at 2pxSecondary Button (Text Link Style)
rgba(0, 0, 0, 0) (transparent)#FFFFFF0px0px none0px24pxnone#FF5733Portfolio Card
rgba(0, 0, 0, 0) (transparent; image-focused)#FFFFFF0px0px none0px600px24pxnonergba(0, 0, 0, 0.7) with fade effectSection Container
#00000080px 40px (vertical and horizontal spacing per section)0px none0pxnoneText Input
#000000 with border 1px solid #383838#FFFFFF16px 20px0px27pxnone#FF5733#969696, opacity 0.6Form Label
#FFFFFF0px 0px 12px 0px27pxMain Navigation
rgba(0, 0, 0, 0) (transparent overlay on hero)#FFFFFF24px 40px (header padding)0px none0px24pxnone#FF5733 with underline 2px solid #FF5733#FF5733 over 300msNavigation Link (Footer)
#FFFFFF0px 0px 8px 0px24px#FF5733Inline Link (Light Background)
#333333underline24px#FF5733, underline thickness 2pxInline Link (Dark Background)
#FFFFFFunderline24px#FF5733, underline color #FF5733Base Unit: 4px
Scale (Multiples of 4px):
12px (3×): Tight spacing, padding within small components16px (4×): Standard gap between related elements20px (5×): Compact padding for cards and containers24px (6×): Standard margin between sections32px (8×): Medium spacing between major components36px (9×): Large container padding40px (10×): Primary section padding (horizontal)44px (11×): Extra-large padding for emphasis52px (13×): Large vertical margin between sections60px (15×): Major spacing between hero and content72px (18×): Extra-large gap between full-width sections80px (20×): Hero section and full-page margin (vertical)Usage Context:
12px – Internal button padding, input spacing16px – Gap between flex/grid items20px – Card padding, input height24px – Section margin, spacing between related content40px – Horizontal padding for major sections80px – Vertical margin between full-width sectionsMax Width: No hard max width; full-bleed design with edge-to-edge backgrounds.
Column Strategy: Flexible single-column layout on mobile; 2-column grid for portfolio on desktop (inferred from gallery aesthetic). Content spans full width with internal padding.
Section Patterns:
width: 100vw, padding: 80px 40pxwidth: 100%, padding: 40px 40pxWhitespace is treated as an active design element. Jopecuro embraces generous breathing room around typography and imagery. Vertical rhythm is maintained through consistent 80px and 60px margins between major sections. Horizontal whitespace creates a refined, uncluttered gallery experience. No element feels cramped; content floats within ample negative space to convey premium positioning and intentional curation.
0px (standard for all components—buttons, cards, inputs, containers)No curved borders are used in this system; the aesthetic is consistently rectilinear and modern.
| Level | Treatment | Use |
|---|---|---|
| Surface (L0) | No shadow, box-shadow: none | Base backgrounds and static containers |
| Raised (L1) | Subtle dark shadow: box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3) | Card hover states, floating elements |
| Elevated (L2) | Medium shadow: box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.5) | Modals, overlays on hover |
| Modal (L3) | Strong shadow: box-shadow: 0px 12px 40px rgba(0, 0, 0, 0.7) | Modal dialogs, priority overlays |
Shadow Philosophy: Shadows are minimal and used sparingly in Jopecuro's minimalist aesthetic. The system relies primarily on stark color contrast rather than depth effects. Shadows are only introduced on hover states or interactive layers to signal state change without cluttering the static layout. When shadows appear, they use black with controlled opacity to maintain the high-contrast visual language.
#FF5733 for interactive elements only—hover states, active navigation, primary CTAs, and strategic emphasis.0px border radius throughout; keep all corners sharp and rectilinear.60px–80px margins) to create breathing room and gallery-like rhythm.24px) and no decorative text effects.rgba(0, 0, 0, 0)) with text-only styling for a minimal, refined appearance.#000000, #383838) to create subtle depth without adding shadows or borders.300ms using color and text decoration, not transformation or scale.0px.#FF5733 is the only permitted deviation from black, white, and gray.400 or 800 (Manrope) or weight 400 (Italiana).0px padding.24px even for small text; maintain legibility.#FF5733 for interactive states and #D13131 for errors.| Breakpoint Name | Width | Key Changes |
|---|---|---|
| Mobile | ≤ 768px | Single-column layout; font sizes reduced by ~10–15%; padding 24px–32px; hero text 120px–150px |
| Tablet | 769px–1024px | 1–2 column grid for portfolio; padding 40px; heading sizes remain consistent with desktop |
| Desktop | ≥ 1025px | Full 2-column portfolio grid; padding 40px–80px; all typography at full scale |
Minimum Touch Target Size: 44px × 44px
44px minimum height (padded vertically to meet target)44px minimum height (achieved through line-height and vertical padding)16px font with 28px line-height for adequate touch spacing44px minimum height with 16px padding verticalOn Mobile (≤ 768px):
120px, maintain aspect ratio in line-height (132px)150px, line-height 135px16px, line-height 24px24px 20px (reduced from 40px)On Tablet (769px–1024px):
180px, line-height 198px180px, line-height 162px40pxOn Desktop (≥ 1025px):
80px vertical marginswidth: 50% per item#FF5733) – Use for hover states, active links, emphasis text, and interactive affordance#000000) – Full-bleed section backgrounds and primary surfaces#383838) – Subtle layering and nested containers#FFFFFF) – All foreground typography on dark backgrounds#D13131) – Error messages and validation states only#333333, #808080, #969696 – Tertiary backgrounds, disabled states, and subtle UI#333333) – Rarely used; typically dark sections use white linksExtreme Contrast First: All typography must be either white on black or black on white; no gray-on-gray or mid-tone combinations.
Sharp Corners Always: Every component—buttons, cards, inputs, containers—uses border-radius: 0px. No exceptions for visual softness.
Typography Hierarchy Locked: H1 = Italiana 240px, H2 = Manrope 230px bold, Body = Manrope 18px. Deviations from this table break the system.
Accent Color Discipline: #FF5733 appears only on interactive hover/active states and strategic emphasis. It is never applied to static text or backgrounds.
Spacing Scales Consistently: Use 12px, 16px, 20px, 24px, 32px, 40px, 52px, 60px, 80px in order. No arbitrary spacing values; always align to multiples of 4px.
Padding Over Shadows: Depth is created through padding, background layering, and color contrast—not box shadows. Shadows only appear on interactive state changes (hover, focus).
Line Height Rule: Minimum line-height is 24px for body text, 27px for 18px body, and proportionally larger for display text. Never compress leading.
Button Transparency: Primary buttons use background: rgba(0, 0, 0, 0) with text-only styling and padding: 0px. Hover state changes text color to #FF5733.
Full-Width Sections: All major sections span 100vw or 100% with internal padding: 40px–80px rather than max-width containers. Embrace edge-to-edge design.
Responsive Scaling: On mobile, reduce display type by ~10–15%, collapse portfolio to 1 column, and reduce section padding to 24px. Maintain hierarchy and contrast at all sizes.