Design Token
A Design Token names one design choice. Examples include a color, space, font, or motion speed.
Open guideUI design styles explained with examples
See what each style looks like, when it helps, and when it gets in the way.
Variant
A Variant is an approved version of one component for a different size, strength, or setting.
Open guideVisual Hierarchy
Visual Hierarchy guides what people notice first, next, and last through size, contrast, place, and space.
Open guideColor Contrast
Color Contrast is the measured light difference between content and its nearby background. It shows whether key text and edges are easy to see.
Open guideTypography
Typography is how text styles are chosen and arranged to make words readable, ordered, and on-brand.
Open guideType Scale
A Type Scale is a small, planned set of text sizes and line heights.
Open guideColor Palette
A Color Palette is a planned color set. Each color has a clear role, state, or surface.
Open guideSpacing Scale
A Spacing Scale is a small set of gap sizes. It shows groups and keeps a steady visual rhythm.
Open guideIconography
Iconography is a shared symbol set with matching looks and clear meanings for actions and ideas.
Open guideDark Mode
Dark Mode changes surfaces, text, borders, media, and states for a dark setting.
Open guideResponsive Design
Responsive Design lets layout, content, and controls change to fit the available space and device.
Open guideScrim
A scrim is a see-through dark layer behind an overlay. It separates the overlay and shows that the page below is blocked.
Open guideSpacing
Spacing is empty space placed on purpose. It groups related items, separates ideas, and gives a page rhythm.
Open guideMargin
Margin is the space outside an element’s border. It keeps that element away from nearby layout items.
Open guidePadding
Padding is the space inside an element’s border, between its content and its edge.
Open guideGap
Gap is space that a container puts between its Flexbox or Grid children. The same rule applies to every pair.
Open guideCentered Column
A centered column has a readable maximum width and equal-looking space on both sides.
Open guideBento Grid
A bento grid packs tiles of different sizes into one layout. Larger spans show which content matters most.
Open guideText Truncation
Text truncation cuts off text to save space. An ellipsis shows that one or more lines are missing.
Open guideAspect Ratio
Aspect ratio tells how wide an element is compared with how tall it is.
Open guideBackdrop Blur
Backdrop blur softens what sits behind a clear surface. It doesn't blur the surface’s own content.
Open guideGlassmorphism
Glassmorphism is a visual style with clear layered surfaces. It uses blur, light borders, and a small sense of depth.
Open guideLiquid Glass
Liquid Glass is a moving, clear material style. It uses lens-like bending, highlights, and shapes that seem to join or flex.
Open guideSkeuomorphism
Skeuomorphism copies familiar real objects to explain a digital control. It may also copy their materials.
Open guideNeumorphism
Neumorphism is a soft, low-contrast style. Light and dark shadows make controls look raised from or pressed into one color surface.
Open guideNeobrutalism
Neobrutalism is a bold, high-contrast digital style. It uses simple shapes, thick borders, direct colors, and a clear mechanical layout.
Open guideMinimalism
Minimalism removes what a design doesn't need. It still keeps the product clear, useful, and distinct.
Open guideFlat Design
Flat design uses simple shapes, solid colors, and clear flat areas, with little fake depth.
Open guideClaymorphism
Claymorphism is a playful style with puffy shapes and round corners. Soft shadows and pastel surfaces make it look like clay.
Open guideY2K Digital Aesthetic
This digital aesthetic is a retro-future style from late-1990s and early-2000s digital culture. It often uses chrome, pixels, bright gradients, and playful computer details.
Open guideFrutiger Aero
Frutiger Aero is a hopeful mid-2000s style. It mixes shiny interfaces with blue skies, water, green plants, bubbles, and friendly-looking technology.
Open guideWeb Brutalism
Web brutalism is a raw web style. It shows structure, browser defaults, plain type, and planned roughness instead of usual polish.
Open guideVernacular Web
Vernacular web copies the everyday sites that communities make. It differs from polished systems made by large groups.
Open guideAqua
Aqua is a shiny interface style linked to early macOS. It uses glowing controls, gel-like depth, thin stripes, and bright blue accents.
Open guideWindows Aero
Windows Aero is a late-2000s desktop style. It uses see-through window frames, blurred glass, soft glow, and layered borders.
Open guideSwiss Style
Swiss Style uses clear grids and uneven but balanced layouts. It also uses sans-serif type, photos, and a strict visual order.
Open guideEditorial Design
Editorial design arranges a story through reading pace, type, images, captions, and page patterns that repeat.
Open guideMaterial Design
Material Design is a system for components and interactions. It uses layered surfaces, motion with a purpose, flexible layouts, and shared design tokens.
Open guideGradient
A gradient is a smooth change between colors or transparency. It can follow a line, circle, angle, or mesh.
Open guideShadow & Elevation
A shadow is a visual effect. Elevation is the depth relationship that the shadow may explain between surfaces.
Open guideBorder Radius & Squircle — Learning Bundle
This guide separates three ideas. They're standard CSS border-radius, draft corner-shape: squircle, and other squircle-like shapes or platform masks. The bundle is not one standard design term.
Open guideOpacity
Opacity says how solid an element and its children look. It can range from clear to solid.
Open guideApple Human Interface Guidelines
Apple Human Interface Guidelines explain design for Apple platforms. They cover actions, visuals, controls, input, accessibility, and platform differences.
Open guideNotion-style Workspace
A Notion-style Workspace uses a calm document look. It favors readable text, content blocks, quiet controls, and open space.
Open guideSaaS Marketing Site
A SaaS Marketing Site explains a problem and software service to one audience. It helps visitors judge fit and choose a next step.
Open guideB2B Corporate Site
A B2B Corporate Site helps business groups check a company's skills, rules, trust, and fit. It also supports buying or partnership.
Open guideDirect-to-Consumer E-commerce
DTC E-commerce lets a brand sell directly to consumers. It covers discovery, product choices, payment, delivery, and after-sale help.
Open guidePlayful Illustration
Playful Illustration uses lively characters, shapes, colors, and visual jokes. It can add warmth, meaning, or brand character.
Open guideOrganic Design
Organic Design follows forms found in nature. It uses uneven curves, tactile textures, natural colors, and less mechanical layouts.
Open guideMemphis Style
Memphis Style is a bold postmodern look. It uses strong shapes, clashing colors, patterns, uneven balance, and playful energy.
Open guideTerminal Aesthetic
Terminal Aesthetic borrows from command-line screens. It uses monospaced text, tight hierarchy, prompt marks, few colors, and clear status.
Open guideWabi-sabi
Wabi-sabi is a Japanese view of beauty. It values limits, change, uneven form, age, and honest materials over perfect polish.
Open guideCSS Logical Properties
CSS logical properties describe sides by writing flow, such as block and inline. They replace fixed directions like top, right, bottom, and left. This helps layouts follow the language's writing direction.
Open guideSubgrid
A subgrid is a grid inside another grid that shares its parent's row or column sizes. It can share one direction or both.
Open guideIntrinsic Sizing
Intrinsic sizing lets an element's content help decide its size instead of using only a fixed size from outside.
Open guidemin-content
`min-content` is the smallest size content can use after wrapping at every allowed break.
Open guidemax-content
`max-content` is the size content would like if it did not wrap at normal break points.
Open guideminmax()
`minmax()` is a CSS Grid function that gives a row or column both a minimum and a maximum size.
Open guideclamp()
`clamp()` chooses a preferred CSS value but keeps it between a minimum and a maximum.
Open guideobject-fit
`object-fit` controls how an image, video, or similar item fits inside its box.
Open guideViewport Units
Viewport units are CSS lengths based on the browser's visible area. Small, large, and dynamic versions handle browser bars that appear or hide.
Open guidePseudo-class
A pseudo-class is part of a CSS selector. It finds an element by a condition, such as state, place, language, or user action.
Open guidePseudo-element
A pseudo-element lets CSS style a part or box with no normal element in the source HTML. Examples include the first letter and generated decoration.
Open guideCSS Border Radius
CSS border-radius makes box corners from quarter ellipses using horizontal and vertical radii. It changes painting and clipping, but not the box's layout size, and it does not make a mathematical squircle.
Open guideCSS Squircle Corner
In the CSS Borders Level 4 draft, squircle is a corner-shape value for a convex superellipse between round and square. It equals superellipse(2), needs a nonzero border radius, and still requires a browser-support check.
Open guideForced Colors Mode
Forced colors mode uses a user-chosen system palette instead of many page colors. This can make controls and text easier to distinguish.
Open guideVisual Effect Material
Visual Effect Material is a macOS surface style that blends and blurs what is behind it. It changes with the window state and light or dark look.
Open guide