Layer Digital
Design system & style guide · Internal use only · Not publicly indexed
Colour Palette
Typography
Font family: Plus Jakarta Sans · Loaded via Google Fonts · Weights used: 400, 500, 600, 700, 800
Heading One
Heading Two
Heading Three
Body text used for paragraphs, descriptions, and general content across the site.
Secondary text, #6B7280
Muted text, #9CA3AF
Buttons
Base class: btn · Size modifiers: btn-lg btn-xl
btn-primary
Default primary action
btn-green
Main CTA, book calls, key actions
btn-ghost
Secondary action alongside a primary
btn-dark
Dark / high-contrast action
btn-gold
Highlight / promotion actions
btn-outline-gray
Neutral, lower-hierarchy action
btn-white
On coloured/dark backgrounds
Spacing & Border Radius
| Token | Value | Usage |
|---|---|---|
| --section-pad | 112px | Section vertical padding (80px on tablet, 56px on mobile) |
| --radius | 18px | Default border radius (cards, panels) |
| --radius-sm | 12px | Small border radius (icons, inputs) |
| --radius-pill | 100px | Pill / badge / button border radius |
| Container max-width | 1200px | Used on all .container elements, auto margin centred |
| Nav padding | 24px 48px | Collapses to 20px on scroll (scrolled state) and 16px 20px on mobile |
Shadows
--shadow-sm
Subtle, cards at rest
--shadow-md
Hover state
--shadow-lg
Modals, floating cards
--shadow-blue
Featured / accent elements
Animations & Motion
| Class / Keyframe | Effect | Usage |
|---|---|---|
| .reveal | opacity 0 → 1, translateY(28px → 0) | Scroll-triggered on all sections. Driven by IntersectionObserver. |
| .reveal-delay-1 to -4 | transition-delay: 0.1s – 0.4s | Staggered reveals within process steps, pricing cards. |
| fadeUp | opacity 0 → 1, translateY(22px → 0) | Hero headline, sub-copy, and action buttons on page load. |
| fadeLeft | opacity 0 → 1, translateX(22px → 0) | Hero side cards (founding client, data card). |
| fadeIn | opacity 0 → 1 | Hero scroll hint, delayed entry elements. |
| blobFloat | translate + scale (subtle drift) | Background gradient blobs in hero and CTA sections. |
| scrollLine | scaleY 0 → 1 → 0 loop | Animated line in hero scroll hint. |
| priceFlip | opacity + translateY, 0.25s | Pricing toggle, price number transition. |
Key Components
Label / Badge
Service Card
Example Service
A brief description of what this service covers and the value it delivers to the client.
- Feature bullet point one
- Feature bullet point two
- Feature bullet point three
Dark Hero Card (founding-hero-card)
Card heading
line two
Supporting body copy in muted white. Used for context or description inside the dark card.
CTA labelGrid & Layout Patterns
| Pattern | Class / CSS | Notes |
|---|---|---|
| 3-col services | .services-grid | repeat(3, 1fr) · gap 20px · collapses to 1-col on mobile |
| 2-col services | .services-grid + inline style | gridTemplateColumns: repeat(2,1fr), used on homepage |
| 4-col process | .process-steps | repeat(4, 1fr) · collapses to 2-col tablet, 1-col mobile |
| 3-col pricing | .pricing-grid | repeat(3, 1fr) · gap 22px · 1-col on mobile |
| 3-col testimonials | .testimonials-grid | repeat(3, 1fr) · 1-col on mobile |
| 4-col team | .team-grid | repeat(4, 1fr) · 2-col tablet · 2-col mobile |
| Footer | .footer-grid | 2fr 1fr 1fr 1fr · collapses to 2-col tablet, 1-col mobile |
