Remixes of www.bentoml.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: Bentoml
description: |
BentoML's design system embraces a sophisticated, technology-forward aesthetic
rooted in nature-inspired earth tones and bold accent greens. The visual
language conveys precision, scalability, and control—hallmarks of an
enterprise AI inference platform. Deep forest and slate tones anchor the
interface with authority, while bright lime-green accents spark energy and
draw attention to primary actions. The design balances minimalism with playful
depth, using subtle shadows and deliberate color blocking to create hierarchy
without visual noise. Isometric illustrations and smooth transitions reinforce
the platform's dynamic, forward-thinking character.
source:
url: "https://www.bentoml.com/"
pagesAnalyzed: 6
extractedAt: 2026-10-26
tokensMeasured: true
colors:
primary: "#152822"
accent: "#194220"
canvas: "#F8F8F8"
surface: "#FFFFFF"
on-primary: "#D3FFB5"
ink: "#000000"
body: "#19192C"
muted: "#152822"
faint: "#242424"
hairline: "#E5E7EB"
accent-1: "#495945"
accent-2: "#4B5563"
accent-3: "#ABEA93"
accent-4: "#374151"
accent-5: "#F4965E"
accent-6: "#BDABED"
neutral-1: "#616161"
typography:
display-lg:
fontFamily: __atlas_grotesk_d944c5
fontSize: 60px
fontWeight: 700
lineHeight: 1
letterSpacing: 0px
display-md:
fontFamily: __replica_c4fadd
fontSize: 50.6042px
fontWeight: 700
lineHeight: 1.15
letterSpacing: 0px
display-sm:
fontFamily: __replica_c4fadd
fontSize: 42px
fontWeight: 700
lineHeight: 1.15
letterSpacing: 0px
display-sm-loose:
fontFamily: __replica_c4fadd
fontSize: 42px
fontWeight: 700
lineHeight: 1.2
letterSpacing: 0px
heading-xxl:
fontFamily: __replica_c4fadd
fontSize: 32px
fontWeight: 400
lineHeight: 1.15
letterSpacing: 0px
heading-xl:
fontFamily: __atlas_grotesk_d944c5
fontSize: 30px
fontWeight: 700
lineHeight: 1.2
letterSpacing: 0px
heading-lg:
fontFamily: __atlas_grotesk_d944c5
fontSize: 24px
fontWeight: 500
lineHeight: 1.3
letterSpacing: 0px
heading-md:
fontFamily: __atlas_grotesk_d944c5
fontSize: 20px
fontWeight: 400
lineHeight: 1.3
letterSpacing: 0px
heading-sm:
fontFamily: __atlas_grotesk_d944c5
fontSize: 18px
fontWeight: 600
lineHeight: 1.56
letterSpacing: 0px
heading-xs:
fontFamily: __replica_c4fadd
fontSize: 16px
fontWeight: 600
lineHeight: 1.3
letterSpacing: 0px
body-lg:
fontFamily: __atlas_grotesk_d944c5
fontSize: 18px
fontWeight: 400
lineHeight: 1.3
letterSpacing: 0px
body-md:
fontFamily: __atlas_grotesk_d944c5
fontSize: 17.7387px
fontWeight: 400
lineHeight: 1.3
letterSpacing: 0px
body-sm:
fontFamily: __atlas_grotesk_d944c5
fontSize: 16px
fontWeight: 400
lineHeight: 1.25
letterSpacing: 0px
body-sm-loose:
fontFamily: __atlas_grotesk_d944c5
fontSize: 16px
fontWeight: 400
lineHeight: 1.3
letterSpacing: 0px
body-sm-strong:
fontFamily: __atlas_grotesk_d944c5
fontSize: 16px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 0px
body-xs:
fontFamily: __atlas_grotesk_d944c5
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
letterSpacing: 0px
caption:
fontFamily: __atlas_grotesk_d944c5
fontSize: 12px
fontWeight: 400
lineHeight: 1.33
letterSpacing: 0px
code:
fontFamily: source-code-pro
fontSize: 16px
fontWeight: 400
lineHeight: 1.25
letterSpacing: 0px
rounded:
none: 0px
xs: 6px
sm: 8px
md: 10px
lg: 15px
xl: 21px
xxl: 25px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 28px
xxl: 32px
xxxl: 40px
section: 48px
band: 80px
borderWidths:
thin: 1px
shadows:
sm: "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px"
elevationStrategy: single-tier
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#F8F8F8"
surface: "#FFFFFF"
surfaceRaised: "#F5F5F5"
text: "#000000"
textMuted: "#19192C"
border: "#E5E7EB"
accent: "#152822"
accentFg: "#FFFFFF"
focusRing: "#152822"
elevation: shadow
dark:
bg: "#0F1010"
surface: "#1D1E1E"
surfaceRaised: "#292A2A"
text: "#F6F6F6"
textMuted: "#9E9F9F"
border: "#353636"
accent: "#4D937D"
accentFg: "#0B0B0C"
focusRing: "#386B5B"
elevation: "border+surface"
components:
button-filled:
typography: "{typography.body-sm-loose}"
textColor: "{colors.surface}"
height: 56px
padding: "12px 12px 12px 12px"
rounded: "{rounded.sm}"
backgroundColor: "rgb(235, 235, 235)"
button-filled-2:
typography: "{typography.body-sm-loose}"
textColor: "{colors.ink}"
height: 56px
padding: "12px 12px 12px 12px"
rounded: "{rounded.sm}"
backgroundColor: "rgb(235, 235, 235)"
button-primary:
typography: "{typography.caption}"
textColor: "{colors.muted}"
height: 16px
padding: "8px 16px 8px 16px"
rounded: "{rounded.md}"
backgroundColor: "{colors.primary}"
button-primary-lg:
textColor: "{colors.muted}"
height: 54px
fontSize: 15.7387px
fontFamily: __atlas_grotesk_d944c5
fontWeight: 400
lineHeight: 1.3
rounded: 16px
backgroundColor: "{colors.primary}"
button-icon:
textColor: "{colors.muted}"
height: 32px
fontSize: 13.7379px
fontFamily: __atlas_grotesk_d944c5
fontWeight: 400
lineHeight: 1.3
rounded: "{rounded.md}"
backgroundColor: "{colors.primary}"
button-icon-2:
textColor: "{colors.on-primary}"
height: 32px
fontSize: 13.7379px
fontFamily: __atlas_grotesk_d944c5
fontWeight: 400
lineHeight: 1.3
rounded: "{rounded.md}"
backgroundColor: "{colors.on-primary}"
card-featured:
typography: "{typography.body-sm-loose}"
textColor: "{colors.on-primary}"
border: "1px solid {colors.body}"
padding: "20px 20px 64px 20px"
rounded: "{rounded.lg}"
backgroundColor: "{colors.accent-1}"
card:
typography: "{typography.body-sm-loose}"
textColor: "{colors.muted}"
border: "1px solid {colors.body}"
padding: "20px 20px 20px 20px"
rounded: "{rounded.lg}"
backgroundColor: "{colors.on-primary}"
card-featured-sm:
typography: "{typography.body-sm-loose}"
textColor: "{colors.surface}"
border: "1px solid {colors.body}"
padding: "20px 20px 20px 20px"
rounded: "{rounded.lg}"
backgroundColor: "{colors.accent-1}"
card-lg:
typography: "{typography.body-sm-loose}"
textColor: "{colors.body}"
border: "1px solid rgba(0, 0, 0, 0.5)"
rounded: "{rounded.xxl}"
backgroundColor: "{colors.surface}"
navigation:
typography: "{typography.body-sm-loose}"
textColor: "{colors.body}"
height: 81px
padding: "20px 0px 20px 0px"
backgroundColor: "{colors.surface}"
navigation-2:
typography: "{typography.body-sm-loose}"
textColor: "{colors.surface}"
height: 81px
padding: "20px 0px 20px 0px"
backgroundColor: "{colors.surface}"
link:
typography: "{typography.body-sm-loose}"
textColor: "{colors.body}"
border: "1px solid rgba(0, 0, 0, 0.5)"
rounded: 20px
backgroundColor: "{colors.surface}"
link-2:
typography: "{typography.body-xs}"
textColor: "{colors.body}"
states:
other-hover:
target: other
state: hover
boxShadow: "rgba(0, 0, 0, 0.1) 0px 4px 12px"
transform: "translateY(-1px)"
input-focus:
target: input
state: focus
boxShadow: "rgba(59, 130, 246, 0.1) 0px 0px 0px 3px"
button-hover:
target: button
state: hover
opacity: 1
badge-hover:
target: badge
state: hover
backgroundColor: "rgb(191, 219, 254)"
link-hover:
target: link
state: hover
textColor: "rgb(144, 167, 255)"
card-hover:
target: card
state: hover
transform: "translate3d(5px, -5px, 0px)"
other-focus:
target: other
state: focus
outline: none
other-focus-visible:
target: other
state: focus-visible
outlineWidth: 2px
breakpoints:
- width: 375
containerWidth: 335
gridColumns: 2
navLinksVisible: 12
menuToggleVisible: false
headingPx: 32
bodyPx: 16
sectionPaddingX: 0
- width: 768
containerWidth: 584
gridColumns: 2
navLinksVisible: 12
menuToggleVisible: false
headingPx: 42
bodyPx: 16
sectionPaddingX: 0
- width: 1024
containerWidth: 804
gridColumns: 2
navLinksVisible: 12
menuToggleVisible: false
headingPx: 42
bodyPx: 16
sectionPaddingX: 0
- width: 1280
containerWidth: 964
gridColumns: 5
navLinksVisible: 12
menuToggleVisible: false
headingPx: 47
bodyPx: 16
sectionPaddingX: 0
- width: 1440
containerWidth: 964
gridColumns: 5
navLinksVisible: 12
menuToggleVisible: false
headingPx: 51
bodyPx: 16
sectionPaddingX: 0
coverage:
statesFound: 50
gradientsFound: 0
rolesUnassigned: 7
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
tokens: colors: primary: "#152822" accent: "#194220" accent-1: "#495945" accent-2: "#4B5563" accent-3: "#ABEA93" accent-4: "#374151" accent-5: "#F4965E" accent-6: "#BDABED" canvas: "#F8F8F8" surface: "#FFFFFF" ink: "#000000" body: "#19192C" faint: "#242424" on-primary: "#D3FFB5" hairline: "#E5E7EB" neutral-1: "#616161" typography: display-md: "50.6042px, weight 700, line-height 1.15" display-sm: "42px, weight 700, line-height 1.15" display-sm-loose: "42px, weight 700, line-height 1.2" display-lg: "60px, weight 700, line-height 1" heading-xxl: "32px, weight 400, line-height 1.15" heading-xl: "30px, weight 700, line-height 1.2" heading-lg: "24px, weight 500, line-height 1.3" heading-md: "20px, weight 400, line-height 1.3" heading-sm: "18px, weight 600, line-height 1.56" heading-xs: "16px, weight 600, line-height 1.3" body-lg: "18px, weight 400, line-height 1.3" body-md: "17.7387px, weight 400, line-height 1.3" body-sm: "16px, weight 400, line-height 1.25" body-sm-loose: "16px, weight 400, line-height 1.3" body-sm-strong: "16px, weight 500, line-height 1.5" body-xs: "14px, weight 400, line-height 1.43" caption: "12px, weight 400, line-height 1.33" code: "16px, weight 400, line-height 1.25" spacing: xxs: "4px" xs: "8px" sm: "12px" md: "16px" lg: "20px" xl: "28px" xxl: "32px" xxxl: "40px" section: "48px" band: "80px" rounded: none: "0px" xs: "6px" sm: "8px" md: "10px" lg: "15px" xl: "21px" xxl: "25px" full: "9999px" shadows: sm: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px"
BentoML's design system embraces a sophisticated, technology-forward aesthetic rooted in nature-inspired earth tones and bold accent greens. The visual language conveys precision, scalability, and control—hallmarks of an enterprise AI inference platform. Deep forest and slate tones anchor the interface with authority, while bright lime-green accents spark energy and draw attention to primary actions. The design balances minimalism with playful depth, using subtle shadows and deliberate color blocking to create hierarchy without visual noise. Isometric illustrations and smooth transitions reinforce the platform's dynamic, forward-thinking character.
Key Characteristics
{colors.on-primary} — #D3FFB5) for high-contrast CTAs and affordances{colors.canvas} — #F8F8F8, {colors.surface} — #FFFFFF) for breathing room{rounded.md} (10px) to {rounded.xxl} (25px) for a softer, approachable feel{colors.primary} — #152822): Deep forest green used as the dominant CTA fill, brand accent, active states, and primary brand identity. Also employed for secondary/tertiary text on light backgrounds.{colors.on-primary} — #D3FFB5): Bright, luminous lime green applied as label text and highlight on brand-colored surfaces; creates maximum contrast for readability on dark backgrounds.{colors.accent} — #194220): Slightly darker forest green variant used in hero bands and secondary UI zones; provides tonal depth without introducing new hues.{colors.accent-1} — #495945): Muted sage; decorative use only, no primary role assigned.{colors.accent-2} — #4B5563): Slate-gray undertone; decorative use only.{colors.accent-3} — #ABEA93): Soft moss-green; decorative use only.{colors.accent-4} — #374151): Dark charcoal; decorative use only.{colors.accent-5} — #F4965E): Warm terracotta; decorative use only.{colors.accent-6} — #BDABED): Dusty mauve; decorative use only.{colors.primary} as fill with white text; on hover, the lime accent ({colors.on-primary}) appears as a lightened button state.{colors.body} (#19192C) with hover states that shift to brighter blue tones or lift with opacity/transform; no underline by default.{colors.canvas} — #F8F8F8): Default page background; light gray with subtle warmth.{colors.surface} — #FFFFFF): Card and panel backgrounds; pure white for maximum contrast.{colors.ink} — #000000): Pure black for primary heading text; used sparingly for high-contrast titles.{colors.body} — #19192C): Deep charcoal used for body text and secondary headings; maintains readability on light backgrounds.{colors.faint} — #242424): Placeholder text, disabled states, and low-emphasis content.{colors.neutral-1} — #616161): Medium gray for secondary dividers or muted UI elements.{colors.hairline} — #E5E7EB): 1px borders for cards, inputs, and subtle separators; light, non-intrusive.Primary: __atlas_grotesk_d944c5 (geometric sans-serif, modern and geometric)
-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serifSecondary / Display: __replica_c4fadd (serif display font, elevated and distinctive)
"Times New Roman", serifCode: source-code-pro (monospaced)
"Monaco", "Courier New", monospace| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Large | __replica_c4fadd | 60px | 700 | 1.0 | 0px | Page-level hero text; use sparingly |
| Display Medium | __replica_c4fadd | 50.6042px | 700 | 1.15 | 0px | Large section headers; h1/h2 context |
| Display Small | __replica_c4fadd | 42px | 700 | 1.15 (or 1.2 loose) | 0px | Secondary display; hero subheading |
| Heading XXL | __replica_c4fadd | 32px | 400 | 1.15 | 0px | Large structured heading |
| Heading XL | __atlas_grotesk_d944c5 | 30px | 700 | 1.2 | 0px | Section title (h3 level) |
| Heading Large | __atlas_grotesk_d944c5 | 24px | 500 | 1.3 | 0px | Subsection or card title |
| Heading Medium | __atlas_grotesk_d944c5 | 20px | 400 | 1.3 | 0px | Secondary heading |
| Heading Small | __atlas_grotesk_d944c5 | 18px | 600 | 1.56 | 0px | Form labels, tertiary heading |
| Heading XS | __atlas_grotesk_d944c5 | 16px | 600 | 1.3 | 0px | Small heading, card heading |
| Body Large | __atlas_grotesk_d944c5 | 18px | 400 | 1.3 | 0px | Large body copy |
| Body Medium | __atlas_grotesk_d944c5 | 17.7387px | 400 | 1.3 | 0px | Default body text |
| Body Small | __atlas_grotesk_d944c5 | 16px | 400 (or 500 strong) | 1.25 (or 1.3 loose, 1.5 strong) | 0px | Standard body text; input labels |
| Body XS | __atlas_grotesk_d944c5 | 14px | 400 | 1.43 | 0px | List items, secondary metadata |
| Caption | __atlas_grotesk_d944c5 | 12px | 400 | 1.33 | 0px | Captions, badges, footnotes |
| Code | source-code-pro | 16px | 400 | 1.25 | 0px | Code snippets and monospaced text |
Primary Button
{colors.primary} (#152822){colors.on-primary} (#D3FFB5){spacing.md} (16px) horizontal, {spacing.sm} (12px) vertical (8px 16px 8px 16px){rounded.md} (10px){typography.body-xs} (14px, weight 400){colors.on-primary} (#D3FFB5), text becomes {colors.primary} (#152822); light lift via transform: translateY(-1px)Primary Button Large
{colors.primary} (#152822){colors.on-primary} (#D3FFB5)0px (full-width or flex sizing)54px{rounded.lg} (15px){typography.body-sm} (16px, weight 400)Icon Button (Dark)
{colors.primary} (#152822){colors.on-primary} (#D3FFB5)32px0px{rounded.md} (10px)Icon Button (Light)
{colors.on-primary} (#D3FFB5){colors.primary} (#152822)32px0px{rounded.md} (10px)Secondary/Neutral Buttons
#EBEBEB (light gray){colors.ink} (#000000){spacing.md} (12px)56px{rounded.sm} (8px){typography.body-sm} (16px, weight 400)Featured Card (Dark)
{colors.accent-1} (#495945) — muted sage{colors.on-primary} (#D3FFB5){spacing.lg} (20px)1px solid {colors.body} (#19192C){rounded.lg} (15px){typography.body-sm} (16px)transform: translate3d(5px, -5px, 0px) — lifts up and rightDefault Card (Light)
{colors.on-primary} (#D3FFB5){colors.primary} (#152822){spacing.lg} (20px)1px solid {colors.body} (#19192C){rounded.lg} (15px){typography.body-sm} (16px)transform: translate3d(-5px, 5px, -5px) — lifts down and leftFeatured Card (Small)
{colors.accent-1} (#495945){colors.surface} (#FFFFFF){spacing.lg} (20px)1px solid {colors.body} (#19192C){rounded.lg} (15px)Large Card (White)
{colors.surface} (#FFFFFF){colors.body} (#19192C)0px (full bleed or internal layout control)1px solid rgba(0, 0, 0, 0.5){rounded.xxl} (25px){typography.body-sm} (16px)Text Input
{colors.surface} (#FFFFFF){colors.body} (#19192C){colors.faint} (#242424){spacing.md} (16px)1px solid {colors.hairline} (#E5E7EB){rounded.xl} (21px){typography.body-xs} (14px, weight 400)box-shadow: rgba(59, 130, 246, 0.1) 0px 0px 0px 3px — blue ring outlineSelect / Dropdown
{colors.surface} (#FFFFFF){colors.body} (#19192C){spacing.md} (16px)1px solid {colors.hairline} (#E5E7EB){rounded.xl} (21px){typography.body-xs} (14px)Textarea
{colors.surface} (#FFFFFF){colors.body} (#19192C){spacing.md} (16px)1px solid {colors.hairline} (#E5E7EB){rounded.xl} (21px){typography.body-xs} (14px)Header Navigation
{colors.surface} (#FFFFFF){colors.body} (#19192C)81px{spacing.lg} (20px) vertical, 0px horizontal0px 0px {rounded.lg} {rounded.lg} (0 0 15px 15px) — rounded bottom corners only{typography.body-sm} (16px)Nav Link Hover
#90A7FF) or increases opacitytransform: translateY(0px) with opacity fade-inText Link (Inline)
{colors.body} (#19192C){typography.body-sm-loose} (16px, weight 400, line-height 1.3)rgb(144, 167, 255) (brighter blue); opacity and transform effects appliedBase Unit: {spacing.xxs} = 4px
Full Scale:
{spacing.xxs} = 4px — micro-spacing (icon padding, tight button groups){spacing.xs} = 8px — extra small (input label distance, small gaps){spacing.sm} = 12px — small (form field gaps, compact padding){spacing.md} = 16px — default (card padding, button padding, body line-height adjustment){spacing.lg} = 20px — large (section headers, card interior spacing){spacing.xl} = 28px — extra large (feature section spacing){spacing.xxl} = 32px — double (header nav padding, footer spacing){spacing.xxxl} = 40px — triple (CTA section spacing){spacing.section} = 48px — section-level (major content divisions){spacing.band} = 80px — band/hero spacing (full-width section gaps)Context:
{spacing.lg} (20px){spacing.section} (48px) to {spacing.band} (80px){spacing.sm} to {spacing.md} (12px–16px){spacing.md} (16px)964px (measured at 1280px and 1440px viewports)0px across all measured breakpoints; full-width content with internal margins335px (375px viewport) to 964px (1440px viewport)The design champions ample breathing room, avoiding crowded layouts. Sections are separated by {spacing.section} (48px) or {spacing.band} (80px), creating visual pause between content blocks. Cards and containers use {spacing.lg} (20px) internal padding to ensure text and elements do not feel cramped. Light backgrounds ({colors.canvas} — #F8F8F8) reinforce the sense of openness; negative space is treated as an active design element, not wasted real estate.
| Radius | Value | Components |
|---|---|---|
{rounded.none} | 0px | Images, full-bleed containers |
{rounded.xs} | 6px | Rare; decorative only |
{rounded.sm} | 8px | Secondary buttons, small UI elements |
{rounded.md} | 10px | Primary buttons, icon buttons, input focus ring context |
{rounded.lg} | 15px | Featured cards, medium-emphasis containers |
{rounded.xl} | 21px | Input fields, large interactive elements |
{rounded.xxl} | 25px | Large feature cards, elevated containers |
{rounded.full} | 9999px | Pill-shaped buttons or badges (not measured on this site; reserved for future use) |
{colors.hairline} (#E5E7EB) borders on cards, inputs, and dividers; light, non-dominant visual weightThe system employs a color-blocking and minimal shadow strategy rather than a progressive multi-tier approach. Depth is conveyed primarily through background color changes and subtle hover transforms.
| Level | Treatment | Use |
|---|---|---|
| Flat / Base | No shadow; background: {colors.canvas} or {colors.surface} | Default card surfaces, form inputs, page background |
| Elevated (sm) | box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px | Button lift on hover; subtle depth for interactive elements |
Shadow Philosophy:
The system uses a single shadow tier (sm) applied sparingly. Most depth comes from color contrast and transform-based motion rather than shadow stacking. Cards and buttons rely on background colors and subtle lifts (1px translate) to indicate interactivity. This keeps the interface feeling light and modern while maintaining clear visual hierarchy.
The extraction did not measure explicit opacity scales for disabled, overlay, or hover states at the token level. Opacity effects are embedded in component-specific hover states (e.g., opacity: 1 on link hover). The system does not appear to use a formal opacity scale; treat opacity as component-specific rather than systemic.
| Stacking Context | Z-index | Purpose |
|---|---|---|
| Base | 1–2 | Default content flow, static elements |
| Mid | 9 | Raised surfaces, secondary overlays |
| Dropdown | 10–13 | Nested dropdowns, select menus, tooltips |
| Modal/Sticky | 20 | Sticky navigation, modal dialogs, topmost UI |
The layering approach is minimal and reserved. Most components do not require explicit z-index; the stack grows only when modals, dropdowns, or sticky elements demand it.
{colors.on-primary} — #D3FFB5) sparingly for primary CTAs. It commands attention and should guide users toward conversion or key actions.{colors.primary} — #152822) with light surfaces for maximum contrast and readability.{rounded.md} to {rounded.xxl}) across interactive and card components to reinforce the modern, approachable aesthetic.{spacing.lg} — 20px) inside cards and containers to prevent visual crowding.__replica_c4fadd) only for h1/h2 hero headlines; body copy always defaults to geometric sans-serif (__atlas_grotesk_d944c5).sm) for button and card hover states; do not layer multiple shadows or create artificial depth with blur.{colors.hairline} (#E5E7EB) for 1px borders on cards and inputs; it is subtle and non-intrusive.{colors.primary}, {colors.accent}) on dark backgrounds without sufficient contrast; always pair with light text or surfaces.rgba(59, 130, 246, 0.1)).{rounded.full}) for primary CTAs. Default to {rounded.md} or {rounded.lg} for a modern, confident look.{spacing.band} (80px) for section margins unless a deliberate visual pause is required.{colors.accent-1} through {colors.accent-6}) for primary UI. They are reserved for illustration, background tints, or non-critical surfaces.{spacing.md} (16px) on form inputs or buttons; maintain minimum 44px touch targets.| Breakpoint | Width | Content Column | Grid Columns | Nav Behavior | Largest Heading | Body Size | Section Padding-X |
|---|---|---|---|---|---|---|---|
| Mobile | 375px | 335px | 2 | 12 links visible | 32px | 16px | 0px |
| Tablet Small | 768px | 584px | 2 | 12 links visible | 42px | 16px | 0px |
| Tablet Large | 1024px | 804px | 2 | 12 links visible | 42px | 16px | 0px |
| Desktop | 1280px | 964px | 5 | 12 links visible | 47px | 16px | 0px |
| Desktop XL | 1440px | 964px | 5 | 12 links visible | 51px | 16px | 0px |
Breakpoint Strategy:
964px.32px (mobile) to 51px (desktop XL), indicating fluid typography.0px, meaning full-width layouts with internal margins handle spacing.44px (inferred from buttons and icon buttons, which measure 32px internally but include padding to meet touch minimums)56px height (large), 40px+ on smaller variants32px width/height (may require padding wrapper to meet 44px global minimum){colors.primary} — #152822){colors.on-primary} — #D3FFB5){colors.canvas} — #F8F8F8){colors.surface} — #FFFFFF){colors.ink} — #000000) or Body ({colors.body} — #19192C){colors.body} — #19192C){colors.faint} — #242424){colors.hairline} — #E5E7EB){colors.accent} — #194220){colors.canvas} or {colors.surface}) and dark text ({colors.body} or {colors.ink}). Contrast is your foundation.{colors.primary} (#152822) for primary CTAs and brand marks only; it is the highest-emphasis color.{colors.on-primary} (#D3FFB5) text on dark surfaces. This lime-green is the system's eye-catcher.{rounded.md} (10px) to buttons, {rounded.lg} (15px) to cards, and {rounded.xl} (21px) to inputs. Consistency in radius builds recognition.__atlas_grotesk_d944c5 for all body, headings, and UI labels; reserve __replica_c4fadd for display-level (h1/h2) headlines only.{spacing.md} (16px) horizontally and {spacing.sm} (12px) vertically for a standard 44–56px touch target.{spacing.section} (48px) or {spacing.band} (80px); do not pack content.sm) only on hover or elevation; flat surfaces have no shadow.box-shadow: rgba(59, 130, 246, 0.1) 0px 0px 0px 3px. Do not focus-ring other elements.{colors.accent-1} through {colors.accent-6} are decorative only; their specific UI purpose was not determined from available data.