Work in progress. The Aris logo SVG confirms one brand color: #D0DF8D (Aris Lime). All other palette values below are provisional, derived from the live site and marked accordingly. Final hex values, typography, and CMYK builds will be confirmed on Figma delivery. Do not use provisional values in production until Figma is approved.
01 - Core brand colors
One color is confirmed from the logo SVG. The structural palette is derived from the website and marked provisional. Figma delivery will replace these with authoritative values.
Primary Brand • Confirmed
Aris Lime
#D0DF8D
RGB 208, 223, 141
Source: logo SVG
Source: logo SVG
The only confirmed brand color. Primary CTAs, active accents, focus rings, key stat labels, section eyebrows. Use sparingly - one dominant lime element per screen.
Primary Ground • Provisional
Performance Black
#080808
RGB 8, 8, 8
Source: website screenshots
Source: website screenshots
Page ground, hero sections. Near-true black confirmed from live site. The brand's dominant surface - Aris leads dark-first.
Surface • Provisional
Dark Surface
#111111
RGB 17, 17, 17
Source: derived from screenshots
Source: derived from screenshots
Cards, panels, feature sections. Subtle lift over Performance Black - intentionally barely visible.
Elevated • Provisional
Carbon
#181818
RGB 24, 24, 24
Source: derived
Source: derived
Overlays, raised state on cards, dropdown menus, table headers.
Primary Text • Provisional
Pure White
#FFFFFF
RGB 255, 255, 255
Display headings, hero copy on dark. Maximum contrast on Performance Black.
Body Text • Provisional
Cool White
#D7E0EC
RGB 215, 224, 236
Source: derived
Source: derived
Body copy, descriptions, paragraphs on dark. Slightly cooler than pure white to reduce eye strain.
02 - Structural & neutral colors
Supporting tones that define borders, secondary labels, and quiet structure. All neutral - no blue shift. All provisional pending Figma.
Borders • Provisional
Smoke
#1F1F1F
RGB 31, 31, 31
Card outlines, table rules, input borders. Neutral grey - never used as a fill for type.
Strong Border • Provisional
Steel
#2A2A2A
RGB 42, 42, 42
Emphasized dividers, selected-state outlines, focus indicators.
Secondary Text • Provisional
Slate
#7B8899
RGB 123, 136, 153
Captions, metadata, secondary labels, timestamps. 5.6:1 on Performance Black - AA compliant.
Dim Text • Provisional
Ash
#4A5568
RGB 74, 85, 104
Placeholder text, disabled states, tertiary labels. Not for meaningful content.
03 - Function & UX colors
Screen only. These are standard UX status colors, not brand colors. They never appear in print, apparel, or marketing creative.
Success
Turf Green
#3FB950
Tint: rgba(63,185,80,0.12)
Confirmed, active, complete. 6.2:1 on Performance Black.
Error
Alert Red
#E84040
Tint: rgba(232,64,64,0.12)
Form errors, failed actions, blocking states.
Warning
Amber
#F5A623
Tint: rgba(245,166,35,0.12)
Cautions, pending states, informational alerts.
Info
Signal Blue
#3B82F6
Tint: rgba(59,130,246,0.12)
Help text, informational banners, guidance copy.
Training block completed. Performance logged.
Assessment incomplete. Return to finish form.
Pending coach review before submission.
Aris Suite syncs automatically every 24 hours.
04 - Color ratio
Dark-first brand. Performance Black dominates; Aris Lime is reserved for the one moment that matters per screen.
Dark Surface - cards, containers
Carbon - overlays, table headers
Cool White - body copy
Aris Lime - one moment per screen
05 - Approved tints
Use fixed opacity steps rather than custom tints for consistent builds across web and native environments.
Aris Lime
5%
10%
25%
50%
100%
Performance Black
15%
30%
50%
75%
100%
Pure White
4%
8%
20%
50%
100%
Slate (secondary text)
10%
20%
40%
70%
100%
06 - Typography
Two typefaces in use - one display, one text. The display font is a wide geometric bold sans-serif visible on the live site in mixed case (not condensed, not forced uppercase). Inter Black is the closest open-source approximation; the licensed font is pending Figma. IBM Plex Sans is the portal and UI typeface.
Display - Inter Black (provisional approximation, pending Figma)
Unlock your athletic breakthrough.
font-family: "Inter", "IBM Plex Sans", system-ui · weight 900 · mixed case · letter-spacing −0.01em · not condensed, not forced uppercase
Body - IBM Plex Sans (portal standard)
Aris develops elite athletes through evidence-based programming, coach-led accountability, and a performance platform built for teams at every level. Our systems turn potential into outcomes, consistently.
font-family: "IBM Plex Sans", -apple-system, "Segoe UI", system-ui · weights 400–700
Monospace - IBM Plex Mono (code & technical labels)
--ar-lime: #D0DF8D; --ar-pitch: #080808;
font-family: "IBM Plex Mono", "Cascadia Code", "Consolas", monospace · weights 400–500
Type scale (provisional)
| Role | Size | Weight | Case | Used for |
|---|---|---|---|---|
| Display XL | 3.5rem+ | 900 | Mixed | Hero headlines, section banners |
| Display L | 2.4rem | 900 | Mixed | Page titles, major section heads |
| Display M | 1.6rem | 700–900 | Mixed | Card titles in display context |
| Eyebrow | 0.7rem | 700 | UPPERCASE | Section labels in Aris Lime (e.g. "ELITE TRAINING SYSTEMS") |
| Body L | 1.05rem | 400–500 | Mixed | Lead paragraphs, feature descriptions |
| Body M | 0.9rem | 400 | Mixed | Standard body copy |
| Mono | 0.82rem | 400–500 | Mixed | Code, hex values, token names |
07 - Voice & copy
Aris speaks with the confidence of a high-performance coach. Direct, specific, results-focused. Every word earns its place.
Hero & section headlines
Transforming Athletic Potential into Reality
Unlock your athletic breakthrough.
Dominate on game day.
Elevate. Sprint. Rip Beyond Your Best.
Explode off the Line. Land with Power. Cut with Control.
Soar Above the Competition.
Outpace. Outrun. All Day.
Stop guessing. Start gaining.
Made for those who train with intent.
Small Footprint. Full Power.
Be your best by game day.
Unlock your athletic breakthrough.
Dominate on game day.
Elevate. Sprint. Rip Beyond Your Best.
Explode off the Line. Land with Power. Cut with Control.
Soar Above the Competition.
Outpace. Outrun. All Day.
Stop guessing. Start gaining.
Made for those who train with intent.
Small Footprint. Full Power.
Be your best by game day.
Feature copy patterns
Run faster. Move quicker. Jump higher.
From peak speed to rep speed, track data that make smarter training decisions.
Precise motion-controlled resistance that captures every second, every rep - with unmatched accuracy.
Smart programming tailored to your goals, sport, timeline, and performance data.
Empower athletes with advanced training, testing, and programs.
Provide exclusive access to ArisPro in your gym and training programs.
From peak speed to rep speed, track data that make smarter training decisions.
Precise motion-controlled resistance that captures every second, every rep - with unmatched accuracy.
Smart programming tailored to your goals, sport, timeline, and performance data.
Empower athletes with advanced training, testing, and programs.
Provide exclusive access to ArisPro in your gym and training programs.
Section eyebrow pattern
Short uppercase phrase before every major section, rendered in Aris Lime:
ELITE TRAINING SYSTEMS
JOIN THE FUTURE OF TRAINING
SUPPORTING COACHES
SUPPORTING FACILITIES
BY ATHLETES, FOR ATHLETES
Always brief (2–4 words), always uppercase, always lime.
ELITE TRAINING SYSTEMS
JOIN THE FUTURE OF TRAINING
SUPPORTING COACHES
SUPPORTING FACILITIES
BY ATHLETES, FOR ATHLETES
Always brief (2–4 words), always uppercase, always lime.
Voice rules
Use performance verbs: Dominate, Execute, Elevate, Explode, Soar, Outpace.
Try to improve your performance
→ Unlock your athletic breakthrough.
We offer a variety of programs
→ Made for those who train with intent.
CTAs: "Request a Quote →" • "Schedule a Demo →" • "Join the Waitlist →"
Try to improve your performance
→ Unlock your athletic breakthrough.
We offer a variety of programs
→ Made for those who train with intent.
CTAs: "Request a Quote →" • "Schedule a Demo →" • "Join the Waitlist →"
Product reference
| Product | Description | Audience |
|---|---|---|
| ArisProPhysical resistance training machine | Velocity-based training with digital resistance. Captures every rep in real time. Ecosystem: Aris App, Flex Mode, Coach Sync, Aris Intel. "Elevate. Sprint. Rip Beyond Your Best." | Athletes, performance coaches, gym facilities |
| ArisFlightVertical jump & plyometric system | "Soar Above the Competition." Jump-specific training targeting elastic and reactive power for sport transfer. | Athletes focused on vertical performance |
| ArisSpeedSprint & acceleration system | "Outpace. Outrun. All Day." Horizontal speed and acceleration development. Waitlist product. | Speed-position athletes, sprinters |
| ArisSuiteCoaching & team platform | Software platform for coaches and programs - team management, athlete analytics, training plan delivery, communication hub. | Coaches, athletic directors, team programs |
| Aris CombineAssessment & positioning service | Combine-style evaluation and recruiting positioning. Measurable performance benchmarking. | High school athletes, recruiting pipeline |
Nav order on aristraining.com: ArisPro • ArisFlight • ArisSpeed • ArisSuite • Locations • Account
Contact
Phone: (805) 380-3337 • Email: [email protected] • Location: California Valley
08 - Accessibility: approved text pairings
WCAG 2.1 contrast ratios. AA requires 4.5:1 for body copy, 3:1 for 24px or larger. All athlete-facing content must clear AA.
| Text | Background | Ratio | Approved for |
|---|---|---|---|
| Pure White | Performance Black | 21:1 | AAA All type sizes |
| Cool White | Performance Black | 15.5:1 | AAA All type sizes - preferred for body copy |
| Aris Lime | Performance Black | 14.5:1 | AAA All type sizes - labels, links, accents |
| Aris Lime | Dark Surface | 13.5:1 | AAA All type sizes |
| Pure White | Dark Surface | 19.4:1 | AAA Card headlines |
| Performance Black | Aris Lime | 14.5:1 | AAA Primary buttons - always use dark type on lime |
| Slate | Performance Black | 5.8:1 | AA Captions, metadata - minimum 13px |
| Ash | Performance Black | 3.2:1 | AA Large 24px+ only - placeholder / disabled |
| Pure White | Aris Lime | 1.4:1 | Fails Never use white on Aris Lime |
09 - Application examples
Button hierarchy: lime drives primary action, outlined secondary is always subordinate. Never two filled buttons side-by-side at equal weight.
Primary action
Get Started TodaySecondary
Learn MoreTertiary / nav
Contact UsDark section
Performance Black ground, white display headline, Cool White body copy. Cards sit one step lighter on Dark Surface.
Elite performance programs built for the athlete who refuses to settle.
Lime callout
Reserve lime panels for single high-impact moments per page. Always use Performance Black type - never white on lime.
Dominate on game day. The platform coaches rely on.
10 - Rules
Applies to web, app UI, print collateral, and Aris Suite interface elements.
Do
- Lead with dark. Performance Black is the default surface for all hero and marketing sections.
- Keep Aris Lime to one dominant element per screen - the one thing to click or read.
- Set any type on Aris Lime in Performance Black. Never white on lime.
- Use section eyebrows: short uppercase phrase in lime before every major section.
- Use Cool White (#D7E0EC) for body copy - it reduces eye strain over pure white on black.
- Confirm Figma-delivered hex values replace all provisional values before production.
Don’t
- Set white type on Aris Lime - it fails WCAG at 1.4:1 at every size.
- Use Aris Lime as a large background fill except for a single accent section per layout.
- Force the display font into all-caps - the live site uses mixed case.
- Introduce a secondary accent or a warm color without Figma sign-off.
- Use provisionally-derived palette values in production code before Figma confirmation.
- Apply gradients or coloured shadows unless confirmed by the Figma delivery.
11 - CSS token reference
Provisional values. Updated when Figma delivers the confirmed palette. Prefix: --ar-
| Token | Value | Status | Role |
|---|---|---|---|
| --ar-lime | #D0DF8D | Confirmed | Aris Lime - primary brand color, CTAs, accents, eyebrows |
| --ar-lime-dark | #9AAE42 | Provisional | Lime hover state, interactive press |
| --ar-lime-dim | rgba(208,223,141,0.10) | Provisional | Lime tint - active backgrounds, selected states |
| --ar-pitch | #080808 | Provisional | Performance Black - primary page ground, confirmed near-true black from live site |
| --ar-dark | #111111 | Provisional | Dark Surface - cards, containers, feature sections |
| --ar-carbon | #181818 | Provisional | Carbon - elevated surfaces, table headers |
| --ar-smoke | #1F1F1F | Provisional | Smoke - borders, dividers, input outlines. Neutral, no blue shift. |
| --ar-steel | #2A2A2A | Provisional | Steel - strong borders, focus indicators |
| --ar-white | #FFFFFF | Provisional | Pure White - display headlines on dark |
| --ar-off-white | #D7E0EC | Provisional | Cool White - body copy on dark grounds |
| --ar-slate | #7B8899 | Provisional | Slate - secondary text, captions, metadata |
| --ar-ash | #4A5568 | Provisional | Ash - disabled states, placeholder text |
| --ar-success / --ar-success-dim | #3FB950 / rgba(63,185,80,0.12) | Standard | Turf Green - confirmed, active states |
| --ar-error / --ar-error-dim | #E84040 / rgba(232,64,64,0.12) | Standard | Alert Red - errors, blocking states |
| --ar-warn / --ar-warn-dim | #F5A623 / rgba(245,166,35,0.12) | Standard | Amber - cautions, pending states |
| --font-display | "Inter" (900), sans-serif | Provisional | Display/headline - Inter Black is the closest open approximation; licensed font pending Figma |
| --font-body | "IBM Plex Sans", system-ui | Portal standard | Body, UI, and form typeface |
| --font-mono | "IBM Plex Mono", monospace | Portal standard | Code, hex values, technical labels |
12 - Logo set
The Aris identity system includes three components: the icon mark (geometric lightning-bolt "A"), the horizontal wordmark (icon + "ARIS" text inline), and the stacked lockup (large icon above smaller wordmark). Each is available in approved colorways shown below.
Icon mark
Lime on Performance Black
Primary dark-bg use
Lime on Dark Surface
Card and panel use
Black on Aris Lime
Lime CTA panels only
Horizontal wordmark
Lime icon + white text - dark backgrounds (primary)
Lime icon + black text - light backgrounds
All black - single-color print, emboss, co-brand on white
All white - single-color use on dark backgrounds
Stacked lockup
Use the stacked lockup where vertical space allows and horizontal space is constrained: square social avatars, app icons, merchandise.
Lime mark on dark
Primary dark-bg lockup
Lime mark on white
Print, light backgrounds
All black
Single-color print
Do
- Maintain the lime icon with the wordmark in all standard applications.
- Use the all-white version on dark backgrounds when lime is not available.
- Keep clear space equal to the cap-height of the "A" on all four sides.
- Scale uniformly, never stretch or compress either axis.
Don't
- Recolor the icon mark to any color other than lime, white, or black.
- Place the lime wordmark on a lime background (use the black version instead).
- Use the icon mark at sizes below 16px rendered width.
- Add drop shadows, outlines, or effects to any logo element.
13 - Component conventions
- NavigationSticky dark bar (Performance Black with blur), wordmark left, action links right. No background shift on scroll - stays pitch. Nav order: ArisPro, ArisFlight, ArisSpeed, ArisSuite, Locations, Account.
- Hero sectionsFull-bleed Performance Black, display font in mixed-case white at weight 900, one lime CTA with arrow. Section eyebrow in lime uppercase above every major section.
- Primary buttonAris Lime fill, Performance Black type, 0px radius (square corners). Never white type on lime. Includes arrow suffix: "Request a Quote →". Uppercase, 0.1em tracking, semibold minimum.
- Secondary buttonLime outline, lime type on dark bg. Always subordinate to a primary on the same screen.
- CardsDark Surface background (#111111), Smoke border (#1F1F1F), 10px radius. Hover: Steel border. Grid: auto-fill, 260px min column.
- Section rhythm64px vertical padding. Dark-first: alternate Performance Black and Dark Surface. Reserve one lime-accent band per page for the conversion moment.
- FormsDark Surface background, Smoke input borders, 8px radius. Focus: lime border ring. Error: red border + error-dim background tint.
- Table headersCarbon (#181818) background, lime label type at 12px bold uppercase.
- Tags & pillsSmall labels (uppercase, 0.08em tracking): lime-dim background + lime type for primary tags; smoke + slate for neutral.
- FooterPerformance Black, Cool White text, lime for any link. Three columns (Platform / Support / Legal) + social row (Instagram, TikTok, YouTube). Lightning-bolt "A" icon mark in lime at footer base.
14 - Spacing & layout
4px base unit. All spacing values are multiples of 4. Padding and margin tokens follow an 8-step scale; component internals use the tighter steps.
Spacing scale
--space-14pxIcon gap, tight label spacing
--space-28pxInput padding, tag internal
--space-312pxButton vertical padding, small card gap
--space-416pxCard internal padding, list item gap
--space-624pxMobile page gutter, section header gap
--space-832pxLarge card padding, between-card spacing
--space-1040pxMobile section vertical padding
--space-1248pxDesktop inner section padding
--space-1664pxDesktop section vertical padding (primary rhythm unit)
--space-2496pxHero vertical padding, full-bleed sections
Container widths
Column layouts
24px gutter (mobile) / 40px gutter (desktop)
Col 1 of 1
Single column - hero text, forms, narrow content
Col 1
Col 2
Two column - feature splits, machine + copy, stat pairs
1
2
3
Three column - product cards (ArisPro / ArisFlight / ArisSpeed), feature icons
Col 1 (2fr)
Col 2 (1fr)
Asymmetric 2:1 - hero copy left / machine right, or stat block left / CTA right
Section vertical rhythm
Marketing pages alternate Performance Black and Dark Surface sections. Each section gets 64px vertical padding on desktop, 40px on mobile. Never stack two Performance Black sections without a Dark Surface band or separator between them.
Hero - Performance Black
64px top / 64px bottom64px section gap
Feature band - Dark Surface
64px top / 64px bottom64px section gap
CTA band - Aris Lime (one per page)
48px top / 48px bottom64px section gap
Product grid - Dark Surface
64px top / 64px bottom15 - Iconography
Outline style, 2px stroke, rounded caps and joins, 24px base size. Source from Phosphor Icons (regular weight) or Heroicons (outline). Never mix filled icons from one library with outline icons from another in the same layout. Icons inherit text color - off-white for body context, lime for active or highlighted context.
Icon set - navigation & UI
Icon sizes
At 32px+ reduce stroke-width to 1.5. At 12px increase to 2.5 to maintain legibility.
Icon color usage
Do
- Use Phosphor Icons (Regular) or Heroicons (Outline) as the primary library.
- Keep stroke-width at 2px for 16-24px sizes, 1.5px for 32px+.
- Pair every icon with a visible text label in navigation and feature lists.
- Scale proportionally - always use the same aspect-ratio viewport (24x24).
Don’t
- Mix filled and outline icons in the same component or section.
- Use decorative or illustrated icons - stick to the functional outline style.
- Use icons smaller than 12px or larger than 48px without Figma sign-off.
- Apply multiple colors to a single icon instance - one color per icon.