Remixes of threeui.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: Threeui
description: |
ThreeUI presents a sophisticated, developer-centric design system built on a
dark, minimal foundation emphasizing technical precision and premium
craftsmanship. The visual language combines a deep charcoal canvas with subtle
off-white typography and warm metallic accents, creating an atmosphere of
exclusivity and innovation. The system prioritizes clarity through restrained
color use, generous whitespace, and a monospace typography foundation that
reinforces its technical nature. Every element reflects a "source-backed"
ethos—clean, inspectable, and production-ready—making it ideal for showcasing
interactive WebGL components, 3D assets, and design templates to a developer
and designer audience.
source:
url: "https://threeui.com/browse"
pagesAnalyzed: 6
extractedAt: 2026-11-01
tokensMeasured: true
colors:
primary: "#FFFFFF"
accent: "#D7BD83"
canvas: "#101113"
on-primary: "#8A8F98"
ink: "#FFFFFF"
body: "#F7F8F8"
muted: "#8A8F98"
accent-1: "#241F15"
neutral-1: "#000000"
neutral-2: "#EDEEF0"
typography:
code-sm:
fontFamily: "JetBrains Mono"
fontSize: 12px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
code-xs:
fontFamily: "JetBrains Mono"
fontSize: 11px
fontWeight: 400
lineHeight: 1.73
letterSpacing: 0px
code-xs-tight:
fontFamily: "JetBrains Mono"
fontSize: 11px
fontWeight: 400
lineHeight: 1
letterSpacing: 0.66px
code-xs-2:
fontFamily: "JetBrains Mono"
fontSize: 11px
fontWeight: 400
lineHeight: 1.36
letterSpacing: 0.22px
code-xs-uppercase:
fontFamily: "JetBrains Mono"
fontSize: 11px
fontWeight: 400
lineHeight: 1.45
letterSpacing: 0.3px
textTransform: uppercase
code-xs-3:
fontFamily: "JetBrains Mono"
fontSize: 11px
fontWeight: 400
lineHeight: 1.27
letterSpacing: 0.88px
textTransform: uppercase
rounded:
none: 0px
xs: 5px
sm: 7px
md: 9px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 28px
xxxl: 32px
section: 40px
band: 48px
borderWidths:
thin: 1px
elevationStrategy: color-blocking
themes:
derived: light # the other theme is the site's measured palette
light:
bg: "#FDFCF9"
surface: "#F3F2EF"
surfaceRaised: "#EBEAE8"
text: "#1B1A17"
textMuted: "#706F6C"
border: "#DAD9D6"
accent: "#8A6D2D"
accentFg: "#FFFFFF"
focusRing: "#A98637"
elevation: shadow
dark:
bg: "#101113"
surface: "#101012"
surfaceRaised: "#232325"
text: "#FFFFFF"
textMuted: "#F7F8F8"
border: "#2D2E2F"
accent: "#D7BD83"
accentFg: "#0B0B0C"
focusRing: "#D7BD83"
elevation: "border+surface"
components:
button-primary:
textColor: "{colors.muted}"
border: "1px solid rgba(255, 255, 255, 0.035)"
height: 38px
padding: "7px 10px 7px 10px"
fontSize: 12px
fontFamily: "JetBrains Mono"
fontWeight: 400
lineHeight: 1.67
rounded: "{rounded.xs}"
backgroundColor: "rgba(255, 255, 255, 0.027)"
button-primary-sm:
textColor: "oklab(0.648807 -0.00191092 -0.0144504 / 0.7)"
border: "1px solid rgba(255, 255, 255, 0.035)"
height: 36px
padding: "6px 6px 6px 12px"
fontSize: 12px
fontFamily: "JetBrains Mono"
fontWeight: 400
lineHeight: 1.67
rounded: "{rounded.xs}"
backgroundColor: "rgba(255, 255, 255, 0.027)"
button-filled:
textColor: "rgb(10, 11, 13)"
height: 32px
padding: "6px 8px 6px 12px"
fontSize: 12px
fontFamily: "JetBrains Mono"
fontWeight: 400
lineHeight: 1.67
rounded: "{rounded.xs}"
backgroundColor: "{colors.neutral-2}"
card:
textColor: "{colors.body}"
fontSize: 14px
fontFamily: "JetBrains Mono"
fontWeight: 400
lineHeight: 1.57
card-lg:
textColor: "{colors.body}"
border: "1px solid oklab(0.819815 0.00461554 0.0748471 / 0.648)"
padding: "28px 28px 28px 28px"
fontSize: 14px
fontFamily: "JetBrains Mono"
fontWeight: 400
lineHeight: 1.57
rounded: "{rounded.md}"
backgroundColor: "rgb(10, 11, 13)"
badge-outline:
typography: "{typography.code-xs-tight}"
textColor: "oklab(0.871686 0.00448834 0.0727666)"
border: "1px solid oklab(0.745613 0.00911084 0.0921934 / 0.35)"
height: 16px
padding: "0px 5px 0px 5px"
rounded: 3px
backgroundColor: "oklab(0.745613 0.00911084 0.0921934 / 0.14)"
badge-text:
textColor: "{colors.muted}"
height: 16px
fontSize: 12px
fontFamily: "JetBrains Mono"
fontWeight: 400
lineHeight: 1.67
badge-outline-lg:
textColor: "{colors.body}"
border: "1px solid oklab(0.807131 0.00506261 0.0808584 / 0.3)"
height: 32px
padding: "4px 7px 4px 7px"
fontSize: 11px
fontFamily: "JetBrains Mono"
fontWeight: 400
lineHeight: 2
rounded: 3px
backgroundColor: "oklab(0.807131 0.00506261 0.0808584 / 0.17)"
navigation:
textColor: "{colors.body}"
padding: "16px 0px 0px 0px"
fontSize: 14px
fontFamily: "JetBrains Mono"
fontWeight: 400
lineHeight: 1.57
footer:
textColor: "{colors.muted}"
border: "1px solid rgba(255, 255, 255, 0.035)"
padding: "48px 0px 32px 0px"
fontSize: 14px
fontFamily: "JetBrains Mono"
fontWeight: 400
lineHeight: 1.57
footer-sm:
typography: "{typography.code-xs}"
textColor: "{colors.muted}"
border: "1px solid rgba(255, 255, 255, 0.035)"
padding: "20px 0px 0px 0px"
link:
textColor: "{colors.muted}"
padding: "6px 8px 6px 12px"
fontSize: 12px
fontFamily: "JetBrains Mono"
fontWeight: 400
lineHeight: 1.67
rounded: "{rounded.xs}"
link-sm:
textColor: "{colors.muted}"
fontSize: 11px
fontFamily: "JetBrains Mono"
fontWeight: 400
lineHeight: 1.5
states:
button-hover:
target: button
state: hover
transform: "translateY(-1px)"
button-active:
target: button
state: active
transform: "translateY(0px)"
other-disabled:
target: other
state: disabled
opacity: 0.45
other-hover:
target: other
state: hover
filter: "brightness(1.08)"
transform: "translateY(-1px)"
other-active:
target: other
state: active
transform: "translateY(0px)"
link-hover:
target: link
state: hover
textDecoration: underline
other-focus-visible:
target: other
state: focus-visible
textColor: "rgb(236, 236, 232)"
boxShadow: "rgba(0, 0, 0, 0.26) 0px 7px 16px"
borderColor: "rgb(65, 65, 62)"
backgroundColor: "rgba(27, 27, 26, 0.94)"
button-disabled:
target: button
state: disabled
opacity: 0.5
nav-hover:
target: nav
state: hover
opacity: 1
input-focus-visible:
target: input
state: focus-visible
rounded: 3px
breakpoints:
- width: 375
containerWidth: 351
gridColumns: 2
navLinksVisible: 377
menuToggleVisible: true
headingPx: 24
bodyPx: 14
sectionPaddingX: 0
- width: 768
containerWidth: 736
gridColumns: 4
navLinksVisible: 377
menuToggleVisible: true
headingPx: 26
bodyPx: 14
sectionPaddingX: 0
- width: 1024
containerWidth: 1024
gridColumns: 4
navLinksVisible: 377
menuToggleVisible: true
headingPx: 26
bodyPx: 14
sectionPaddingX: 0
- width: 1280
containerWidth: 1280
gridColumns: 4
navLinksVisible: 377
menuToggleVisible: true
headingPx: 26
bodyPx: 14
sectionPaddingX: 0
- width: 1440
containerWidth: 1440
gridColumns: 4
navLinksVisible: 377
menuToggleVisible: true
headingPx: 26
bodyPx: 14
sectionPaddingX: 0
coverage:
statesFound: 61
gradientsFound: 0
rolesUnassigned: 3
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
ThreeUI presents a sophisticated, developer-centric design system built on a dark, minimal foundation emphasizing technical precision and premium craftsmanship. The visual language combines a deep charcoal canvas with subtle off-white typography and warm metallic accents, creating an atmosphere of exclusivity and innovation. The system prioritizes clarity through restrained color use, generous whitespace, and a monospace typography foundation that reinforces its technical nature. Every element reflects a "source-backed" ethos—clean, inspectable, and production-ready—making it ideal for showcasing interactive WebGL components, 3D assets, and design templates to a developer and designer audience.
Key Characteristics
#101113)#FFFFFF): Primary CTA fills, brand accent in hero sections, active states, headings, and primary body text; the dominant communicator in the dark-on-light and dark-on-dark contrasts#D7BD83): Supporting brand hue used alongside the primary white; appears in decorative elements, pricing highlight bands, and tertiary CTAs to establish warmth and premium positioning#241F15): A very dark brown accent with no measured semantic role; appears in rare decorative contexts only#101113): Default page background; the foundational dark surface#F7F8F8): Body copy text; off-white with minimal blue undertone for legibility on dark backgrounds#8A8F98): Secondary and tertiary text, captions, labels, and metadata; muted gray used on both light and dark surfaces#000000): Pure black with no measured role; appears in rare decorative or overlay contexts#EDEEF0): Very light neutral with no measured semantic role; appears sporadically in component fillsPrimary Font: JetBrains Mono (https://fonts.googleapis.com/)
Secondary Font: Not explicitly declared in the extracted system; all text roles use JetBrains Mono.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Code XS | JetBrains Mono | 11px | 400 | 1.73 | 0px | Tight mono spacing for small inline code |
| Code XS Tight | JetBrains Mono | 11px | 400 | 1 (11px) | 0.66px | Ultra-condensed; used for labels and metadata |
| Code XS Uppercase | JetBrains Mono | 11px | 400 | 1.45 | 0.3px | Small caps for tags and labels; text-transform: uppercase |
| Code XS 2 | JetBrains Mono | 11px | 400 | 1.36 | 0.22px | Variant spacing; body-adjacent caption |
| Code XS 3 | JetBrains Mono | 11px | 400 | 1.27 | 0.88px | Ultra-spaced uppercase; decorative labels and badges |
| Code SM | JetBrains Mono | 12px | 400 | 1.5 (18px) | 0px | Standard button and link text |
#F7F8F8 on dark #101113; muted #8A8F98 for tertiary) ensures legibility for vision-impaired usersPrimary Button
rgba(255, 255, 255, 0.027) (near-transparent white)#8A8F98 (muted gray text)1px solid rgba(255, 255, 255, 0.035) (hairline white at low opacity)7px 10px38px{rounded.xs} (5px)Primary Button Small
rgba(255, 255, 255, 0.027) (near-transparent white)oklab(0.648807 -0.00191092 -0.0144504 / 0.7) (muted with alpha)1px solid rgba(255, 255, 255, 0.035)6px 6px 6px 12px36px{rounded.xs} (5px)Filled Button
#EDEEF0 (light neutral fill)#0A0B0D (near-black text for contrast)6px 8px 6px 12px32px{rounded.xs} (5px)Card Default
rgba(0, 0, 0, 0) (transparent)#F7F8F8 (off-white text){rounded.none} (0px — sharp corners)0pxCard Default Large
#0A0B0D (near-black surface)#F7F8F8 (off-white text)1px solid oklab(0.819815 0.00461554 0.0748471 / 0.648) (subtle muted border with 64.8% opacity){rounded.md} (9px){spacing.xxl} (28px on all sides)Outline Badge
oklab(0.745613 0.00911084 0.0921934 / 0.14) (faint muted background, 14% opacity)oklab(0.871686 0.00448834 0.0727666) (light muted text)1px solid oklab(0.745613 0.00911084 0.0921934 / 0.35) (muted border, 35% opacity)3px0px 5px16pxText Badge
rgba(0, 0, 0, 0) (transparent)#8A8F98 (muted gray){rounded.none} (0px)0px16pxOutline Badge Large
oklab(0.807131 0.00506261 0.0808584 / 0.17) (faint background, 17% opacity)#F7F8F8 (off-white text)1px solid oklab(0.807131 0.00506261 0.0808584 / 0.3) (muted border, 30% opacity)3px4px 7px32pxInput Focus State (no default variant measured; focus state only)
color-mix(in oklab, var(--foreground) 34%, var(--border)) (deepened border on focus)0 0 0 2px color-mix(in oklab, var(--foreground) 6%, transparent) (subtle ring)Navigation Default
rgba(0, 0, 0, 0) (transparent)#F7F8F8 (off-white text)16px 0px 0px 0px{rounded.none} (0px)Link Default
rgba(0, 0, 0, 0) (transparent)#8A8F98 (muted gray){rounded.xs} (5px)6px 8px 6px 12px32pxLink Small
rgba(0, 0, 0, 0) (transparent)#8A8F98 (muted gray){rounded.none} (0px)0pxFooter Default
rgba(0, 0, 0, 0) (transparent)#8A8F98 (muted gray)1px solid rgba(255, 255, 255, 0.035) (hairline white border){rounded.none} (0px){spacing.band} 0px {spacing.xxxl} 0px (48px top, 32px bottom)315pxFooter Small
rgba(0, 0, 0, 0) (transparent)#8A8F98 (muted gray)1px solid rgba(255, 255, 255, 0.035){rounded.none} (0px){spacing.lg} 0px 0px 0px (20px top)40pxThreeUI uses a modular spacing scale designed to maintain harmony across component spacing, padding, margins, and gap values. All spacing multiples of 4px ensure alignment to an underlying rhythm grid.
{spacing.xxs} = 4px — Micro gaps within components, button icon-text spacing{spacing.xs} = 8px — Small internal padding, tight component grouping{spacing.sm} = 12px — Standard internal component padding{spacing.md} = 16px — Default padding, moderate gaps between elements{spacing.lg} = 20px — Larger padding, clear separation between sections{spacing.xl} = 24px — Generous padding for cards and content areas{spacing.xxl} = 28px — Card internal spacing, substantial separation{spacing.xxxl} = 32px — Extra-large padding, major content containers{spacing.section} = 40px — Vertical spacing between page sections{spacing.band} = 48px — Band and hero section padding, visual breaksThreeUI prioritizes generous negative space to emphasize technical clarity and premium positioning. The system avoids visual clutter through sparse color use, abundant breathing room around interactive elements, and a dark canvas that feels less visually dense than lighter alternatives. Section padding ({spacing.section} and {spacing.band}) creates clear visual breaks between distinct content zones, while component-level padding ensures content remains legible and scannable.
{rounded.none} = 0px — Cards (default variant), navigation, footer; sharp, architectural corners{rounded.xs} = 5px — Buttons (primary, primary-sm, filled), links; moderate softness for interactive targets{rounded.sm} = 7px — Not observed in component measurements; reserved for future use{rounded.md} = 9px — Cards (large variant); subtle rounding for larger surfaces{rounded.full} = 9999px — Avatars; pill-shaped profile images1px — Applied to button borders (primary, primary-sm), card borders (large), badge borders, navigation/footer dividers, and input focus rings; the system's sole border thicknessThreeUI employs color-blocking as its primary depth mechanism rather than layered shadows. Depth is communicated through surface color shifts (dark canvas #101113 to slightly lighter near-black card surfaces #0A0B0D), opacity modulation (semi-transparent button fills, muted borders), and border articulation. This approach keeps the interface clean and technical—appropriate for a developer-focused component library—while maintaining clear visual hierarchy.
No explicit shadow values were measured in the extracted system. The component styles show boxShadow: "none" consistently across all measured components. Depth comes from background color contrast and border definition, not elevated shadow treatments.
z-index: 2 — Standard document flow; typical stacking contextz-index: 20 — Dropdowns and popovers that float above page content{colors.canvas} (#101113) for page backgrounds and layer lighter neutrals on top.{rounded.none}) to large surfaces (cards, sections) and soft corners ({rounded.xs}) to interactive elements (buttons, links).#F7F8F8) on dark canvas; use muted grays (#8A8F98) only for secondary information where contrast is deliberately reduced.#D7BD83) for highlights and premium signals. Use sparingly to maintain exclusivity and emphasis.1px solid rgba(255, 255, 255, 0.035)) to articulate surfaces without introducing visual weight.{rounded.none} (0px) to maintain architectural sharpness; only small interactive targets (buttons, links, badges) receive rounding.boxShadow: none approach keeps the interface clean.#101113.opacity: 1 or below opacity: 0.35 in disabled states without explicit measurement; use the defined opacity scale.| Breakpoint | Viewport Width | Content Width | Grid Columns | Key Changes |
|---|---|---|---|---|
| Mobile | 375px | 351px | 2 | Navigation visible (no mobile collapse); no layout shift below this size |
| Tablet | 768px | 736px | 4 | Column count increases to 4; content expands to fit |
| Desktop | 1024px | 1024px | 4 | Full desktop layout; no further layout changes above 1024px |
| Large Desktop | 1280px | 1280px | 4 | Content maintains maximum width; consistent 4-column grid |
| Extra Large | 1440px | 1440px | 4 | Maximum measured width; content fully expands to viewport |
Note: Navigation menu does not collapse to a toggle at any measured breakpoint (width 377px observed consistently). Horizontal padding remains 0px across all sizes; content spans full viewport width.
32px (filled button) to 38px (primary button)6px vertical, 8px to 12px horizontal6px vertical, 8px to 12px horizontal for standard links; smaller links (11px font) use 0px padding16px (outline) to 32px (outline-lg)ThreeUI exhibits full-bleed, liquid layout behavior:
#FFFFFF) for dominant fills and text; warm gold (#D7BD83) for secondary highlights#101113) for page foundation; slightly lighter near-black (#0A0B0D) for card surfaces#F7F8F8) for primary content; muted gray (#8A8F98) for secondary/tertiary labels and metadatargba(255, 255, 255, 0.035)) for articulation on dark backgrounds#241F15, #000000, #EDEEF0) are rareStart every component on the dark canvas (#101113) and compose surfaces, text, and interactive states from the measured palette alone. Do not invent colors.
Use JetBrains Mono at 400 weight for all text. Size and line-height establish hierarchy; never introduce font families, weights, or letterspacing outside the measured scale.
Apply {rounded.none} (0px) to cards, containers, and page sections; {rounded.xs} (5px) to buttons, links, and small interactive elements. Exceptions (large cards at {rounded.md}, avatars at {rounded.full}) are explicitly measured.
Build depth through color-blocking: Use near-black surfaces (#0A0B0D), subtle borders (rgba(255, 255, 255, 0.035)), and opacity modulation. Do not apply box-shadow treatments; the system is shadow-free.
Space using the 4px grid scale: {spacing.xxs} (4px) through {spacing.band} (48px). All padding, margin, and gaps must align to this scale.
Establish interactive feedback through opacity, color shifts, and micro-transforms (translateY, scale 1.04–1.06, rotate -5deg). No shadow or blur effects; keep interactions fast and subtle.
Reserve the warm gold (#D7BD83) for accents and premium signals. Sparingly applied; not a primary interactive color.
Ensure accessibility: Maintain high contrast (off-white on dark). Use muted gray (#8A8F98) only for non-critical information. Test color pairs against AA standards.
No error/success/warning semantic colors measured. The site does not declare a status color ramp in its stylesheets; error states, validation feedback, and success indicators are not covered by this extraction.
No gradient or decorative mesh treatments. The system uses flat color-blocking only; any gradients or animated textures on the live site were not captured in the component measurements.
No hover/active/focus/disabled state colors fully documented. Interaction states exist in the stylesheet but many are expressed as CSS variables or color-mix functions (e.g., color-mix(in oklab, var(--foreground) 34%, var(--border))) whose resolved colors depend on runtime theming context. The outline values are measurable; fill colors are partially conditional.
Three colors have no measured semantic role: #241F15 (dark brown), #000000 (black), and #EDEEF0 (light neutral). These appear in rare contexts with no clear functional purpose; they are documented as decorative only.
Typography does not include display or heading sizes. All measured text roles are code-scaled (11px–12px). No display, H1, H2, etc., variants were extracted; if the site uses larger headings, they were not captured in component analysis.
No shadow elevation table provided. The entire system measures boxShadow: none across components. If shadows exist on the live site (e.g., in hero overlays, modals, or backgrounds behind authentication), they are not documented here.
Border-width scale includes only 1px. No thicker borders (2px, 3px, etc.) were measured; the system's sole border thickness is thin/hairline.
Responsive breakpoints are inferred from observed layout shifts only. No explicit CSS media queries were extracted; the breakpoint table reflects where content width and grid column counts actually change, not declared breakpoint tokens.
Surfaces behind authentication were not visited. Account settings, premium-only component sections, or dashboard content remain unmeasured.
Dark mode / light mode behavior not measured. If the site ships both themes, only the dark theme was analyzed. Light mode (if it exists) is not documented.
Z-index scale limited to two values. Only base: 2 and dropdown: 20 were observed; if modals, toasts, or other stacking contexts exist, their z-index values are not captured.
Document Version: Generated from 6-page ThreeUI extraction
Last Measured: October 2024
Coverage: Primary browsable pages only; authentication-protected content excluded