Edge8
AI Leadership, Automation & Global Talent Solutions. This system keeps the structure of the Clay design analysis (type scale, spacing, radii, saturated feature cards) and re-skins it in Edge8's palette and font, taken from edge8.ai's live CSS.
Overview
- White canvas, near-black ink.
canvas(#ffffff) holdsink(#101014) type. Edge8 reads clean and confident, not playful. - Dark primary CTAs.
primary(#101014) withon-primarywhite. Blue is the secondary action, mint the highlight action. - Two signature hues: blue and mint.
brand-blue(#287be8) andbrand-mint(#6ff2c1) carry the brand.brand-violet(#7a5cfa) is a small third accent for AI-agent features. - Saturated feature cards stay from Clay, now in 6 Edge8 fills: dark, blue, mint, violet, sky, tint.
- One font: Manrope (Google Fonts) for display and body. Display at weight 600 with slight negative tracking.
- Depth from color, not shadow. Soft navy-tinted shadows exist (
elevation-1,elevation-2) for hover lifts only.
Colors
Brand
brand-blue#287be8: links on dark, outline buttons, icons, charts, blue feature card.brand-blue-deep#1d6ad4: use when a blue fill carries small white text.brand-blue-ink#1a5fbf: blue as text on white orbrand-sky.brand-mint#6ff2c1: mint button, mint feature card, highlights on dark. Alwaysinktext on it.brand-violet#7a5cfa: AI-agent feature accents.brand-sky#eaf2ff: soft blue surface, info panels.
Surface
canvas#ffffff ·surface-soft#f5f6f8 ·surface-card#eaeef2 ·surface-strong#d4dae4surface-dark#101014 ·surface-dark-elevated#1a1a1f
Text
ink#101014 headlines ·body#5c6178 running text ·muted#6b7280 captionsbody-soft#797c82 is Edge8's site grey. Large text only (18px+).
Contrast flags (kept from the source, use with care)
- White on
brand-blue: 4.1:1. OK at 24px+ only. Small text on blue: usebrand-blue-deep. - White on
brand-violet: 4.4:1. Titles 24px+ only. body-softon white: 4.2:1. Subheads 18px+ only.
Typography
Manrope throughout, fallback "Helvetica Neue", Arial, sans-serif. Display styles (display-xl 72px down to display-sm 32px) at 600 with about -0.01em tracking, matching Edge8's hero. Body at 400, UI labels at 500 to 600. Button labels are 15px / 600 (Edge8's value).
Layout
- 4px base. Spacing
space-xxs4 tospace-xxl48, plusspace-section96 between bands. - Max content ~1280px. Feature grids 3-up desktop, 2-up tablet, 1-up mobile.
- Hero: centered headline over a white field with a faint radial wash (blue at ~9%, mint at ~8%) and a light grid. Keep it subtle.
Components (recipes)
| Component | Fill | Text | Radius | Padding |
|---|---|---|---|---|
| button-primary | primary | on-primary | radius-md | 16 × 24 |
| button-secondary (blue) | brand-blue-deep | on-dark | radius-md | 16 × 24 |
| button-mint | brand-mint | ink | radius-md | 16 × 24 |
| button-outline | transparent, 1.5px brand-blue | brand-blue-ink | radius-md | 16 × 24 |
| feature-card-dark | surface-dark | on-dark | radius-xl | space-xl |
| feature-card-blue | brand-blue | on-dark (24px+ titles) | radius-xl | space-xl |
| feature-card-mint | brand-mint | ink | radius-xl | space-xl |
| feature-card-violet | brand-violet | on-dark (24px+ titles) | radius-xl | space-xl |
| feature-card-sky | brand-sky | ink | radius-xl | space-xl |
| feature-card-tint | surface-card | ink | radius-xl | space-xl |
| pricing-tier-card-featured | surface-dark | on-dark, mint CTA | radius-lg | space-xl |
| testimonial-card | surface-card | ink / body | radius-lg | space-lg |
| text-input | canvas, 1px input-border | ink | radius-md | 12 × 16 |
| badge / eyebrow pill | surface-card | body | radius-pill | 6 × 16 |
| footer | surface-soft | body | none | 80 |
Do
- Lead with white and near-black; let blue and mint do the talking.
- Cycle feature cards: dark, blue, mint, sky, violet, tint. Never the same color twice in a row.
- Put
inktext on mint and sky; white only on dark, deep blue, or large text on blue/violet. - Use real photography of people and sessions where Clay used claymation.
Don't
- Don't add a 7th card color or new hues.
- Don't use
body-softormuted-softfor small required text. - Don't use heavy shadows or blue-to-purple gradients.
- Don't set display type heavier than 700.
Assets
Logos/logo.png: the Edge8 wordmark (black, with the infinity-style 8). Use on light surfaces only; a white version is still needed for dark bands.