Welcome Pages
Pages are now available as full-screen example templates that showcase real-world use cases and best practices for composing interfaces with the aFP Design System.
Dark Light
System Default LBBW Jira Confluence Source Code
Share Playground

Native Styles #

The Native Styles are a foundational layer of the aFP Design System. They define a consistent, accessible, and clean default appearance for all native HTML elements — such as headings, paragraphs, lists, tables, and inline text elements — without requiring components or utilities.

They are available with all themes and automatically use each theme’s design tokens for colors, typography, and spacing, ensuring a consistent look and feel across different projects.

This makes them especially useful when building prototypes, static pages, or when integrating the Design System into existing applications that use semantic HTML.

What they do #

They are defined in a dedicated CSS layer afp-native. This allows you to control load order and overrides easily using the Cascade Layers feature.

Using Native Styles #

Note: Including the native styles is optional. If you’re using the full afp-design-system.css, you already get the core styling layer — but adding native.css provides consistent base HTML rendering for content-heavy pages.

To use the native styles, import the stylesheet into your project.
You can include it alongside the main Design System stylesheet or standalone if you only want the base HTML styling.

<link rel="stylesheet" href="/path/to/@afp-design-system/core/dist/styles/native.css">

Example in an NX workspace (project.json):

"styles": [
  "node_modules/@afp-design-system/core/dist/styles/native.css"
]

Custom Properties #

Custom Property Value Description
--afp-native-content-spacing --afp-space-m Defines the default vertical spacing between block-level HTML elements. The value is derived from the Design System’s spacing tokens.
--afp-native-hr-spacing --afp-space-2xl Controls the vertical spacing around <hr> elements. The value is derived from the Design System’s spacing tokens.

Content flow #

Native styles automatically apply consistent spacing between common block-level HTML elements using the --afp-native-content-spacing variable.

This creates a balanced and readable layout across all content sections, ensuring a natural visual rhythm between headings, paragraphs, and other text elements.

Lorem ipsum

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi blanditiis delectus dicta eum harum laboriosam maiores odit officiis vel vitae! Doloremque dolores eos eveniet excepturi id illo necessitatibus quibusdam, saepe.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi blanditiis delectus dicta eum harum laboriosam maiores odit officiis vel vitae! Doloremque dolores eos eveniet excepturi id illo necessitatibus quibusdam, saepe.

Typography #

Native styles use typography design tokens to style text elements.

Headings #

Use <h1> through <h6> to create headings. They use a condensed line height, and include text-wrap: balance for a clear, compact, and well-balanced visual appearance.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraphs #

Use <p> to create paragraphs. They apply text-wrap: pretty to improve text flow and prevent orphaned lines in supported browsers.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, assumenda cupiditate deserunt dicta, doloremque ea eius exercitationem facilis, harum labore nisi quo ratione vel. Corporis ipsam natus nihil officiis optio.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequuntur corporis delectus dignissimos dolor doloribus dolorum, id illum ipsam ipsum maxime molestias non obcaecati officia provident quos suscipit velit voluptatum.

Blockquotes #

Use <blockquote> to create block quotes. They include padding, a border, and text.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lists #

Use <ul>, <ol>, and <li> to create unordered and ordered lists.

  • First item
  • Second item
  • Third item
  1. First item
  2. Second item
  3. Third item

Use <dl> to create lists of terms (<dt>) and definitions (<dd>).

First term
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Second term
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Final term
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Code blocks #

Use <code>, <pre>, and <samp> to display inline code, code blocks, and sample output.

Here is some inline code: const foo = 'bar';

function greet(name) {
  return `Hello, ${name}!`;
}

Sample output: Hello, World!

Line #

Use <hr> to create horizontal rules. They include vertical spacing defined by the --afp-native-hr-spacing variable.

Inline text #

Native styles also enhance the appearance of various inline text elements.

Bold Italic Underline Strike-through Deleted Inserted Small
Subscript Sub Superscript Sup Abbr. Highlighted Link text Inline code Keyboard

Widgets #

Native styles also provide basic styling for common HTML widgets like <img> and <table>.

Images #

Images are styled to be responsive by default, scaling to fit their container while maintaining their aspect ratio

Example Image

Table #

Native styles enhance the appearance of tables using the Design System’s colors and spacing tokens.

This caption describes the table
Header 1 Header 2 Header 3
Content 1 Content 2 Content 3
Native Styles
Share
Create a link with a predefined theme that is automatically applied when the generated link is opened. Default LBBW Presentation Mode
Abort Copy Link