Component Analysis /components

UI Component Style Analysis

A structured catalog for documenting the visual properties of individual UI components extracted from wireframe sources. Record background colors, typography specifications, border radii, padding, and additional style notes for every component type — from buttons and inputs to cards, navigation elements, and modals.

Buttons & Inputs
Cards & Modals
Navigation & Badges
Typography Specimens

Document Component Style

Capture the complete visual specification of a UI component from your wireframe extraction. Provide color values, typographic details, spacing, and any additional style observations to build a comprehensive component reference.

What to document

  • Exact hex values for background and text colors
  • Border radius and font size in pixel values
  • Padding and spacing descriptions
  • Font weight and typographic hierarchy
View Color Palette

New Component Style Record

Fields marked * are required

Reference to the parent extraction record

Descriptive name identifying this component

Classify the UI component category

Select the component background color

Hex value(s) and notes for text color within this component

Describe internal padding and spacing values

Any additional observations: hover states, transitions, shadows, or variant styles

Record will be added to the Component Style Catalog immediately.

Component Style Catalog

All documented UI component styles extracted from wireframe sources. Each record captures the component's visual specification including color swatches, typographic properties, border radius, and padding details. Remove outdated records as needed.

Manage Extractions
Component Name
Type
Padding Description
Recorded
Actions

Loading...

Color Accuracy

Use the color picker to capture exact hex values. Cross-reference with the Color Palette workspace for consistency across your design system documentation.

Typography Specimens

Document font size and weight for each component type to build a complete typographic scale. Note variations between states such as default, hover, and active.

Spacing Consistency

Record padding values in the description field using a consistent format such as top/right/bottom/left notation to enable accurate spacing analysis across components.