Component Showcase
This is the complete visual reference for the fiskaly design system. Every color token, typographic style, and component available to content authors is documented here with live examples.
Color Palette
Section titled “Color Palette”The fiskaly color system is built on semantic scales. Every color below is available as a Tailwind utility class (e.g. bg-brand-500, text-gray-900).
Brand (Teal / Turquoise)
Section titled “Brand (Teal / Turquoise)”The primary brand color, used for CTAs, links, active states, and the fiskaly dot.
Gray (Neutral)
Section titled “Gray (Neutral)”Used for text, borders, and backgrounds. Tuned for WCAG AA contrast.
Accent (Blue)
Section titled “Accent (Blue)”Secondary informational color, used for info alerts and accent highlights.
Semantic Colors
Section titled “Semantic Colors”Semantic shortcuts for status-driven UI.
Named Primaries (Brandbook)
Section titled “Named Primaries (Brandbook)”These named colors map directly to the scale values above.
Typography
Section titled “Typography”Font family: DM Sans (body & headings), DM Mono (code). Headings use semibold to bold weight with tight tracking.
Heading Hierarchy
Section titled “Heading Hierarchy”Heading 1 — DM Sans Bold (2.25rem)
Section titled “Heading 1 — DM Sans Bold (2.25rem)”Heading 2 — DM Sans Semibold (1.5rem)
Section titled “Heading 2 — DM Sans Semibold (1.5rem)”Heading 3 — DM Sans Semibold (1.25rem)
Section titled “Heading 3 — DM Sans Semibold (1.25rem)”Heading 4 — DM Sans Medium (1.125rem)
Section titled “Heading 4 — DM Sans Medium (1.125rem)”Heading 5 — DM Sans Medium (1rem)
Section titled “Heading 5 — DM Sans Medium (1rem)”Body Text
Section titled “Body Text”Regular body text uses DM Sans at a comfortable reading size. Bold text and italic text work as expected. You can combine bold italic too. Here is inline code for API parameters and strikethrough for deprecated items.
Code Block
Section titled “Code Block”{ "access_token": "eyJhbGciOiJSUzI1NiIs...", "token_type": "Bearer", "expires_in": 900}The base Card component supports three visual variants and an optional hover flag for interactive states.
Default
Clean background, no border or shadow.
Bordered
Subtle border for visual separation.
Elevated
Shadow for depth and prominence.
Bordered + Hover
Hover over this card to see the interactive shadow and brand-colored border transition.
Glow Cards
Section titled “Glow Cards”Cards with an animated gradient border glow on hover. Three color variants available.
Brand Glow
Turquoise gradient border on hover.
Accent Glow
Blue gradient border on hover.
Copper Glow
Warm gradient border on hover.
Feature Cards & Link Cards
Section titled “Feature Cards & Link Cards”Feature Cards
Section titled “Feature Cards”Feature cards present capabilities with an icon, title, and description. They use GlowCard internally for the premium hover effect.
Quick Start
Get up and running in minutes with our simple setup guide.
API Reference
Complete API documentation with examples for every endpoint.
Security
Enterprise-grade security and compliance across all markets.
Link Cards
Section titled “Link Cards”Navigational cards that point to another page. The arrow animates on hover.
Introduction
Learn about fiskaly's cloud-based TSS solution for fiscal compliance.
Getting Started
Step-by-step guide for new customers to make their first API call.
Product Cards & Country Cards
Section titled “Product Cards & Country Cards”Product Cards
Section titled “Product Cards”Showcase fiskaly products with an icon, optional badge, and a “Learn more” CTA. Built on GlowCard.
SIGN DE
Digital signing for German fiscal regulations. BSI-certified.
DSFinV-K
Digital fiscal interface for cash register data exports.
Country Cards
Section titled “Country Cards”Display market availability with flag, status badge (live | beta | coming-soon), and description.
Germany(DE)
KassenSichV compliant
Austria(AT)
RKSV compliant
France(FR)
NF525 compliant
Alerts & Callouts
Section titled “Alerts & Callouts”Alert Component
Section titled “Alert Component”The base Alert component with four semantic variants: info, success, warning, error.
This is an info alert using the accent blue color scheme.
This is a success alert using the brand turquoise color scheme.
This is a warning alert using the fiskaly yellow color scheme.
This is an error alert using the fiskaly red color scheme.
Convenience Callouts
Section titled “Convenience Callouts”Semantic aliases that map to Alert variants with default icons: Note (info), Tip (success), Caution (warning), Danger (error).
A note callout for general supplementary information. Supports markdown
and inline code.
A tip callout for best practices and helpful suggestions.
A caution callout for things to watch out for that could cause minor issues.
A danger callout for critical warnings — data loss, security risks, or breaking changes.
Badges
Section titled “Badges”Small inline labels for categorization and status indication. Six variants available.
Buttons
Section titled “Buttons”Buttons come in four variants (primary, secondary, ghost, danger) and three sizes (sm, md, lg). When href is provided they render as anchor tags.
Variants
Section titled “Variants”As Link
Section titled “As Link”Interactive tab panels for presenting alternative content views. Uses the items prop with label and content fields.
curl -X POST https://kassensichv-middleware.fiskaly.com/api/v2/auth \
-H "Content-Type: application/json" \
-d '{"api_key": "test_key", "api_secret": "test_secret"}'Numbered steps with a connecting gradient line for sequential procedures.
Create your organization
Sign up at the fiskaly Dashboard and create your organization. You start in the test environment by default.
Generate API credentials
Navigate to Settings > API Keys and generate your first key pair. Store both values securely.
Initialize your TSS
Create a Technical Security System using the API. This provisions your cloud-based signing unit.
Start signing transactions
Begin signing receipts with your configured TSS. Each transaction returns a cryptographic signature.
Stat Cards
Section titled “Stat Cards”Animated stat counters with scroll-triggered count-up animation. Props: value (string), label, and optional suffix.
Section Headings & Decorative
Section titled “Section Headings & Decorative”Section Heading
Section titled “Section Heading”Consistent section headers with optional badge pill, subtitle, and align (left or center).
Section Heading Example
This component provides consistent section headers with optional badges and subtitles.
Centered Section Heading
The centered variant works well for landing pages and splash sections.
Gradient Text
Section titled “Gradient Text”Text with an animated gradient shimmer using fiskaly brand colors. Supports as prop: span, h1, h2, h3, p.
Gradient Text Effect
fiskaly Dot
Section titled “fiskaly Dot”The animated brand dot with ping effect. The signature element from the fiskaly logo.
Starlight Native Elements
Section titled “Starlight Native Elements”These standard markdown elements are styled by the fiskaly theme CSS.
| Feature | Status | Version |
|---|---|---|
| Transaction Signing | Available | v2.0 |
| DSFinV-K Export | Available | v1.5 |
| Receipt Validation | Beta | v2.1 |
Blockquote
Section titled “Blockquote”“fiskaly provides the simplest cloud-based TSS solution for German fiscal compliance.”
— fiskaly Engineering Team
Unordered List
Section titled “Unordered List”- First item with supporting details
- Second item explaining a concept
- Third item with a nested list:
- Nested item A
- Nested item B
Ordered List
Section titled “Ordered List”- First step in a process
- Second step building on the first
- Third step to complete the flow
Horizontal Rule
Section titled “Horizontal Rule”Content above the rule.
Content below the rule.
Inline Code & Links
Section titled “Inline Code & Links”Use inline code for API parameters like api_key and access_token. Links work as expected: fiskaly Dashboard (external) and back to top (anchor).