The Mobile Starter Kit Design System

Every color, type ramp, button, card, form, and spacing step the kit uses — documented in one place. A single chromatic accent (a deep Forest Green) appears only as the small dot beside category labels; everything else is an ink-to-stone gray ladder. Each value below is a CSS variable in app/styles/app.css, so rebranding the whole kit means editing one file.

Color Palette

A single chromatic accent — Forest Green — surrounded by a long ink-to-stone gray ladder. The system operates in two surface modes: white commercial canvas and near-black tactical canvas.

Brand & Accent

Accent Orange

#f97316

The brand's only chromatic action color — accents, highlights, category-marker dots, and the active state.

Ink

#1e2124

Primary text + button background + dark-mode canvas. One hex for ink and surface-dark.

Ink Soft

#1e1f2b

Quarter-step warmer than Ink. Atmospheric headings, dark product UI emphasis.

Surface

Canvas

#FFFFFF

Default page background — commercial marketing pages.

Canvas Soft

#f7f7f7

Alternating-band surface — filter pills, testimonial cards, light split-CTA tile.

Surface Dark

#1e2124

Near-black canvas — app sidebar, dark CTA tile, partner logo strip.

Hairline

#aaaaaa

1px dividers between feed rows, indexed list separators, outlined-button borders.

Hairline Soft

#ececec

Faint section separators on white surfaces.

Text

Ink

#1e2124

Primary headlines, body, button labels.

Graphite

#767676

Muted body, footer columns, secondary metadata.

Silver

#aaaaaa

Atmospheric hero type — the signature "fading-into-the-page" gray.

Semantic

Error

#ff4136

Validation and destructive actions — product UI only, never marketing.

Typography Scale

Alliance No.2 (rendered here as Inter) for display, Alliance No.1 for UI/body. Letter-spacing crashes negative as size grows — at 80px it's −3.4px, at 180px it's −10px (~5–6% of size). The atmospheric Silver color is the brand voice for hero declarations.

display-marqueeAlliance · 96 / 400 / 1 · -5px
Marquee text inside dark featured-product cards (180px on real site)

SYSTEMS MIGRATION

display-xlAlliance · 80 / 400 / 0.97 · -3.4px
Hero declaration headline

Software powers real-time decisions.

display-lgAlliance · 50 / 400 / 1 · -1px
Major section headers

Operating System for Decisions

display-mdAlliance · 68 / 400 / 1.2 · -2.72px
Sub-hero, manifesto headline

We build with consequence.

display-smAlliance · 48 / 400 / 1.33 · -2px
Section sub-headers

Discover the mission-tested solutions.

heading-lgAlliance · 34 / 400 / 1.06 · -1.7px
Featured product card headline

Accelerate Enterprise Data Migration

heading-mdAlliance · 26 / 400 / 1.08 · -0.26px
Feed-row headline, manifesto paragraph

Build and manage Ontology-powered software.

heading-smAlliance · 20 / 400 / 1.1 · 0
Card title, dialog header

Continuous Security & Compliance

body-lgAlliance · 18 / 400 / 1.39 · 0
Indexed list item, prominent body

Automate operations, from the factory floor to the front lines.

body-mdAlliance · 16 / 400 / 1.43 · 0
Default body, nav links

Auth, billing, and AI features — every screen designed and ready to wire.

body-smAlliance · 14 / 400 / 1.4 · 0
Secondary body, metadata

From aircraft to watercraft, the second cohort represents America's most forward-thinking innovators.

body-boldAlliance · 16 / 700 / 1.3 · 0
Emphasized body

Status-quo must change.

button-lgAlliance · 30 / 400 / 1.2 · 0
The signature large CTA arrow tab

Request a Demo →

button-mdAlliance · 16 / 600 / 1.43 · 0.162px
Primary button label

caption-monoAlliance · 10 / 400 / 1.6 · 0.5px
Footer micro-copy, mono captions

/0001 · BUILT FOR DECISION-MAKING

caption-ucAlliance · 12 / 400 / 1.2 · -0.26px
Topic tag pill labels (uppercase)

Warp Speed for Warships

index-decimalAlliance · 14 / 400 / 1.4 · 0
Decimal index numerals

/0.1 · /0.2 · /0.3 · /0.4 · /0.5

Button Variants

The Ink-on-canvas primary button is the workhorse. The split-band arrow tabs are the brand's signature page-end CTA. Every other variant supports either a quieter secondary action or an overlay role.

Primary

bg Ink · text white · 4px · 48px

Outlined Light

canvas · 1px hairline · 4px · 40px

Outlined Dark

transparent · translucent border

Overlay (on photography)

scrim · 8px 32px · 36px

