Switch between the rendered Visual preview and the Raw DESIGN.md.
Forge embodies a bold, forward-thinking digital aesthetic rooted in high-contrast minimalism and vibrant energy. The design system leverages a striking dark foundation paired with luminous lime-green accents, creating a visual language that communicates momentum, innovation, and precision. The atmosphere is professional yet dynamic—appealing to strategic, growth-focused enterprises that value cutting-edge design paired with purposeful functionality. Expansive whitespace, dramatic typography, and carefully orchestrated color contrasts establish a sense of premium quality and editorial sophistication, while the electric green palette signals modern technology and forward momentum.
Key Characteristics
#A9FF5C): Primary call-to-action buttons, headline accents, and interactive focus states; highest contrast against dark backgrounds#7FD136): Secondary accent for badges, highlights, and supporting interactive elements; slightly deeper than primary#003800): Supporting accent for borders, dividers, and tertiary highlights#E1FFC7): Background fills for card containers, call-out sections, and contained content areas#356905): Hover states, active tab indicators, and secondary interactive overlays#1F2B15): Text overlays on light surfaces and contrast text for accessibility#A9FF5C): Button backgrounds, link hover states, and form focus indicators#356905): Button hover and active states; pressed button feedback#F1FBE8): Form input borders and subtle divider lines#090D06): Primary text, headlines, and dark mode backgrounds#979F90): Secondary text, captions, helper text, and disabled states#FFFFFF): Pure white for minimal accent use#F1FBE8): Primary surface background, card fills, and page foundations#F1FBE8 at 30% opacity): Form input borders, dividers, and subtle boundaries#602606): Rare accent for specific visual hierarchy momentsPrimary: Futura Pt Cond (Condensed, geometric sans-serif) with fallback: 'Futura Pt Cond', 'Futura', 'Arial Narrow', sans-serif
Secondary: Epilogue (Modern humanist sans-serif) with fallback: 'Epilogue', 'Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | Futura Pt Cond | 104px | 800 | 95.68px | -0.02em | Ultra-bold hero headlines; max impact |
| Heading H2 | Futura Pt Cond | 72px | 800 | 66.24px | -0.015em | Section titles; strong visual hierarchy |
| Heading H3 | Futura Pt Cond | 48px | 800 | 44.16px | -0.01em | Subsection and card titles |
| Heading H4 | Futura Pt Cond | 40px | 800 | 36.8px | -0.01em | Minor headings; feature titles |
| Body Text | Epilogue | 20px | 400 | 28px | 0px | Primary body copy; comfortable reading |
| Link Text | Epilogue | 18px | 400 | 25.2px | 0px | Navigation and inline links |
| Label / Small | Epilogue | 16px | 400 | 22.4px | 0px | Form labels, captions, metadata |
| Button Text | Epilogue | 18px | 600 | 25.2px | 0.02em | Action-oriented text; slightly increased weight |
Primary Button
#A9FF5C#090D0624px 40px12px18px600nonenone#7FD136#090D06background-color 200ms ease#356905#FFFFFF#979F90#F1FBE80.5Secondary Button
rgba(255, 255, 255, 0) (transparent)#F1FBE820px 32px12px18px6001px solid #F1FBE8nonergba(241, 251, 232, 0.1)#A9FF5C#A9FF5Crgba(169, 255, 92, 0.2)#7FD136#A9FF5CGhost Button
transparent#F1FBE816px 24px8px16px400nonenonergba(169, 255, 92, 0.15)#A9FF5CFeatured Card (Light Background)
#E1FFC7#090D0656px 56px 64px 56px28pxnonenone18px40025.2pxStandard Card (Dark Background)
rgba(0, 0, 0, 0) (transparent, overlaid)#979F9056px 56px 64px 56px0pxnonenone18px40025.2pxRounded Container Card
#E1FFC7#090D0640px 40px 48px 40px28pxnone0px 8px 24px rgba(0, 0, 0, 0.12)18px400Text Input
rgba(255, 255, 255, 0) (transparent)#F1FBE816px40024px12px1px solid rgba(241, 251, 232, 0.3)62px22.86pxrgba(241, 251, 232, 0.5)#A9FF5C0px 0px 0px 2px rgba(169, 255, 92, 0.2)rgba(169, 255, 92, 0.05)#602606#602606Form Label
16px400#F1FBE812px22.4pxNavigation Link (Header)
18px400#F1FBE8transparent12px 16pxnone0px#A9FF5C2px solid #A9FF5C#A9FF5C2px solid #A9FF5CNavigation Badge Pill
rgba(127, 209, 54, 0.15)#7FD13616px60012px 20px104px1px solid rgba(127, 209, 54, 0.3)nonePrimary Badge
#7FD136#090D0616px6008px 16px100pxnoneSecondary Badge
rgba(169, 255, 92, 0.2)#A9FF5C16px6008px 16px100px1px solid #A9FF5CBase Unit: 8px
Scale & Usage:
8px: Micro-spacing between tightly grouped elements, icon-to-text gaps12px: Small gaps between related form elements or list items16px: Standard spacing between navigation items, minor sections20px: Medium spacing within cards, between label and input24px: Form padding, card internal spacing, section separation32px: Spacing between major content blocks40px: Vertical margin between sections on large layouts48px: Spacing between major layout regions56px: Large vertical section separators64px: Padding within large container sections72px: Extra-large padding for hero and featured sections80px: Maximum padding for premium spacing on hero sections1280px for primary content containers24px between columns at desktop; 16px at tablet; 12px at mobile64px left/right on desktop; 40px on tablet; 24px on mobileGenerous whitespace is core to Forge's premium aesthetic. Maintain at least 1.5× the base unit spacing around major elements; prefer overcrowded layouts to breathing room. Negative space directs attention toward critical CTAs and messaging. Section margins should always exceed internal padding to establish clear visual hierarchy.
0px: Hard edges for typography-led sections and minimal containers8px: Small interactive elements (ghost buttons, tags)12px: Form inputs, secondary buttons, small cards28px: Featured cards, contained content sections, large call-outs50% / 100px: Avatar circles, logo containers, fully rounded badge pills| Level | Treatment | Use |
|---|---|---|
| Flat (0) | No shadow; flush with background | Typography-led sections, navigation, text overlays |
| Subtle (1) | 0px 2px 8px rgba(0, 0, 0, 0.08) | Form inputs on focus, light hover states |
| Raised (2) | 0px 8px 24px rgba(0, 0, 0, 0.12) | Featured cards, dropdown menus, modals |
| Elevated (3) | 0px 12px 32px rgba(0, 0, 0, 0.16) | Floating action buttons, premium overlays |
| Deep (4) | 0px 20px 48px rgba(0, 0, 0, 0.24) | Full-page modals, sticky headers, nav drawers |
Shadow Philosophy: Forge minimizes shadow usage, relying instead on background color contrast and borders to establish depth. Shadows are introduced only for interactive feedback (focus states, hovers) or to distinguish floating elements. Dark backgrounds naturally reduce shadow visibility; use border colors (rgba(241, 251, 232, 0.2)) instead to define contained regions.
#A9FF5C (Lime Accent) for all primary CTAs and action prompts24px padding within card containers and form fields#E1FFC7 light backgrounds only within rounded containers (28px border radius)#090D06) backgrounds and light text (#F1FBE8)56px or greater margins between major layout sections12px border radius exclusively to form inputs and secondary buttons2px solid borders in #A9FF5C12px vertical gaps#979F90) exclusively for secondary and disabled text#A9FF5C) for body text or secondary actions—reserve for primary emphasis8px for interactive elements20px inside card containers#979F90 (gray) with #A9FF5C (lime) in the same visual region; separate by section#FFFFFF as a primary background; prefer #F1FBE8 for light surfaces1.2× font size for body text| Breakpoint | Width | Key Changes |
|---|---|---|
| Desktop (Large) | 1280px+ | Full 12-column grid; 64px padding; max font sizes |
| Desktop (Standard) | 1024px–1279px | 12-column grid maintained; 56px section margins |
| Tablet (Landscape) | 768px–1023px | 6-column grid; 40px padding; 48px section margins; H1 reduces to 80px |
| Tablet (Portrait) | 640px–767px | 6-column grid; 32px padding; 40px margins; H1 reduces to 64px |
| Mobile (Large) | 480px–639px | Single column; 24px padding; 32px margins; H1 reduces to 48px |
| Mobile (Small) | 320px–479px | Single column; 20px padding; 24px margins; H1 reduces to 40px |
48px × 48px on mobile devices16px vertical, 20px horizontal on mobile56px on mobile; 62px on desktop44px × 44px8px768px64px → Tablet 40px → Mobile 24px104px → 80px → 64px → 48px across breakpoints768px with 24px tap targets16px gaps; full-width input fields below 640px640px; use 32px instead#A9FF5C) — buttons, interactive highlights, focus states#7FD136) — hover states, badge backgrounds, supporting actions#090D06) — page, section foundations#F1FBE8) — surfaces, light overlays#E1FFC7) — featured cards, call-out containers#090D06) — all headlines and titles#979F90) — secondary copy, metadata#F1FBE8) — text on dark backgroundsrgba(241, 251, 232, 0.3)) — input borders, subtle lines#356905) — hover states, active navigation8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 56px, 64px, 72px, 80px). Section margins should exceed internal padding.2px border in #A9FF5C or background tint.0px to typography-led sections; 12px to forms and buttons; 28px to featured cards; 100px for circular badges.0px 8px 24px) for featured cards only.1280px, 1024px, 768px, 640px, and 480px. Reduce H1 progressively; stack columns at tablet; use single column mobile.16px Epilogue at #F1FBE8. Disabled states use #979F90 at 50% opacity. Error states use #602606.#FFFFFF as primary surface—default to #F1FBE8. Preserve dark contrast on all screens.