Agero

Overview

Agero is a high-contrast, conversion-optimized portfolio template built for design startups and creative agencies seeking professional credibility without visual noise. The brand embodies 'Architectural Minimalism'—a design philosophy that strips away ornamentation to expose functional beauty, using a clean light-gray canvas (#f0f0f0) paired with a bold, energetic orange accent (#ff4d00) that commands attention on CTAs and key interactions. The emotional response is one of confidence and clarity: users feel they're working with a serious, fast-moving team that respects their time. The interface uses embedded photography and circular imagery as visual punctuation, breaking the geometric grid just enough to feel human and approachable.

The brand voice is direct, jargon-free, and action-oriented. Agero speaks in short, declarative sentences: 'We make it easy for startups to launch, grow, and scale.' Vocabulary favors concrete nouns (plans, templates, projects) over abstract adjectives. The tone is professional but never stiff—think a London-based founder who's shipped products, not a corporate marketing department. Example sentence in brand voice: 'No delays, no drama—just clean designs that convert.'

Colors

The color system is built on a monochromatic foundation with a single, dominant accent. The primary surface is a soft light gray (#f0f0f0), chosen for its neutrality and ability to make content breathe without the harshness of pure white (#ffffff is reserved for elevated surfaces and cards). The on-surface text color is a deep charcoal (#131313), providing 16:1 contrast for accessibility and visual weight. The secondary text color (#5c5c5c) is used for supporting copy, metadata, and disabled states, maintaining 7:1 contrast. Primary (#ff4d00) is the brand's signature orange—used exclusively on primary CTAs ('Get Started', 'View Plans'), hover states, and accent elements. It appears sparingly (53 instances in the design) to maintain visual hierarchy and prevent fatigue. Secondary (#0099ff)

Typography

The type system pairs Cal Sans (a geometric, friendly display font) for headlines with Inter (a neutral, highly legible sans-serif) for body and UI text. Cal Sans is used at 72px for the hero headline ('Effortless Design'), set at 400 weight with -0.02em letter-spacing to maintain openness at large sizes. Inter serves as the workhorse: headlines use 700 weight at 32px (line-height 40px) for section titles, body copy runs at 400 weight, 16px, with 24px line-height for comfortable reading, and labels use 600 weight at 14px with 0.02em letter-spacing for emphasis on buttons and badges. The hierarchy is strict: display (72px) → headline-lg (56px) → headline-md (32px) → title-lg (22px) → body-lg (18px) → body-md (16px) → label-md (14px) → label-sm (12px). On small labels over busy backgrounds (

Layout

The page uses a 12-column grid with a max-width of 1200px, centered on the viewport with 24px gutters on desktop and 12px on mobile. The hero section spans full-width with 64px vertical padding (lg spacing) to create breathing room around the headline. Content sections use a 3-column layout for cards and a 2-column layout for testimonials, collapsing to single-column on tablets and mobile. The spacing scale is semantic: unit (8px) is the baseline, xs (4px) for micro-adjustments, sm (12px) for tight grouping, md (24px) for section separation, lg (40px) for major section breaks, and xl (64px) for hero and footer padding. White-space is generous—no element is crammed; the eye always has room to rest. Container max-width is 1200px to prevent line-length from exceeding 75 characters on body tex

Elevation & Depth

Depth is conveyed through subtle shadows and layering, never through color darkening. The elevation system has three levels: sm (0 1px 2px rgba(0, 0, 0, 0.08)) for cards and subtle surfaces, md (0 4px 12px rgba(0, 0, 0, 0.1)) for hovered cards and modals, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for floating elements like sticky headers and dropdowns. Primary buttons add a custom shadow (0 4px 12px rgba(255, 77, 0, 0.2)) to emphasize their importance; on hover, this expands to 0 8px 20px rgba(255, 77, 0, 0.3). Cards start with sm shadow and transition to md on hover (transition: box-shadow 200

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are used strategically to soften the geometric grid without sacrificing precision. Buttons use lg radius (1rem / 16px), creating a pill-like appearance that feels modern and approachable. Cards use lg radius (1rem) for consistency. Input fields use DEFAULT radius (0.5rem / 8px) for a more structured, form-like appearance. Badges and small UI elements use full radius (9999px) to create perfect circles or pills. The hero section has no border-radius; it's a clean rectangle. Modals and overlays use xl radius (1.5rem / 24px) for a softer, mo

Components

Action Elements Buttons are the primary interaction pattern. The primary button uses {colors.primary} (#ff4d00) background with {colors.on-primary} (#ffffff) text, lg radius (16px), and 12px 32px padding for a 48px height. On hover, the background shifts to #cc3d00 with an expanded shadow (0 8px 20px rgba(255, 77, 0, 0.3)); transition is 200ms ease-out. On active (pressed), the background darkens to #993000 and shadow reduces to 0 2px 8px rgba(255, 77, 0, 0.15). Secondary buttons are transparent with a 1px outline in {colors.outline} (#5c5c5c); on hover, they fill with {colors.surface-container-high} (#c8c8c8). Ghost buttons use a dark semi-transparent background (rgba(19, 19, 19, 0.82)) with full radius (9999px) and 12px 20px padding; these are used for secondary CTAs like 'Contact' i

Do's and Don'ts

**Do**

• Do use the primary orange (#ff4d00) exclusively on CTAs and primary actions—never on decorative elements or backgrounds.
• Do maintain the 24px gutter and lg (40px) section spacing to preserve the generous, breathing layout.
• Do pair Cal Sans headlines with Inter body copy; never mix typefaces within a single text block.
• Do apply the sm shadow (0 1px 2px rgba(0, 0, 0, 0.08)) to all cards and elevated surfaces for consistent depth.
• Do use the full radius (9999px) on badges and secondary buttons to signal secondary importance.
• Do limit text to 75 characters per line by respecting the 1200px container max-width.
• Do transition interactive states over 150–200ms with ease-out timing for smooth, responsive feedback.

**Don't**

• Don't use pure white (#ffffff) as the page background; use the soft gray (#f0f0f0) to reduce eye strain and create visual hierarchy.
• Don't apply the primary orange to more than 5–10% of the interface; overuse dilutes its impact and confuses the visual hierarchy.
• Don't use hard borders (1px solid black) on cards or containers; rely on shadows and background color shifts instead.
• Don't mix rounded and sharp corners on the same component; maintain consistency within a component family.
• Don't use system fonts (system-ui, sans-serif); always load Cal Sans and Inter from the provided @font-face declarations.
• Don't apply text-shadow to body copy; reserve it only for small labels (12px or smaller) over busy backgrounds.
• Don't use opacity-based overlays below 0.5 (50%); they become invisible and fail to create visual separation.