Kamo Junior

Generated Oct 21, 2026

DESIGN.md for www.apex-ea.tech

www.apex-ea.tech1 colors5 componentsSora + Manrope

Remix

2 screenshots captured· www.apex-ea.tech

1 / 2 · Apex EA — Mobile Trading, Revolutionized · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: Apex-ea
description: |
  Apex EA presents a premium, technology-forward design system tailored for
  professional traders and mentors. The brand combines bold, purposeful
  typography with carefully orchestrated color blocking and subtle depth to
  communicate confidence and control. The visual approach emphasizes clarity and
  decisiveness—every element serves a function in guiding users toward key
  actions like app downloads and mentor sign-ups. The system uses vibrant accent
  colors against neutral, light surfaces, ensuring high contrast and scanability
  across mobile-first interfaces. Gradients and layered shadows add
  dimensionality without compromising the clean, professional aesthetic
  essential to financial technology.
source:
  url: "https://www.apex-ea.tech"
  pagesAnalyzed: 1
  extractedAt: 2026-10-21
  tokensMeasured: true
colors:
  neutral-1: "#FFFFFF"
typography:
  display:
    fontFamily: Sora
    fontSize: 72px
    fontWeight: 800
    lineHeight: 1.02
    letterSpacing: -1.44px
  heading-md:
    fontFamily: Sora
    fontSize: 36px
    fontWeight: 800
    lineHeight: 1.11
    letterSpacing: -0.72px
  heading-sm:
    fontFamily: Sora
    fontSize: 30px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: 0px
  heading-xs:
    fontFamily: Sora
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.56
    letterSpacing: -0.36px
  body-lg:
    fontFamily: Manrope
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.63
    letterSpacing: 0px
  body-lg-strong:
    fontFamily: Sora
    fontSize: 18px
    fontWeight: 800
    lineHeight: 1.56
    letterSpacing: -0.45px
  body-md:
    fontFamily: Manrope
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  body-md-loose:
    fontFamily: Manrope
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.63
    letterSpacing: 0px
  body-md-strong:
    fontFamily: Manrope
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  body-md-sora:
    fontFamily: Sora
    fontSize: 14px
    fontWeight: 800
    lineHeight: 1.43
    letterSpacing: 0px
  button-md:
    fontFamily: Manrope
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-md-strong:
    fontFamily: Sora
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: -0.32px
  button-sm:
    fontFamily: Manrope
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.43
    letterSpacing: 0px
  caption-xs:
    fontFamily: Manrope
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  caption-xs-strong:
    fontFamily: Manrope
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: 0px
rounded:
  none: 0px
  xs: 12px
  sm: 16px
  md: 20px
  full: 9999px
spacing:
  xxs: 8px
  xs: 12px
  sm: 16px
  md: 20px
  lg: 24px
  xl: 28px
  xxl: 32px
  xxxl: 36px
  section: 40px
  band: 48px
borderWidths:
  thin: 1px
shadows:
  sm: "oklch(0.24 0.09 285 / 0.25) 0px 12px 40px -18px"
  md: "oklch(0.53 0.28 293 / 0.55) 0px 18px 45px -14px"
  lg: "oklch(0.6 0.24 27 / 0.6) 0px 18px 45px -14px"
elevationStrategy: progressive
themes:
  derived: dark   # the other theme is the site's measured palette
  light:
    bg: "#FFFFFF"
    surface: "#F7F7F7"
    surfaceRaised: "#EEEEEE"
    text: "#111111"
    textMuted: "#646464"
    border: "#E2E2E2"
    accent: "#111111"
    accentFg: "#FFFFFF"
    focusRing: "#111111"
    elevation: shadow
  dark:
    bg: "#0F0F10"
    surface: "#1D1D1E"
    surfaceRaised: "#29292A"
    text: "#F5F5F5"
    textMuted: "#9E9E9E"
    border: "#353536"
    accent: "#818181"
    accentFg: "#0B0B0C"
    focusRing: "#636363"
    elevation: "border+surface"
