Fiber Design Guide

Welcome to the Fiber Design Guide!

Fiber makes designing and building Samtec web applications easier. It provides a set of pre-built components, layout tools, structural guidance, and more.

Fiber was created by the User-Centered Design Team. Contact them to help take your Fiber application to the next level: UCD@samtec.com.

Start using FiberLearn Fiber

A Guide to the Design Guide

In Development

The Design Guide is still in development. Some links may not work. Some content may be missing or incorrect. We are working hard to complete the guide and appreciate your patience.

This Design Guide describes all the pieces of Fiber applications. It provides usage rules, design descriptions, and code examples to make understanding and implementing Fiber easy.

The different sections are:

  1. Guidelines

    Interaction patterns. Rules and guidelines for standard interactions with content, especially forms. Guidelines for writing copy.

    Review the guidelines

  2. Style

    Colors. Spacing. Icons. Typography.

    Explore Fiber’s Style

  3. Structure

    How to organize screens. Navigation. Headings and content groupings. Layout tools.

    Discover Fiber application structure

  4. Components

    Usage rules, design descriptions, and code examples for all Fiber components.

    Find the right component

  5. Patterns

    Standard compositions of components. Variants thereof.

    See the patterns

  6. Developer Framework

    How to set up the codebase for a Fiber application. Coding patterns. Tools. Tips. (But no tooltips, sorry)

    Get started with the Developer Framework

    View the Version Change Log

  7. Examples

    Sample components, interactions, and patterns.

    See the examples