Remixes of google.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: Google
description: |
Google's design system epitomizes purposeful minimalism with a tech-forward
personality. The interface celebrates clarity and directness, using expansive
whitespace to guide attention and reduce cognitive load. Color is deployed
sparingly but with intent—a vivid primary blue anchors interactive moments,
while a restrained neutral palette ensures legibility across dense information
landscapes. The system balances precision (sharp inputs, pill-shaped buttons)
with breathing room, creating a sense of calm control. Decorative touches,
like the rainbow conic gradient hero background, inject personality and
celebrate the brand's playful heritage without compromising functionality.
source:
url: "https://google.com"
pagesAnalyzed: 1
extractedAt: 2026-10-17
tokensMeasured: true
colors:
primary: "#F3F5F6"
link: "#1A0DAB"
canvas: "#FFFFFF"
on-primary: "#222222"
hairline: "#DADCE0"
neutral-1: "#636363"
neutral-2: "#000000"
typography:
body-md:
fontFamily: Arial
fontSize: 15px
fontWeight: 400
letterSpacing: 0px
body-sm:
fontFamily: Arial
fontSize: 14px
fontWeight: 400
letterSpacing: 0px
body-sm-strong:
fontFamily: "Google Sans Text"
fontSize: 14px
fontWeight: 500
lineHeight: 1.29
letterSpacing: 0px
body-xs:
fontFamily: Arial
fontSize: 13px
fontWeight: 400
lineHeight: 2.15
letterSpacing: 0px
body-xs-tight:
fontFamily: arial
fontSize: 13px
fontWeight: 400
lineHeight: 1.85
letterSpacing: 0px
button-lg:
fontFamily: Arial
fontSize: 18px
fontWeight: 400
letterSpacing: 0px
button-md:
fontFamily: "Google Sans"
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
letterSpacing: 0px
label:
fontFamily: "Google Sans"
fontSize: 16px
fontWeight: 400
lineHeight: 1.38
letterSpacing: 0px
rounded:
none: 0px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 28px
xxxl: 32px
section: 48px
band: 56px
borderWidths:
thin: 1px
elevationStrategy: color-blocking
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FFFFFF"
surface: "#F7F7F7"
surfaceRaised: "#EEEEEE"
text: "#111111"
textMuted: "#646464"
border: "#DADCE0"
accent: "#1A0DAB"
accentFg: "#FFFFFF"
focusRing: "#1A0DAB"
elevation: shadow
dark:
bg: "#0B0A14"
surface: "#1A1922"
surfaceRaised: "#26252E"
text: "#F6F5FC"
textMuted: "#9D9CA4"
border: "#32313A"
accent: "#7368F3"
accentFg: "#0B0A14"
focusRing: "#5042F1"
elevation: "border+surface"
gradients:
- context: hero
kind: conic
value: "conic-gradient(rgb(49, 134, 255) 34%, rgb(147, 120, 255) 37%, rgb(249, 107, 214) 39%, rgb(252, 65, 61) 41%, rgb(252, 65, 61) 48%, rgb(255, 107, 43) 50%, rgb(254, 199, 0) 52%, rgb(255, 219, 15) 56%, rgb(136, 222, 66) 58%, rgb(14, 188, 95) 61%, rgb(14, 188, 95) 65%, rgb(46, 170, 178) 70%, rgb(0, 169, 187) 72%, rgb(49, 134, 255) 73%, rgb(49, 134, 255) 83%, rgb(49, 134, 255) 100%)"
- context: section
kind: conic
value: "conic-gradient(rgb(49, 134, 255) 34%, rgb(147, 120, 255) 37%, rgb(249, 107, 214) 39%, rgb(252, 65, 61) 41%, rgb(252, 65, 61) 48%, rgb(255, 107, 43) 50%, rgb(254, 199, 0) 52%, rgb(255, 219, 15) 56%, rgb(136, 222, 66) 58%, rgb(14, 188, 95) 61%, rgb(14, 188, 95) 65%, rgb(46, 170, 178) 70%, rgb(0, 169, 187) 72%, rgb(49, 134, 255) 73%, rgb(49, 134, 255) 83%, rgb(49, 134, 255) 100%)"
components:
button-primary:
typography: "{typography.body-sm}"
textColor: "rgb(31, 31, 31)"
height: 42px
padding: "10px 16px 10px 12px"
rounded: "{rounded.full}"
backgroundColor: "{colors.primary}"
button-filled:
typography: "{typography.body-sm-strong}"
textColor: "{colors.canvas}"
height: 40px
padding: "10px 12px 10px 12px"
rounded: 100px
backgroundColor: "rgb(11, 87, 208)"
button-text:
typography: "{typography.body-sm}"
textColor: "rgb(31, 31, 31)"
height: 49px
button-text-sm:
typography: "{typography.button-md}"
textColor: "rgb(31, 31, 31)"
height: 36px
padding: "0px 8px 0px 8px"
rounded: 100px
backgroundColor: "{colors.canvas}"
button-icon:
typography: "{typography.body-sm}"
textColor: "{colors.link}"
height: 40px
padding: "8px 8px 8px 8px"
rounded: "50%"
button-icon-sm:
typography: "{typography.body-sm}"
textColor: "rgb(31, 31, 31)"
height: 36px
rounded: "{rounded.full}"
navigation:
typography: "{typography.body-sm}"
textColor: "rgb(31, 31, 31)"
height: 60px
padding: "6px 6px 6px 6px"
footer:
typography: "{typography.body-sm}"
textColor: "rgb(31, 31, 31)"
backgroundColor: "{colors.canvas}"
link:
typography: "{typography.body-sm}"
textColor: "{colors.link}"
link-2:
typography: "{typography.body-xs-tight}"
textColor: "rgb(31, 31, 31)"
states:
link-hover:
target: link
state: hover
textDecoration: underline
other-hover:
target: other
state: hover
opacity: 0.9
other-focus:
target: other
state: focus
outline: none
other-active:
target: other
state: active
backgroundColor: "rgba(0, 0, 0, 0.1)"
button-hover:
target: button
state: hover
textColor: "rgb(51, 51, 51)"
boxShadow: "rgba(0, 0, 0, 0.1) 0px 1px 1px"
borderColor: "rgb(198, 198, 198)"
borderWidth: 1px
backgroundColor: "rgb(248, 248, 248)"
button-active:
target: button
state: active
boxShadow: "rgba(0, 0, 0, 0.1) 0px 1px 2px inset"
button-focus:
target: button
state: focus
borderColor: "rgb(77, 144, 254)"
borderWidth: 1px
other-disabled:
target: other
state: disabled
filter: "grayscale(100%)"
opacity: 0.38
backgroundColor: transparent
breakpoints:
- width: 375
containerWidth: 375
gridColumns: 0
navLinksVisible: 6
menuToggleVisible: false
headingPx: 0
bodyPx: 14
sectionPaddingX: 0
- width: 768
containerWidth: 768
gridColumns: 0
navLinksVisible: 6
menuToggleVisible: false
headingPx: 0
bodyPx: 14
sectionPaddingX: 0
- width: 1024
containerWidth: 1024
gridColumns: 0
navLinksVisible: 6
menuToggleVisible: false
headingPx: 0
bodyPx: 14
sectionPaddingX: 0
- width: 1280
containerWidth: 1280
gridColumns: 0
navLinksVisible: 6
menuToggleVisible: false
headingPx: 0
bodyPx: 14
sectionPaddingX: 0
- width: 1440
containerWidth: 1440
gridColumns: 0
navLinksVisible: 6
menuToggleVisible: false
headingPx: 0
bodyPx: 14
sectionPaddingX: 0
coverage:
statesFound: 58
gradientsFound: 2
rolesUnassigned: 2
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
Google's design system epitomizes purposeful minimalism with a tech-forward personality. The interface celebrates clarity and directness, using expansive whitespace to guide attention and reduce cognitive load. Color is deployed sparingly but with intent—a vivid primary blue anchors interactive moments, while a restrained neutral palette ensures legibility across dense information landscapes. The system balances precision (sharp inputs, pill-shaped buttons) with breathing room, creating a sense of calm control. Decorative touches, like the rainbow conic gradient hero background, inject personality and celebrate the brand's playful heritage without compromising functionality.
Key Characteristics
{colors.primary} — #F3F5F6): Primary CTA fills, active states, and secondary surfaces; a near-white with subtle cool undertone used for brand identity and button backgrounds.{colors.link} — #1A0DAB): Inline hyperlinks and link-state text; a saturated blue that meets accessibility contrast requirements against light backgrounds.{colors.canvas} — #FFFFFF): Default page background and primary surface.{colors.on-primary} — #222222): Label and text color on brand surfaces; used for readability on neutral or brand backgrounds.{colors.hairline} — #DADCE0): 1px borders and subtle dividers; a very light gray for minimal visual interruption.{colors.neutral-1} — #636363): Unassigned decorative neutral; appears in secondary text and inactive states.{colors.neutral-2} — #000000): Unassigned decorative neutral; used in strong text and high-contrast elements.| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / Hero | Not measured | — | — | — | — | No display-scale heading measured on page |
| Heading / Label | Google Sans | 16px | 400 | 1.38 | 0px | Form labels and prominent secondary headings |
| Body Large | Google Sans Text | 14px | 500 | 1.29 | 0px | Strong body text and emphasis within content |
| Body Medium | Arial | 15px | 400 | not measured | 0px | Standard body copy; primary reading text |
| Body Small | Arial | 14px | 400 | not measured | 0px | Inline links and secondary body text |
| Body Extra Small | Arial | 13px | 400 | 2.15 | 0px | Minimal text, footers, metadata |
| Body Extra Small Tight | arial | 13px | 400 | 1.85 | 0px | Compact body text with tighter spacing |
| Button Large | Arial | 18px | 400 | not measured | 0px | Large button text (uncommon) |
| Button Medium | Google Sans | 14px | 400 | 1.43 | 0px | Primary button labels and action text |
{colors.primary} (#F3F5F6)#1F1F1F{rounded.full} (9999px)#F8F8F8, border 1px #C6C6C6, text #333333, box-shadow rgba(0, 0, 0, 0.1) 0px 1px 1pxrgba(0, 0, 0, 0.1) 0px 1px 2px#4D90FE#0B57D0#FFFFFF#357AE8, border 1px #2F5BB7, text #FFFFFF, box-shadow rgba(0, 0, 0, 0.1) 0px 1px 1pxrgba(0, 0, 0, 0.3) 0px 1px 2pxrgba(0, 0, 0, 0) 0px, box-shadow inset #FFFFFF 0px 0px 0px 1px#1F1F1F{rounded.none} (0px){colors.canvas} (#FFFFFF)#1F1F1F{colors.link} (#1A0DAB)#1F1F1F{rounded.full} (9999px)#1F1F1F{colors.canvas} (#FFFFFF)#1F1F1F{colors.link} (#1A0DAB)#1F1F1F#1558D6The spacing system is built on a base unit of 4px ({spacing.xxs}), with a logarithmic scale accommodating both micro-interactions and large sectional layouts:
{spacing.xxs} (4px), {spacing.xs} (8px), {spacing.sm} (12px){spacing.md} (16px), {spacing.lg} (20px), {spacing.xl} (24px){spacing.xxl} (28px), {spacing.xxxl} (32px){spacing.section} (48px), {spacing.band} (56px)Use {spacing.md} (16px) as the default for component padding and button-to-button gaps. Apply {spacing.section} (48px) between major content blocks and {spacing.band} (56px) for full-width hero or background-color-change zones.
The page does not employ a multi-column grid system at any measured viewport (375px–1440px). Content flows full-width at all breakpoints, with a single-column layout. The navigation bar and footer span the full viewport width. Internal section padding is minimal or zero; the design prioritizes edge-to-edge layouts over centered containers with side gutters.
Whitespace is the primary tool for cognitive grouping. Generous vertical spacing between functional zones (search bar, feature buttons, footer links) reduces visual density without introducing artificial card or container styling. Horizontal padding is minimal; text and interactive elements sit close to the viewport edges or are center-aligned. This approach creates a sense of expansiveness and trust in the interface.
{rounded.none} (0px) — Input fields, text buttons, and certain card edges{rounded.full} (9999px) — Primary and secondary buttons, icon buttons, pill-shaped interactive elementsInteractive components (buttons, icon toggles) default to {rounded.full} to signal affordance. Form inputs use {rounded.none} to emphasize precision and data entry. No intermediate radius values (4px, 8px) are in use; the system employs a binary sharp/pill strategy.
Google's design system employs color-blocking rather than shadow-based elevation. Depth is expressed through background color shifts and surface material changes, not layered box-shadows.
| Level | Treatment | Use |
|---|---|---|
| Base (Flat) | No shadow, solid background color ({colors.canvas} or {colors.primary}) | Default buttons, page background, static text |
| Hover / Interactive | Subtle shadow rgba(0, 0, 0, 0.1) 0px 1px 1px + background shift | Button hover, link interaction, minimal feedback |
| Active / Pressed | Inset shadow rgba(0, 0, 0, 0.1) 0px 1px 2px inset | Depressed button state, confirming user action |
| Lifted / Card Focus | Shadow rgba(60, 64, 67, 0.24) 0px 4px 12px | Card hover, expanded component state, modal entry |
Shadows are minimal and near-transparent; the system achieves hierarchy and clarity through color and proximity rather than dramatic depth cues. The hero background uses a conic-gradient (rainbow sweep) for visual interest without increasing DOM complexity—this is a decorative accent, not an elevation change.
{rounded.full} / 9999px) for all primary and secondary actions to signal high affordance and modern polish.{colors.link} (#1A0DAB) for inline links and link-state text; do not repurpose it for filled buttons.{spacing.md} (16px) as the default padding for buttons, inputs, and component gaps; scale up to {spacing.lg} (20px) or {spacing.xl} (24px) for breathing room in larger layouts.{colors.primary} (#F3F5F6) for secondary button backgrounds and brand identity surfaces; it is not an error or warning color.{rounded.none} / 0px) to reinforce data-entry precision and distinguish form fields from interactive buttons.{spacing.section} (48px) or {spacing.band} (56px) for breathing room between major content blocks.:hover { text-decoration: underline }) for clear, discoverable affordance.rgba(60, 64, 67, 0.24) 0px 4px 12px) for modal or card contexts only.{rounded.none} / {rounded.full} binary; intermediate radii (4px, 8px) are not part of this system.{colors.on-primary} (#222222) to links; links use {colors.link} (#1A0DAB) exclusively.| Viewport | Layout | Nav Links | Menu Toggle | Font Size | Behavior |
|---|---|---|---|---|---|
| 375px (Mobile) | Full-width, single column | 6 visible | None | 14px body | Content spans edge-to-edge; no multi-column grid |
| 768px (Tablet) | Full-width, single column | 6 visible | None | 14px body | Same layout as mobile; responsive design does not introduce breakpoint until larger screens |
| 1024px (Desktop) | Full-width, single column | 6 visible | None | 14px body | Maintains single-column flow |
| 1280px–1440px (Large Desktop) | Full-width, single column | 6 visible | None | 14px body | No change from smaller desktops; layout remains consistent across all measured widths |
The design system does not define responsive breakpoint-specific changes in the measured range. Content, typography, and navigation remain consistent from 375px to 1440px. This implies either a true single-column responsive approach or that the page does not contain responsive behavior triggered by viewport changes in the typical sense.
Buttons and interactive elements are designed at 40px–49px height to accommodate touch input (minimum 44px recommended). Icon buttons measure 36px–40px, providing sufficient target area on mobile. Links are styled with 24px line-height, allowing comfortable tap targets without oversizing typography.
The page does not exhibit collapsing or hamburger menu behavior across the measured viewport range (375px–1440px). All navigation links remain visible at every size. This suggests either:
Assume a mobile-first, full-width design: sections and components scale to fit the viewport without reorganization.
{colors.link} (#1A0DAB) for inline hyperlinks; #0B57D0 for filled action buttons{colors.primary} (#F3F5F6){colors.canvas} (#FFFFFF){colors.on-primary} (#222222) or #1F1F1F{colors.hairline} (#DADCE0)border-radius: 9999px on all primary, secondary, and icon buttons. Sharp buttons (0px) are reserved for text-only or truly unstyled link buttons.{spacing.md} (16px) for padding and gaps; use {spacing.section} (48px) or {spacing.band} (56px) to separate major sections.rgba(60, 64, 67, 0.24) 0px 4px 12px) for modals and cards only.