Remixes of ng.giantess.cc
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: Ng
description: |
Giantess embodies a bold, tech-forward aesthetic built on extreme contrast and
precision. The design system combines a deep, near-black canvas with
high-impact neon accents, creating an interface that feels both premium and
high-energy. Typography plays a sophisticated role, mixing Bodoni Moda's serif
elegance for display purposes with Archivo's clean sans-serif for utility. The
overall mood is confident and scalable—minimal visual noise, maximum impact.
Subtle box-shadow effects on primary actions provide just enough spatial depth
to guide interaction without cluttering the dark backdrop.
source:
url: "https://ng.giantess.cc/#/team"
pagesAnalyzed: 1
extractedAt: 2026-11-06
tokensMeasured: true
colors:
primary: "#D8FF3D"
canvas: "#050506"
ink: "#B7B5BB"
body: "#918F98"
hairline: "#F4F1EA"
neutral-1: "#E5E7EB"
typography:
display-lg:
fontFamily: Archivo
fontSize: 44px
fontWeight: 400
lineHeight: 1
letterSpacing: 0.07px
display-md:
fontFamily: "Bodoni Moda"
fontSize: 41.8px
fontWeight: 900
lineHeight: 1
letterSpacing: -1.46px
textTransform: lowercase
heading:
fontFamily: "Bodoni Moda"
fontSize: 22px
fontWeight: 700
lineHeight: 1.15
letterSpacing: -0.44px
body-lg:
fontFamily: Archivo
fontSize: 15px
fontWeight: 700
lineHeight: 1.6
letterSpacing: 0.07px
body-md:
fontFamily: Archivo
fontSize: 14px
fontWeight: 700
lineHeight: 1.55
letterSpacing: 0.07px
body-sm:
fontFamily: Archivo
fontSize: 13px
fontWeight: 400
lineHeight: 1.55
letterSpacing: 0.07px
body-xs:
fontFamily: Archivo
fontSize: 12px
fontWeight: 400
lineHeight: 1.55
letterSpacing: 0.24px
button:
fontFamily: Archivo
fontSize: 16px
fontWeight: 700
lineHeight: 1.2
letterSpacing: 0.16px
label:
fontFamily: Archivo
fontSize: 15px
fontWeight: 500
lineHeight: 1.6
letterSpacing: 0px
caption:
fontFamily: Archivo
fontSize: 10px
fontWeight: 700
lineHeight: 1.55
letterSpacing: 2.2px
textTransform: uppercase
rounded:
none: 0px
full: 9999px
spacing:
xxs: 8px
xs: 12px
sm: 16px
md: 24px
lg: 28px
xl: 32px
xxl: 48px
xxxl: 64px
shadows:
sm: "rgba(216, 255, 61, 0.55) 0px 12px 34px -14px"
elevationStrategy: single-tier
themes:
derived: light # the other theme is the site's measured palette
light:
bg: "#FEFFF7"
surface: "#F4F5ED"
surfaceRaised: "#ECEDE6"
text: "#1B1D13"
textMuted: "#707169"
border: "#DADBD4"
accent: "#597000"
accentFg: "#FFFFFF"
focusRing: "#7A9900"
elevation: shadow
dark:
bg: "#050506"
surface: "#050506"
surfaceRaised: "#19191A"
text: "#B7B5BB"
textMuted: "#918F98"
border: "#F4F1EA"
accent: "#D8FF3D"
accentFg: "#0B0B0C"
focusRing: "#D8FF3D"
elevation: "border+surface"
components:
button-primary:
typography: "{typography.button}"
textColor: "rgb(10, 10, 11)"
height: 50px
boxShadow: "rgba(216, 255, 61, 0.55) 0px 12px 34px -14px"
rounded: 999px
backgroundColor: "{colors.primary}"
button-icon:
textColor: "{colors.hairline}"
height: 18px
fontSize: 14px
fontFamily: Archivo
fontWeight: 400
lineHeight: 1.55
link:
typography: "{typography.body-sm}"
textColor: "{colors.body}"
link-2:
typography: "{typography.body-md}"
textColor: "{colors.primary}"
states:
button-focus:
target: button
state: focus
outline: none
button-active:
target: button
state: active
transform: "scale(0.98)"
card-active:
target: card
state: active
transform: "scale(0.995)"
other-active:
target: other
state: active
opacity: 0.92
transform: "scale(0.98)"
other-disabled:
target: other
state: disabled
opacity: 1
breakpoints:
- width: 375
containerWidth: 375
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: false
headingPx: 22
bodyPx: 14
sectionPaddingX: 24
- width: 768
containerWidth: 450
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: false
headingPx: 22
bodyPx: 14
sectionPaddingX: 24
- width: 1024
containerWidth: 450
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: false
headingPx: 22
bodyPx: 14
sectionPaddingX: 24
- width: 1280
containerWidth: 450
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: false
headingPx: 22
bodyPx: 14
sectionPaddingX: 24
- width: 1440
containerWidth: 450
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: false
headingPx: 22
bodyPx: 14
sectionPaddingX: 24
coverage:
statesFound: 13
gradientsFound: 0
rolesUnassigned: 1
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
Giantess embodies a bold, tech-forward aesthetic built on extreme contrast and precision. The design system combines a deep, near-black canvas with high-impact neon accents, creating an interface that feels both premium and high-energy. Typography plays a sophisticated role, mixing Bodoni Moda's serif elegance for display purposes with Archivo's clean sans-serif for utility. The overall mood is confident and scalable—minimal visual noise, maximum impact. Subtle box-shadow effects on primary actions provide just enough spatial depth to guide interaction without cluttering the dark backdrop.
Key Characteristics:
{colors.canvas} — #050506) with minimal ornamentation{colors.primary} — #D8FF3D) as the sole brand colour{colors.primary} — #D8FF3D): Primary call-to-action buttons, brand mark highlight, active states, and accent text. High-saturation chartreuse-yellow that commands attention on dark backgrounds.{colors.canvas} — #050506): Default page and container background. Near-black with minimal warmth, establishing the dark mode foundation.{colors.ink} — #B7B5BB): Primary heading text and high-contrast labels. Mid-tone gray with subtle warmth for superior legibility on dark canvas.{colors.body} — #918F98): Secondary body copy and descriptive text. Slightly dimmer than ink, establishing visual hierarchy while maintaining readability.{colors.hairline} — #F4F1EA): 1px borders, dividers, and input strokes. Off-white for subtle framing without visual aggression.{colors.neutral-1} — #E5E7EB): No measured role in the component set. Classified as decorative; may serve as a fallback or future semantic colour.No error, success, warning, or info colours are declared in the site's markup or CSS. The system uses positive feedback (primary brand colour) for confirmation, but does not expose a full semantic colour ladder.
Primary: Bodoni Moda (serif) — used for display and hero typography; fallback stack: Bodoni Moda, Georgia, serif
Secondary: Archivo (sans-serif) — used for body, inputs, buttons, and navigation; fallback stack: Archivo, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| display-lg | Bodoni Moda | 44px | 400 | 1 | 0.07px | Hero display text; moderate tracking. |
| display-md | Bodoni Moda | 41.8px | 900 | 1 | -1.46px | Large heading with aggressive negative tracking; lowercase transform applied. |
| heading | Bodoni Moda | 22px | 700 | 1.15 | -0.44px | Main section heading; negative tracking for tightness. |
| body-lg | Archivo | 15px | 700 | 1.6 | 0.07px | Bold secondary body copy. |
| body-md | Archivo | 14px | 700 | 1.55 | 0.07px | Bold body emphasis. |
| body-sm | Archivo | 13px | 400 | 1.55 | 0.07px | Link text; standard body weight. |
| body-xs | Archivo | 12px | 400 | 1.55 | 0.24px | Fine print and captions. |
| button | Archivo | 16px | 700 | 1.2 | 0.16px | Call-to-action buttons; bold sans-serif for clarity. |
| label | Archivo | 15px | 500 | 1.6 | 0px | Input labels and form text. |
| caption | Archivo | 10px | 700 | 1.55 | 2.2px | Uppercase labels; high letter-spacing for distinction. |
Primary Button
{colors.primary} (#D8FF3D)#0A0A0B (near-black ink)0px (height and width define the box)50px402px0px solid transparent999px (pill-shaped){typography.button} (Archivo 16px, weight 700, line-height 1.2)rgba(216, 255, 61, 0.55) 0px 12px 34px -14px (soft neon glow below):active): transform: scale(0.94) (compression on press):focus): outline: noneIcon Button
transparent (rgba(0, 0, 0, 0)){colors.hairline} (#F4F1EA)0px18px18px0px solid {colors.neutral-1} (#E5E7EB)0px (sharp)noneDefault Link
{colors.body} (#918F98){typography.body-sm} (Archivo 13px, weight 400, line-height 1.55)transparent0px0px solid {colors.neutral-1} (#E5E7EB)0pxnonePrimary Link (Secondary action)
{colors.primary} (#D8FF3D)transparent0px0px solid {colors.neutral-1} (#E5E7EB)0pxnoneText Input
transparent or dark canvas with light border{colors.body} (#918F98)1px solid {colors.hairline} (#F4F1EA)0px (sharp corners){typography.label} (Archivo 15px, weight 500, line-height 1.6){colors.body} (#918F98)Checkbox (Remember Password)
{colors.primary} (#D8FF3D) background1px solid {colors.hairline} (#F4F1EA){colors.canvas} (#050506)0px (square)The system uses an 8px base unit with a geometric scale:
{spacing.xxs} = 8px — micro-spacing between inline elements{spacing.xs} = 12px — small gaps between related content{spacing.sm} = 16px — standard padding inside components{spacing.md} = 24px — section separation and component margins{spacing.lg} = 28px — generous spacing between major sections{spacing.xl} = 32px — large vertical breathing room{spacing.xxl} = 48px — hero section and content grouping{spacing.xxxl} = 64px — page-level spacing and hero backgroundsContext of use:
{spacing.md} (24px) is the primary horizontal padding for sections, observed on the login form wrapper.{spacing.md} to {spacing.lg} for comfortable input scanning.{spacing.md} horizontal margins, creating a full-width effect at 402px within the content column.450px (fixed across all measured breakpoints: 375px, 768px, 1024px, 1280px, 1440px){spacing.md} (24px) on left and rightWhitespace is deliberate and generous, creating breathing room between form fields and supporting the high-contrast aesthetic. Vertical rhythm is maintained through consistent {spacing.md} and {spacing.lg} gaps between logical sections (header, inputs, button, footer links). The dark background amplifies the visual impact of whitespace, making empty areas feel intentional rather than sparse.
{rounded.none} = 0px — inputs, badges, overlay modals, and icon buttons (sharp, architectural){rounded.full} = 9999px — primary buttons and pill-shaped interactive elements (soft, approachable)The system favors a binary approach: sharp corners for structural elements (inputs, badges) and pill-shaped containers for primary actions (buttons). No intermediate radii are employed.
| Level | Treatment | Use |
|---|---|---|
| Base (flat) | No shadow; canvas background ({colors.canvas} — #050506) | Input fields, text, backgrounds, secondary links |
| Elevated (single) | rgba(216, 255, 61, 0.55) 0px 12px 34px -14px | Primary buttons; soft neon glow creating lift |
Shadow Philosophy: The system employs a single-tier, colour-blocking elevation strategy. Depth is primarily achieved through background colour contrast (light text on dark canvas) rather than layered shadows. The one shadow present appears exclusively on primary buttons, casting a subtle, warm glow that reinforces the brand accent and signals interaction. The shadow is deliberately soft and beneath the element (negative y-offset of -14px produces an upward glow effect), creating an ethereal lift rather than a grounded drop. This restraint keeps the interface clean and prevents visual clutter on the dark backdrop.
{colors.primary} (#D8FF3D) sparingly but confidently on primary call-to-action buttons and brand marks; it is the visual anchor.{rounded.full} — 9999px) exclusively to primary actions; reserve sharp corners for inputs and secondary elements.{colors.body} (#918F98) for secondary body copy and {colors.ink} (#B7B5BB) for primary headings to maintain clear hierarchy.{colors.hairline} — #F4F1EA) for maximum contrast.rgba(216, 255, 61, 0.55) 0px 12px 34px -14px) to primary buttons to signal elevation and interactivity.{typography.button} (Archivo 16px, weight 700) for all button text to ensure clarity and immediate visual distinction.50px height or 402px width without reassessing touch target accessibility.{colors.body} — #918F98); reserve {colors.primary} for CTAs only.{colors.canvas} (#050506) for text; it is a background colour. Use {colors.ink} or {colors.body} for all typography.:focus with outline: none for accessibility.{typography.button} (16px) without compensating elsewhere.| Breakpoint | Width | Content Column | Heading (display-md) | Body Text | Section Padding-x |
|---|---|---|---|---|---|
| Mobile | 375px | 375px | 22px (h2) | 14px | {spacing.md} (24px) |
| Tablet | 768px | 450px | 22px (h2) | 14px | {spacing.md} (24px) |
| Desktop | 1024px | 450px | 22px (h2) | 14px | {spacing.md} (24px) |
| Large Desktop | 1280px | 450px | 22px (h2) | 14px | {spacing.md} (24px) |
| XL Desktop | 1440px | 450px | 22px (h2) | 14px | {spacing.md} (24px) |
Collapse Strategy:
The measured site maintains a fixed content column (450px) and consistent typography sizes across all viewport widths from 375px onwards. There is no breakpoint-driven collapse or expansion of layout; form inputs, buttons, and text scale proportionally within the fixed column. Section padding remains {spacing.md} (24px) on all sides. This approach prioritizes consistency over responsive adaptation, ensuring a uniform user experience across devices.
50px height minimum (measured value), providing ample touch area per WCAG guidelines.18px × 18px (measured), suitable for fine-motor touch; no measured hover enlargement.The layout does not collapse or expand across breakpoints. The fixed 450px content column and {spacing.md} (24px) section padding remain constant at 375px, 768px, 1024px, 1280px, and 1440px viewports. Form fields, buttons, and text do not reflow or hide. This simplicity ensures predictable behaviour across devices but may result in excessive whitespace on desktop displays.
{colors.primary} — #D8FF3D){colors.canvas} — #050506){colors.ink} — #B7B5BB){colors.body} — #918F98){colors.hairline} — #F4F1EA){colors.neutral-1} — #E5E7EB){colors.primary} (#D8FF3D) background with black text (#0A0A0B), 50px height, 402px width (or full available width), 999px border-radius, and shadow rgba(216, 255, 61, 0.55) 0px 12px 34px -14px. Scale on active: transform: scale(0.94).{colors.canvas} (#050506) background with 1px solid {colors.hairline} (#F4F1EA) border, 0px border-radius, {colors.body} text colour. Use {typography.label} (Archivo 15px, weight 500) for labels.450px across all breakpoints. Pad sections with {spacing.md} (24px) left and right.{spacing.md} (24px) to {spacing.lg} (28px) vertical gaps for comfortable input scanning and visual rhythm.{colors.body} (#918F98) for secondary links and {colors.primary} (#D8FF3D) for primary action links. No underline by default; apply only on hover (state not extracted, so follow standard practice).{colors.hairline} (#F4F1EA) text colour for icons on dark backgrounds; keep border-radius at 0px for structural UI.:focus with outline: none on buttons. Use :active with transform: scale(0.94) for press feedback. No explicit disabled state styling was extracted; assume opacity or color reduction as fallback.:focus (outline: none) and :active (scale 0.94) were measured on buttons. No hover states, focus rings, or disabled styles were extracted from the site's stylesheet. Implement these per platform conventions.{colors.body} (#918F98) and focus border uses {colors.primary} (#D8FF3D) or {colors.hairline} (#F4F1EA).{colors.neutral-1} (#E5E7EB) has no measured semantic role and is classified as decorative. Its purpose in the design system is unclear; it may serve as a future status colour or reserved accent.--van-active-opacity and --van-cell-active-color) are present but not fully documented. Their final appearance depends on Vant's default theme.