Remixes of www.langycp.com
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Langycp
description: |
The Louisiana National Guard Youth Challenge Program design system embodies
military discipline merged with accessible, youth-focused warmth. Deep forest
greens and bold accent oranges dominate, creating a sense of authority and
transformation. The visual identity communicates structured mentorship,
outdoor resilience, and tangible life change. Hero sections use layered
gradient overlays and rich photography to convey real impact; typography is
modern and legible, prioritizing clarity over decoration. The overall mood is
aspirational yet grounded—professional enough to instill confidence, energetic
enough to inspire action in young people.
source:
url: "https://www.langycp.com/"
pagesAnalyzed: 6
extractedAt: 2026-11-02
tokensMeasured: true
colors:
primary: "#D97706"
accent: "#1C8259"
canvas: "#FFFFFF"
surface-alt: "#0B2A20"
on-primary: "#FFFFFF"
ink: "#000000"
hairline: "#F4F4F5"
accent-1: "#134433"
accent-2: "#55B98C"
accent-3: "#2F9D6F"
accent-4: "#FBBF24"
accent-5: "#16553E"
typography:
display-xl:
fontFamily: Lexend
fontSize: 64px
fontWeight: 700
lineHeight: 1.1
letterSpacing: 0px
display-lg:
fontFamily: Lexend
fontSize: 56px
fontWeight: 600
lineHeight: 1.1
letterSpacing: 0px
display-md:
fontFamily: Lexend
fontSize: 48px
fontWeight: 600
lineHeight: 1.1
letterSpacing: 0px
display-md-strong:
fontFamily: Lexend
fontSize: 48px
fontWeight: 700
lineHeight: 1.5
letterSpacing: 0px
display-sm:
fontFamily: Lexend
fontSize: 40px
fontWeight: 500
lineHeight: 1.1
letterSpacing: 0px
heading-md:
fontFamily: Lexend
fontSize: 32px
fontWeight: 700
lineHeight: 1
letterSpacing: 0px
heading-sm:
fontFamily: Lexend
fontSize: 20px
fontWeight: 600
lineHeight: 1.3
letterSpacing: 1px
textTransform: uppercase
body-xl:
fontFamily: Inter
fontSize: 20px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 1px
textTransform: uppercase
body-lg:
fontFamily: Inter
fontSize: 18px
fontWeight: 400
lineHeight: 1.7
letterSpacing: 0px
body-lg-strong:
fontFamily: Inter
fontSize: 18px
fontWeight: 700
lineHeight: 1.5
letterSpacing: 0px
body-md:
fontFamily: Inter
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-md-loose:
fontFamily: Inter
fontSize: 16px
fontWeight: 400
lineHeight: 1.7
letterSpacing: 0px
body-md-strong:
fontFamily: Inter
fontSize: 16px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 0px
textTransform: capitalize
button:
fontFamily: Inter
fontSize: 16px
fontWeight: 500
lineHeight: 1.2
letterSpacing: 0px
rounded:
none: 0px
xs: 4px
sm: 8px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 32px
xxxl: 48px
section: 64px
band: 72px
shadows:
sm: "rgba(0, 0, 0, 0.13) 0px 10px 10px 0px"
md: "rgba(0, 0, 0, 0.1) 0px 4px 8px -2px, rgba(0, 0, 0, 0.06) 0px 2px 4px -2px"
elevationStrategy: progressive
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FFFFFF"
surface: "#0B2A20"
surfaceRaised: "#0B281F"
text: "#000000"
textMuted: "#595959"
border: "#F4F4F5"
accent: "#D97706"
accentFg: "#000000"
focusRing: "#D97706"
elevation: shadow
dark:
bg: "#140F0A"
surface: "#221D19"
surfaceRaised: "#2E2925"
text: "#FDFAF5"
textMuted: "#A4A19C"
border: "#3A3531"
accent: "#D97706"
accentFg: "#0B0B0C"
focusRing: "#D97706"
elevation: "border+surface"
contrastFailures:
- "light: text on surface = 1.37:1 (needs 4.5:1)"
gradients:
- context: hero
kind: linear
value: "linear-gradient(0deg, rgb(22, 85, 62), rgb(11, 42, 32))"
- context: section
kind: linear
value: "linear-gradient(0deg, rgb(11, 42, 32), rgba(0, 0, 0, 0))"
- context: section
kind: linear
value: "linear-gradient(0deg, rgb(0, 0, 0), rgba(0, 0, 0, 0))"
- context: section
kind: linear
value: "linear-gradient(90deg, rgb(19, 68, 51), rgb(11, 42, 32))"
- context: section
kind: linear
value: "linear-gradient(90deg, rgb(19, 68, 51), rgb(22, 85, 62))"
- context: hero
kind: linear
value: "linear-gradient(0deg, rgb(23, 105, 69), rgba(0, 0, 0, 0))"
components:
button-primary:
typography: "{typography.body-md-strong}"
textColor: "{colors.on-primary}"
border: "2px solid {colors.primary}"
height: 44px
padding: "8px 20px 8px 20px"
rounded: "{rounded.xs}"
backgroundColor: "{colors.primary}"
button-filled:
typography: "{typography.body-md-strong}"
textColor: "{colors.on-primary}"
border: "2px solid {colors.accent}"
height: 44px
padding: "8px 20px 8px 20px"
rounded: "{rounded.xs}"
backgroundColor: "{colors.accent}"
button-text:
typography: "{typography.button}"
textColor: "{colors.on-primary}"
height: 35.1875px
padding: "8px 8px 8px 8px"
button-filled-lg:
typography: "{typography.body-md-strong}"
textColor: "{colors.on-primary}"
border: "2px solid {colors.accent}"
height: 52px
padding: "12px 24px 12px 24px"
rounded: "{rounded.xs}"
backgroundColor: "{colors.accent}"
navigation:
typography: "{typography.body-md}"
textColor: "{colors.on-primary}"
boxShadow: "rgba(0, 0, 0, 0.1) 0px 4px 8px -2px, rgba(0, 0, 0, 0.06) 0px 2px 4px -2px"
link:
typography: "{typography.body-md}"
textColor: "{colors.ink}"
rounded: "{rounded.sm}"
backgroundColor: "{colors.primary}"
link-sm:
typography: "{typography.body-md}"
textColor: "{colors.on-primary}"
border: "2px solid {colors.accent}"
padding: "24px 24px 24px 24px"
rounded: "{rounded.sm}"
states:
other-focus:
target: other
state: focus
outline: none
input-focus:
target: input
state: focus
borderColor: "rgb(56, 152, 236)"
other-hover:
target: other
state: hover
opacity: 1
button-hover:
target: button
state: hover
transform: "translate(2px, -2px)"
input-focus-visible:
target: input
state: focus-visible
outline: "rgb(77, 101, 255) solid 0.125rem"
outlineColor: "rgb(77, 101, 255)"
outlineWidth: 0.125rem
breakpoints:
- width: 375
containerWidth: 343
gridColumns: 1
navLinksVisible: 1
menuToggleVisible: true
headingPx: 32
bodyPx: 16
sectionPaddingX: 16
- width: 768
containerWidth: 736
gridColumns: 2
navLinksVisible: 1
menuToggleVisible: true
headingPx: 48
bodyPx: 16
sectionPaddingX: 32
- width: 1024
containerWidth: 992
gridColumns: 2
navLinksVisible: 9
menuToggleVisible: false
headingPx: 64
bodyPx: 16
sectionPaddingX: 32
- width: 1280
containerWidth: 1248
gridColumns: 2
navLinksVisible: 9
menuToggleVisible: false
headingPx: 64
bodyPx: 16
sectionPaddingX: 32
- width: 1440
containerWidth: 1408
gridColumns: 2
navLinksVisible: 9
menuToggleVisible: false
headingPx: 64
bodyPx: 16
sectionPaddingX: 32
coverage:
statesFound: 38
gradientsFound: 7
rolesUnassigned: 5
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
The Louisiana National Guard Youth Challenge Program design system embodies military discipline merged with accessible, youth-focused warmth. Deep forest greens and bold accent oranges dominate, creating a sense of authority and transformation. The visual identity communicates structured mentorship, outdoor resilience, and tangible life change. Hero sections use layered gradient overlays and rich photography to convey real impact; typography is modern and legible, prioritizing clarity over decoration. The overall mood is aspirational yet grounded—professional enough to instill confidence, energetic enough to inspire action in young people.
Key Characteristics
{colors.accent} — #1C8259) as primary brand environment{colors.primary} — #D97706) for calls-to-action and energy{rounded.xs} — 4px) suggesting military precision{colors.primary} — #D97706): Primary CTA fills, button backgrounds, active states, and brand accent highlights. Warm orange that signals action and opportunity.{colors.accent} — #1C8259): Hero bands, filled button backgrounds, secondary CTAs, and alternating section themes. Deep forest green that anchors the brand identity.{colors.accent-1} — #134433): Darkest green in the accent palette; used in gradient overlays and decorative sections without assigned semantic role.{colors.accent-2} — #55B98C): Lighter green; decorative use in layered backgrounds and accent gradients.{colors.accent-3} — #2F9D6F): Mid-tone green; decorative overlay and background layering.{colors.accent-4} — #FBBF24): Warm yellow; decorative accent with no assigned role.{colors.accent-5} — #16553E): Very dark green; decorative gradient component.{colors.canvas} — #FFFFFF): Default page background and primary text surface. Also used as label and text color on brand-colored surfaces.{colors.surface-alt} — #0B2A20): Alternating section band background; darkest neutral, typically paired with white text for high contrast.{colors.ink} — #000000): Primary heading and body text color on light backgrounds.{colors.hairline} — #F4F4F5): 1px borders, dividers, and subtle separation lines.sans-serifsans-serif| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XL | Lexend | 64px | 700 | 1.1 | 0px | Hero headlines; largest scale |
| Display LG | Lexend | 56px | 600 | 1.1 | 0px | Major section headings |
| Display MD | Lexend | 48px | 600 | 1.1 | 0px | Secondary section headings |
| Display MD Strong | Lexend | 48px | 700 | 1.5 | 0px | Emphasized display (alternate) |
| Display SM | Lexend | 40px | 500 | 1.1 | 0px | Tertiary headings |
| Heading MD | Lexend | 32px | 700 | 1 | 0px | Card titles, feature headings |
| Heading SM | Lexend | 20px | 600 | 1.3 | 1px | Subheadings, uppercase labels; text-transform uppercase |
| Body XL | Inter | 20px | 500 | 1.5 | 1px | Large body; uppercase; text-transform uppercase |
| Body LG Strong | Inter | 18px | 700 | 1.5 | 0px | Bold body emphasis |
| Body LG | Inter | 18px | 400 | 1.7 | 0px | Large body text |
| Body MD | Inter | 16px | 400 | 1.5 | 0px | Standard link and body text |
| Body MD Loose | Inter | 16px | 400 | 1.7 | 0px | Body text with generous line height |
| Body MD Strong | Inter | 16px | 500 | 1.5 | 0px | Emphasized body; text-transform capitalize |
| Button | Inter | 16px | 500 | 1.2 | 0px | Button labels |
Primary Button
{colors.primary} (#D97706){colors.canvas} (#FFFFFF){typography.button} (16px, weight 500, line-height 1.2)#D97706{rounded.xs} (4px)transform: translate(2px, -2px); background deepensFilled Button (Secondary)
{colors.accent} (#1C8259){colors.canvas} (#FFFFFF){typography.button} (16px, weight 500, line-height 1.2)#1C8259{rounded.xs} (4px)transform: translate(2px, -2px) or background color shiftFilled Button Large
{colors.accent} (#1C8259){colors.canvas} (#FFFFFF){typography.button} (16px, weight 500, line-height 1.2)#1C8259{rounded.xs} (4px)Text Button
{colors.canvas} (#FFFFFF){typography.button} (16px, weight 500)Primary Navigation Bar
{colors.canvas} (#FFFFFF){typography.body-md} (16px, weight 400)rgba(0, 0, 0, 0.1) 0px 4px 8px -2px, rgba(0, 0, 0, 0.06) 0px 2px 4px -2pxDefault Link (on dark background)
{colors.canvas} (#FFFFFF){typography.body-md} (16px, weight 400){rounded.sm} (8px)Link on Light Background
{colors.ink} (#000000){typography.body-md} (16px, weight 400){rounded.sm} (8px)Card (Section Container)
{colors.canvas} (#FFFFFF) or {colors.surface-alt} (#0B2A20){rounded.sm} (8px) for image/media containers; {rounded.none} (0px) for text sections{spacing.xl} (24px) to {spacing.xxl} (32px) depending on density{colors.ink} (#000000) on light; {colors.canvas} (#FFFFFF) on darkHero Section Band
linear-gradient(0deg, rgb(22, 85, 62), rgb(11, 42, 32)) or linear-gradient(0deg, rgb(23, 105, 69), rgba(0, 0, 0, 0)){colors.canvas} (#FFFFFF){spacing.section} (64px) to {spacing.band} (72px) vertical; {spacing.md} (16px) to {spacing.xl} (24px) horizontal{rounded.none} (0px)Text Input
{colors.canvas} (#FFFFFF){colors.ink} (#000000){colors.hairline} (#F4F4F5){typography.body-md} (16px, weight 400)rgb(77, 101, 255) solid 0.125rem; border-color may shift to focused blueForm Label
{typography.body-md-strong} (16px, weight 500) or {typography.heading-sm} (20px, weight 600, uppercase){colors.ink} (#000000)The system uses an 8px base unit with a modular scale:
{spacing.xxs} — 4px: micro-adjustments, icon gaps{spacing.xs} — 8px: tight internal spacing, small component margins{spacing.sm} — 12px: standard internal padding, small gaps{spacing.md} — 16px: default padding, standard margins, body text line height base{spacing.lg} — 20px: larger component margins, generous list spacing{spacing.xl} — 24px: card internal padding, section component spacing{spacing.xxl} — 32px: container padding, section gaps{spacing.xxxl} — 48px: large feature spacing{spacing.section} — 64px: major section vertical padding{spacing.band} — 72px: hero band and full-bleed section vertical padding| Viewport | Content Column | Section Padding X | Grid Columns |
|---|---|---|---|
| 375px | 343px | 16px | 1 |
| 768px | 736px | 32px | 2 |
| 1024px–1440px | 992px–1408px | 32px | 2 |
Whitespace is used generously to separate hero sections, feature blocks, and call-to-action zones. Major sections are vertically separated by {spacing.section} (64px) to {spacing.band} (72px), creating clear visual hierarchy. Internal card padding uses {spacing.xl} (24px), balancing density with legibility. The design avoids crowding; breathing room around images and text blocks is a defining trait.
{rounded.none} — 0px: sharp corners for sections, navigation, overlays, and full-bleed elements{rounded.xs} — 4px: button corners, precise geometric elements{rounded.sm} — 8px: card corners, container rounding, image frame roundingComponent usage:
{rounded.xs} (4px){rounded.none} (0px) or {rounded.sm} (8px) depending on context{rounded.sm} (8px) for visual softness{rounded.none} (0px) for hard edge{colors.hairline} (#F4F4F5) for subtle dividers and form input bordersThe system employs a color-blocking strategy for depth; shadows are minimal and reserved for specific interactive elements.
| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow; color or gradient only | Default cards, sections, button fills |
| Raised (Small) | rgba(0, 0, 0, 0.13) 0px 10px 10px 0px | Dropdown menus, floating overlays |
| Raised (Medium) | rgba(0, 0, 0, 0.1) 0px 4px 8px -2px, rgba(0, 0, 0, 0.06) 0px 2px 4px -2px | Navigation bar, sticky headers |
Shadow Philosophy: Shadows are subtle and rare. Depth is primarily achieved through layered gradients, color shifts between sections, and strategic use of the dark green ({colors.surface-alt} — #0B2A20) for contrast. When shadows do appear (navigation, dropdowns), they use low-opacity black to avoid heavy visual weight.
The system defines these opacity values for interactive and decorative effects:
Common uses: disabled button opacity 0.5; hover state opacity adjustments 0.8–0.97; overlay gradients 0.0–0.68 fade-to-transparent.
The system uses a structured stacking context to manage overlapping elements:
Recommended stacking order:
{colors.primary} — #D97706) sparingly for primary CTAs — it commands attention and should guide users toward key actions (Apply Now, Contact Us, Become a Cadet).{spacing.section} to {spacing.band}) between major section bands to create visual breathing room and clear hierarchy.{rounded.xs} — 4px) to reinforce the military precision and structured discipline of the brand.{typography.heading-sm}, {typography.body-xl}) to emphasize hierarchy and draw focus.translate(2px, -2px) transform, and links shift color; these micro-interactions reinforce interactivity.{colors.accent} — #1C8259) as a status colour — it has no error/success/warning role in the system.{rounded.xs} (4px) — the system is intentionally sharp and geometric; pill-shaped buttons break brand cohesion.{spacing.md} (16px) between major content blocks — the design system depends on generous whitespace.{colors.accent-1} through {colors.accent-5}) as semantic indicators; they are for gradient layering and visual ornamentation only.{colors.hairline} — #F4F4F5) for backgrounds; reserve it for 1px borders and subtle separators only.{spacing.md} (16px) minimum spacing — this ensures clear click targets and readability.| Breakpoint | Viewport Width | Content Column | Grid Cols | Nav Links Visible | Menu Toggle | Display MD Size | Section Padding X |
|---|---|---|---|---|---|---|---|
| Mobile | 375px | 343px | 1 | 1 (collapsed) | yes | 32px | 16px |
| Tablet | 768px | 736px | 2 | 1 (collapsed) | yes | 48px | 32px |
| Desktop | 1024px+ | 992px–1408px | 2 | 9 | no | 64px | 32px |
Key shifts:
Minimum touch target size: 44px height for buttons and interactive elements (measured as {spacing.md} vertical padding within {spacing.lg} content area).
{typography.display-md} 48px); section padding reduces to 16px; all cards stack vertically.Images scale responsively; max-width 100% ensures no horizontal overflow. Video embeds scale within container; aspect ratios preserved.
{colors.primary} — #D97706) — use for "Apply Now," "Contact Us," primary buttons{colors.accent} — #1C8259) — use for filled buttons, secondary actions{colors.canvas} — #FFFFFF){colors.surface-alt} — #0B2A20) or gradient overlay{colors.ink} — #000000) on light backgrounds; White on dark{colors.ink} — #000000) on light; White on dark{colors.hairline} — #F4F4F5){colors.accent-1} through {colors.accent-5} for gradient layers and visual ornamentation onlyHeading Sizes: Use {typography.display-lg} (56px) or {typography.display-xl} (64px) for hero headlines; {typography.display-md} (48px) for major sections; {typography.heading-md} (32px) for feature titles.
Button Strategy: Primary CTAs use orange (#D97706); secondary use forest green (#1C8259). All buttons use {rounded.xs} (4px) and include hover transform translate(2px, -2px) for tactile feedback.
Spacing Between Sections: Vertical gaps of {spacing.section} (64px) to {spacing.band} (72px) create clear visual breaks and breathing room between major content blocks.
Color Blocking for Depth: Layer {colors.surface-alt} (#0B2A20) backgrounds with white text in alternating sections rather than relying on shadows. Use gradients (dark green to transparent, multi-green overlays) for visual interest.
Typography Pairing: Lexend for all display (headings 20px+); Inter for body and UI. Uppercase {typography.heading-sm} (20px, 600 weight, 1px letter-spacing) for section labels; regular Inter (16px, 400 weight) for body.
Responsive Behavior: At 375px, collapse navigation, reduce display heading to 32px, use single-column layout. At 768px, expand heading to 48px, enable two-column grid. At 1024px+, full navigation visible, heading 64px, max container 1408px.
Focus & Interaction States: Links and buttons have no visible outline (outline: 0px per stylesheets); hover states use color shift or subtle opacity change. Input focus uses blue border (rgb(77, 101, 255) solid 0.125rem).
Gradient Layers: When layering hero backgrounds or section overlays, use the provided gradient values exactly (e.g., linear-gradient(0deg, rgb(22, 85, 62), rgb(11, 42, 32))) to maintain brand consistency.
Semantic color roles: The site does not declare or use error, success, warning, or info status colours. No semantic status ramp was extracted; all accent colours are either brand-primary (orange), secondary-accent (green), or decorative (greens/yellow).
Interaction state coverage: Only the following states were measurable in the extracted stylesheets: :hover (button transform, color shift, opacity), :focus (outline removal, box-shadow on some elements). No explicit :active, :disabled, :visited, or :focus-visible states were observed for buttons; these may exist but were not captured.
Dark mode or theme variants: The extracted tokens represent a single, measured theme (light page backgrounds, dark section overlays). No alternate colour scheme, dark mode, or theme toggle logic was observed. If the site supports multiple themes, that logic is not documented here.
Cross-origin stylesheets: Some CSS may have been served from external or restricted sources and could not be fully parsed. Component states or edge cases may exist beyond the measured scope.
Unassigned decorative colours: Five extracted colours ({colors.accent-1} through {colors.accent-5}) have no assigned semantic role. They appear in gradients and decorative overlays but lack explicit usage rules; they are noted here as exploratory palette only.
Surfaces behind authentication: The design system was extracted from 6 public pages. Any authenticated user flows, member-only sections, or admin interfaces were not visited and are not documented.
Animation and motion: No CSS animation keyframes or transition timing were extracted. The system does not document easing functions, animation duration, or complex interactive sequences beyond the button hover transform.
Breakpoint detail below 375px: Mobile layouts smaller than 375px (very small phones, landscape on compact devices) were not measured and may not be supported.
Accessibility tokens: No ARIA attributes, focus-visible styles, or high-contrast mode specifications were extracted. Colour contrast ratios were not computed; assume WCAG AA minimum (4.5:1 for body text, 3:1 for large text) but verify with automated testing.