Foundation
Core tokens, typography, and the signature Across Wing pattern. Use these primitives as the base for all components across the suite.
Design Tokens
CSS custom properties that define the visual language of the Across suite. All colors, spacing values, and typography are exposed as tokens for consistent theming.
Colors
Brand Neutrals
Primary background and surface colors defining the Across aesthetic.
Neutral Scale
A comprehensive scale for borders, text, and surfaces. Bridges the gap between Platinum (200) and Obsidian (950).
App Accents
Core application colors. Use the base variable (e.g., --look) for automatic theme switching.
Use specific tints (Light/Dark) when you need a fixed shade regardless of theme.
Look (Blue)
Work (Green)
Share (Orange)
Parent (Teal)
Spacing Scale (8px Grid)
Typography
Plus Jakarta Sans serves as the primary typeface, offering excellent legibility at all sizes. The type scale uses REM units for responsive scaling.
The Across Wing
The defining interaction pattern of the Across suite. On hover, elements transform from a subtle static state to an asymmetric "flight" configuration with a racing bar animation and left-side glow.
How it works
Static state: border-radius: 4px 4px 32px 4px — subtle bottom-right curve
Flight state: border-radius: 4px 32px 32px 4px — asymmetric right-side curve
Racing bar: ::before pseudo-element with scaleX() transform
Glow: Left-side box-shadow using --wing-glow
<div class="across-wing">
Content here
</div>
<!-- With accent variant -->
<div class="across-wing across-wing--work">
Work Across themed
</div>Layout Grid
A 12-column CSS Grid utility system based on the 8px Swiss Grid.
Use .across-grid as the container and .col-span-N to size children.
<div class="across-grid">
<div class="col-span-12">Full width</div>
<div class="col-span-6">Half width</div>
<div class="col-span-6">Half width</div>
<div class="col-span-4">Third width</div>
</div>Aspect Ratio
Utilities to control the aspect ratio of images, videos, or containers.
<img src="..." class="aspect-video">
<div class="aspect-square">...</div>Separator
A simple hairline divider for separating content sections.
<hr class="across-separator">
<!-- Or vertical -->
<div class="across-separator--vertical"></div>Scroll Area
A utility for custom, cross-browser styled scrollbars.
Scroll me to see the custom bar.
The scrollbar is thin and styled to match the theme border colors.
It supports both light and dark modes automatically.
End of content.
<div class="across-scroll-area" style="height: 200px;">
<!-- Content -->
</div>