figma.com website design: fonts, colors and UI patterns

Design character

These Figma captures skew to Gallery and Resource Library — light, airy, product-marketing adjacent. White canvas, black type, large soft cards (~24px radius), and unusually fine variable font weights (320–450) for UI. It feels like Figma’s public education/gallery surface: clean, spacious, design-forward without heavy brand rainbow in chrome.

What should survive adaptation: - Light canvas + black type as default resource shell - ~24px rounded media/cards (8px secondary) - Fine weight steps (~320–450) rather than only 400/700 - 24–48px padding rhythm and centered reading/marketing columns

Foundations

Color

Measured structured color is sparse (#000000 present). Visually: white backgrounds, black type, light gray controls, occasional soft gray pills (font specimen toolbars). Brand multicolor appears in product art/content more than in these resource chrome frames.

Typography

Families unsupported in structured data (Inter is the subject of a page, not necessarily declared as UI family here). Observed: - Display ~56/61.6 weight 400 - UI ~16–18 with weights 320–450, line-height ~23–25 - Resource articles use clear hierarchical sans

Spacing and layout

• Padding 24px common; 32 top; 48 bottom on sections
• Side margins ~258px on wide resource frames
• Gallery as card grid; resources as article/hero + content
• Font specimen page: stacked weight rows in soft gray rounded trays

Radii: 24px dominant, 8px secondary, 4px minor.

Visual language

Flat light surfaces, soft cards, minimal shadow, content-forward. Taxonomy: creative/design, card-heavy, media publication, generative AI mentions on some surfaces.

Components and states

• Marketing/top resource nav
• Gallery cards
• Article heroes for resource library
• Font specimen controls (size, preview text, open in Figma)
• Weight sample rows in rounded containers

Responsive behavior

Captures are wide desktop frames; mobile system not established here.

Practical guidance

Preserve airy light resources shell, 24px cards, fine variable weights. Avoid darkening the resource library into dashboard density. Adaptation for design education, galleries, and font specimens.

Scope note

Eight captures: gallery, resource articles, Inter font page. Full figma.com product app UI not in this set. Color roles thin; character from screenshots + type/spacing/radii.