---
title: "Textla design system"
variant: extended
source: https://www.textla.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/textla-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Textla · Design System

> Bright, bold messaging with a hand-drawn frontier spirit

**Theme:** light · **Industry:** saas · **Source:** https://www.textla.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Textla pairs a vivid yellow-green palette with oversized condensed headlines and playful frontier illustrations. Its long SaaS homepage alternates product features, customer proof, editorial stories, and a high-contrast conversion close.

## North star

Use warm cream, forest-green structure, condensed display type, and playful hand-drawn product scenes to make every section feel bold but approachable.

## Overview

The page is anchored by a warm cream canvas (#fefde6), with deep forest green (#10380b) carrying nearly all text, outlines, and key interface structure. Broad pale yellow-green bands (#f2ee98) group product education, while saturated yellow (#fce519) marks editorial content and testimonial moments; muted sage (#dbe8ac) softens the footer and support pledge. Headlines use National 2 Condensed in heavy, tightly stacked forms, with bright green emphasis visible in the hero and section titles. RethinkSans handles navigation and explanatory copy. A broad, comfortable layout pairs left-aligned text with large illustrated product scenes, then shifts into split feature panels and three-column article cards. Hand-drawn desert motifs give the software interface a distinctive personality. Rounded pill actions, large-radius cards, dark outlines, and occasional offset media shadows keep the page tactile without relying on gradients or diffuse shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Desert Pine | `#10380b` | `--color-desert-pine` | brand | Primary text, headlines, outlines, navigation, dark conversion band, and filled CTA background. |
| Agave Cream | `#f2ee98` | `--color-agave-cream` | surface | Broad product-feature section backgrounds and pale article-link surfaces. |
| Warm Canvas | `#fefde6` | `--color-warm-canvas` | neutral | Main page canvas, light interface panels, input background, and text on dark green. |
| Signal Sun | `#fce519` | `--color-signal-sun` | accent | Primary hero CTA, testimonial panel, news band, and selected high-attention highlights. |
| Sage Mist | `#dbe8ac` | `--color-sage-mist` | surface | Footer and support surfaces, plus selected cards and supporting accents. |
| Trail Green | `#30be60` | `--color-trail-green` | semantic | Bright-green headline emphasis; also appears in product-interface status details and illustration elements. |

### Semantic aliases

`--color-canvas` → `#fefde6` (Warm Canvas) · `--color-surface` → `#f2ee98` (Agave Cream) · `--color-surface-2` → `#10380b` (Desert Pine) · `--color-surface-3` → `#dbe8ac` (Sage Mist) · `--color-text` → `#10380b` (Desert Pine) · `--color-border` → `#10380b` (Desert Pine) · `--color-accent` → `#10380b` (Desert Pine) · `--color-accent-2` → `#fce519` (Signal Sun) · `--color-accent-3` → `#dbe8ac` (Sage Mist) · `--color-on-accent` → `#fefde6` (Warm Canvas)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#10380b` | `#fefde6` | 12.81:1 | AAA |
| `#10380b` | `#f2ee98` | 10.96:1 | AAA |
| `#10380b` | `#dbe8ac` | 10.14:1 | AAA |
| `#10380b` | `#fefde6` | 12.81:1 | AAA |
| `#10380b` | `#f2ee98` | 10.96:1 | AAA |
| `#10380b` | `#dbe8ac` | 10.14:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| RethinkSans | `--font-body` | webfont | 600, 800 | Navigation, body copy, labels, and explanatory text. | DM Sans |
| National 2 Condensed | `--font-display` | webfont | 700, 800, 600 | Display headlines, section headings, and prominent CTA labels. | Barlow Condensed |

- **RethinkSans:** Use semibold weights for legibility; sentence case and compact supporting copy keep the bold display type in focus.
- **National 2 Condensed:** Use heavy condensed weights with tight, stacked line rhythm; emphasize select words in bright green or yellow.

### Type scale — Perfect Fifth (ratio ≈ 1.552, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 180px | 600 | 0.8 | 0 | — | National 2 Condensed | Oversized hero and campaign headline emphasis. |
| h1 | 156px | 600 | 0.8 | 0 | — | National 2 Condensed | Primary hero message and major conversion heading. |
| h2 | 104px | 700 | 1.13 | 0 | — | National 2 Condensed | Large feature-section and editorial headings. |
| h3 | 86.5px | 700 | 0.8 | 0 | — | National 2 Condensed | Feature titles and card or testimonial headings. |
| h4 | 64px | 700 | 1.13 | 0 | — | National 2 Condensed | Secondary feature and content-block headings. |
| body | 20px | 600 | 1.5 | 0 | — | RethinkSans | Supporting product explanations and customer-facing copy. |
| caption | 16px | 600 | 1.5 | 0 | — | RethinkSans | Small labels, article details, and illustration annotations. |
| nav | 18px | 600 | 1.6 | 0 | — | RethinkSans | Header links and primary site navigation. |
| link | 20px | 600 | 1.5 | 0 | — | RethinkSans | Inline actions, article links, and CTA text. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 8, 16, 24, 40, 64, 80 px.
- Section rhythm 40px · element gap 16px · card padding 24px · max content width 1280px.

The page uses a comfortable, wide layout with a measured maximum content width of 1280px. The hero is a two-part composition: left-aligned copy and actions beside a large illustrated product scene. Later sections alternate between broad full-width color bands and contained split layouts; feature education uses two-column arrangements, while news cards form a three-column row. Content is mostly left aligned, with centered emphasis in the dark closing CTA. Spacing follows a generous 8px-based scale, with measured 40px section gaps and 16px element gaps; the page remains spacious even where content density rises.

## Shape & elevation

- Radius: button `50%` · input `9999px` · card `40px` · media `40px` · nav `16px` · link `40px` · xs `16px` · sm `24px` · md `40px` · pill `9999px`
- Shadow `hairline` (media): `rgb(16, 56, 11) 8px 8px 0px 0px`
- Motion: standard transition `0.15s ease-in-out` on interactive elements.

The design is mostly flat, relying on color bands, strong green outlines, and large rounded corners to separate content. Cards use generous measured radii, while pill-shaped buttons and inputs stand out through shape and border. A measured offset green shadow appears on media, not as a general-purpose elevation treatment. Avoid soft gradients and diffuse shadows.

## Imagery

Custom, hand-drawn desert and messaging illustrations frame product mockups, with linework and details in forest green and pale landscape fills. Interface scenes appear as clean dashboard cards, message bubbles, lists, and contact tables rather than glossy 3D renders. Customer proof includes video portraits in a yellow panel; news cards use map imagery. Keep illustrations integrated with the layout and let their colors echo the surrounding section band.

## Components

### Primary CTA

Forest-green filled pill with warm-cream label and a measured 3px green border; the hero also uses a saturated yellow outlined pill CTA.

### Navigation

Light-canvas horizontal header with forest-green links, compact logo, and a pill-style trial action.

### Feature panel

Wide pale yellow-green band with condensed heading, explanatory text, and product illustration or interface mockup in a split layout.

### Testimonial card

Yellow, green-outlined rounded panel with customer video, name, role, and carousel navigation.

### News card

Three-column article card with map thumbnail, green headline, concise summary, and rounded green outline.

### Newsletter form

Sage footer section with email input and sign-up action; use warm-cream field fill, green outline, and pill rounding.

### Measured component styles

- **Primary button** (“Sign up”): background #10380b · text #fefde6 · border 3px solid #10380b · radius 1440px · padding 16px 64px · 800 18px National 2 Condensed
- **Secondary button**: transparent background · text #10380b · border 3px solid #10380b · radius 1440px · padding 0px · 600 16px RethinkSans
- **Link** (“Try for free”): transparent background · text #10380b · radius 0px · padding 0px · 600 16px RethinkSans
- **Input**: background #fefde6 · text #10380b · border 3px solid #10380b · radius 1440px · padding 16px 24px · 600 18px National 2 Condensed
- **Card** (“Americas Fraud Capitals: The States Losi”): transparent background · text #10380b · border 3px solid #10380b · radius 40px · padding 24px · 600 16px RethinkSans
- **Navigation item** (“Product Resources Pricing Log in Try for”): transparent background · text #10380b · radius 0px · padding 0px · 600 16px RethinkSans

## Do

- Use #fefde6 as the dominant canvas.
- Set headlines in a heavy condensed display face.
- Use #10380b for text, outlines, and interface structure.
- Alternate broad color bands with contained feature layouts.
- Give product illustrations room to breathe beside copy.
- Keep CTAs and inputs strongly rounded and clearly outlined.

## Don't

- Do not replace the warm cream canvas with pure white.
- Do not use gradients as a primary visual treatment.
- Do not make body copy compete with oversized display headlines.
- Do not apply soft shadows to every card.
- Do not use generic glossy 3D product renders.
- Do not introduce unmeasured brand colors into the core palette.

## Agent prompt

Build a new Textla-style SaaS page with a warm, playful visual system. Use Warm Canvas (#fefde6) as the main background and Desert Pine (#10380b) for text, outlines, and structure. Bring in Agave Cream (#f2ee98) for feature bands, Signal Sun (#fce519) for high-attention moments, and Sage Mist (#dbe8ac) for softer supporting surfaces. Use a heavy condensed display face for large, stacked headings and a clear sans serif for navigation and body copy. Pair concise left-aligned copy with bespoke hand-drawn messaging or desert illustrations and crisp software mockups. Organize content in spacious split sections and rounded cards, with a three-column editorial row where useful. Favor pill actions, strong outlines, generous whitespace, and minimal shadow; avoid gradients and generic glossy imagery.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Cream canvas; left-aligned headline and actions beside a large illustrated messaging dashboard. | trial CTA, demo link, trust rating | condensed oversized headline, yellow pill action, product illustration |
| 2 | stats | Horizontal metric strip with repeated statistics in bordered columns. | quick credibility scan | cream-yellow cells, green dividers, large condensed figures |
| 3 | testimonials | Multi-column proof area mixing rating, onboarding steps, and a large video testimonial. | testimonial carousel, video playback, trial prompt | yellow video card, green feature card, rounded CTA strip |
| 4 | other | Full-width decorative divider between cream proof content and the feature band. | visual transition | desert landscape illustration, thin ground line |
| 5 | feature-split | Pale yellow-green band with large section heading and two side-by-side product examples. | feature comparison | message mockups, condensed section heading, illustrated scenery |
| 6 | feature-split | Two-column feature block with copy on one side and a contact-table mockup on the other. | feature explanation | contact list interface, CSV upload cue, illustration accents |
| 7 | feature-split | Illustrated delivery report on one side and heading with two explanatory points on the other. | benefit scan | delivery status mockup, small icon illustrations, feature bullets |
| 8 | cta | Contained pledge panel positioned over a pale feature-band background. | support reassurance | rounded outlined panel, checklist, brand character illustration |
| 9 | other | Full-width saturated yellow transition band. | visual transition | bold color change |
| 10 | content-feed | Single-column editorial introduction on the yellow background. | section orientation | large condensed heading, bright green emphasis |
| 11 | content-feed | Three-column article-card row with thumbnails, headlines, and short summaries. | article discovery, read more action | rounded green outlines, map thumbnails, yellow section background |
| 12 | cta | Centered content on a deep green band with illustrated landscape edging. | trial conversion, demo option | cream and yellow type, green checks, yellow pill button |
| 13 | footer | Two-column sage footer with navigation and newsletter form, followed by a narrow utility row. | newsletter signup, site navigation | pill email input, green signup button, social and legal links |

## Source CSS custom properties (selected)

```css
--theme--background: #fefde6;
--text-main--font-family: RethinkSans,sans-serif;
--theme--text: #10380b;
--text-main--font-size: 1rem;
--text-main--line-height: 1.5em;
--text-main--letter-spacing: 0em;
--h1--font-family: "National 2 Condensed",sans-serif;
--h1--font-size: 4rem;
--h2--font-family: "National 2 Condensed",sans-serif;
--h2--font-size: 3.5rem;
--space--small: 1.5rem;
--text-large--font-family: RethinkSans,sans-serif;
--text-large--font-size: 2rem;
--text-large--line-height: 1.3em;
--text-large--letter-spacing: 0em;
--display--font-family: "National 2 Condensed",sans-serif;
--display--font-size: 5.4rem;
--display--letter-spacing: 0em;
--h1--letter-spacing: 0em;
--swatch--medium-secondary: #f2ee98;
--h2--letter-spacing: 0em;
--h3--font-family: "National 2 Condensed",sans-serif;
--h3--font-size: 3rem;
--h3--letter-spacing: -.03em;
--h4--font-family: "National 2 Condensed",sans-serif;
--h4--font-size: 2.5rem;
--h4--letter-spacing: 0em;
--h5--font-family: "National 2 Condensed",sans-serif;
--h5--font-size: 2rem;
--h5--letter-spacing: 0em;
--swatch--brand: #fce519;
--h6--font-family: "National 2 Condensed",sans-serif;
--h6--font-size: 1.5rem;
--h6--letter-spacing: 0em;
--border-width--main: 3px;
--theme--border: #10380b;
--radius--main: 2.5rem;
--radius--small: 1rem;
--space--extra-small: 1rem;
--radius--round: 100vw;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/textla-com