FolioOne

Overview

FolioOne is a professional portfolio template designed for creative professionals—designers, developers, and digital strategists—who need to showcase their work with sophistication and clarity. The aesthetic embraces 'Dark Minimalism with Neon Accents': a deep navy-to-black canvas punctuated by a vibrant cyan primary color (#00a6eb) that commands attention without overwhelming. The UI evokes precision, modernity, and confidence—every interaction feels intentional and responsive. The brand personality is direct and professional: confident without arrogance, modern without trend-chasing, and accessible without sacrificing elegance. Voice example: 'View my work—each project tells a story of problem-solving and craft.'

Colors

The color system is built on a dark foundation (surface #0a1419, surface-container #1a2530) that provides visual rest and allows portfolio imagery to breathe. Primary cyan (#00a6eb) is reserved exclusively for interactive elements—call-to-action buttons, active navigation states, and focus indicators—ensuring it commands attention when needed. Secondary navy (#023b6d) anchors the header and provides depth hierarchy. Tertiary gray (#6c757d) is used for secondary text, disabled states, and subtle UI elements. The on-surface palette (#e8eef5 for primary text, #b0b8c0 for secondary) ensures legibility over dark backgrounds with a contrast ratio exceeding 7:1. Error states use #ff6b6b for warnings and destructive actions. All interactive elements transition smoothly: hover states shift primary

Typography

The type system uses the system font stack (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto) for universal compatibility and performance. Display (56px, 700 weight, -0.02em letter-spacing) anchors hero sections with commanding presence; headline-lg (40px, 700 weight) breaks major sections; body-md (16px, 400 weight, 24px line-height) provides comfortable reading rhythm for portfolio descriptions. Label-md (14px, 600 weight, 0.01em tracking) is applied to buttons and form labels with uppercase text-transform for emphasis. All type scales maintain a 1.5x multiplier between sizes, creating visual harmony. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to small labels (label-sm) when layered over portfolio images to ensure readability.

Layout

The layout uses a 12-column grid with a max-width of 1024px, centered on the viewport. Spacing follows a semantic scale: gutter (24px) separates major sections, lg spacing (40px) creates breathing room between hero and content blocks, and md spacing (24px) is used for card padding and internal component spacing. The dark background (#0a1419) extends edge-to-edge, while content containers (surface-container #1a2530) are inset with lg spacing on desktop, reducing to md on tablet and sm on mobile. White-space is generous—never cramped—to emphasize the portfolio's premium positioning. Container padding uses md (24px) on all sides, with gutter (24px) between grid columns.

Elevation & Depth

Depth is conveyed through layered surfaces and subtle shadows rather than dramatic drop-shadows. Level 1 (Base): the background surface (#0a1419) with no shadow. Level 2 (Standard Cards): surface-container (#1a2530) with a 1px border in surface-container-high (#2a3a4a) and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (Modals/Overlays): surface-container-high (#2a3a4a) with a 1px border in outline-variant (#4a5260) and box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20). Interactive elements (buttons, inputs) use a 0.3s ease transition when moving between states. Focus states apply a 3px inset box

Shapes

The shape philosophy is 'Technical Precision with Approachability': sharp enough to feel modern and intentional, rounded enough to feel welcoming. Buttons use full radius (9999px) to create pill-shaped CTAs that feel friendly and clickable; this 48px height with 12px 32px padding creates a generous touch target. Cards use lg radius (1rem / 16px) to soften corners without appearing soft or playful. Form inputs use DEFAULT radius (0.5rem / 8px) for a neutral, functional appearance. The 4px border-radius on dropdown panels (select-dropdown) provides subtle definition without distraction. This hie

Components

Action Elements Buttons are the primary interaction mechanism. button-primary uses background: {colors.primary} (#00a6eb), color: {colors.on-primary} (white), rounded: full (9999px), padding: 12px 32px, height: 48px, with no border. On hover, background transitions to {colors.inverse-primary} (#00b4ff) over 0.3s ease. button-secondary mirrors the primary button's dimensions but uses a transparent background with a 2px solid border in {colors.primary}, and on hover applies background: rgba(0, 166, 235, 0.1). Both buttons use label-md typography (14px, 600 weight).

Containers & Surfaces card elements use background: {colors.surface-container} (#1a2530), rounded: lg (1rem), padding: md (24px), and a 1px border in {colors.surface-container-high} (#2a3a4a). On hover, the background tra

Do's and Don'ts

**Do**

• Do use primary cyan (#00a6eb) exclusively on interactive elements—buttons, links, focus states—to create a clear visual hierarchy and guide user attention.
• Do maintain the dark surface (#0a1419) as the default background to reduce eye strain and allow portfolio imagery to command attention.
• Do apply the 0.3s ease transition to all interactive state changes (hover, focus, active) to create a responsive, polished feel.
• Do use the full-radius pill shape (9999px) for all primary CTAs to signal high interactivity and approachability.
• Do pair body-md (16px, 400 weight) with 24px line-height for portfolio descriptions to ensure comfortable reading rhythm on dark backgrounds.

**Don't**

• Don't use primary cyan for non-interactive elements like headings, backgrounds, or decorative accents—reserve it exclusively for actions and focus states.
• Don't apply shadows deeper than elevation.lg (0 8px 24px rgba(0, 0, 0, 0.20)) as the dark background already provides sufficient depth contrast.
• Don't use rounded: full (9999px) on cards or containers—reserve pill shapes for buttons only to maintain clear interaction semantics.
• Don't mix font families; the system font stack (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto) is optimized for all platforms and should be used consistently.
• Don't reduce padding below sm (12px) on interactive elements or below md (24px) on card containers, as this compromises touch targets and visual breathing room.