Text Link

transparent · ink · underline

Icon Circular (back arrow)

40px circular · 1px hairline

Filter Pill Row

canvas-soft · 4px · 32px · active = canvas + hairline

Topic Tag Pills

Warp Speed for WarshipsAI in Business PodcastPress Release

canvas · 1px hairline · pill · 28px · uppercase

GitHub Pill

github / veridir

canvas · 60px radius · 36px

Signature Closing CTA — Split Band

canvas-soft + ink · rigid 50/50 · 96px height · button-lg type · the page-end signature

Cards & Containers

Cards lean on background contrast for elevation. The testimonial card uses a clipped top-right corner; the indexed list row is the brand's most distinctive editorial signature.

Ship your SaaS this weekend, not this quarter.

Every screen designed. Every integration documented.

Partner Logo Strip — Dark

Works with your stack

BRANDBRANDBRANDBRANDBRANDBRAND

Manifesto Paragraph (italic emphasis)

Most starter kits hand you wiring and call it a product. We didn't. Every screen here is real, every integration point is documented, and your AI agent can finish the job. Less boilerplate. More shipping.

Roles Sidebar (`Owners 01`, `Admins 02`, `Members 03`)

Owners01

Admins02

Members03

Form Elements

Inputs at 48px height with 4px corners and a 1px hairline border. Focus replaces the border with a 2px Ink outline. Field labels are mono, uppercase, with letter-spacing.

Email Address

Password (Focused)

Notes

Spacing Scale

Base 8px with parallel sub-scales at 5px and 10px for micro-tuning. Section vertical rhythm uses 72px (same canvas) or 105px (canvas color shifts).

xxs

4px

8px

12px

15px

base

20px

24px

30px

xxl

42px

section-sm

72px

section-md

105px

section-lg

160px

Border Radius Scale

Narrow vocabulary — most surfaces use 2–4px, barely-rounded rectangles. The 60px pill on the GitHub footer link is the only soft shape.

xxs

2px — Featured / marquee / testimonial cards

3px — Tab panels, dropdowns

4px — Buttons, inputs, filter pills (workhorse)

6px — Image frames, large content tiles

pill

60px — GitHub footer pill (only)

full

circle — True circle — topic tags, category-marker dot

Elevation & Depth

Almost all elevation is background contrast plus 1px hairline dividers. The single drop-shadow level is reserved for floating product UI mockups.

Level 0

Flat — default canvas page floor.

Level 1

1px hairline divider rule.

Level 2

2px hairline outlined frame.

Level 3

Background contrast — canvas-soft on canvas.

Level 4

Background contrast — surface-dark on canvas.

Level 5

Soft drop shadow — floating product UI mockups only.

Responsive Behavior

A wide breakpoint range (27 tiers extracted) suggests a fluid grid with frequent micro-tuning rather than a strict mobile/tablet/desktop tier system.

Name	Width	Key Changes
Mobile	< 640px	Top nav collapses to chevron + hamburger + sign-in pill. Indexed list rows stack the headline above the decimal index. Filter pill carousel becomes horizontally scrollable. Closing 50/50 CTA stacks vertically.
Tablet	640–960px	Nav remains horizontal but utility links collapse. Featured product carousel reduces to 2-up. Manifesto paragraph reduces from 105px section padding to 72px.
Laptop	960–1200px	Full nav, 3-up feed grid. Hero display-xl may step down to display-lg.
Desktop	1200–1500px	Full nav, 4-up feed grid, side-by-side closing CTA at full 50/50.
Wide	≥ 1500px	Container caps at ~1480px; extra space becomes outer margin. Marquee 180px renders here only.

Phone

375px

Phone L

414px

Tablet

768px

Laptop

1024px

Desktop

1500px+

Touch Targets

Primary button is 48px tall — meets WCAG AAA.
Outlined buttons are 40px — fall just below AAA, paired with 12px gaps.
Filter pills at 32px height fall below AAA on touch — boost to 40px on mobile.
Arrow-tab CTAs at 96px height are comfortably oversized — designed as destination elements.

Collapsing Strategy

Nav: full horizontal nav → chevron + hamburger + sign-in pill on mobile.
Hero declaration: display-marquee 180px → display-xl 80px → display-lg 50px as viewport narrows.
Indexed list: headline + decimal index sit on one row at desktop; on mobile the headline wraps and the decimal index drops below it.
Featured product carousel: 4-up → 3-up → 2-up → horizontal-scroll-1-up.
Closing CTA split: 50/50 side-by-side on desktop, stacked vertically on mobile.
Manifesto paragraph: padding reduces from 105px → 72px → 24px at mobile widths.