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
The only confirmed brand color. Primary CTAs, active accents, focus rings, key stat labels. Use sparingly — one dominant lime element per screen.
Primary Ground • Provisional
Performance Black
#0A0C0F
RGB 10, 12, 15
Source: website hero
Page ground, deep hero sections. The brand's dominant surface — Aris leads dark-first.
Surface • Provisional
Dark Surface
#111418
RGB 17, 20, 24
Source: derived
Cards, panels, nav drawers. One step above the page ground.
Elevated • Provisional
Carbon
#1C2030
RGB 28, 32, 48
Source: derived
Overlays, raised state on cards, dropdown menus.
Primary Text • Provisional
Pure White
#FFFFFF
RGB 255, 255, 255
Display headings, hero copy on dark backgrounds. Maximum contrast.
Body Text • Provisional
Cool White
#D7E0EC
RGB 215, 224, 236
Source: derived
Body copy, descriptions, paragraph text 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 provisional pending Figma.
Borders • Provisional
Smoke
#252A34
RGB 37, 42, 52
Card outlines, table rules, input borders. Never used as a fill for type.
Strong Border • Provisional
Steel
#343B4D
RGB 52, 59, 77
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. Each has a text-weight value and a background tint.
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. The ratio below represents the intended visual weight in a typical product or marketing layout.
42% Black
25% Surface
14%
12%
5%
2%
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. These ensure consistent builds across web and native environments when blending lime or white over dark grounds.
Aris Lime
Performance Black
Pure White
Slate (secondary text)
06 — Typography
Two typefaces in use — one display, one text. Barlow Condensed is the athletic stand-in for display; the confirmed brand font stack is pending Figma. IBM Plex Sans is the portal and UI typeface.
Display — Barlow Condensed (provisional, pending Figma)
Transforming Athletic Potential
font-family: "Barlow Condensed", "IBM Plex Sans", system-ui · weights 600–800 · text-transform: 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: #0A0C0F;
font-family: "IBM Plex Mono", "Cascadia Code", "Consolas", monospace · weights 400–500
Type scale (provisional)
| Role | Size | Weight | Transform | Used for |
|---|
| Display XL | 3.5rem+ | 700–800 | Uppercase | Hero headlines, section banners |
| Display L | 2.4rem | 700 | Uppercase | Page titles, major section heads |
| Display M | 1.6rem | 700 | Uppercase | Card titles in display context |
| Body L | 1.05rem | 400–500 | None | Lead paragraphs, feature descriptions |
| Body M | 0.9rem | 400 | None | Standard body copy |
| Label | 0.7rem | 700 | Uppercase, 0.1em tracking | Section labels, metadata, table headers |
| Mono | 0.82rem | 400–500 | None | Code, hex values, token names |
07 — Voice & copy
Aris speaks with the confidence of a high-performance coach, not a motivational poster. Direct, specific, results-focused. Every word earns its place.
Approved phrases & patterns
Transforming Athletic Potential into Reality
Dominate on game day.
Elevate Your Game.
See Results.
Built for coaches. Designed for outcomes.
Elite performance programs, elite results.
Contact Us • Get Started Today • Learn More
Voice rules
Use performance verbs: Dominate, Execute, Elevate, Build, Drive, Achieve.
Try to improve your performance
→ Elevate your performance.
We offer a variety of programs
→ Elite programs, elite results.
Product reference
| Product | Description | Audience |
|---|
| Aris TrainingElite athletic performance programs |
On-site and remote coaching, personalized programming, accountability systems. Sport-agnostic. |
Athletes at high school, collegiate, and professional levels |
| Aris SuiteAI-powered coaching platform |
Team management, training plan delivery, athlete analytics, communication hub for coaches and programs. |
Coaches, athletic directors, team programs |
| Aris CombineAssessment & positioning service |
Measurable performance benchmarking, combine-style evaluation, recruiting positioning for athletes. |
High school athletes, recruiting pipeline |
Contact
Phone: (805) 380-3337 • Email: info@aristraining.com • 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 | 20:1 | AAA All type sizes |
| Cool White | Performance Black | 15:1 | AAA All type sizes — preferred for body copy |
| Aris Lime | Performance Black | 14.2:1 | AAA All type sizes — labels, links, accents |
| Aris Lime | Dark Surface | 13.2:1 | AAA All type sizes |
| Pure White | Dark Surface | 18.5:1 | AAA Card headlines |
| Performance Black | Aris Lime | 14.2:1 | AAA Primary buttons — always use dark type on lime |
| Slate | Performance Black | 5.6:1 | AA Captions, metadata — minimum 13px |
| Slate | Dark Surface | 5.3:1 | AA Secondary text on cards |
| Ash | Performance Black | 3.1:1 | AA Large 24px+ only — placeholder / disabled |
| Aris Lime | Carbon | 11.4:1 | AAA Table headers, section labels |
| Pure White | Aris Lime | 1.5: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 Today
Dark 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 the display font (Barlow Condensed or Figma-confirmed) in uppercase only for headings.
- Use Cool White (#D7E0EC) for body copy — it reduces eye strain over pure white on dark.
- Confirm Figma-delivered hex values replace all provisional values before production.
Don’t
- Set white type on Aris Lime — it fails WCAG at 1.5:1 at every size.
- Use Aris Lime as a large background fill except for a single accent section per layout.
- Introduce a secondary accent or a warm color without Figma sign-off.
- Use provisionally-derived palette values (#111418, #1C2030, etc.) in production code before Figma confirmation.
- Use the display font in mixed case — it is uppercase-only for display use.
- Apply gradients unless confirmed by the Figma delivery.
11 — CSS token reference
Provisional values. These tokens will be updated when Figma delivers the confirmed palette. Prefix: --ar-
| Token | Value | Status | Role |
|---|
| --ar-lime | #D0DF8D | Confirmed | Aris Lime — primary brand color, CTAs, accents |
| --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 | #0A0C0F | Provisional | Performance Black — primary page ground |
| --ar-dark | #111418 | Provisional | Dark Surface — cards, containers, nav |
| --ar-carbon | #1C2030 | Provisional | Carbon — elevated surfaces, table headers |
| --ar-smoke | #252A34 | Provisional | Smoke — borders, dividers, input outlines |
| --ar-steel | #343B4D | 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 | "Barlow Condensed", sans-serif | Provisional | Display and headline typeface |
| --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
Aris uses a wordmark-only treatment in the portal. The geometric mark below is the ArcGrid favicon used as a placeholder. Full logo assets (wordmark SVG, icon mark, lockup variants) to be delivered with Figma.
Wordmark — current portal treatment
Aris.
White wordmark with lime dot
Nav, dark backgrounds
Aris.
Same on card surface
Dark Surface backgrounds
Aris.
Black wordmark on lime
Lime accent panels
13 — Component conventions
- NavigationSticky dark bar (Performance Black with blur), wordmark left, action links right. No background shift on scroll — stays pitch.
- Hero sectionsFull-bleed Performance Black, display font in uppercase white, one lime CTA. No competing accent colors in the same section.
- Primary buttonAris Lime fill, Performance Black type, 6px radius. Never white type on lime. Uppercase, 0.1em tracking, semibold minimum.
- Secondary buttonLime outline, lime type on dark bg. Always subordinate to a primary on the same screen. Reduce visual weight with thinner border (1.5px).
- CardsDark Surface background, Smoke border, 10px radius, subtle shadow. Hover: Steel border, no color shift. 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 conversion moment.
- FormsDark Surface background, Smoke input borders, 8px radius. Focus: lime border ring. Error: red border + error-dim background tint.
- Table headersCarbon background, lime label type at 12px bold uppercase. Alternate rows: rgba(255,255,255,0.02) for subtle separation.
- 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. Four columns max, simple column layout — no decorative borders or gradients.
14 — Known deviations & pending items
Full palette pending Figma
Only one color (#D0DF8D) is confirmed from the logo SVG. All structural and neutral palette values in this document are provisional, derived from visual inspection of aristraining.com. Replace every provisional value with Figma-confirmed hex values before any production build. Current portal CSS uses placeholder teal (#4FD6BE) that will be replaced on Figma delivery.
Typography pending Figma
Barlow Condensed is an athletic stand-in for the display typeface. The live aristraining.com site uses a proprietary or licensed font stack that could not be extracted. IBM Plex Sans is the confirmed portal font and appropriate for all UI and body copy. Confirm display font, weights, and fallback stack with Figma delivery before implementing on any client-facing page.
Logo assets pending Figma
No production-ready logo files exist yet. The wordmark treatment in the portal (
Aris. in IBM Plex Sans) is a typographic placeholder. The ArcGrid favicon.svg is a service-provider icon, not an Aris brand mark. Figma delivery should include: wordmark SVG (white, black, lime variants), icon mark if applicable, and clear-space rules.
CMYK / print values not available
Only RGB/hex values are documented here. No CMYK or Pantone equivalents are confirmed. If Aris produces apparel, print collateral, or event signage, CMYK builds must be confirmed by the Figma designer before any production run. Dark athletic colors can shift significantly across stock types.