Skip to content

prompt.md

Latest commit

 

History

History
95 lines (77 loc) · 4.02 KB

prompt.md

File metadata and controls

95 lines (77 loc) · 4.02 KB
Raw

A SELF-CONTAINED, PIXEL-FAITHFUL REPRODUCTION OF THE AUBERGINE TEMPLATE BY LEXINGTON THEMES. REFERENCE: https://aubergine-astro.pages.dev/

SUMMARY

AUBERGINE IS A DARK, AUBERGINE/PURPLE-THEMED MULTI-PAGE AGENCY/PORTFOLIO WEBSITE TEMPLATE BUILT WITH ASTRO AND TAILWIND CSS V4. THE CLONE IS A PLAIN HTML + CSS + VANILLA JS REPRODUCTION WITH ALL ASSETS VENDORED LOCALLY. IT INCLUDES SEVEN PAGES: HOMEPAGE, WORK LISTING, BLOG LISTING, TEAM, SERVICES, WORK DETAIL, AND DESIGN SYSTEM OVERVIEW.

STYLE

PALETTE

  • BACKGROUND: oklch(20.8% .01 294.69) , BASE-900 (VERY DARK PURPLE-GRAY)
  • BASE-950: oklch(15.22% .007 300.8) , DARKEST, USED FOR MODAL/OVERLAY
  • BASE-800: oklch(30.43% .022 292.71) , BORDER COLOR
  • BASE-700: oklch(40.42% .03 292.64) , SUBTLE SURFACE
  • BASE-600: oklch(48.98% .037 290.96) , MUTED TEXT
  • BASE-500: oklch(57.26% .043 291.53) , PLACEHOLDER/SECONDARY TEXT
  • BASE-400: oklch(66.44% .034 293.43) , LIGHT MUTED
  • BASE-300: oklch(75.43% .023 291.59) , GRID PATTERN COLOR
  • ACCENT-300: oklch(74.68% .12 282.03) , LINK HOVER / GRADIENT END
  • ACCENT-400: oklch(66.08% .165 280.12) , GRADIENT MID
  • ACCENT-500: oklch(58.54% .204 277.12) , GRADIENT START / PRIMARY ACCENT
  • ACCENT-600: oklch(45.47% .274 267.93) , DEEP ACCENT
  • ACCENT-950: oklch(13.09% .065 272.75) , BUTTON TEXT ON GRADIENT BG
  • WHITE: #fff , PRIMARY TEXT COLOR

FONTS

  • FIGTREE (GOOGLE FONTS) , BODY FONT; WEIGHTS 300-900
  • CLASH DISPLAY (FONTSHARE) , DISPLAY/HEADING FONT

TYPE SCALE

  • XS: 0.75REM; SM: 0.875REM; BASE: 1REM; LG: 1.125REM; XL: 1.25REM
  • 2XL: 1.5REM; 3XL: 1.875REM; 4XL: 2.25REM; 5XL: 3REM; 6XL: 3.75REM; 7XL: 4.5REM; 8XL: 6REM

RADII

  • MD: 0.375REM; LG: 0.5REM; XL: 0.75REM; 2XL: 1REM; 3XL: 1.5REM; 4XL: 2REM

GRADIENT (ACCENT BUTTONS)

  • linear-gradient(to top right, oklch(58.54% .204 277.12), oklch(66.08% .165 280.12), oklch(74.68% .12 282.03))

ANIMATIONS / LIBRARIES

  • AOS (ANIMATE ON SCROLL) v2.3.1 , ENTRANCE ANIMATIONS; easing: ease; duration: 400ms
  • VANILLA TILT v1.8.0 , 3D CARD TILT EFFECT ON WORK/PROJECT CARDS
  • FUSE.JS , FUZZY SEARCH FOR BLOG POSTS VIA SEARCH MODAL

KEY INTERACTIONS

  • FLOATING GLASSMORPHISM NAV: PILL-SHAPED, FIXED TOP, BACKDROP-BLUR, EXPANDS ON SCROLL
  • SEARCH MODAL: FIXED FLOATING BUTTON (BOTTOM-RIGHT), OPENS FULLSCREEN MODAL WITH FUSE.JS SEARCH
  • MOBILE NAV: HAMBURGER TOGGLE, DROPDOWN WITHIN NAV PILL
  • NAV SHRINK: WIDENS FROM MAX-W-XL TO MAX-W-2XL ON SCROLL DOWN
  • FAQ ACCORDION: OPEN/CLOSE WITH HEIGHT TRANSITION ON SERVICES PAGE
  • DARK ONLY , NO LIGHT MODE TOGGLE

LAYOUT & STRUCTURE

PAGE 1: HOMEPAGE (index.html)

  • FIXED FLOATING NAV (PILL-SHAPED, GLASSMORPHISM)
  • HERO: FULL-VIEWPORT SECTION WITH GRID PATTERN BG, LARGE CLASH DISPLAY HEADING, SUBTEXT, TWO CTA BUTTONS
  • BRANDS/LOGOS STRIP: 3 SVG LOGOS (JETBRAINS, FIGMA, KAYAKO)
  • SERVICES SECTION: 6 SERVICE CARDS IN GRID, EACH WITH ICON, TITLE, DESC, LINK
  • PRICING SECTION: 3 TIER CARDS (STARTER, PRO, TEAM)
  • WORK PREVIEW: 2-COLUMN GRID OF RECENT WORK CARDS WITH TILT EFFECT
  • TESTIMONIALS: 2 QUOTES WITH AVATAR IMAGES
  • FOOTER: LOGO, NAV LINKS, LEGAL

PAGE 2: WORK LISTING (work/index.html)

  • HERO: PAGE TITLE, BREADCRUMB
  • WORK GRID: ALL PROJECTS IN MASONRY/GRID, VANILLA TILT CARDS
  • LOGO STRIP: 6 LOGOS (JETBRAINS, FIGMA, KAYAKO, VSCODE, ZAPIER, PROCREATE)
  • FOOTER

PAGE 3: BLOG LISTING (blog/index.html)

  • HERO: PAGE TITLE, DESCRIPTION
  • BLOG GRID: 6 BLOG POST CARDS WITH IMAGE, DATE, TITLE, EXCERPT
  • FOOTER

PAGE 4: TEAM (team/index.html)

  • HERO: PAGE TITLE, SUBTEXT
  • TEAM GRID: 3 MEMBER CARDS WITH PHOTO, NAME, ROLE, BIO, LINKS
  • FOOTER

PAGE 5: SERVICES (services/home.html OR services/index.html)

  • HERO: PAGE TITLE
  • SERVICES LIST: DETAILED SERVICE ENTRIES
  • FAQ ACCORDION SECTION
  • FOOTER

PAGE 6: WORK DETAIL (work/1.html)

  • HERO: PROJECT TITLE, CLIENT, TAGS
  • PROJECT IMAGES GALLERY
  • PROJECT DETAILS: BRIEF, ROLE, DELIVERABLES
  • NEXT/PREV PROJECT NAVIGATION
  • FOOTER

PAGE 7: SYSTEM OVERVIEW (system/overview.html)

  • DESIGN SYSTEM PAGE: COLORS, TYPOGRAPHY, BUTTONS, COMPONENTS SHOWCASE
  • FOOTER