gradients:
  - context: hero
    kind: radial
    value: "radial-gradient(60% 60% at 50% 0%, oklch(0.53 0.28 293 / 0.16) 0%, rgba(0, 0, 0, 0) 70%)"
  - context: section
    kind: linear
    value: "linear-gradient(100deg, oklch(0.53 0.28 293) 0%, oklch(0.6 0.25 305) 100%)"
  - context: section
    kind: radial
    value: "radial-gradient(50% 60%, oklch(0.6 0.24 27 / 0.45) 0%, rgba(0, 0, 0, 0) 70%)"
  - context: section
    kind: linear
    value: "linear-gradient(oklch(0.64 0.23 27) 0%, oklch(0.54 0.22 27) 100%)"
components:
  button-text:
    typography: "{typography.button-sm}"
    textColor: "oklch(1 0 0)"
    height: 36px
    padding: "8px 16px 8px 16px"
    rounded: "{rounded.xs}"
    backgroundColor: "oklch(0.24 0.09 285)"
  button-outline:
    textColor: "oklch(0.24 0.09 285)"
    border: "1px solid oklch(0.92 0.012 285)"
    height: 50px
    padding: "14px 32px 14px 32px"
    fontSize: 14px
    fontFamily: Manrope
    fontWeight: 700
    lineHeight: 1.43
    rounded: "3.35544e+07px"
    backgroundColor: "oklch(1 0 0)"
  button-text-lg:
    textColor: "oklch(0.99 0.005 285)"
    height: 48px
    padding: "14px 24px 14px 24px"
    fontSize: 14px
    boxShadow: "oklch(0.53 0.28 293 / 0.55) 0px 18px 45px -14px"
    fontFamily: Manrope
    fontWeight: 700
    lineHeight: 1.43
    rounded: "{rounded.sm}"
  card:
    typography: "{typography.button-md}"
    textColor: "oklch(0.24 0.09 285)"
    border: "1px solid oklch(0.92 0.012 285)"
    padding: "24px 24px 24px 24px"
    boxShadow: "oklch(0.24 0.09 285 / 0.25) 0px 12px 40px -18px"
    rounded: "{rounded.md}"
    backgroundColor: "oklch(1 0 0)"
  navigation:
    typography: "{typography.body-md-strong}"
    textColor: "oklch(0.55 0.03 285)"
    height: 20px
  footer:
    typography: "{typography.button-md}"
    textColor: "oklch(0.24 0.09 285)"
    border: "1px solid oklch(0.92 0.012 285)"
    padding: "40px 20px 40px 20px"
  link:
    textColor: "{colors.neutral-1}"
    padding: "14px 32px 14px 32px"
    fontSize: 14px
    boxShadow: "oklch(0.6 0.24 27 / 0.6) 0px 18px 45px -14px"
    fontFamily: Manrope
    fontWeight: 700
    lineHeight: 1.43
    rounded: "3.35544e+07px"
  link-sm:
    typography: "{typography.button-md}"
    textColor: "oklch(0.24 0.09 285)"
states:
  nav-hover:
    target: nav
    state: hover
    opacity: 1
  other-disabled:
    target: other
    state: disabled
    opacity: 0.7
  other-hover:
    target: other
    state: hover
    opacity: 0.9
breakpoints:
  - width: 375
    containerWidth: 335
    gridColumns: 1
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 48
    bodyPx: 16
    sectionPaddingX: 20
  - width: 768
    containerWidth: 728
    gridColumns: 3
    navLinksVisible: 3
    menuToggleVisible: true
    headingPx: 72
    bodyPx: 16
    sectionPaddingX: 20
  - width: 1024
    containerWidth: 984
    gridColumns: 3
    navLinksVisible: 3
    menuToggleVisible: true
    headingPx: 72
    bodyPx: 16
    sectionPaddingX: 20
  - width: 1280
    containerWidth: 1152
    gridColumns: 3
    navLinksVisible: 3
    menuToggleVisible: true
    headingPx: 72
    bodyPx: 16
    sectionPaddingX: 20
  - width: 1440
    containerWidth: 1152
    gridColumns: 3
    navLinksVisible: 3
    menuToggleVisible: true
    headingPx: 72
    bodyPx: 16
    sectionPaddingX: 20
