Switch between the rendered Visual preview and the Raw DESIGN.md.
This design system embodies a refined, contemporary aesthetic that blends deep jewel tones with warm, inviting neutrals. The palette evokes a sense of creative sophistication—playful yet professional—perfect for a freelance web designer's portfolio. The design philosophy centers on elegant minimalism with subtle interactive flourishes, using ample whitespace and considered color blocking to guide attention. Soft, rounded corners and layered shadows create depth without heaviness. The typography feels modern and approachable, with careful hierarchy that invites exploration. Overall, the system conveys expertise, creativity, and an appreciation for thoughtful digital craft.
Key Characteristics
#2F1664): Primary brand color used throughout the system; dominates button states, text on light backgrounds, and key UI elements. Conveys creativity and professionalism.#6942BB): Secondary primary tone; used for emphasis and interactive highlights. Lighter variant of deep purple for visual interest.#8D5CF5): Soft purple accent for hover states, secondary CTA backgrounds, and decorative elements. Creates a more approachable feel than deep purple.#F5D9AE): Warm neutral accent used sparingly for highlighted sections or warm UI states.#F2C794): Deeper warm accent for call-out boxes, featured content areas, and premium sections.#42D5B6): Vibrant accent for success states, highlights, or interactive indicators. Provides complementary contrast to purples.#2F1664): Button backgrounds for primary CTAs and interactive elements.#8D5CF5): Button backgrounds for secondary interactions and hover states.#2F1664): Text color on light button backgrounds for contrast.#FFFFFF): Primary background for content areas, cards, and light sections. Maximum contrast for readability.#F9F4F2): Soft, warm background for subtle differentiation from pure white. Creates visual breathing room.#333333): Primary text color for body content and secondary information. High readability on light backgrounds.#0D0D0D): Enhanced text color for headings and maximum contrast requirements.#000000): Darkest neutral for extreme contrast or full-bleed backgrounds.#18384C): Deep background tone used for alternate sections or dark surface areas. Sophisticated complement to primary purple.#462C7E): Muted purple for borders, dividers, and subtle background layers. Less dominant than primary purple.#EACB49): Alert state, warning banners, and attention-grabbing notifications.Primary: Almarena
Almarena, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serifSecondary (Display): Almarena Display
Almarena Display, Almarena, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XL | Almarena Display | 115.2px | 400 | 103.68px | 0 | Hero headlines, major section breaks |
| Display L | Almarena Display | 72px | 400 | 86.4px | 0 | Large section headings, primary titles |
| Heading XL | Almarena | 28px | 400 | 33.6px | 0 | Major page headings |
| Heading L | Almarena | 24px | 400 | 28.8px | 0 | Section subheadings |
| Heading M | Almarena | 20px | 400 | 26.4px | 0 | Card titles, medium emphasis |
| Heading S | Almarena | 18px | 400 | 22.5px | 0 | Small headings, labels |
| Body L | Almarena | 18px | 300 | 25.2px | 0 | Large body text, lead paragraphs |
| Body M | Almarena | 16px | 400 | 22.8571px | 0 | Standard body text, form inputs |
| Body S | Almarena | 14px | 300 | 19.6px | 0 | Secondary text, captions |
| Caption | Almarena | 14.4px | 400 | 20.16px | 0 | Fine print, links, metadata |
| Label | Almarena | 14px | 300 | 19.6px | 0 | Form labels, UI labels |
| Monospace | monospace | 14px | 400 | 21px | 0 | Code blocks, technical content |
#2F1664#FFFFFF20px400Almarena26.4px0px 24px55px5pxnonenone#6942BB, slight elevation with 0px 4px 12px rgba(105, 66, 187, 0.2)#1A0E3A, shadow inset 0px 2px 4px rgba(0, 0, 0, 0.2)#B8A8CC, cursor not-allowed, opacity 0.6#8D5CF5#2F166420px400Almarena26.4px0px 24px55px5pxnonenone#6942BB, text color #FFFFFF, shadow 0px 4px 12px rgba(105, 66, 187, 0.25)#4A2E6B, shadow inset 0px 2px 4px rgba(0, 0, 0, 0.15)transparent#2F166418px400Almarena25.2px0px 16px48px5px2px solid #2F1664nonergba(47, 22, 100, 0.08), border color #6942BBrgba(47, 22, 100, 0.15), border color #2F1664transparent#FFFFFF28px400Almarena28px0pxauto28px0pxnonenone0.8, slight scale transform scale(1.05)#2F166410px0px (image overflow), inner content 24px 24px 24px 24pxnonergba(105, 66, 187, 0.15) 3px 3px 70px -20px, rgba(47, 22, 100, 0.1) 0px 0px 0px 2px#FFFFFF#F9F4F2rgba(105, 66, 187, 0.25) 3px 8px 80px -15px, slight upward transform translateY(-4px)0.3s cubic-bezier(0.4, 0, 0.2, 1)#FFFFFF10px32px 28px2px solid #2F16640px 2px 8px rgba(47, 22, 100, 0.08)#333333#6942BB, shadow 0px 4px 16px rgba(105, 66, 187, 0.15)#FFFFFF10px40px 40pxnonergba(105, 66, 187, 0.15) 3px 3px 70px -20px, rgba(47, 22, 100, 0) 0px 0px 0px 2pxrgba(0, 0, 0, 0.4)#2F1664 colortransparent with border focus#33333316px400Almarena22.8571px8px 12px48px120px (minimum)5px2px solid #2F1664none2px solid #6942BB, box-shadow 0px 0px 0px 3px rgba(105, 66, 187, 0.1)rgba(51, 51, 51, 0.5)#F9F4F2, border 2px solid #D0C4DA, color rgba(51, 51, 51, 0.4), cursor not-allowed14px300Almarena19.6px#2F16648pxblock20pxflexcolumn14.4px400Almarena20.16px#2F16648px 0px2px solid transparent#6942BB, border-bottom 2px solid #6942BB#2F1664, border-bottom 2px solid #2F16640.2s ease-in-out18px300Almarena25.2px#FFFFFF8px 0px2px solid transparent0.8, border-bottom 2px solid #FFFFFF2px solid #FFFFFF0.2s ease-in-out20px300Almarena26.4px#2F1664none#6942BB, text-decoration underline0.2s ease-in-outBase Unit: 4px
Spacing Scale with Context:
4px: Micro spacing for icon-to-text proximity, tight form field adjustments8px: Tight padding for form inputs, button internal spacing12px: Form field horizontal padding, small component spacing16px: Standard margin between adjacent elements, default gutter20px: Comfortable padding for cards and containers, section spacing28px: Medium section separation, spacing between card groups32px: Large margin between major sections, breathing room40px: Extended padding for prominent content areas, hero sections48px: Generous spacing for visual hierarchy emphasis, page section separators56px: Large gaps between major layout blocks60px: Extra-large container padding for emphasized content72px: Maximum spacing for top-level section breaks and hero margins1200px (desktop containers)16px between columns60px vertical padding on desktop48px vertical spacing2/3 width, sidebar 1/3 width with 32px gapThe design system embraces generous whitespace as a core principle. Ample breathing room around elements reduces cognitive load and emphasizes importance. Sections are visually separated by consistent 48–72px margins rather than borders. Text is given breathing room with large line heights (1.4–1.5× of font size) and indented paragraphs. Cards and components are surrounded by visual "air" to prevent crowding. This philosophy creates a sophisticated, uncluttered aesthetic that invites exploration.
0px: Borders, dividers, and full-width overlays (no rounding)5px: Buttons, form inputs, small interactive elements10px: Cards, modals, larger containers, prominent UI surfaces50%: Circle elements, avatar images, icon backgrounds| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow, flat plane (box-shadow: none) | Disabled states, inactive components, background surfaces |
| Raised | 0px 2px 8px rgba(47, 22, 100, 0.08) | Standard cards, content containers, neutral interactive elements |
| Elevated | 0px 4px 16px rgba(105, 66, 187, 0.15) | Hover states on cards, secondary buttons, transitional states |
| Prominent | rgba(105, 66, 187, 0.15) 3px 3px 70px -20px, rgba(47, 22, 100, 0.1) 0px 0px 0px 2px | Project cards, modals, featured content, maximum emphasis |
| Prominent Hover | rgba(105, 66, 187, 0.25) 3px 8px 80px -15px | Hovered project cards, interactive highlights, dynamic elevation |
| Inset | inset 0px 2px 4px rgba(0, 0, 0, 0.2) | Pressed button states, depressed interactive elements |
Shadow Philosophy: The shadow system uses purple-tinted shadows (rgba(105, 66, 187, ...)) to reinforce the brand color palette. Shadows are soft and diffuse, creating a sense of gentle elevation rather than harsh separation. The system uses multiple shadow layers (spread + blur) to create depth that feels organic and inviting. Shadows increase on hover and active states to provide tactile feedback. Inset shadows create depression and pressed states for interactive elements, enhancing affordance.
#2F1664) with white or cream for primary content; this is the highest-contrast, most legible pairing.box-shadow with purple tints) rather than hard borders to create depth and sophistication.cubic-bezier(0.4, 0, 0.2, 1)) on hover and focus states to provide tactile feedback.#F5D9AE, #F2C794) sparingly for call-out boxes, featured content, or warm interactive highlights.5px for buttons, 10px for cards) to soften the modern aesthetic without overdoing it.#000000) for body text; use charcoal gray (#333333) for reduced eye strain.120px for desktop, 96px for mobile.#42D5B6) without careful contrast testing against surrounding colors.2px solid #2F1664 on form inputs; this is a key affordance signaling interactivity.#EACB49) as a primary UI color; reserve it for alert and notification states only.| Breakpoint | Width | Key Changes |
|---|---|---|
| Mobile | 320px–639px | Single-column layouts, full-width cards, 16px side padding, larger touch targets (48px), reduced font sizes (–2px), stacked navigation |
| Tablet | 640px–1023px | 2-column grids for cards, max-width containers at 90%, 28px side padding, optimized spacing, tablet-sized touch targets (44px) |
| Desktop | 1024px–1439px | 3-column card grids, max-width 1200px container, full-width hero sections, sidebar layouts enabled, 32px side padding |
| Large Desktop | 1440px+ | Same as desktop; lateral constraints prevent excessive line lengths; max-width maintained |
48px × 48px for primary interactive elements (buttons, links) on mobile44px × 44px on tablet, 40px × 40px on desktop8px between adjacent touch targets to prevent accidental mis-taps48px on mobile for comfortable tap targets; 44px on tablet, 40px on desktop (with 8px vertical padding)28px × 28px minimum with expanded touch area of 44px × 44px (padding around the icon)Mobile (320px–639px):
32px/40px to 16px side margins40px verticalTablet (640px–1023px):
28px side margins48px verticalDesktop (1024px+):
1200px32px side margins#2F1664)#8D5CF5)#2F1664)#0D0D0D) or Deep Purple (#2F1664)#333333)#2F1664) with hover state Lavender (#6942BB)#2F1664) with white text#FFFFFF) with Deep Purple border#F9F4F2) or White (#FFFFFF)#42D5B6)#EACB49)0px 4px 12px rgba(105, 66, 187, 0.2) and translate up 4pxTypography First: Use Almarena throughout, reserving Almarena Display for display sizes (72px+). Maintain strict hierarchy: heading sizes are 115.2px, 72px, or smaller intervals. Body text defaults to 16–18px depending on context (14px for captions, 20px+ for emphasis).
Color Application Principle: Deep Purple (#2F1664) is the primary brand color for buttons, links, and interactive affordances. Lavender (#8D5CF5) appears on hover states and secondary actions. Use white text on dark purple, dark text on light backgrounds. Never reverse this without contrast testing.
Button Convention: All buttons are 55px height on desktop, 48px on mobile. Primary buttons use Deep Purple background with white text. Secondary buttons use Lavender background with Deep Purple text. Ghost buttons have transparent background, Deep Purple text, and a 2px solid #2F1664 border. Add hover shadow and slight upward shift (translateY(-4px)) for all states.
Form Input Pattern: Every input and textarea receives a 2px solid #2F1664 border with transparent background. On focus, border becomes 2px solid #6942BB and add box-shadow 0px 0px 0px 3px rgba(105, 66, 187, 0.1). Padding is always 8px 12px with 5px border radius. Labels appear above inputs in 14px Almarena, weight 300, color Deep Purple.
Card Elevation & Shadows: Project/featured cards use prompt shadow rgba(105, 66, 187, 0.15) 3px 3px 70px -20px, rgba(47, 22, 100, 0.1) 0px 0px 0px 2px. On hover, intensify to rgba(105, 66, 187, 0.25) 3px 8px 80px -15px and apply translateY(-4px). Content cards use lighter shadow 0px 2px 8px rgba(47, 22, 100, 0.08). All rounded to 10px.
Spacing & Layout Rhythm: Use the spacing scale (4, 8, 12, 16, 20, 28, 32, 40, 48, 56, 60, 72px) to structure layouts. Major sections separate with 48–72px margins. Cards within a grid use 20–28px gap. Internal card padding is 24–40px. Mobile reduces all margins/padding by ~50%, tablet by ~25%.
Responsive Breakpoints: Mobile-first approach: design for 320px minimum. Tablet breakpoint at 640px shifts cards to 2-column. Desktop breakpoint at 1024px enables 3-column grids and sidebars. Maintain max-width container at 1200px on desktop. All font sizes and padding scale proportionally; never drop below minimum touch target of 44px on mobile.
Interaction & Feedback: Every interactive element includes a visible focus state (outline or box-shadow). Hover states are smooth transitions (0.2–0.3s cubic-bezier(0.4, 0, 0.2, 1)). Button hover adds shadow and slight translate. Link hover adds underline or border-bottom. Form inputs on focus change border color and add soft shadow. Active/pressed states use inset shadow inset 0px 2px 4px rgba(0, 0, 0, 0.2).
Accessibility & Contrast: Maintain WCAG AA contrast minimum of 4.5:1 for body text, 3:1 for large text (18px+). Never rely on color alone; pair with text labels or icons. All interactive elements must be keyboard-accessible with visible focus indicators. Touch targets on mobile must be minimum 48px × 48px with 8px spacing. Test Dark Mode compatibility if applicable; ensure shadows and colors remain readable.