coverage:
  statesFound: 25
  gradientsFound: 4
  rolesUnassigned: 1
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: true
  semanticRampDeclared: false

Design System Inspired by Apex EA

1. Visual Theme & Atmosphere

Apex EA presents a premium, technology-forward design system tailored for professional traders and mentors. The brand combines bold, purposeful typography with carefully orchestrated color blocking and subtle depth to communicate confidence and control. The visual approach emphasizes clarity and decisiveness—every element serves a function in guiding users toward key actions like app downloads and mentor sign-ups. The system uses vibrant accent colors against neutral, light surfaces, ensuring high contrast and scanability across mobile-first interfaces. Gradients and layered shadows add dimensionality without compromising the clean, professional aesthetic essential to financial technology.

Key Characteristics

Premium technology aesthetic with strong brand personality through color and typography
Mobile-first design optimized for trading scenarios and quick decision-making
High-contrast, accessible layouts with bold heading hierarchy and disciplined whitespace
Color-blocking depth strategy (minimal shadows, maximum surface color variation)
Pill-shaped interactive elements that feel modern and tactile
Negative letter-spacing on display text for tight, confident typography
Gradient overlays used sparingly to establish hero zones and section transitions

2. Color Palette & Roles

Primary

Brand Accent (#7C3AED): The core brand purple used in the logo, hero call-to-action buttons, icon accents, and visual brand markers. This vibrant hue is the primary signal for user engagement and brand identity throughout the interface.

Neutral Scale

Canvas / Background (#FFFFFF): Clean, uncluttered page and card backgrounds. Provides the foundation for all content and ensures readability of text and interactive elements.

Interactive

Button Text (#FFFFFF): High-contrast text on dark button fills, ensuring legibility and visual hierarchy for primary calls to action.
Navigation Text (#8B8B8B): Subtle, secondary text color for navigation links and supporting content. Reduces visual noise while maintaining hierarchy.
Destructive / Secondary Action (#EF4444): Used for secondary or warning-level interactions (e.g., secondary download button, alert states). Carries distinct visual weight separate from primary actions.
Dark Text / Foreground (#3D3D3D): Primary text color for body content, headings, and descriptive copy. Provides strong contrast against light surfaces.

Surface & Borders

Border / Divider (#EAEAEA): Subtle 1px lines separating cards, sections, and form fields. Maintains visual hierarchy without heavy visual weight.

Gradients & Decorative

Hero Radial Gradient: radial-gradient(60% 60% at 50% 0%, oklch(0.53 0.28 293 / 0.16) 0%, rgba(0, 0, 0, 0) 70%) — A soft purple haze at the top of the hero section, drawing focus downward toward the headline and primary CTA.
Section Linear Gradient: linear-gradient(100deg, oklch(0.53 0.28 293) 0%, oklch(0.6 0.25 305) 100%) — Rich purple-to-indigo sweep across feature section backgrounds.
Section Radial Overlay: radial-gradient(50% 60%, oklch(0.6 0.24 27 / 0.45) 0%, rgba(0, 0, 0, 0) 70%) — Warm orange-red glow that adds depth and warmth to specific sections.
Section Linear Warm: linear-gradient(oklch(0.64 0.23 27) 0%, oklch(0.54 0.22 27) 100%) — Warm orange to deep red gradient for accent zones.

3. Typography Rules

Font Family

Primary: Sora Font stack: Sora, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif

Use for: All display sizes (72px+), headings, and bold accent text. Sora's geometric, high-contrast letterforms convey confidence and modernity.

Secondary: Manrope Font stack: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif

Use for: Body text, buttons, navigation, captions, and supporting content. Manrope's readable, neutral proportions ensure clarity at all sizes and distances.

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display	Sora	72px	800	1.02	-1.44px	Hero headline; aggressive negative tracking for impact
Heading Medium	Sora	36px	800	1.11	-0.72px	Section titles; strong visual dominance
Heading Small	Sora	30px	800	1.2	0px	Subsection headers; transition between display and body
Heading Extra Small	Sora	18px	700	1.56	-0.36px	Card titles, feature headlines
Body Large	Sora	18px	800	1.56	-0.45px	Emphasized body text, feature callouts
Body Medium Sora	Sora	14px	800	1.43	0px	Bold accent within paragraphs
Body Large	Manrope	18px	400	1.63	0px	Supporting descriptive text
Body Medium	Manrope	14px	400	1.43	0px	Default paragraph text, standard reading size
Body Medium Strong	Manrope	14px	500	1.43	0px	Link text, subtle emphasis
Body Medium Loose	Manrope	14px	400	1.63	0px	Spacious paragraph text; comfort reading
Button Medium Strong	Sora	16px	600	1.5	-0.32px	Primary button labels (emphasized variant)
Button Medium	Manrope	16px	400	1.5	0px	Standard button text
Button Small	Manrope	14px	600	1.43	0px	Compact button labels, secondary actions
Caption Extra Small	Manrope	12px	400	1.33	0px	Fine print, meta information
Caption Extra Small Strong	Manrope	12px	600	1.33	0px	Emphasized captions, labels

Principles

Display hierarchy through weight and tracking: The system uses Sora's bold 800 weight and aggressive negative letter-spacing (-1.44px at 72px) to create authoritative, confidence-inspiring headlines. Never lighten display text below 800 weight.
Readability through Manrope: Body copy, buttons, and links use Manrope's neutral letterforms and regular weights (400–600) to ensure clarity and accessibility at screen distances.
Emphasis via Sora accents: Key phrases within Manrope body text can shift to Sora 800 at matching size to draw attention without changing scale.
Letter-spacing precision: Negative tracking is applied only at display sizes (36px and above) to tighten the appearance; body text uses 0 tracking for neutral readability.
Line-height generosity: Body text (1.43–1.63) receives elevated line-height for comfort; display sizes use tighter line-heights (1.02–1.11) to maintain visual impact.

4. Component Stylings

Buttons

Primary Button (Large)

Background: {colors.primary} (#7C3AED)
Text Color: #FFFFFF
Padding: {spacing.md} 24px (vertical) × {spacing.lg} 24px (horizontal)
Height: 48px
Font: {typography.body-lg-strong} (Sora 18px, 800 weight)
Border Radius: {rounded.sm} (16px)
Border: None
Box Shadow: {shadows.md} (oklch(0.53 0.28 293 / 0.55) 0px 18px 45px -14px)
Hover State: Opacity 0.9; box-shadow maintained
Focus State: Box-shadow applied with ring offset

Primary Button (Pill / Full-Width Mobile)

Background: {colors.primary} (#7C3AED) or #EF4444 (destructive variant)
Text Color: #FFFFFF
Padding: {spacing.md} 20px (vertical) × {spacing.lg} 32px (horizontal)
Height: 50px
Font: {typography.button-sm} (Manrope 14px, 600 weight)
Border Radius: {rounded.full} (9999px — renders as full pill)
Border: None
Box Shadow: {shadows.lg} (oklch(0.6 0.24 27 / 0.6) 0px 18px 45px -14px)
Hover State: Background color shifts to darker shade; opacity 1
Focus State: Focus ring applied

Secondary Button (Outline)

Background: {colors.neutral-1} (#FFFFFF)
Text Color: #3D3D3D (dark foreground)
Padding: {spacing.md} 20px (vertical) × {spacing.xl} 32px (horizontal)
Height: 50px
Font: {typography.button-sm} (Manrope 14px, 600 weight)
Border: {border.thin} (1px solid #EAEAEA)
Border Radius: {rounded.full} (9999px)
Box Shadow: None
Hover State: Background color shifts to color-mix(in oklab, #E0E0E0 50%, transparent) (light gray); opacity maintained

Ghost / Text Button

Background: Transparent
Text Color: #3D3D3D
Padding: {spacing.xs} 12px (vertical) × 0 (horizontal)
Font: {typography.body-md-strong} (Manrope 14px, 500 weight)
Border: None
Border Radius: {rounded.none} (0px)
Box Shadow: None
Hover State: Text color shifts to {colors.primary} (#7C3AED); opacity 1

Cards & Containers

Feature Card (Default)

Background: {colors.neutral-1} (#FFFFFF)
Border: {border.thin} (1px solid #EAEAEA)
Border Radius: {rounded.md} (20px)
Padding: {spacing.lg} 24px
Box Shadow: {shadows.sm} (oklch(0.24 0.09 285 / 0.25) 0px 12px 40px -18px)
Text Color: #3D3D3D
Font: {typography.body-md} (Manrope 14px, 400 weight)
Hover State: Shadow increases or background tint shifts slightly

Hero Section Container

Background: Linear gradient (brand purple fade) with radial overlay
Gradient: {gradients.hero-radial} layered with solid background
Padding: {spacing.band} 48px (vertical) × {spacing.section} 40px (horizontal)
Max Width: 100% of viewport or container constraint
Border Radius: {rounded.none} (0px — full bleed)
Text Alignment: Center
Box Shadow: None

Section Band with Gradient

Background: {gradients.section-linear} (purple-to-indigo sweep) or {gradients.section-warm} (orange-to-red)
Padding: {spacing.band} 48px (vertical)
Border Radius: {rounded.none} (0px)
Margin: 0
Overlay: Optional radial gradient for depth

Inputs & Forms

Text Input (not extensively illustrated, but follows card border logic)

Background: {colors.neutral-1} (#FFFFFF)
Border: {border.thin} (1px solid #EAEAEA)
Border Radius: {rounded.xs} (12px)
Padding: {spacing.sm} 16px
Font: {typography.body-md} (Manrope 14px, 400 weight)
Text Color: #3D3D3D
Placeholder Color: #8B8B8B
Focus State: Border color shifts to {colors.primary} (#7C3AED); subtle ring applied
Disabled State: Opacity 0.5; background dims

Navigation

Header Navigation (Desktop)

Background: {colors.neutral-1} (#FFFFFF) with optional subtle shadow
Text Color: {colors.nav-text} (#8B8B8B)
Font: {typography.body-md-strong} (Manrope 14px, 500 weight)
Padding: {spacing.md} 20px (vertical) × {spacing.sm} 16px (horizontal per link)
Border Radius: {rounded.none} (0px)
Hover State: Text color shifts to #3D3D3D; underline or accent bar may appear
Active State: Color becomes {colors.primary} (#7C3AED)

Mobile Navigation Toggle

Display: Yes on viewports ≤ 768px
Background: Transparent or branded accent
Icon Color: #3D3D3D
Size: 24px × 24px
Hover State: Opacity 0.9

Footer

Background: {colors.neutral-1} (#FFFFFF)
Border Top: {border.thin} (1px solid #EAEAEA)
Padding: {spacing.section} 40px (vertical) × {spacing.md} 20px (horizontal)
Text Color: #3D3D3D
Font: {typography.body-md} (Manrope 14px, 400 weight)
Layout: Flex row or grid, aligned left and right

5. Layout Principles

Spacing System

The system uses an 8px base unit with a 1.33× scale, creating a comfortable progression:

{spacing.xxs} = 8px — Micro spacing between inline elements (icon + text)
{spacing.xs} = 12px — Tight spacing between components, form field padding
{spacing.sm} = 16px — Standard component internal padding, button padding (horizontal)
{spacing.md} = 20px — Default vertical spacing between paragraphs, card padding
{spacing.lg} = 24px — Prominent section padding, card internal margins
{spacing.xl} = 28px — Large gaps between feature blocks
{spacing.xxl} = 32px — Extra-large spacing for dramatic separation
{spacing.xxxl} = 36px — Maximum spacing for major sections on large screens
{spacing.section} = 40px — Horizontal padding for page sections, max-width containers
{spacing.band} = 48px — Vertical spacing for full-bleed section bands (hero, feature strips)

Usage context: Use {spacing.band} (48px) for the vertical padding of hero sections and full-width gradient bands. Use {spacing.section} (40px) for the horizontal padding of constrained content areas. Pair smaller spacers ({spacing.xs} to {spacing.md}) for component internals; reserve larger spacers for section separation.

Grid & Container

Max Width (Large Screen): 1152px — Constrained content area on 1440px+ viewports; centers on the page with equal margins
Content Column Width (1280px): 1152px
Content Column Width (1024px): 984px
Content Column Width (768px): 728px
Content Column Width (375px): 335px
Column Count: 3 columns on desktop (768px+); 1 column on mobile (375px)
Grid Gap: Implicit; components are spaced via margin utilities or flexbox gaps
Section Padding (Horizontal): {spacing.section} (40px) on desktop; {spacing.md} (20px) on mobile (375px)
Full-Bleed Sections: Hero, gradient bands, and footer extend edge-to-edge with no horizontal margin

Whitespace Philosophy

Apex EA employs generous, purposeful whitespace to establish calm and clarity. Whitespace is not empty—it provides visual rest and directs focus toward key elements. Section padding is deliberately large ({spacing.band} 48px vertically, {spacing.section} 40px horizontally) to reduce cognitive load and emphasize hierarchy. Cards and components sit distinctly within their containers, never cramped. Paragraph text uses a loose line-height ({typography.body-lg} 1.63) to increase breathing room, particularly for long-form descriptive copy.

Border Radius Scale

{rounded.none} = 0px — Buttons (sharp, decisive appearance), footer, hero sections, full-bleed bands
{rounded.xs} = 12px — Fine form inputs, small UI accents
{rounded.sm} = 16px — Primary buttons (large variant), text inputs
{rounded.md} = 20px — Feature cards, larger container elements
{rounded.full} = 9999px — Pill-shaped buttons, mobile CTAs, download links; renders as a perfect pill/circle

Component-specific radius: Do not apply a uniform radius across all components. Buttons use a mixture of sharp ({rounded.none}) and full pill ({rounded.full}), while cards consistently use {rounded.md} (20px). This variation prevents visual monotony while maintaining coherence.

Border Widths

Thin: 1px ({border.thin}) — Card borders, input borders, dividers, footer top border, navigation separators
No borders on filled components — Primary buttons, badges, and full-bleed sections omit borders

6. Depth & Elevation

Apex EA uses a progressive shadow strategy with three distinct levels. Depth is conveyed primarily through color blocking (gradient overlays, surface colors) rather than heavy shadows; shadows are reserved for specific, functional moments (cards, buttons).

Level	Treatment	Use
Flat	No shadow	Navigation, footer, body text, icons
Small Lift	`oklch(0.24 0.09 285 / 0.25) 0px 12px 40px -18px`	Feature cards, small elevated components
Medium Lift	`oklch(0.53 0.28 293 / 0.55) 0px 18px 45px -14px`	Primary buttons (large), emphasized cards
Large Lift	`oklch(0.6 0.24 27 / 0.6) 0px 18px 45px -14px`	Pill-shaped download buttons, hero CTAs, modals

Shadow Philosophy: Shadows are subtle and far-cast, created using oklch color space for natural color shifts with depth. The blur radius (40–45px) and vertical offset (12–18px) ensure shadows feel organic, not harsh. Shadows sit behind content rather than directly beneath, reinforcing layering without drawing excessive attention. Disable shadows on hover; instead, adjust opacity or shift background color to indicate interaction.

Opacity Levels

Full Opacity: 1.0 — All default, active, and focused states
Hover Opacity: 0.9 — Links, navigation items, and secondary elements on hover
Disabled Opacity: 0.5–0.7 — Disabled form fields and inactive buttons
Overlay Opacity: Varies by context — Gradient overlays use 0.16–0.6 depending on visibility needs

Z-index / Layering

Base / Default: 0 — All standard components (cards, buttons, body content)
Dropdown / Popover: 50 — Navigation dropdowns, tooltips, popovers
Sticky / Fixed: 40 — Sticky navigation headers, fixed headers (below dropdowns)
Modal / Overlay: 100+ — Full-screen modals, full-page overlays, dimming backgrounds (not extracted, but inferred for completeness)
Toast / Alert: 150+ — Toast notifications, snackbars, alerts (top-most layer)

7. Do's and Don'ts

Do

Use Sora for all display text (36px and larger) to leverage its geometric confidence and negative letter-spacing
Maintain the pill-button aesthetic on mobile CTAs and primary download buttons — border-radius should be {rounded.full} (9999px) for these contexts
Apply card styling consistently — all feature cards and lifted containers should use {rounded.md} (20px), 1px border, and {shadows.sm}
Preserve negative letter-spacing on display sizes — never adjust letter-spacing on headlines; the tight tracking is a core visual identity marker
Center and align whitespace generously — section padding should never drop below {spacing.section} (40px) horizontally or {spacing.band} (48px) vertically
Use color-blocking (gradients) as primary depth tool — rely on background color changes and gradient overlays before adding additional shadows
Pair brand purple ({colors.primary} #7C3AED) with high-contrast text (#FFFFFF) in all interactive components
Maintain strong text hierarchy — use Sora 800 weight for emphasis; never use Sora below 700 weight

Don't

Don't apply border-radius to buttons indiscriminately — use {rounded.none} (0px) for small text buttons and standard primary buttons; reserve {rounded.full} (9999px) for download CTAs and pill-shaped elements only
Don't lighten Sora below 800 weight — the heavy weight is essential to its visual personality
Don't mix Sora and Manrope at the same size/weight for emphasis — use weight changes (400 → 600/700) or scale shifts instead
Don't stack multiple shadows — each element uses exactly one shadow value; layering creates visual noise
Don't reduce section padding below {spacing.section} (40px) on any viewport; compress only to {spacing.md} (20px) on mobile (375px)
Don't invent new colors — the palette is deliberately minimal (purple accent + neutrals + red/orange gradients); stay within defined values
Don't use opacity as the primary interaction indicator — instead, shift background color, adjust shadow, or move elements
Don't remove or understate card borders — 1px #EAEAEA borders define card boundaries and maintain structure
Don't blur hero section text with excessive overlay opacity — gradient overlays should enhance, not obscure

8. Responsive Behavior

Breakpoints

Breakpoint	Viewport Width	Content Width	Grid Columns	Nav Links Visible	Menu Toggle	Largest Heading
Mobile	375px	335px	1	0	Yes	48px
Tablet	768px	728px	3	3	Yes	72px
Desktop	1024px	984px	3	3	Yes	72px
Large Desktop	1280px	1152px	3	3	Yes	72px
Extra Large	1440px	1152px	3	3	Yes	72px

Key shifts:

At 768px: Display heading ({typography.display}) increases from 48px to 72px; layout shifts from 1-column to 3-column grid
At 375px: Content column contracts to 335px; navigation links collapse; menu toggle appears
At 1280px+: Content width caps at 1152px (no further horizontal expansion); display heading remains 72px

Touch Targets

Minimum interactive height: 44–48px (buttons, links, navigation items)
Minimum interactive width: 48px (buttons, icon buttons)
Padding around clickable areas: {spacing.sm} (16px) minimum to prevent accidental taps
Mobile button heights: Use 48px+ for primary actions; 40px+ for secondary; padding should accommodate these targets comfortably

Collapsing Strategy

Navigation: On mobile (≤768px), hide inline navigation links and display a hamburger menu toggle. Render nav links in a dropdown or off-canvas drawer.
Hero section: Maintain full hero on mobile; reduce padding and heading size on 375px (48px down from 72px). Preserve {spacing.band} (48px) vertical padding even on small screens.
Grid layout: Switch from 3-column to 1-column on mobile (375px). On tablet (768px+), restore 3-column layout.
Section padding: Use {spacing.section} (40px) on desktop; reduce to {spacing.md} (20px) on mobile (375px). Do not compress further.
Font sizes: Most text sizes remain constant across breakpoints (16px body, 14px caption). Only display/heading sizes shrink on mobile.
Button sizes: Primary buttons remain 48px+ height on mobile; may compress padding horizontally to fit narrower screens.
Cards: Feature cards maintain {rounded.md} (20px) and consistent padding across all viewports. On mobile, stack vertically; on desktop, arrange in 3-column grid.

9. Agent Prompt Guide

Quick Color Reference

Use these semantic roles when implementing components:

Primary CTA: Brand Purple ({colors.primary} #7C3AED) — all primary buttons, brand mark, key accent elements
Secondary CTA / Destructive: Warm Red (#EF4444) — secondary buttons, alerts, secondary download options
Background / Canvas: White ({colors.neutral-1} #FFFFFF) — page background, card surfaces, neutral containers
Heading Text: Dark (#3D3D3D) — all headings, strong body text, card titles
Body Text: Dark (#3D3D3D) at full opacity; #8B8B8B (nav text) for secondary/supporting content
Border / Divider: Light Gray (#EAEAEA) — card borders, input borders, section dividers, 1px stroke only
Gradient Overlay (Hero): Purple fade ({gradients.hero-radial}) — background wash for hero sections
Gradient Overlay (Section): Purple-to-indigo or orange-to-red ({gradients.section-linear}) — full-bleed section backgrounds

Iteration Guide

Always use Sora 800 for any heading 36px or larger. Apply negative letter-spacing as specified (-1.44px at 72px, -0.72px at 36px). Never deviate from this rule.
Button border-radius depends on context: Sharp (0px) for text/small buttons; pill (9999px) for mobile CTAs and full-width download links; rounded (16px) for large primary buttons.
Card styling is uniform: 20px radius, 1px border, {shadows.sm}, 24px padding. Do not vary card appearance; consistency is intentional.
All interactive fills use high-contrast text: Primary buttons pair purple background with white text (#FFFFFF). Secondary buttons pair white background with dark text (#3D3D3D).
Section padding never goes below 40px horizontal (desktop) or 20px (mobile 375px). Hero sections use 48px vertical padding regardless of viewport.
Opacity shifts, not color shifts, for hover states on navigation: Links hover to opacity 0.9; don't change the color itself.
Gradients are reserved for full-bleed sections and hero backgrounds. Do not apply gradients to cards, buttons, or small components.
Z-index hierarchy: Base (0) < Dropdown (50) < Modal (100+). Use the stacking scale consistently across all overlays.
Line-height for body text is always loose (1.43–1.63), never tight. This ensures readability and aligns with the spacious design philosophy.
Disabled state = opacity 0.5 or 0.7 + visual deprioritization. Never remove disabled elements from the DOM; style them into the background.

10. Known Gaps

Interaction states not fully specified: The extracted data includes generic hover/focus CSS variables but does not expose explicit color or shadow changes for all interaction states (e.g., button active state, focus ring color, visited link appearance). Implementations may need to infer these from the primary/secondary color palette.
Error/success/warning semantic colors not defined: The site does not expose a semantic status ramp (error red, success green, warning yellow). All alerts and validation states must use the primary brand accent or the destructive red (#EF4444) until a full semantic palette is established.
Dark mode not included: The extraction covers only the light theme. If dark-mode support is required, a separate token set and design guidance are needed.
Animation and transition timings not measured: Keyframes, transition durations, and easing functions are not specified. Implementations should assume a conservative 200ms ease-in-out for all interactive transitions.
Focus ring styling not fully detailed: Focus states reference CSS variables (var(--ring)) that are not extracted. Assume a 2px offset ring in the brand purple (#7C3AED) with 3px offset from the element edge.
Breakpoint-specific typography not detailed: While heading sizes shift at breakpoints (48px → 72px), micro-breakpoint text adjustments between 768px and 1440px are not specified. Use the largest breakpoint value (72px) from 768px onward.
Component states behind authentication not visited: The site may have logged-in dashboard interfaces, account pages, or admin panels that are not accessible from the public landing page. Those surfaces (if they exist) are not covered by this extraction.
Micro-interaction details unavailable: Scroll animations, parallax effects, lazy-load transitions, and other dynamic behaviors are not captured in the token set. CSS-in-JS or animation libraries may be needed to implement these beyond the static design tokens.

Document Version: 1.0
Last Updated: Generated from Apex EA landing page snapshot
Confidence Level: High for colors, typography, and component layout; medium for responsive breakpoint micro-adjustments; low for animation and advanced interaction states.

Want a DESIGN.md like this for your own website?

Remixes of www.apex-ea.tech

Latest remixes

No public remixes yet. Be the first to make one.

Remix it